【JS】文章をコピーするボタンをつくる
まずは完成形
コード
ポイントは、navigator.clipboard.writeText()。
これだけ押さえておけばOK。
解説を知りたい方は、記事を読み進めてみてください！
const btn = document.getElementById('button'); // button要素取得
const txt = document.getElementById('text').textContent; // テキスト取得
btn.addEventListener('click', () => { // ボタンをクリックしたら
navigator.clipboard.writeText(txt); // ★ テキストをクリップボードに書き込み（＝コピー）
btn.innerHTML = 'OK!'; // ボタンの文字変更
setTimeout(() => (btn.innerHTML = 'COPY!'), 1000); // ボタンの文字を戻す
});
最低限これだけ理解すればOK。「Async Clipboard API」
テキストをクリップボードにコピーするには、Async Clipboard APIというものを使います。
簡単に言うと、コピペするための機能が詰まった便利パックですね。
Async Clipboard APIはnavigator.clipboardで呼び出すことができます。
APIを呼び出したら、writeText()メソッドを呼び出します。
これでカッコ内のテキストがクリップボードに記憶されます！
navigator.clipboard.writeText('この中身がクリップボードに書き込まれます！');
テキストは変数でまとめて、自動で変わるようにしておくと便利です😌
【上級】promiseをさらっと理解
※promiseの解説が本題ではないので、ここでは概要が掴めたらOKです。
MDNによると、
Clipboard API の全てのメソッドは非同期で動作します。つまり、それらはクリップボードにアクセスできたときに解決される Promise オブジェクトを返します。この Promise は、クリップボードへのアクセスが拒絶された場合には拒否されます。
はい、これでは何のこっちゃ分かりませんね😂
■ 非同期について
まず、非同期で動作とは何でしょうか？
同期 … 上から順番にひとつずつ読み込んで、処理を実行。ひとつが終わるまで次にいけません。
非同期 … 指定した処理をバックグラウンドで実行。バックグラウンドで処理しつつ、次の動作も同時に行います。
非同期処理を行うことで、画面が真っ白になるのを防いだり、待ち時間を軽減したりできます。
■ ここで問題の「promise」
そもそもpromiseは、非同期処理のコードがあまりに複雑になってしまうので、より分かりやすく書けるように開発されたオブジェクトです。
役割としては、非同期処理の完了 or 非完了、成功 or 失敗の結果を返してくれる、というものです。
なので！
成功時と失敗時の処理を書いて、アラートを出して、エラーを知らせる、という使い方ができるわけですね！
実装方法は、.then()を用います。
promise、ここでいうnavigator.clipboard.writeText()のうしろに、.then()で処理を繋げます。
navigator.clipboard
.writeText('コピーするテキスト')
.then(
(success) => console.log('テキストのコピーに成功'),
(error) => console.log('テキストのコピーに失敗')
);
これで完成です！
さいごに
サクッと書き終える予定が、非同期処理について調べ始めて危うく沼にはまるところでした(汗
ひとつずつ丁寧に意味を紐解いていくと、着実に実力アップしますよ。
私のようなコピペ族の方も「何でこうなるのか？」と仕組みを考えるようにしましょう！
Twitterでは随時、質問受け付けております！
分からないことなどあればお気軽にDMください♪
参考
Discussion