jQuery| 1行だけ。外部ファイルは読み込まず、ページ内で共通化パーツを作成する方法

鬼勉強でWEBエンジニアに未経験転職した、かわうそです!

今日のテーマ:『jQuery| 1行でcloneするだけ。外部ファイルは読み込まず、ページ内で共通化パーツを作成する方法

この記事を読めば、『外部ファイルは読み込まず、ページ内で共通化パーツを作成する方法 』が、たったjQuery1行で可能に!

結論:1行。jQueryのcloneメソッドでコピー、appendToメソッドで動的にDOMを作成するだけ。JavaScriptだけでも簡単に実装可能です。

皆さんなら、ソースを分け、ヘッダーやフッターのように外部ファイルにして読み込めばいいじゃん? と思われるでしょう!

なぜそうしなかったのか、こういう背景がありました。

  • パーツ化したいのは、そのページでしか使用しない特殊なコンバージョンボタン
  • ソースを切り分けるほどの記述量はないが、頻繁に使用するのでページ内部でパーツ化したい

こんな小さなパーツのために、管理ソースをこれ以上増やしてたまるかー!という気持ちでした。サイト規模が大きい。

心の声:テキストエディターで作業するソースが多いと、めんどい

というわけで、jQueryのcloneメソッドで簡単に実現できたので解説します。
ついでに、脱jQueryの、JavaScriptバージョンも合わせて解説します!

※脱jQuryのためにJavaScriptを学ぶには、こちらの3万部越えの書籍が良書。書籍選びに迷ってる人は、間違いなし。 レベルは理解できれば中級、全くの初級者にはかなり難しい。入浴中まで読みまくりボロボロのかわうそのバイブル 。

jQueryのcloneメソッドで 共通化パーツを作成

結論、jQueryのこの一行でOK!

かんたんなサンプルコードを用意しておきます

HTML

jQuery(JavaScript)

cloneをコピーし、clone_setにコピーを生成します

実装

clone_setの分だけ、コピーが可能です。

クローンします

ページ内で繰り返し使用したいパーツは、クローンして、動的に生成すればok。このぐらいの記述なら、ソースを切り分け、管理ファイルが増えるよりは楽です

JavaScriptがページ内を全捜査するので、多用しすぎることはおすすめしません

cloneメソッドは引数によって少し性質が変わるので、説明しておくよ

cloneメソッド:第一引数

第一引数は論理値です(true,false)

trueならイベントもコピー、falseならイベントはコピーされません引数に何も入れなければ、falseと同じ挙動をします。

こちらも例題を用意します

clone(true):イベントもコピー

clone(true)の場合は、クローン後のボタンをクリックしても、クローンが生成されます。つまり、クリックイベント設定までコピーされます

クリックしてクローン

clone(false)または clone() :イベントはコピーされない

clone(false)または clone() の場合は、クローン後のボタンをクリックしても、クローンが生成されません。

クリックしてクローン

脱 jQuery:JavaScriptではcloneNodeメソッドで実現可能

JavaScriptではcloneNodeメソッドで実現可能です。

ただし、jQueryのcloneメソッドのように使おうと思うと、すこし調整が必要で癖があります

そのあたりも詳しく解説しておきますね。

JavaScriptで書けるとかっこいいよね

jQueryは分かるけど、JavaScriptは分からん!って人はこのへんの記事がおすすめです

完成品

以下が完成品

js_clone_setの数だけ、クローンされます。

JSでクローン

JavaScript cloneNodeメソッドの解説

1行ずつ順に解説していきます

1行目

let targetClone = document.querySelector('.js_clone');

. js_clone を取得し、クローンする要素を変数に格納しました。

2行目

let cloneSet = document.querySelectorAll('.js_clone_set');

. js_clone_set を取得し、クローンを生成する要素を変数に格納しました。

ポイントは querySelectorAll メソッドの使用です。

