Clipboard API（コピー） — navigator.clipboard.writeText('text')
Clipboard API を使うと、JavaScriptから「クリップボードに文字列をコピー」できます。
昔は document.execCommand('copy') を使っていましたが、今は navigator.clipboard.writeText が推奨です。ボタンを押すだけでテキストをコピーできるので、初心者でもすぐに試せます。
基本のコード例
<input id="txt" value="コピーしたい文字列">
<button id="copy">コピー</button>
<div id="msg"></div>
<script>
const btn = document.getElementById("copy");
const txt = document.getElementById("txt");
const msg = document.getElementById("msg");
btn.addEventListener("click", async () => {
try {
await navigator.clipboard.writeText(txt.value);
msg.textContent = "コピーしました！";
} catch (err) {
msg.textContent = "コピーに失敗しました: " + err;
}
});
</script>
navigator.clipboard.writeText(text)
指定した文字列をクリップボードにコピーする。- 戻り値: Promise（非同期）。成功すれば解決、失敗すれば例外。
- 注意: HTTPS環境やユーザー操作（クリックなど）に紐付けないと動作しないブラウザが多い。
よく使うテンプレート集
固定文字列をコピー
navigator.clipboard.writeText("Hello World!");
選択したテキストをコピー
const selected = window.getSelection().toString();
navigator.clipboard.writeText(selected);
コピー完了後に通知
navigator.clipboard.writeText("コピー内容").then(() => {
alert("コピーしました！");
});
例題: 招待リンクをコピーするボタン
<button id="invite">招待リンクをコピー</button>
<script>
const inviteBtn = document.getElementById("invite");
const link = "https://example.com/invite/123";
inviteBtn.addEventListener("click", async () => {
try {
await navigator.clipboard.writeText(link);
alert("招待リンクをコピーしました！");
} catch {
alert("コピーに失敗しました");
}
});
</script>
- 効果: ボタンを押すと招待リンクがコピーされ、友達に貼り付けられる。
実務でのコツ
- HTTPS必須: セキュリティのため、
http://では動かないブラウザが多い。 - ユーザー操作に紐付け: クリックやタップイベント内で呼び出す。自動コピーは制限される。
- 非同期処理:
awaitや.then()を使って成功/失敗を処理する。 - 失敗時のフォールバック: 古いブラウザでは
execCommand('copy')を使うこともある。 - 貼り付けも可能:
navigator.clipboard.readText()でクリップボードから読み取れる。
ありがちなハマりポイントと対策
- コピーできない:
- 原因: HTTPSでない、またはユーザー操作に紐付けていない。
- 対策: ボタンイベント内で呼び出す。
- 古いブラウザで動かない:
- 対策:
execCommand('copy')をフォールバックとして用意。
- 対策:
- 非同期処理を忘れる:
- 対策:
awaitや.then()を必ず使う。
- 対策:
練習問題（メモ帳コピー）
<textarea id="memo">ここに書いた内容をコピー</textarea>
<button id="copyMemo">コピー</button>
<script>
document.getElementById("copyMemo").addEventListener("click", async () => {
const text = document.getElementById("memo").value;
try {
await navigator.clipboard.writeText(text);
alert("メモをコピーしました！");
} catch {
alert("コピーに失敗しました");
}
});
</script>
- 効果: テキストエリアに書いた内容をワンクリックでコピーできる。
直感的な指針
navigator.clipboard.writeText= 「文字列をクリップボードにコピーする」魔法の関数。- 必ずユーザー操作に紐付け、HTTPS環境で使う。
- コピー完了後にUIで知らせると親切。
- 貼り付けは
readText()、コピーはwriteText()。両方覚えると便利。