📋

【JS】文章をコピーするボタンをつくる

2022/06/16に公開約2,100字

まずは完成形

コード

ポイントは、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ください♪

https://twitter.com/yurippe_dev

参考

https://developer.mozilla.org/ja/docs/Web/API/Clipboard_API
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/then

Discussion

ログインするとコメントできます