Reactアプリに「クリップボードにコピー」機能を追加する方法

コードスニペット、URLリンク、テキスト断片などの情報を手動でコピーするのは、特に画面の小さいモバイルデバイスでは時間がかかり、エラーが発生しやすい場合があります。「クリップボードにコピー」機能を追加すると、時間を節約できるだけでなく、エラーやタイプミスが発生する可能性が低減されます。

クリップボードにコピーする機能の設定

Reactアプリで、CopyButtonという名前の新しいコンポーネントを作成します。このコンポーネントは、クリップボードにコピーする必要があるテキストを受け入れます。

作業するReactプロジェクトがない場合は、create react appユーティリティを使用して1つ足場を組みます。

function CopyButton({text}) {const copyToClipboard = () => {// クリップボードにコピーする}return (コピーする)}export default CopyButton

ボタンをクリックすると、copyToClipboardという名前の関数が呼び出され、テキストがクリップボードにコピーされます。

コピー機能を実装するには、クリップボードAPIを直接使用するか、NPMパッケージを使用します。

このガイドでは、その両方を使用する方法を紹介します。

クリップボードAPIを使用してテキストをReactのクリップボードにコピーする方法

クリップボードAPIは、コピー、カット、ペーストなどのクリップボードコマンドと対話する方法を提供します。

これを使用するには、ほとんどの最新のブラウザーで使用できるnavigator.clipboardオブジェクトを使用する必要があります。これには、クリップボードの内容を書き込んだり読んだりするためのいくつかのメソッドがあります。

クリップボードに書き込むには、writeTextメソッドを使用します。

CopyButtonコンポーネントのcopyToClipboard関数でこれを実装する方法を見てみましょう。

const copyToClipboard = async (text) => {try {await navigator.clipboard.writeText(text);alert('テキストをクリップボードにコピーしました:', text);} catch (error) {alert('クリップボードへのコピー中にエラーが発生しました:', error);}};

writeTextメソッドは、クリップボードにコピーするテキストを受け入れます。このメソッドは非同期なので、続行する前にawaitキーワードを使用する必要があります。

テキストがクリップボードにコピーされたら、成功メッセージを表示します。それ以外の場合は、エラーメッセージをアラートとして表示します。

ブラウザーの権限を確認する

良い習慣として、ユーザーがブラウザーにクリップボードへのアクセス権を付与していることを確認することが重要です。ユーザーがクリップボード書き込み権限を付与しているかどうかは、クリップボードにコピーする前にnavigator.permissionsWeb APIを使用して確認できます。以下に示します。

const copyToClipboard = async () => {try {const permissions = await navigator.permissions.query({name: "clipboard-write"})if (permissions.state === "granted" || permissions.state === "prompt") {await navigator.clipboard.writeText(text);alert('テキストをクリップボードにコピーしました!');} else {throw new Error("クリップボードにアクセスできません。ブラウザーの権限を確認してください。")}} catch (error) {alert('クリップボードへのコピー中にエラーが発生しました:', error);}};

上記の変更された関数では、ユーザーがクリップボードへの書き込み権限を付与している場合にのみ書き込みを行います。それ以外の場合は、関数はエラーをスローします。

NPMパッケージを使用してReactでクリップボードにコピーする方法

クリップボードAPIを直接使用したくない場合は、代わりに使用できるNPMパッケージが複数あります。Reactアプリケーションの場合は、react-copy-to-clipboardパッケージを使用できます。これは、週に100万回以上ダウンロードされており、非常に人気があり、使いやすいです。

ターミナルで次のコマンドを実行して、Reactアプリケーションにインストールします。

npm install react-copy-to-clipboard

インストールしたら、react-copy-to-clipboardからCopyToClipboardコンポーネントをインポートして、CopyButtonコンポーネントに取り込みます。

import {CopyToClipboard} from 'react-copy-to-clipboard';

CopyToClipboardコンポーネントは、コピーするテキストをプロパティとして受け入れます。また、クリックされたときにコピーアクションをトリガーする子コンポーネントも受け入れます。たとえば、次のコードを使用してボタンでクリップボードにコピーします。

 console.log(result)}>コピー

ハンドラー関数onCopyに注目してください。これは、2つの引数、textとresultを受け入れます。ここで、textはコピーされたテキストで、resultはコピーアクションが成功したかどうかを示すブール値です。

クリップボードにコピーする機能を使用する理由

ReactアプリケーションでクリップボードAPIとreact-copy-to-clipboardパッケージを使用してクリップボードにテキストをコピーする方法を学びました。アプリケーションのユーザーはテキストを選択してブラウザーのコピー機能を使用するだけで済みますが、テキストをコピーするためにクリックする方が簡単で、ユーザーエクスペリエンスが向上します。

パソコンの友達