解決したいこと

投稿などの削除をボタンを押した時に、いきなり削除されるのではなく、
確認のダイアログを表示してから削除を実行したい。

解決方法

link_to メソッドにdata: {confirm:""} を追加する。

html.erb

<%= link_to post_path(@post.id), method: :delete, data: {confirm: "削除しますか？"} %>

上のようにlink_to にdata: {confirm: "表示したい文章"} を追加すると、

削除ボタンを押した時に、こんな風に確認ダイアログが出てきてくれます。
あっという間にできてしまって感動です。

参考資料
https://railsdoc.com/page/link_to

やりたいこと

スクロールしてもずっと画面の下にくっついてくる例の緑っぽいボタン！

前提

ペライチのレギュラープランが必要です

やること

1.htmlブロック要素を追加

ブロックの挿入 > HTML埋め込み
※[link]は任意のURLに付け替え

<div id="float-div">
    <a href='[link]' target="_blank" >追っかけボタン</a>
</div>

2.JS/STYLEの追加

ページ情報埋め込み > headタグ内の埋め込み

<style>
    #float-div {
        width: 200px;
        height: 60px;
        position: fixed;
        right: 7vw;
        bottom: 3vh;
        background: #56C500;
        opacity: 0.8;
        border-radius: 5px;
    }

    #float-div a {
        display: block;
        position: absolute;
        margin: 0 auto;
        top: 25%;
        text-align: center;
        width: 100%;
        text-decoration: none;
        font-size: 18px;
        font-weight: bold;
        color: #fff;
    }
</style>

HTMLのファイルを作る際のファイル名を「index.html」にしておく。

タグは<>という記号で表示され、「ここが見出しだよ」「ここが記事だよ」という風にタグ内の意味を指定する意味を持つ。
一番重要な見出しは＜h1＞を使う。　(h=head)
段落を表す際には＜p＞を使う。 (p=paragraph)
最初のタグを「開始タグ」、終わりのタグを「閉じタグ」、タグ内のテキストを意味付けすることを「マークアップ」とそれぞれ呼ぶ。
このようにすることでブラウザがそれぞれの意味を理解して、その意味に応じたスタイルを当てがうのである。

画像を配置する際には＜img＞を使う。
＜img＞はマークアップする文章がないので閉じタグがない点に注意。
＜img＞を使う際にはどの画像を表示したらわからないので、imgの後に半角スペースを空けて、src(ソース)="使いたい画像のファイル名"を後ろにつける。

画像の大きさを調整した場合は＜img＞ 内に(srcの後に)width="指定の幅" height="指定の高さ"とする。
なお上記のwidthやheightのような追加情報を「タグの属性」と呼ぶ。
＜img＞にalt属性(追加情報)を付けておくと、画像がうまく表示されなかった時の代わりのテキストとして表示されるので設定しておく。

自律カスタム要素の使い方

自律カスタム要素とは、<app-custom-element>のようなこのままページにおける自作HTML要素のことです。組み込み要素から継承するものと違って、前者は継承元の動きを受け継いだうえで、ページには<p is="app-custom-element">のようにis属性の指定が必要であるに対して、自律カスタム要素は完全に0から作り上げたものです。中身の構築はshadow domをつけるのが一般的な手法です。

// 基礎の組み込みhtml要素からではなく、大本となるHTMLElementから継承する
class PopUpInfo extends HTMLElement {
  constructor() {
    // Always call super first in constructor
    super();

    // 自律カスタム要素にshadow domをつけるのが一般的な手法
    const shadow = this.attachShadow({ mode: 'open' });

    const info = document.createElement('span');
    info.setAttribute('class', 'info');

    // 自身に渡してきた属性をアクセスすることが可能
    const text = this.getAttribute('data-text');
    info.textContent = text;

    // Create some CSS to apply to the shadow dom
    const style = document.createElement('style');

    style.textContent = `
      .info {
        font-size: 0.8rem;
      }
    `;

    // Attach the created elements to the shadow dom
    shadow.appendChild(style);
    shadow.appendChild(info);
  }
}