.js_clone_setは複数に設置されることが予測されます。
querySelectorメソッドはヒットした最初の要素だけしか返しません。 querySelectorAll メソッド を使ってすべての要素リストを取得しましょう。

console.logcloneSetを確認すると

要素数は2個、NodeList形式[配列] になっていることも分かります。

3行目

空変数:cloneCopy を作成しました

4行目以降

for(i = 0; i < cloneSet.length; i++){
cloneCopy = targetClone.cloneNode(true);
cloneSet[i].appendChild(cloneCopy );
}

ここからがポイントです。for文の詳しい説明については割愛します

for文では、 cloneSet.length の数だけ繰り返し処理が起きるようにします。 cloneSet.length は、2行目で変数に格納した、 .js_clone_set の数を吐き出します。

なんで繰り返し処理が必要になる理由は以下です。

  • クローンする数だけ、cloneNodeメソッドで生成する必要がある
  • クローン先を格納した変数のcloneSetが、配列形式(ノードのリスト)になっている

これだけだと分からないと思うので、さらに深く解説します!

5行目:for文内、cloneNodeメソッドについて

cloneCopy = targetClone.cloneNode(true);

すこしややこしいですが、 1行目でクローン元の要素を格納した変数 targetCloneをcloneNodeメソッドでコピーし、変数cloneCopyに再格納しています。

確認で、cloneNodeメソッドの結果を、console.log()で調べてみましょう。

どちらも、<p class="get_sample">クローンされます</p>になり、コピーされていると分かります。

ちなみに、for文内でcloneしているのは、生成分のclone数を確保するためです。ピストルの弾のように、生成するとクローンはなくなりますので、毎回クローンが大切です。(後で説明する、appendChildの仕業です)

6行目

cloneSet[i].appendChild(cloneCopy );

生成先に 、appendChildメソッドを使用し、コピーしたクローンを作ってやりましょう。

↓めっちゃ大事です!!↓

appendChildメソッドを使用すると、 cloneCopy は削除されます。ピストルの弾の消費は、 appendChildメソッドの実行なのです。ぶっちゃけクローンしなくても良いや、と思ったりしましたが、クローンしないとクローン元が無くなってしまうので、エラーが起こります。

ポイントは、 cloneSet[i]です。

生成先は同じクラス名になっており、配列として格納されていることを確認しましたね。

それぞれが異なる位置情報、DOMのツリー構造の中で、どこに位置しているのか情報を持っています。

例えば、コンソール画面で

cloneSet[0].previousElementSibling

と入力してみてください。 最初のcloneSetクラスの、1つ前の要素が何か調べてくれます。当然、以下が返ります。

<p class="js_clone">JSでクローン</p>

今度は

cloneSet[1].previousElementSibling

と2つ目のcloneSetの直前要素を調べてみましょう。

<p class="js_clone_set"></p>

今度も、直前の要素が確認できましたね。

このように、1つ1つの要素は、DOM構造全体の中のどこにあるのか、情報を持っているのです。

だからこそ、 cloneSet[i] を使用し、それぞれに対してappendChildメソッドで、クローン生成を指示してあげることが大切です。

cloneNodeメソッドの引数

cloneNodeメソッドの引数は、jQueryと異なるので注意。

  • true:子要素まで全てを複製(深い複製)
  • false:子要素は複製しない(浅い複製)

また、全ての属性はコピーされますが、イベントリスナーなどで設定したイベントはコピーされません。

結論:jQueryが楽すぎる

望んだ挙動をするのは、jQueryですね!

jQueryなら1行で終わってしまうので、JavaScriptで書くと時間はかかりそうです。

ただ、JavaScriptの深い理解をし、プログラミング技術力向上のためには、jQueryを使用せずに書いてみるのが良いと思います!

※冒頭でも書いた通り、 JavaScriptを学ぶにはこちらの本が名著です。初心者には少し難しいかも。

フォローする