LabEx
ログイン登録

クリップボードに非同期でコピー

Beginner

This tutorial is from open-source community. Access the source code

はじめに

この実験では、JavaScript のクリップボード API を調べ、テキストを非同期でクリップボードにコピーする方法を学びます。API の利用可能性を確認し、クリップボードにテキストを書き込むためにそれを使用する方法を学びます。この実験が終了するとき、JavaScript アプリケーションでクリップボード API をどのように使用するかを十分に理解しているでしょう。

文字列をクリップボードにコピーする関数

文字列をクリップボードにコピーするには、copyToClipboardAsync 関数を使用します。この関数は、クリップボードの内容が更新されたときに解決するプロミスを返します。手順は以下の通りです。

  1. Navigator、Navigator.clipboard、および Navigator.clipboard.writeText が真であるかどうかを if 文を使用して検証することで、クリップボード API が利用可能かどうかを確認します。
  2. クリップボード API が利用可能な場合、Clipboard.writeText() を使用して、与えられた値 str をクリップボードに書き込みます。
  3. Clipboard.writeText() の結果を返します。これは、クリップボードの内容が更新されたときに解決するプロミスです。
  4. クリップボード API が利用可能でない場合、Promise.reject() を使用して適切なエラー メッセージでプロミスを拒否します。
  5. 古いブラウザをサポートする必要がある場合は、Clipboard.writeText() の代わりに Document.execCommand() を使用します。copyToClipboard スニペットでそれに関する詳細を確認できます。

以下が copyToClipboardAsync 関数です。

const copyToClipboardAsync = (str) => {
  if (navigator && navigator.clipboard && navigator.clipboard.writeText) {
    return navigator.clipboard.writeText(str);
  }
  return Promise.reject("The Clipboard API is not available.");
};

この関数を使用するには、コピーしたい文字列を引数として copyToClipboardAsync を呼び出します。例えば、以下のようになります。

copyToClipboardAsync("Lorem ipsum"); // 'Lorem ipsum' がクリップボードにコピーされます。

まとめ

おめでとうございます！クリップボードに非同期でコピーする実験を完了しました。技術力を向上させるために、LabEx でさらに多くの実験を行って練習してください。