もくじ
Webサイトやアプリで「コピー」ボタンを設置し、ユーザーが簡単にテキストをクリップボードへコピーできる機能はとても便利です。
本記事では、JavaScriptのクリップボードAPI（navigator.clipboard.writeText()）を使った最新の実装方法と、古いブラウザ向けの代替手段（execCommand('copy')）について、サンプルコード付きでわかりやすく解説します。
また、コピー完了時の吹き出し表示や、APIの対応状況の確認方法も紹介していますので、ぜひ参考にしてください。
クリップボード APIでクリップボードにテキストをコピーする
【サンプル】クリップボード APIでクリップボードにテキストをコピー
「コピー」ボタンをクリックするとテキストをコピーできます。
クリップボードにコピーできているか確認したい場合は、下記に貼り付けてください。
【実装コード】クリップボード APIでクリップボードにテキストをコピー
Copyをクリックするとコピーできます。
<div class="copy-box"> <div id="js-copy-txt" class="copy-txt">このテキストをクリップボードにコピー</div> <button id="js-copy-btn" class="copy-btn">コピー</button></div>.copy-box { display: flex; column-gap: 10px;}.copy-btn { padding: 0.2em 0.8em; color: #fff; background: #555; border: none; border-radius: 3px; cursor: pointer;}let copyBtn = document.getElementById('js-copy-btn');copyBtn.addEventListener('click', click_copy_btn, false);function click_copy_btn() { //コピーするテキストを取得 let getTxt = document.getElementById('js-copy-txt').innerText; //取得したテキストをクリップボードに書き込み navigator.clipboard.writeText(getTxt);}navigator.clipboard.writeText()は、基本的にほとんどのモダンブラウザで対応してますが、比較的最近実装されたAPIのため古いブラウザで対応してない場合があります。
navigator.clipboard.writeText()のブラウザの互換性についてはこちらからご確認ください。
ブラウザがクリップボード APIに対応していない場合の対応策
navigator.clipboard.writeText()が効かない場合、現在非推奨になっているexecCommand('copy')を使用することで、対応可能な場合があります。
execCommand('copy')はブラウザが提供する編集可能な要素（<textarea></textarea>など）のテキストをクリップボードにコピーすることができます。
非推奨になった理由
セキュリティ上の懸念
execCommand('copy')はJavaScriptから直接クリップボードにアクセスすることができます。そのため、悪意あるスクリプトがユーザーのクリップボードの内容を読み取ることができるというセキュリティ上の脆弱性があります。ブラウザの互換問題
execCommand('copy')は全てのブラウザで互換性があるわけではなく、一部ブラウザで使用できない場合があります。非標準
execCommand()自体が非標準のAPIであり、W3Cの公式な仕様として定義されていません。ブラウザ間での挙動の統一性がなく、互換性や安定性の問題が生じる可能性があります。代替手段の登場
新しいクリップボードAPInavigator.clipboard.writeText()が導入され、クリップボードへのアクセスを制御し、安全性が向上しています。
【サンプル】execCommand('copy')でクリップボードにテキストをコピー
「コピー」ボタンをクリックするとテキストをコピーできます。
クリップボードにコピーできているか確認したい場合は、下記に貼り付けてください。
【実装コード】execCommand('copy')でクリップボードにテキストをコピー
execCommand('copy')は、ブラウザが提供する編集可能な要素（<textarea></textarea>など）にテキストが記載されている必要があります。
そのため、今回の実装コードではJavaScriptで一時的に<textarea>タグを作成して、クリップボードにテキストをコピーします。
Copyをクリックするとコピーできます。
<div class="copy-box"> <div id="js-copy-txt2" class="copy-txt">このテキストをクリップボードにコピー</div> <button id="js-copy-btn2" class="copy-btn">コピー</button></div>.copy-box { display: flex; column-gap: 10px;}.copy-btn { padding: 0.2em 0.8em; color: #fff; background: #555; border: none; border-radius: 3px; cursor: pointer;}let copyBtn2 = document.getElementById('js-copy-btn2');copyBtn2.addEventListener('click', click_copy_btn2, false);function click_copy_btn2() { //コピーするテキストを取得 let getTxt = document.getElementById('js-copy-txt2').innerText; //textareaを一時的に作成してテキストを設定 let textarea = document.createElement('textarea'); textarea.value = getTxt; //textareaをDOMに追加 document.body.appendChild(textarea); //textareaを選択してクリップボードにコピー textarea.select(); document.execCommand('copy'); //textareaを削除 document.body.removeChild(textarea);}コピーボタンの上に「コピー完了」の吹き出しを表示する方法
【サンプル】コピーボタンの上に「コピー完了」の吹き出しを表示
「コピー」ボタンをクリックするとコピーボタンの上に「コピー完了」の吹き出しが表示されます。
【実装コード】コピーボタンの上に「コピー完了」の吹き出しを表示
Copyをクリックするとコピーできます。
<div class="copy-box"> <div id="js-copy-txt3" class="copy-txt">このテキストをクリップボードにコピー</div> <button id="js-copy-btn3" class="copy-btn">コピー</button></div>.copy-box { display: flex; column-gap: 10px;}.copy-btn { position: relative; padding: 0.3em 0.8em; color: #fff; background: #555; border: none; border-radius: 3px; cursor: pointer;}.copy-btn::before { position: absolute; z-index: 3; top: calc(-100% - 6px); right: 0; width: 7em; padding: 0.3em 0; text-align: center; font-size: 13px; background: #555; border-radius: 5px; opacity: 0; pointer-events: none; content: "コピー完了";}.copy-btn::after { position: absolute; z-index: 2; top: calc(-100% + 17px); right: 8px; width: 8px; height: 8px; background: #555; opacity: 0; transform: rotate(45deg); pointer-events: none; content: "";}.copy-btn.-add-fukidashi::before,.copy-btn.-add-fukidashi::after { opacity: 1;}let copyBtn3 = document.getElementById('js-copy-btn3');copyBtn3.addEventListener('click', click_copy_btn3, false);let fukidashiTimer;function click_copy_btn3() { //コピーするテキストを取得 let getTxt = document.getElementById('js-copy-txt3').innerText; //取得したテキストをクリップボードに書き込み navigator.clipboard.writeText(getTxt); //js-copy-btn3に吹き出しを表示するためのclassを追加 if (copyBtn3.classList.contains('-add-fukidashi')) { copyBtn3.classList.remove('-add-fukidashi'); copyBtn3.classList.add('-add-fukidashi'); //前回のタイマーをクリア clearTimeout(fukidashiTimer); fukidashiTimer = setTimeout(function () { copyBtn3.classList.remove('-add-fukidashi'); }, 2000); } else { copyBtn3.classList.add('-add-fukidashi'); fukidashiTimer = setTimeout(function () { copyBtn3.classList.remove('-add-fukidashi'); }, 2000); }}クリップボード APIが使用できるかJavaScriptで確認する方法
【サンプル】クリップボード APIが使用できるかJavaScriptで確認
「コピー」ボタンをクリックするとconsole.logの内容が検証ツールのコンソールに表示されます。
【実装コード】クリップボード APIが使用できるかJavaScriptで確認
Copyをクリックするとコピーできます。
<div class="copy-box"> <div id="js-copy-txt4" class="copy-txt">このテキストをクリップボードにコピー</div> <button id="js-copy-btn4" class="copy-btn">コピー</button></div>.copy-box { display: flex; column-gap: 10px;}.copy-btn { padding: 0.2em 0.8em; color: #fff; background: #555; border: none; border-radius: 3px; cursor: pointer;}let copyBtn4 = document.getElementById('js-copy-btn4');copyBtn4.addEventListener('click', click_copy_btn4, false);function click_copy_btn4() { if (navigator.clipboard) { console.log('クリップボード APIが利用可能です。'); } else { console.log('クリップボード APIは利用できません。'); }}まとめ
JavaScriptを使えば、クリップボードAPI（navigator.clipboard.writeText()）を利用して簡単にテキストをクリップボードへコピーする機能を実装できます。
また、古いブラウザへの対応としてexecCommand('copy')を使う方法も知っておくと安心です。
ユーザー体験を向上させるために、コピー完了の吹き出し表示やAPIの対応状況チェックもあわせて活用しましょう。
コピー機能はさまざまなWebサービスや業務システムでも役立つので、ぜひ本記事のサンプルを参考に実装してみてください。