JavaScriptにおけるクリップボード操作の変遷：ZeroClipboardからモダンClipboard APIまで

投稿日：2026年1月30日

Web開発において「テキストをコピーする」という機能は、今や当たり前の UI です。しかし、その裏側にある JavaScript のクリップボード操作は、セキュリティと利便性の間で激しい試行錯誤を繰り返してきた歴史があります。

本記事では、黎明期の独自実装から、Flashに頼った暗黒時代、そして現代の Promise ベースの API まで、その変遷を辿ります。

Contents

黎明期：IEの独自機能とセキュリティの不在 (2000年代初頭)

すべては Internet Explorer 6 の window.clipboardData から始まりました。

当時は「利便性」が優先されており、Webサイトが勝手にユーザーのクリップボードを覗き見たり、内容を書き換えたりすることが可能でした。このセキュリティ上の重大な懸念から、他ブラウザはこの仕様をそのまま追従することはありませんでした。

FirefoxやChromeが台頭する中、JS単体でクリップボードを操作する標準的な手段は長らく存在しませんでした。そこで登場したのが、ZeroClipboardに代表されるFlash（Adobe Flash Player）を介したハックです。

仕組み: JSから直接操作できないなら、OSレベルの権限が強い「Flash」にやらせようという発想です。
実装: 見た目はただのHTMLボタンですが、その上に「透明なSWFファイル」を重ねます。ユーザーがボタンをクリックした瞬間にFlashがクリップボード処理を実行します。
衰退: モバイルブラウザでのFlash非対応、そして「Thoughts on Flash」に象徴されるFlash自体の終焉により、この手法は歴史の舞台から消えていきました。

ようやくブラウザが標準機能として「コピー」を実装し始めます。しかし、その実態は非常に不器用なものでした。

当初、execCommand('copy') は「現在ブラウザ上で選択されているテキスト」をコピーするだけの機能でした。開発者が「特定の変数の中身」をコピーしたい場合、大きな壁にぶつかります。

制約: 非表示要素（display: none）やメモリ上の変数は選択できないため、コピーに失敗する。
泥臭い回避策（ハック）:
1. 画面外（left: -9999px）に、見えない textarea を動的に生成する。
2. その要素にコピーしたい文字列を流し込む。
3. JSでその要素を select()（全選択）する。
4. その状態で execCommand('copy') を実行する。
5. 用が済んだら textarea を削除する。

この「一瞬だけ要素を作って消す」というコードが、当時のライブラリ（clipboard.jsなど）の内部で一般的に行われていました。

そして現在。ついに私たちは、ハックを必要としない美しくセキュアな API 手に入れました。それが Clipboard API です。

技術: navigator.clipboard.writeText("Hello World")
進化のポイント:
- 非同期 (Promise): async/await が使えるため、処理をブロックしません。
- 高機能: テキストだけでなく、画像（Blob）などのリッチデータの読み書きもサポート。
- Permission API: ブラウザが「このサイトにクリップボード読み取りを許可しますか？」とユーザーに確認する仕組みが整い、セキュリティと利便性が両立しました。

かつてのクリップボード操作は、Flashで隠したり、画面外に要素を隠したりといった「隠蔽」の歴史でした。しかし、現代の API はユーザーのプライバシーを尊重し、透明性の高いやり取りへと進化しました。

これから新規プロジェクトを立ち上げるなら、迷わず Clipboard API を選択しましょう。ただし、古いブラウザへの対応が必要な現場では、今でもあの「見えないtextarea」がどこかで静かに動いているかもしれません。

執筆者：yager