Reactでクリップボードにテキストをコピーさせる

これはなに

Reactでクリップボードにテキストをコピーさせる簡単なコンポーネントのサンプルを紹介します。これにより、ユーザーにテキストを簡単にコピーしてもらうインターフェースを実装できます。

対象読者

• Reactを使ってフロントエンド開発を行っているエンジニア
• Reactを使ったコンポーネント開発に興味がある人
• ユーザーに簡単にテキストをコピーさせたい人

ゴール

Reactでクリップボードにテキストをコピーさせる機能を実装するシンプルなコンポーネントを作成し、動作する状態まで持っていくこと。

TL;DR

以下のコードを使うことで、Reactで簡単にクリップボードにテキストをコピーさせるコンポーネントを作成できます。

import { useState } from 'react';

export default function CopyToClipboard() {
  const [copySuccess, setCopySuccess] = useState('');

  const copyToClipboard = async () => {
    try {
      await navigator.clipboard.writeText('コピーさせるテキスト');
      setCopySuccess('コピーしました！');
    } catch (err) {
      setCopySuccess('コピーに失敗しました...');
    }
  };

  return (
    <div>
      <button onClick={copyToClipboard}>テキストをコピー</button>
      {copySuccess && <p>{copySuccess}</p>}
    </div>
  );
}

解説

コードの説明

上記のコンポーネントは、ユーザーがボタンをクリックすると特定のテキスト（ここでは“コピーさせるテキスト”）がクリップボードに保存される仕組みです。navigator.clipboard.writeText()を使うことで、非同期的にテキストをクリップボードにコピーできます。

• useStateはコピーの成功メッセージを管理するために使用しています
• copyToClipboard関数は非同期関数で、成功した場合には“コピーしました！”というメッセージを表示します

注意点

• navigator.clipboardはHTTPS環境でのみ動作するため、ローカルでテストする場合はlocalhostかHTTPSプロトコルが必要です
• 一部のブラウザでは、クリップボードのアクセスに制限があるため、ユーザーの操作によってのみコピー処理が実行可能です

参考文献

• MDN Web Docs - Clipboard API