JavaScriptでクリップボードに文字列をコピーするには、`clipboard.writeText()`メソッドを使用します。このメソッドは非常にシンプルで使いやすく、モダンブラウザで広くサポートされています。

clipboard.writeText()の基本的な使い方

// クリップボードに文字列をコピー
navigator.clipboard.writeText('コピーしたいテキスト')
  .then(() => {
    console.log('テキストがコピーされました');
  })
  .catch((err) => {
    console.error('コピーに失敗しました', err);
  });

実践的な使用例

ボタンクリックでテキストをコピーする例を見てみましょう：

<button id="copyButton">テキストをコピー</button>

<script>
document.getElementById('copyButton').addEventListener('click', async () => {
  try {
    await navigator.clipboard.writeText('コピーされるテキスト');
    alert('コピーが成功しました！');
  } catch (err) {
    alert('コピーに失敗しました');
  }
});
</script>

注意点とセキュリティ

1. HTTPSまたはローカルホスト環境での実行が必要

2. ユーザーのアクセス許可が必要な場合がある

3. バックグラウンドでの実行は制限される

ブラウザ互換性対応

古いブラウザをサポートする必要がある場合は、以下のようなフォールバックを実装できます：

function copyToClipboard(text) {
  if (navigator.clipboard && window.isSecureContext) {
    // モダンブラウザの場合
    return navigator.clipboard.writeText(text);
  } else {
    // 従来の方法
    let textArea = document.createElement('textarea');
    textArea.value = text;
    textArea.style.position = 'fixed';
    textArea.style.left = '-999999px';
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();
    try {
      document.execCommand('copy');
      textArea.remove();
      return Promise.resolve();
    } catch (error) {
      textArea.remove();
      return Promise.reject(error);
    }
  }
}

エラー処理のベストプラクティス

async function handleCopy(text) {
  try {
    // ユーザーにフィードバックを提供
    const result = await navigator.clipboard.writeText(text);
    console.log('コピー成功:', result);
  } catch (err) {
    console.error('コピーエラー:', err);
    // ユーザーフレンドリーなエラーメッセージを表示
    if (err.name === 'NotAllowedError') {
      alert('クリップボードへのアクセスが許可されていません');
    } else {
      alert('コピーに失敗しました。もう一度お試しください');
    }
  }
}

まとめ

`clipboard.writeText()`メソッドは、JavaScriptでクリップボード操作を行う最も簡単で安全な方法です。セキュリティ考慮事項を理解し、適切なエラーハンドリングを実装することで、ユーザーフレンドリーなクリップボード機能を実現できます。

これらの実装方法を活用することで、Webアプリケーションにスムーズなクリップボード機能を追加することができます。