一、従来のクリップボード操作方法：document.execCommandの利用
まずは基本的な実装例から見ていきましょう：
//コピー対象のテキストを引数として受け取る関数
function clipboardCopy(copyText) {
// input要素を作成
const copyInput = document.createElement('input');
// コピーするテキストを設定
copyInput.value = copyText;
// ページに要素を追加
document.body.appendChild(copyInput);
// テキストを選択状態に
copyInput.select();
// クリップボードにコピーを実行
const result = document.execCommand('copy');
// 要素をページから削除
copyInput.remove();
return result; // コピー成功かどうかを返す
}
// 使用例
const textToCopy = "コピーしたいテキスト";
if (clipboardCopy(textToCopy)) {
console.log("コピー成功しました");
} else {
console.log("コピーに失敗しました");
}
注意点：
- 複数行のテキストをコピーする場合は、textarea要素を使用すると改行が保持されます
- テキストの設定方法によってはtextContentとinnerTextを使い分ける必要があります
textContentとinnerTextの違い
- textContentはCSSで非表示(display:none)に設定された要素のテキストも取得します
- innerTextは非表示の要素のテキストを取得しません
- textContentはHTMLタグを解釈せず、テキストのみを返します
- innerTextはレンダリング結果に基づいたテキストを返します
- innerTextはIEブラウザとの互換性が良いです
- textContentは標準仕様ですが、IE8以上でのみサポートされます
二、非同期処理におけるクリップボード操作の問題
非同期処理（AJAXなど）で取得したデータをクリップボードにコピーする際に問題が発生することがあります。特にQQブラウザでは、正常にコピーできないケースが報告されています。
これは、document.execCommand('copy')がセキュリティ上の理由により、ユーザーによる直接操作後にのみ実行可能なためです。ブラウザはユーザー操作を検知すると、そのコンテキストでクリップボード操作を許可します。
しかし、非同期処理では新しいコンテキストが作成されるため、ユーザー操作のコンテキストが継承されず、クリップボード操作が失敗することがあります。特に、以下のような環境で問題が発生しやすいです：
- QQブラウザ
- モバイルブラウザの一部
- 厳格なセキュリティポリシーが設定された環境
この問題を回避するには、非同期処理で取得したデータを一度変数に格納し、ユーザー操作（ボタンクリックなど）のイベントハンドラ内でクリップボード操作を実行する必要があります。
三、非同期処理にも対応する新しい方法：Navigator.clipboard API
モダンなブラウザでは、Navigator.clipboard APIがサポートされており、より簡単かつ確実なクリップボード操作が可能です。このAPIは非同期処理にも対応しています。
// クリップボードにテキストを書き込む
async function copyToClipboard(text) {
try {
await navigator.clipboard.writeText(text);
console.log('クリップボードにコピーしました');
return true;
} catch (err) {
console.error('クリップボードへのコピーに失敗しました:', err);
return false;
}
}
// Promiseを使用した例
navigator.clipboard.writeText("コピーするテキスト")
.then(() => {
console.log("正常にコピーしました");
})
.catch(err => {
console.error("コピーに失敗しました:", err);
});
MDNドキュメントによると、document.execCommandは非推奨となっているため、可能であれば新しいNavigator.clipboard APIを使用することが推奨されます。
この新しいAPIの利点：
- 非同期処理でも問題なく動作する
- よりモダンな書き方が可能
- 将来的なブラウザサポートが期待できる
- テキストだけでなく、画像などの他のデータ形式にも対応可能（ブラウザサポートによる）