jQuery｢.clone()｣で指定要素をコピーする方法

2020年7月16日

jQueryの「.clone()」は、指定要素をコピーする事ができるメソッド

今回は、jQueryの「.clone()」について、その使い方をサンプルを交えて解説しよう。

.clone()の機能とは？

.clone()の機能

.clone()は、「指定要素をコピーする」事ができる。

.clone()はコピーするだけなので、コピーしたものを使う時はappentTo()やinsertAfter()などの挿入系のメソッドを使って貼り付けて利用する。

appentTo()やinsertAfter()をおさらいしたい方はこちらの記事どうぞ。

▶ jQuery｢append / appendTo｣で要素内の末尾にHTMLを挿入する

▶ jQuery｢insertAfter｣でHTMLを「指定要素の直後」に移動する

.clone()の構文

.clone()の構文は次のような記述となる

$("セレクタ").clone(論理値);

この記述で$("セレクタ").で指定した要素をコピーする事ができる。論理値とは「true or false」の真偽値を指し、引数にtrueの論理値を入れる事で、元の「イベントハンドラ」を引き継ぐ事ができる。（イベントハンドラとは、イベントによって発生する「命令内容」を指す）

指定しない場合はデフォルト値のfalseが適用され、単純に指定した「jQueryオブジェクト」だけをコピーする事になる。

.clone()の使用例

たとえば次のようなHTMLがあったとする

HTML

<button id="test">コピー</button>
<div></div>

jQuery

$(function(){
  $("#test").on("click",function(){
    $(this).clone(true).appendTo("div");
  });
});

この例は、ボタンをクリックする事で、divの中に押したボタンそのものをコピーして配置する機能。.clone(true)のように引数にtrueと入れているので「コピーしてdiv内に貼り付ける」というイベントハンドラ自体もコピーされたので、複製したボタンをクリックしても、さらに同じようにボタンが複製される事になる。

この例ではコピーしてそのままdiv内に貼り付けたが、次のように一旦変数に格納しても良いだろう。

var copy = $(this).clone(true);

codepenで動きを確認してみよう。

See the Pen clone() by stand4u (@stand4u) on CodePen.

ボタンをクリックすると、複製される事と、複製したボタンをクリックしても、同様に複製される事が確認できるだろう。

.clone()の使い所

.clone()はさまざまな利用用途があるが、「カルーセルの画像のスライダー」の無限ループを作るのにも利用できる。

上の図のような「10個の画像中、３つだけ見えているスライダー」を作るとする。

html的にはシンプルに10個の画像が並んでいるだけで良いのだが、01が見えている状態で「左の矢印」を押した場合や、「右の矢印」を押しつづけて10個目が見えた後に、最初の１つ目の画像をループしたように見せる方法としてclone()を利用する方法がある。

仕組みだけ解説すると、矢印を押すと同時に、11個目に「１つ目の画像コピーして配置」した上で、元々ある１つ目の画像remove()などで削除する事で、11個目に1個目の画像が移動するような仕組みを作る事ができる。

もっとスマートなやり方もあるかもしれないが、こんな感じでclone()を応用してみてはいかがだろうか？

AI時代にHTML・CSS・Jqueryの学習は不要説

AIの進化に指をくわえて見ているだけでいいのか？

ClaudeやCodexなどのAIの進化のスピードに脅威を感じないだろうか？HTMLやCSSやjQueryなどは、ClaudeやCodexに頼めばほんの１〜２分で完成していまいます。とてもスピードでは太刀打ちできないし、人間がゼロベースからHTMLコーディングをする仕事は、いずれ終焉を迎えるでしょう。では、HTMLコーディングを学ぶ必要は無いのか？

「その答えはNOです。」

コーディングを学ぶ、その理由は？

AIでバイブコーディングをしているプロの方なら分かると思うのですが、AIが出すコードにも調整が必要な事が多々あるという事。例えば「ここはflexを使った方が後々楽になる」とか、「ここはまとめて変数で指定してほしい」など、HTMLを理解した上でAIに具体的に指示する方が圧倒的に速い。さらにちょっとした修正なら、いちいちAIに言葉を考えて説明するより「自分で修正した方が楽な場合がよくある」という事。つまりまとめると、AIにコーディングさせるなら、人間もコーディングを理解している方が圧倒的に良いという事である。

AI時代に、体系的に学ぶコーディング手法

普段ClaudeやCodexを使ってバイブコーディングをしている私が、必要と感じるHTMLの学習を、基礎からみっちり理解しつつも、最新のコーディング手法を学べ、初心者の方がついてイケるように、HTMLの基礎理論から、スマホのためのレスポンシブコーディングまでを、新しいCSSの変数やネスト記法やjQueryを使った開閉メニューの実装やFigmaデータからのコーディングの仕方など、ゼロからひと通りコーディングできるまで体系的に学べる動画講座を作りました。

「動画の無料プレビュー」もあるので、一度覗いてみてください▼