クリップボード操作ライブラリ徹底比較：clipboard、clipboard-polyfill、copy-to-clipboard、react-copy-to-clipboard、vue-clipboard2

Web アプリで「コピー」ボタンを実装するのは一見簡単ですが、実際にはブラウザのセキュリティ制限、API の進化、フレームワークとの統合など、多くの技術的課題があります。この記事では、代表的な5つの npm パッケージを、実際のコードと開発シナリオに基づいて深く比較します。

🧩 基本的な使い方：1行でコピーできるか？

まず、最も単純なケース —— 任意の文字列をプログラムでコピーする —— で各ライブラリの使い勝手を確認します。

clipboard は DOM 要素に依存するため、直接文字列を渡せません。代わりに、data-clipboard-text 属性を持つ要素が必要です。

// clipboard: DOM 要素必須
import Clipboard from 'clipboard';

const btn = document.createElement('button');
btn.setAttribute('data-clipboard-text', 'Hello, world!');
document.body.appendChild(btn);

new Clipboard(btn);
// ボタンクリックでコピーされる（プログラムによる即時コピー不可）

clipboard-polyfill は Promise ベースのシンプルな関数呼び出しで動作します。

// clipboard-polyfill
import { writeText } from 'clipboard-polyfill';

writeText('Hello, world!').catch(err => console.error(err));

copy-to-clipboard も同様に、関数1つでコピー可能です。

// copy-to-clipboard
import copy from 'copy-to-clipboard';

copy('Hello, world!'); // boolean を返す（成功/失敗）

react-copy-to-clipboard は React コンポーネントとして使用します。

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

function App() {
  return (
    <CopyToClipboard text="Hello, world!">
      <button>コピー</button>
    </CopyToClipboard>
  );
}

vue-clipboard2 は Vue ディレクティブでバインドします（Vue 2 限定）。

// vue-clipboard2 (Vue 2)
import Vue from 'vue';
import VueClipboard from 'vue-clipboard2';

Vue.use(VueClipboard);

// テンプレート内
// <button v-clipboard:copy="'Hello, world!'">コピー</button>

💡 ポイント: clipboard 以外は、DOM 要素を介さずに直接文字列をコピーできます。ただし、react-copy-to-clipboard と vue-clipboard2 はそれぞれのフレームワークに強く依存しています。

🔒 セキュリティとブラウザ互換性：どの API を使うか？

現代のブラウザでは、navigator.clipboard.writeText() が標準ですが、これは HTTPS または localhost でのみ動作します。一方、古い document.execCommand('copy') は任意のコンテキストで動作しますが、非推奨です。

clipboard は execCommand のみ を使用します。そのため、最新ブラウザでも非推奨 API に依存し続けます。

clipboard-polyfill は Clipboard API を優先し、サポートされていない環境では execCommand にフォールバックします。さらに、iOS Safari の特殊な挙動にも対応しています。

copy-to-clipboard も同様に、モダン API を優先し、必要に応じて execCommand にフォールバックします。

react-copy-to-clipboard は内部で copy-to-clipboard を使用しているため、同じ互換性戦略を持ちます。

vue-clipboard2 は clipboard ライブラリに依存しており、execCommand のみ を使用します。

⚠️ 注意: clipboard と vue-clipboard2 は非推奨 API に依存しているため、新しいプロジェクトでは避けるべきです。特に、モバイル Safari や今後のブラウザアップデートで動作しなくなるリスクがあります。

🧪 エラーハンドリング：失敗をどう扱うか？

コピー操作は常に成功するとは限りません（例: ユーザーが権限を拒否した場合）。各ライブラリのエラー処理方法を比較します。

clipboard-polyfill は Promise を返すため、catch でエラーを捕捉できます。

writeText('text').catch(err => {
  console.error('コピー失敗:', err.message);
});

copy-to-clipboard は成功時に true、失敗時に false を返します。

const success = copy('text');
if (!success) {
  console.warn('コピーに失敗しました');
}

clipboard と vue-clipboard2 はイベントリスナー経由で結果を取得します。

const clipboard = new Clipboard(btn);
clipboard.on('error', e => console.error('コピー失敗'));

react-copy-to-clipboard は onCopy コールバックで結果を通知します。

<CopyToClipboard text="text" onCopy={(text, result) => {
  if (!result) console.warn('コピー失敗');
}}>
  <button>コピー</button>
</CopyToClipboard>

💡 実践的アドバイス: Promise ベースの clipboard-polyfill は非同期処理との統合が容易で、モダンなコードベースに適しています。一方、copy-to-clipboard の boolean 返り値はシンプルで直感的です。

🧱 フレームワーク統合：React/Vue でどう使うか？

React での使用

• react-copy-to-clipboard は JSX に自然に組み込めますが、カスタムロジック（例: 成功時のトースト表示）を追加するには onCopy を使う必要があります。
• copy-to-clipboard を直接使うと、より柔軟な制御が可能です。

// copy-to-clipboard を React で使う例
import { useState } from 'react';
import copy from 'copy-to-clipboard';

function CopyButton({ text }) {
  const [copied, setCopied] = useState(false);

  const handleClick = () => {
    if (copy(text)) {
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    }
  };

  return <button onClick={handleClick}>{copied ? 'コピー済み' : 'コピー'}</button>;
}

Vue での使用

• vue-clipboard2 は Vue 2 専用であり、Vue 3 では動作しません。Vue 3 プロジェクトでは、copy-to-clipboard を Composition API でラップするのが現実的です。

// Vue 3 + copy-to-clipboard の例
import { ref } from 'vue';
import copy from 'copy-to-clipboard';

export function useClipboard() {
  const copied = ref(false);

  const copyText = (text) => {
    if (copy(text)) {
      copied.value = true;
      setTimeout(() => copied.value = false, 2000);
    }
  };

  return { copied, copyText };
}

🚫 非推奨とメンテナンス状況

公式情報によると：

• clipboard は GitHub リポジトリで「このプロジェクトはメンテナンスされていません」と明記されており、新しいプロジェクトでの使用は推奨されません。
• vue-clipboard2 は Vue 3 に対応しておらず、最終更新が古いため、Vue 2 レガシープロジェクト以外では避けるべきです。

一方、clipboard-polyfill と copy-to-clipboard は積極的にメンテナンスされており、最新のブラウザ変更にも追随しています。

📊 まとめ：どのライブラリを選ぶべきか？

💡 最終的なアドバイス

• フレームワーク非依存で確実に動作させたい → clipboard-polyfill（完全なポリフィル）または copy-to-clipboard（軽量）
• React プロジェクトで素早く実装したい → react-copy-to-clipboard（ただし、カスタムロジックが必要なら copy-to-clipboard 直接使用が柔軟）
• Vue 3 プロジェクト → copy-to-clipboard を Composition API でラップ
• 新しいプロジェクトで clipboard や vue-clipboard2 を使うのは避けてください。非推奨 API への依存は将来的な破壊的変更を招きます。

クリップボード操作は「小さな機能」に見えますが、ユーザー体験に直結します。信頼性と将来性を考えて、適切なツールを選びましょう。