ReactJSでテキストをクリップボードにコピー：Clipboard API、execCommand、ライブラリを使った方法

2024-04-02

ReactJSでテキストをクリップボードにコピーする方法

execCommandを使う方法

ブラウザのexecCommand APIを使用して、クリップボードにテキストをコピーする方法です。

メリット:

コードがシンプルで分かりやすい

古いブラウザではサポートされていない

コード例:

const copyToClipboard = (text) => {
  const el = document.createElement('textarea');
  el.value = text;
  el.style.position = 'absolute';
  el.style.left = '-9999px';
  document.body.appendChild(el);
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);
};

// 使用例
const text = 'これはクリップボードにコピーされるテキストです';
copyToClipboard(text);

Clipboard APIは、ブラウザの新しい標準APIで、より安全かつ簡単にクリップボードにアクセスできます。

安全で、ユーザーの許可なくクリップボードにアクセスできない
新しいブラウザで動作する

コードが少し複雑

const copyToClipboard = async (text) => {
  if (!navigator.clipboard) {
    return;
  }
  try {
    await navigator.clipboard.writeText(text);
  } catch (err) {
    console.error('クリップボードへのコピーに失敗しました:', err);
  }
};

// 使用例
const text = 'これはクリップボードにコピーされるテキストです';
copyToClipboard(text);

ライブラリを使う方法

react-copy-to-clipboardなどのライブラリを使うと、さらに簡単にクリップボードにコピーできます。

様々な機能が提供されている

ライブラリの追加が必要

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

// 使用例
const text = 'これはクリップボードにコピーされるテキストです';
<CopyToClipboard text={text}>
  <button>コピー</button>
</CopyToClipboard>

上記の3つの方法から、プロジェクトの要件に合った方法を選択してください。

import { useState } from 'react';

const App = () => {
  const [text, setText] = useState('これはクリップボードにコピーされるテキストです');
  const [copied, setCopied] = useState(false);

  const copyToClipboard = async () => {
    if (!navigator.clipboard) {
      return;
    }
    try {
      await navigator.clipboard.writeText(text);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch (err) {
      console.error('クリップボードへのコピーに失敗しました:', err);
    }
  };

  return (
    <div>
      <input type="text" value={text} onChange={(e) => setText(e.target.value)} />
      <button onClick={copyToClipboard}>コピー</button>
      {copied && <p>コピーしました!</p>}
    </div>
  );
};

export default App;

このコードは、以下の動作を実現します。

テキスト入力欄に入力されたテキストをtext stateに保存
copyToClipboard関数を実行すると、Clipboard APIを使ってテキストをクリップボードにコピー
コピー成功時には、2秒間メッセージを表示

上記のコードを参考に、ご自身のプロジェクトに合ったコードを作成してください。

他の方法

contenteditable属性をtrueに設定すると、要素の内容を編集可能になります。以下のコードのように、execCommand APIを使って、編集可能な要素の内容をクリップボードにコピーできます。

const copyToClipboard = (el) => {
  const selection = window.getSelection();
  const range = document.createRange();
  range.selectNodeContents(el);
  selection.removeAllRanges();
  selection.addRange(range);
  document.execCommand('copy');
  selection.removeAllRanges();
};

// 使用例
const el = document.getElementById('my-element');
copyToClipboard(el);