クリップボード API をマスターする：シームレスなクリップボードへのコピー機能

はじめに

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript(("JavaScript")) -.-> javascript/ToolsandEnvironmentGroup(["Tools and Environment"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/BasicConceptsGroup -.-> javascript/cond_stmts("Conditional Statements") javascript/AdvancedConceptsGroup -.-> javascript/async_prog("Asynchronous Programming") javascript/ToolsandEnvironmentGroup -.-> javascript/bom("Browser Object Model") subgraph Lab Skills javascript/variables -.-> lab-28219{{"クリップボードに非同期でコピー"}} javascript/data_types -.-> lab-28219{{"クリップボードに非同期でコピー"}} javascript/arith_ops -.-> lab-28219{{"クリップボードに非同期でコピー"}} javascript/comp_ops -.-> lab-28219{{"クリップボードに非同期でコピー"}} javascript/cond_stmts -.-> lab-28219{{"クリップボードに非同期でコピー"}} javascript/async_prog -.-> lab-28219{{"クリップボードに非同期でコピー"}} javascript/bom -.-> lab-28219{{"クリップボードに非同期でコピー"}} end

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

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

Navigator、Navigator.clipboard、および Navigator.clipboard.writeText が真であるかどうかを if 文を使用して検証することで、クリップボード API が利用可能かどうかを確認します。
クリップボード API が利用可能な場合、Clipboard.writeText() を使用して、与えられた値 str をクリップボードに書き込みます。
Clipboard.writeText() の結果を返します。これは、クリップボードの内容が更新されたときに解決するプロミスです。
クリップボード API が利用可能でない場合、Promise.reject() を使用して適切なエラーメッセージでプロミスを拒否します。
古いブラウザをサポートする必要がある場合は、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でさらに多くの実験を行って練習してください。