JavaScriptでクリップボードにコピーする方法（ライブラリ不要）

現在Vue.jsで開発をしていて、以前ならvue-clipboard2というライブラリを導入していたのですが、現在はブラウザAPIに navigator.clipboardというのがあり、ほぼ全てのブラウザに対応していることを確認したのでこちらのAPIを利用して開発することにしました。

ですので、バニラJSのみ・数行のコードで完結します。特別なライブラリなどは不要です。

この記事ではその方法を紹介します。

ブラウザの Clipboard API を利用する

ブラウザからクリップボードにアクセスできるのが Clipboad API です。

Clipboard API は、切り取り、コピー、貼り付け機能をWebアプリケーションに実装するために使用できます。

CLipboard API に関するMDN Web Docs
https://developer.mozilla.org/ja/docs/Web/API/Navigator/clipboard

コピーするメソッド

下記のコードで任意の文字列をコピーできます。

navigator.clipboard.writeText("任意の文字列");

コピーする HTML & JS コード

事例として、ボタン(button)をクリックすることでコピーできるコードを紹介します。

<div id="txt">コピーしたいテキストはこれ</div>
<button id="btn">コピーする</button>

// HTML要素取得
const txt = document.getElementById('txt');
const btn = document.getElementById('btn');

// コピー処理（btnがクリックされたらtxtをコピーする）
btn.addEventListener('click', () => {
  if (!navigator.clipboard) {
    alert("残念。このブラウザは対応していません...");
    return;
  }

  navigator.clipboard.writeText(txt.textContent).then(
    () => {
      alert('コピー成功👍');
    },
    () => {
      alert('コピー失敗😭');
    });
});

おわりに

一部ではiOS対応してないーという声もネットにはあったのですが、私のiPhone / iPadでは問題なく動作しました。

とはいえ、万が一動作しない場合や非対応ブラウザのためにif文で処理を書きました。

参考