やりたいこと
「Ctrl + C」や「command + C」でできるコピーを、簡単にできる機能をWEBサイトに実装したい。
「clipboard.js」などの便利なライブラリは使わず、素のJavaScript（+HTML）のみで実装したい。
Clipboard API
Clipboard APIは、クリップボードへのコピーや切り取り、貼り付けなどの操作を行うためのAPIで、グローバル変数の navigator を介してクリップボードの操作を行います。
以前までクリップボードの操作に利用されていた、document.execCommand()メソッドに置き換わるように設計されています。
Clipboard インターフェース
Clipboard API の Clipboard インターフェースでは、クリップボードへのコピーや貼り付けなどの操作を行うことができるメソッドを提供しています。
| メソッド名 | 操作 |
| read() | クリップボードからデータ（画像など）を取得する。 |
| readText() | クリップボードからテキストを取得する。 |
| write() | クリップボードにデータ（画像など）を書き込む。 |
| writeText() | クリップボードにテキストを書き込む。 |
これらのメソッドは、Promiseで実装されています。
ClipboardEvent
ClipboardEvent は、イベントリスナーで扱うことができるイベントです。
clickやsubmitなどと同じように、addEventListenerを使うことで特定のイベントが発生したときに指定した処理を実行することができるようになります。
| イベント | 処理実行タイミング |
| cut | 「切り取り」を実行したときに発生する。 |
| copy | 「コピー」を実行したときに発生する。 |
| paste | 「貼り付け」を実行したときに発生する。 |
Clipboard API のブラウザ対応状況
本記事執筆時点（2022年9月）での、Clipboard API のブラウザ対応状況は以下になります。
Clipboard API でテキストをクリップボードへコピーする
Clipboard API でテキストをクリップボードへコピーするには、Clipboard インターフェースのwriteText()メソッドを使います。
const text = document.querySelector('#textarea');
navigator.clipboard.writeText(text)
.then(() => {
console.log("クリップボードにコピーできました！");
})
.catch((error) => {
console.log("クリップボードへのコピーに失敗しました！");
});Promiseで実装されているため、then()メソッドで行いたい処理を記述し、catch()メソッドでエラー処理を記述します。
まとめ
JavaScriptの Clipboard API を使うことで、ライブラリを使わずに素のJavaScriptのみでテキストをクリップボードへコピーすることができるようになります。
Clipboard API はPromiseで実装されているため、then()メソッドやcatch()メソッドを使って処理を記述しましょう。
document.execCommand()メソッドは、現在非推奨であるため、使用は避けましょう。
コメント