// カスタム要素を登録する
customElements.define('pop-up-info', PopUpInfo);

ページでの使い方は以下のようです。

<pop-up-info data-text="Your card"></pop-up-info>

dev toolsで見たイメージは大体こんな感じです：

参考記事

JavaScriptには関数の定義方法がいくつかありますね。

関数宣言

kansuSengen.js

function echo() {
  console.log("hello");
}

echo(); // helloと出力される

一番ベターなやつです。これが書ければもう何も困ることはないかなと言う感じです。

関数式

kansuSiki.js

const echo = function () {
  console.log("hello");
};

echo(); // helloと出力される

関数宣言と同じ挙動をしますが、ちょっと長い記述になっています。

アロー関数

kansuSiki.js

const echo = () => {
  alert("hello");
};

echo(); // helloと出力される

簡単に言うと関数式の略版ですね！
今風でとてもかっこいいです。積極的にこれを使いましょう。
違いもありますが、当記事では(関数式 = アロー関数)としておきます。

関数宣言と関数式はどっちを使うのが良いのか？

僕的には、どれでも良いと思います。プロジェクトのコーディング規約に従えば良い。
関数定義法の細かい仕様を考えだすとめんどくさそうなので、少しだけ説明します。

関数宣言には巻き上げがある

kansuSengen.js

echo(); // helloと出力される

function echo() { // 呼び出しより後の記述だが実行できる。
  console.log("hello");
}

このコードは正常に実行されます。呼び出しより後に宣言されているのに。
これが巻き上げというものです。
プログラムは基本上から下に実行されますが、宣言は実行時に全て上に移動します。
※変数宣言も同様です。(変数の場合、宣言のみで初期化はされない)

関数式は巻き上げがない

kansuSiki.js

echo(); // 呼び出しより後に定義されている為エラーとなり、出力出来ない。

const echo = function () {
  console.log("hello");
};

これは実行出来ません。なぜなら巻き上げられるのは宣言のみだからです。

const echo

のみが巻き上げられ、echo( )時点では処理の代入がされていないのです。
じゃあ記述場所を問わない関数宣言の方が良さそう！と思いますが、大体はこんな処理が一般的な気がします。

kansuSiki.js

window.addEventListener('load', function () {
  echo(); // helloと出力される。
});

const echo = function () { 
  console.log("hello");
};

これは画面表示されたタイミングでecho( )を呼んでいる単純なプログラムです。
そもそもスコープが違うので実行出来ます。やっぱり関数宣言、関数式(アロー関数)どちらでも良さそうですね。スコープについても少しだけ触れます。

グローバルスコープとローカルスコープ

変数の参照範囲はどのプログラム言語でもあります。

グローバルスコープ

• トップレベル（関数の外）に記述されている変数や関数はグローバルスコープとなる。
• ここに宣言されている変数はプログラム中のどこからでも参照可能。（ただし、同じグローバルスコープ内では記述順によっては先ほどの関数式の例のようにエラーとなる）
• varで宣言した場合、グローバル変数となる。

補足

グローバル変数とは

プログラム中のどこからでも参照する事が出来る変数の事です。
例えば、HTML要素を取得するときにdocument.get〜みたいに書くと思います。
このdocumentもグローバル変数の1つなのです。ちなみに、letやconstで定義した場合グローバルスコープにはなりますが、グローバル変数にはなりません。

ローカルスコープ

ローカルスコープには関数スコープとブロックスコープというものがあります。

関数スコープ

• 関数内に宣言された変数は、その関数内でのみ参照可能。

ブロックスコープ

• ブロック内に宣言された変数は、そのブロック内のみ参照可能
  ※ブロックスコープが適用されるのはlet、constで宣言されたもの

結局どれ使うか

やっぱり自分の書きやすい方法で良いと思います。
注意点があるとすれば、関数宣言は上書きされます。

kansuSengen.js

window.addEventListener('load', function () {
  echo(); // おはようと出力される。
});

function echo() {
  console.log("hello");
}

function echo() { // こっちが勝つ！！
  console.log("おはよう");
}

