【JS】クリップボードにコピーする機能をつくる

ボタンをクリックするとクリップボードに一発でテキストをコピーできる機能って

よく見かけますよね。今回はあれの作り方をわかりやすく解説します。

【JS】クリップボードにコピーする機能をつくる

まずは完成品を見てもらうのがいいでしょう。

「コピー」というボタンを押してもらうと、

「クリップボードにコピーしました！」というアラートが表示されます。

そのままメモ帳などにctrl + V して張り付けてもらうと、

「これはコピーするテキストです。」というテキストがペーストできると思います。

コードの解説

ここからは、クリップボードへコピーする機能の作り方をコードベース付きで解説していきます。

まずはHTMLの紹介です。

<div id="code-container">
  <div id="code-content">
    これはコピーするテキストです。
  </div>
  <button id="copy-btn">コピー</button>
</div>

コピーされるテキストと、コピーするボタンがあるだけです。

CSSは割愛します。（体裁整えるだけなので）

そして今回の肝となるJSがこちらです↓

document.getElementById("copy-btn").addEventListener("click", async () => {
  const content = document.getElementById("code-content").innerText;
  try {
    await navigator.clipboard.writeText(content);
    alert("クリップボードにコピーしました!");
  } catch (err) {
    console.error("テキストのコピーに失敗しました", err);
  }
});

このプログラムの具体的な手順は以下の通りです。

1. ボタンがclickされたら、#code-contentの中身であるテキストをcontentとして取得

2. 取得したテキストをクリップボードに書き込む

クリップボードへの書き込みは

navigator.clipboard.writeText(content);

の部分で処理しています。

いきなりようわからんメソッドが出てたな、

ということでまずはnavigator.clipboardを簡単に説明しましょう。

navigator.clipboardとは？

navigator.clipboardはWebブラウザが提供するWeb APIの一部で、クリップボードの読み書きを行うことができます。

今回はそれを使って、クリップボードに”書き込む”ので、

writeText()を使用し、contentとして渡されたテキストをクリップボードに書き込んでいるわけです。

navigator.clipboard.writeText(content);

document.execCommand(‘copy’)は非推奨となった

ちなみに古い方法で、

document.execCommand('copy')

を使用する方法がありますが、こちらは既に非推奨とされています。

事前の通知なく削除される可能性のあるメソッドなので、完全に使わない方がいいでしょう。

参考：document.execCommand

https://developer.mozilla.org/ja/docs/Web/API/Document/execCommand

【初心者向け】JavaScriptオススメ書籍

JavaScriptをこれから勉強する方、基本から実装までを学び直したい方にはこちらの書籍がオススメです。

こちらはWebクリエイターボックスのManaさんが書かれた書籍で、ポイントは以下のような感じです。

・JavaScriptの基本から実装まで必要なことがすべて学べる
・図解が充実していて読みやすい
・章立てや構成がよくできていてスムーズに読み進められる
・アニメーションやイベントの知識と技術がつまっている
・サンプルプログラムがWeb上からダウンロードできる（自分でコードを用意しなくて良い）

タイトルどおり、一冊でまるっと学べる書籍になっているので、初学者必携の一冊といってもいいでしょう。