「コードをコピー」ボタンを押すだけでテキストがコピーできる——そんな機能を実現するのがClipboard APIです。JavaScriptから、パソコンやスマホのクリップボード（コピー＆ペーストの一時保存領域）を操作できるAPIで、テキストや画像のコピー・貼り付けをボタン操作で実装できます。この記事では、Clipboard APIの基本的な使い方を、コード例と注意点を交えて解説します。
Clipboard APIとは？
Clipboard APIは、Webページ上のJavaScriptからOSのクリップボードを読み書きできるAPIです。navigator.clipboardを通じて利用します。これを使うと、次のような機能が作れます。
- ボタン一つでコード片やテキストをコピーする
- フォームの入力内容を一括でコピーする
- 自動生成したパスワードをワンクリックでコピーする
- クリップボードの内容をページに貼り付ける
テキストをコピーする（writeText）
もっとも使うのがテキストのコピーです。navigator.clipboard.writeText()にコピーしたい文字列を渡すだけです。処理は非同期のため、async/awaitとtry-catchを組み合わせて書きます。
const btn = document.querySelector("#copyBtn");btn.addEventListener("click", async () => { try { await navigator.clipboard.writeText("コピーしたいテキスト"); alert("コピーしました！"); } catch (err) { alert("コピーに失敗しました"); console.error(err); }});コピーが成功したら「コピーしました！」と表示し、失敗したらエラーを通知する、という基本の形です。
テキストを貼り付ける（readText）
逆に、クリップボードの中身を読み取るにはnavigator.clipboard.readText()を使います。取得したテキストを入力欄などに反映できます。
const pasteBtn = document.querySelector("#pasteBtn");const output = document.querySelector("#output");pasteBtn.addEventListener("click", async () => { try { const text = await navigator.clipboard.readText(); output.value = text; } catch (err) { console.error("読み取りに失敗しました", err); }});画像のコピーもできる
Clipboard APIはテキストだけでなく画像も扱えます。画像をコピーするにはnavigator.clipboard.write()とClipboardItemを使います。たとえばcanvasの内容をtoBlob()で画像データに変換し、クリップボードへ書き込む、といった使い方ができます。読み取りはread()を使います。ただし画像の扱いはテキストよりブラウザ対応にばらつきがあるため、テキストから試すのがおすすめです。
使うときの注意点
- HTTPS（またはlocalhost）が必須：セキュリティ上、Clipboard APIは安全な接続でしか動きません
- ユーザー操作が必要：多くの場合、クリック等の操作をきっかけにしないと動作しません（勝手なコピーを防ぐため）
- 読み取りは権限確認が入ることがある：readTextなどは、ブラウザが許可を求める場合があります
- エラー処理を必ず入れる：失敗時に備え、try-catchでフォローしましょう
よくある質問（FAQ）
Q. コピーボタンが動きません。
A. まずサイトがHTTPSになっているか確認してください。Clipboard APIは安全な接続（HTTPS／localhost）でないと動作しません。
Q. 古い環境でも使えますか？
A. Clipboard APIは主要なモダンブラウザで利用できます。ごく古い環境が対象の場合は、フォールバック（従来の方法）も検討しましょう。
Q. 貼り付け（readText）が許可を求めてきます。
A. クリップボードの読み取りはプライバシーに関わるため、ブラウザが利用者に許可を確認することがあります。仕様上の正常な動作です。