javaみたいにエラーなんて出してくれません。
当たり前ですが、関数式をvarで定義した場合も上書きされます。

kansuSiki.js

window.addEventListener('load', function () {
  echo(); // おはようと出力される。
});

var echo = function () {
  console.log("hello");
};

var echo = function () { // こっちが勝つ！！
  console.log("おはよう");
};

varは再代入、再定義が可能なので関数式使うのであればconstが無難かと思います。
つまり同じ関数名をつけなければどちらでも良いですね。
結論、好きな方、プロジェクトに添った方を使用しましょう。

シャドーDOMの使い方

shadow domとはカプセル化したdom treeを画面上のエレメントに動的にアタッチする手法のことです。このサブdom treeには外部cssの影響を受けず、独自で指定されたcssのみが適用されます。どういう場面で使うべきというと、外部のcss（例えばプロジェクト全体に影響を及ぼすstyle.css）の影響を受けたくない場合、html要素をshadow domにすれば実現可能です。

・基本的な使い方
let shadow = elementRef.attachShadow({mode: 'open'});
shadow domをつける要素に対してattachShadowメソッドを呼び出して、この要素にshadow rootをつけた同時に、それの参照をもらい、この要素自身もshadow hostとなります。
オプションmodeをopenにすると、elementRef.shadowRootで外部のJavascriptからshadow rootへのアクセスを可能になります。falseに設定すると、.shadowRoot呼び出してもnullしか返ってこなくなります。
attachShadow呼び出し前: element
attachShadow呼び出し後: element(shadow host) →　shadow root

shadow.appendChild(document.createElement('b'));
shadow.appendChild(document.createElement('style'));
shadow dom treeはすでに作成済みです、中に要素をどんどん追加しましょう。追加されたstyley要素はshadow dom tree内にあるものにしか適用されないです。
appendChild呼び出し前：element(shadow host) →　shadow root
appendChild呼び出し後：element(shadow host) →　shadow root　→　b

作成されたdom要素をdev toolsでスクショをとってみた：

参考記事：
https://developer.mozilla.org/ja/docs/Web/Web_Components/Using_shadow_DOM

Reactを書いていたら以下のようなWarningエラーが
Consoleに出たので備忘録として残しておく

今回出現したエラー文

Consoleに、以下のようなエラー文が出力された

Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>

エラー文をDeepLで翻訳すると・・・

<div>は<p>の子孫として表示できません

ん？どういうこと？

エラーの原因

先ほどのエラー文は
「HTMLの入れ子のルール」に関するエラー

今回は、pタグの中にdivタグを
入れ子にしているからWarningエラーが起きています

pタグの中にdivタグを
入れ子にすることはできないからです

解決方法

Reactの場合は関数コンポーネントの
returnでJSXを返している箇所のコードを見て

以下のような
HTMLの構成になっていないか確認する

const Sample = () => {
  return (
   <p>
     <div>pタグにdivは入れられない</div>
   </p>
 )
}

もしこのような構成になっているコードを確認したら
以下のようにHTMLの構成を変更してあげればOKです！

const Sample = () => {
  return (
   <div>
     <p>divタグにpタグは入れられる</p>
   </div>
 )
}

これで解決できるはずです！

ところで、なぜpタグにdivタグは入れられないのか？

この質問に対する回答としては

HTML5から「ブロック要素」と「インライン要素」
という概念が廃止されて

入れ子のルールが「コンテンツモデル」
という概念で決まるようになったからです

コンテンツモデルとは「その要素にはどのカテゴリーのコンテンツを入れていいか」を決めているルールのことで、タグの入れ子のルールは全てこの「コンテンツモデル」で決まっています

だからpタグの中にdivタグを入れると「あなたの書いたコードはコンテンツモデル的におかしいよ。なので警告出しとくから直してね」というWarningエラーが出たんですね。Reactは優しい！

この話題に関する詳しい説明は
この記事が非常にわかりやすいです。

暇な時に軽く目を通しておくと
HTMLをより深く理解できるのでおすすめです！