【JavaScript】クリップボードにテキストをコピーする方法

Webサイトやアプリを開発する際、クリップボードにテキストをコピーする必要がある場合があります。
本記事では、初心者でもわかるように、JavaScriptでクリップボードにテキストをコピーする方法を解説します。

テキストをコピーする方法とは？

Clipboard APIとdocument.execCommand()の2種類の方法があります。

Clipboard APIを利用してコピーする

まずはClipboard APIを利用する方法を紹介します。
Clipboard APIは、クリップボードへのアクセスを可能にするAPIで、クリップボードに対して読み込みと書き込みができます。
以下は、Clipboard APIを使ってクリップボードにテキストをコピーするコード例です。

function copyToClipboardApi(text) {
  navigator.clipboard.writeText(text);
}

function copyToClipboardApi(text) {
  navigator.clipboard.writeText(text);
}

注意点

Clipboard APIは新しいブラウザでしか使えませんが、より高度な操作が可能です。
IEなど古いブラウザではサポートされていないので、注意が必要です。
【ブラウザ対応表】

document.execCommand()を利用してコピーする

document.execCommand()は、コマンドを実行するためのメソッドです。
‘copy’というコマンドを使うことで、クリップボードにテキストをコピーすることができます。
以下は、document.execCommand()を使ってクリップボードにテキストをコピーするコード例です。

function copyToClipboardCommand(text) {
  const input = document.createElement('textarea');
  input.value = text;
  document.body.appendChild(input);
  input.select();
  document.execCommand('copy');
  document.body.removeChild(input);
}

function copyToClipboardCommand(text) {
  const input = document.createElement('textarea');
  input.value = text;
  document.body.appendChild(input);
  input.select();
  document.execCommand('copy');
  document.body.removeChild(input);
}

上記のコードでは、まずテキストを引数として受け取ります。
それを一時的に作成したtextarea要素に格納し、select()で選択し、document.execCommand(‘copy’)でコピーしています。
最後に、一時的に作成したtextarea要素を削除しています。

注意点

document.execCommand()を使う方法は古いブラウザでも動作するため、広く利用されています。
ただし、最新のブラウザでは、セキュリティ上の理由から使えない場合があります。
また、Safariでは、クリップボードへのアクセスに制限があるため、使えない場合があります。
【ブラウザ対応表】

まとめ

対応するブラウザによって実装が異なるので、事前に想定してから実装を行いましょう。
もしも、どちらも利用したい場合は以下のようなコードを試してみてはいかがでしょうか。

function copyToClipboard(text) {
  if (navigator.clipboard) {
    copyToClipboardApi(text);
  } else {
    copyToClipboardCommand(text);
  }
}

function copyToClipboard(text) {
  if (navigator.clipboard) {
    copyToClipboardApi(text);
  } else {
    copyToClipboardCommand(text);
  }
}

Webアプリケーション開発においては、クリップボードにテキストをコピーする機能は、ほぼ必須のものです。
是非、この記事を参考に実装してみてください。