[JS]ボタンをクリックしたらクリップボードにテキストをコピーする

こんにちは、むったん（@6ttan）です。

キャンペーンコードなどをコピーして別の場所にペーストする…なんてこと、たまにありますよね。
その際、ボタンをクリックしただでコピーできればとても便利！

逆に、該当部分を選択してコピーなんてさせられた際には「面倒くさい」と思っているユーザーもいるかもしれません。
少なくとも私はスマホ操作の際に、選択コピーの動作を求められると細かい作業でイラッとします。

今回はそんな私にも優しいクリップボードにテキストをコピーするJSについてご紹介します。

Contents close

01 Document.execCommand()は非推奨
02 Navigator.clipboardを使用した
- 02 コード(JavaScript)
- 02 サンプル
03 おわりに

Document.execCommand()は非推奨

ことの発端は、某LPを某アプリに移管する際に気付きました。
この某LPもキャンペーンコードをコピペして、サービスサイトで投稿すると○○○もらえます！としていました。

LP内でコピーする分には問題なく、対象のテキストがペーストできていました。

しかし某アプリ上ではコピーができず、調べてみるとDocument.execCommand()は非推奨とのこと。

非推奨になったものをそのまま使うことはできないので、Clipboard API(Navigator.clipboard)を使用しました。
Navigator.clipboardはIEのみ非対応なので、ご注意ください。

Navigator.clipboardを使用した

今回はテキストをコピー＆ペーストしたいのでwriteText()メソッドで、クリップボードに書き込みます。

書き込む際は、渡されたテキストが正常にコピーできたかに応じて解決または拒否するPromiseを返すのでasync/awaitで実装できます。

コード(JavaScript)

let code = document.querySelector('.js-code');//コピー対象
let btn = document.querySelector('.js-btn');//クリップボードにコピーを実行するボタン

btn.addEventListener('click', function() {
  const textCode = code.textContent;
  copytoClipboarad(textCode);
});

async function copytoClipboarad(target) {
  try {
    await navigator.clipboard.writeText(target)
    alert('コピーできたよ！')
  } catch (error) {
    alert((error && error.message) || 'コピーに失敗しちゃった...')
  }
};