クリップボード操作ライブラリ徹底比較：clipboard vs clipboard-polyfill vs clipboardy vs copy-paste

WebやNode.jsアプリで「コピー」機能を実装する際、どのnpmパッケージを使うべきか迷うことはありませんか？ clipboard、clipboard-polyfill、clipboardy、copy-paste はすべてクリップボード操作を目的としていますが、それぞれが異なる環境・要件・アプローチを持っています。 この記事では、実際のコードを交えながら、各パッケージの技術的特徴と選定基準を解説します。

🖥️ 実行環境：ブラウザ vs Node.js

まず大前提として、これらのパッケージは実行環境がまったく異なります。

• ブラウザ専用: clipboard, clipboard-polyfill
• Node.js専用: clipboardy, copy-paste

混同すると実行時にエラーになるため、最初に「どこで動かすか」を明確にしましょう。

ブラウザ向け：DOM操作 vs 標準API

clipboard は、古いブラウザでも動くことを前提に、DOM要素を介してコピーします。 内部で一時的な <textarea> を作成し、document.execCommand('copy') を呼び出します。

// clipboard: DOMベースのコピー
import Clipboard from 'clipboard';

// HTMLに data-clipboard-text="Hello" 付きのボタンが必要
const clipboard = new Clipboard('.btn');

clipboard.on('success', () => {
  console.log('コピー成功！');
});

一方、clipboard-polyfill は、モダンな Async Clipboard API を中心に設計されています。 HTTPS環境下で安全に動作し、Promiseを返すためasync/awaitと相性が良いです。

// clipboard-polyfill: 標準API優先のコピー
import { writeText } from 'clipboard-polyfill';

async function copyToClipboard(text) {
  try {
    await writeText(text);
    console.log('コピー成功！');
  } catch (err) {
    console.error('コピー失敗:', err);
  }
}

💡 注意: document.execCommand() は非推奨となっており、将来的に削除される可能性があります。長期運用を考えるなら clipboard-polyfill の方が安全です。

Node.js向け：OS依存コマンドのラッパー

clipboardy は、Node.jsプロセス内でクリップボードを操作します。 内部で pbcopy (macOS)、clip (Windows)、xclip/wl-copy (Linux) などのOS固有コマンドを呼び出します。

// clipboardy: Node.jsでのコピー
import clipboardy from 'clipboardy';

// コピー
clipboardy.writeSync('Hello from Node!');

// ペースト
const text = clipboardy.readSync();
console.log(text);

copy-paste も同様の用途でしたが、npm上で非推奨（deprecated）と明記されており、READMEにも「代わりにclipboardyを使ってください」と書かれています。

// copy-paste: 非推奨のため使用しないこと
// import copy from 'copy-paste'; // ❌ 避ける

🔒 セキュリティと権限モデル

ブラウザでは、クリップボードへの書き込みにユーザー操作（クリックなど）が必要です。 これはセキュリティ上の制約であり、どのライブラリもこれを回避できません。

• clipboard: ボタンクリックなどのイベントハンドラ内でのみ動作
• clipboard-polyfill: 同様にユーザー操作が必要。ただし、Promiseが拒否されると詳細なエラーが取得可能

// clipboard-polyfill でのエラーハンドリング例
button.addEventListener('click', async () => {
  try {
    await writeText('secret');
  } catch (err) {
    if (err.name === 'NotAllowedError') {
      alert('クリップボードへのアクセスがブロックされました');
    }
  }
});

一方、Node.jsの clipboardy はプロセスが実行されているマシンのクリップボードに直接アクセスするため、特別な権限は不要です。 ただし、サーバー環境（例: AWS EC2）ではGUIが存在しないため、通常は動作しません。

🧪 非同期 vs 同期API

API設計の違いも重要です。

• clipboard: イベント駆動（コールバック形式）
• clipboard-polyfill: Promiseベース（非同期）
• clipboardy: .write() / .read()（非同期）、.writeSync() / .readSync()（同期）の両方を提供
• copy-paste: コールバック形式（非推奨のため詳細省略）

現代的なコードベースでは、Promiseやasync/awaitの方が統合しやすいため、clipboard-polyfill や clipboardy の非同期APIが好まれます。

🛠️ 実装例：共通タスクでの比較

タスク1: ボタンクリックでテキストをコピー（ブラウザ）

clipboard の場合:

<!-- HTML -->
<button class="copy-btn" data-clipboard-text="コピー対象テキスト">コピー</button>

// JavaScript
import Clipboard from 'clipboard';
new Clipboard('.copy-btn');

clipboard-polyfill の場合:

<!-- HTML -->
<button id="copy-btn">コピー</button>

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

document.getElementById('copy-btn').addEventListener('click', async () => {
  await writeText('コピー対象テキスト');
});

タスク2: CLIツールで結果をクリップボードに保存（Node.js）

clipboardy の場合:

#!/usr/bin/env node
import clipboardy from 'clipboardy';

const result = '計算結果: 42';
clipboardy.writeSync(result);
console.log('結果をクリップボードにコピーしました');

copy-paste の場合（非推奨のため参考まで）:

// ❌ 非推奨。実際には使わないでください
const copy = require('copy-paste').copy;
copy('結果', () => console.log('コピー完了'));

⚠️ 非推奨パッケージの扱い

copy-paste は、npmのパッケージページおよびGitHubリポジトリで明確に非推奨とされています。

"This package is deprecated. Please use clipboardy instead."

新規プロジェクトで使用することは絶対に避けてください。既存プロジェクトで使っている場合は、clipboardy への移行を強く推奨します。

📊 まとめ：選ぶべきライブラリは？

💡 最終アドバイス

• フロントエンド開発者は、長期保守性を考慮して clipboard-polyfill を第一候補にすることをおすすめします。
• Node.js開発者は、迷わず clipboardy を使ってください。copy-paste は過去の遺物です。
• クリップボード操作はユーザー体験に直結する機能です。エラーハンドリングを忘れずに実装しましょう。

正しいツールを選ぶことで、安全で信頼性の高い「コピー」機能を実現できます。