【JavaScript】ボタンクリックでクリップボードにテキストをコピーする2つの方法

ウェブアプリケーションを開発する際、ユーザーが簡単にテキストをコピーできるようにする機能は非常に便利です。この記事では、JavaScriptを使用してボタンクリックでクリップボードにテキストをコピーする2つの主要な方法について詳しく解説します。

document.execCommand(‘copy’)を使用する方法（非推奨）

この方法はかつて広く使われていましたが、現在は非推奨とされています。しかし、古いブラウザでの互換性が必要な場合には便利です。

function copyText() {
  // テキストエリアを作成
  var textArea = document.createElement("textarea");
  textArea.value = 'コピーするテキスト';
  
  // テキストエリアをDOMに追加
  document.body.appendChild(textArea);
  
  // テキストを選択
  textArea.select();
  
  // コピー
  document.execCommand('copy');
  
  // テキストエリアをDOMから削除
  document.body.removeChild(textArea);
}

// ボタンにクリックイベントを追加
document.getElementById('copyButton').addEventListener('click', copyText);

• 非推奨であるため、新しいプロジェクトでは避けるべきです。
• セキュリティの制限により、この方法はユーザーの直接的なインタラクション（例：ボタンクリック）に応じてのみ動作します。

Clipboard APIを使用する方法（推奨）

現代のブラウザでは、Clipboard APIが推奨されています。このAPIは非同期処理に対応しており、より直感的なコーディングが可能です。

async function copyText() {
  try {
    await navigator.clipboard.writeText('コピーするテキスト');
    console.log('テキストがクリップボードにコピーされました');
  } catch (err) {
    console.error('テキストのコピーに失敗しました', err);
  }
}

// ボタンにクリックイベントを追加
document.getElementById('copyButton').addEventListener('click', copyText);

• 非同期処理により、他のタスクと並行して動作する。
• より新しいブラウザで広くサポートされている。
• エラーハンドリングが容易。

まとめ

テキストをクリップボードにコピーする機能は、ユーザーエクスペリエンスを向上させる素晴らしい方法です。古い方法（document.execCommand(‘copy’)）と新しい方法（Clipboard API）がありますが、新しいプロジェクトではClipboard APIの使用が推奨されています。

どちらの方法もそれぞれにメリットとデメリットがありますので、プロジェクトの要件に応じて適切な方法を選んでください。