対象の要素が持つテキストをクリップボードに書き込む方法[ JavaScript ]

たとえば、何かボタンを押した時に、
対象のテキストをクリップボードにコピーさせたい。

そんな機能をWebサイト等で使用したい時は、
Clipboard API
というものを使用すると実現できます。
(上記リンク先の解説ページは Mozilla運営の MDN Web Docs より。)

今回は、JavaScriptを使ってそれを行う方法について、書いていきたいと思います。

少し前まで、execCommand() というものを使用するケースが多かったようですが、
execCommand() が非推奨・廃止となり、その代替の機能を提供するかのごとく登場したのが
今回の Clipboard API になります。

対象のテキストをクリップボードに書き込む方法

対象の要素が持つテキストを取得、クリップボードに書き込む（≒コピーする）には、
clipboard.writeText();
というものを使用します。単純なサンプルは以下の通りです。

[JavaScript]

<script>
const myTarget = document.getElementById('myTargetId').textContent;
navigator.clipboard.writeText(myTarget);
</script>

↑1行目で id=”myTargetId” を持つ対象のhtml要素から、それが持つテキストコンテンツを取得、変数 myTarget に格納。
※この例では getElementById() を使用していますが、これは querySelector() などでももちろん問題ありません。
2行目で、それをクリップボードに書き込んでいる、という記述です。

これを、どう使うかといえば、例えばページ内に
「コピーする」などのラベルを持ったボタンを置いておき、
そのボタンをクリックした際の挙動に、上記の2行を設定する等しておけば、
いわゆるコピーボタンの様なものが作成できるかと思います。
具体的には以下。styleについてはサンプルなのであえて簡素にしてある（ほぼ何もあててない）ので、適宜あてるなどしてください。

[html側]

<div id="myTargetId" style="margin: 0 auto 2rem; width: 1200px;">
コピー対象の文言。これを取得して、クリップボードに書き込みます。実行後にペーストすると、取得できていることが確認できると思います。
</div>
<button id="myButton" style="border: 1px solid #777; border-radius: 8px; padding: .25rem 2rem;">ボタン</button>

[JavaScript側]

<script>
  const myTargetTwo = document.getElementById('myTargetIdTwo').textContent;
  const myEl = document.getElementById('myButton');
  myEl.addEventListener('click', () => {
    navigator.clipboard.writeText(myTargetTwo);
    alert('クリップボードに書き込みました。取得したテキスト:「' + myTargetTwo + '」');
  });
</script>

↑例えばこのようにhtml、jsを用意します。
実際にボタンをクリックしてみると、コピーできていることが確認できると思います。

コピーした後に何かを実行する方法

const myTarget = document.getElementById('myTargetId').textContent;
navigator.clipboard.writeText(myTarget).then(() => {
  alert('クリップボードに書き込みました。取得したテキスト:' + myTarget);
}, () => { 
  return;
});

このようにすれば、コピーしたあとに実行する挙動を作成できます。
上記はサンプルなので、単純に「クリップボードに書き込みました」というアラートを出すだけですが
cssアニメーションのclassを付与してあげるなど、うまく活用すれば、
スライドインするメッセージ( snackbar のようなもの)なども作成することができるかと思います。

また、then() の部分ですが、これは
すごくざっくり言うと、
then() の
第一引数で指定している関数がコピー成功時の処理、
第二引数で指定している関数が例外処理、
ということになります。
もっと細かく言うと navigator.clipboard.writeText() を実行すると帰ってくる Promise からの値が resolve なのか reject なのか(処理が成功なのかそうでないのか)、と言う話になるのですが、この記事では長くなるので省略します。