クリップボードにテキストをコピーするボタンの実装

GitHubでレポジトリのURLをクリップボードにコピーするボタンありますよね。
そんな感じのボタンをJavaScript（React）で作りたかったので調べました。

Clipboard APIを使おう

Clipboard APIを使うと簡単に実装できます。
Clipboard APIはIE以外ほぼすべてのブラウザでサポートされています。

クリップボードコピーの方法を調べるとまず最初に出てくるのがexecCommandですが、こちらは最近のブラウザではサポートされてないらしく、Mozillaでも使わないよう警告されています。
Clipboard APIはその代替手段という感じでしょうか。

以下のような関数を作ればコピー機能を実装できます。

function copyTextToClipboard(text) {
  navigator.clipboard.writeText(text)
  .then(function() {
    console.log('Async: Copying to clipboard was successful!');
  }, function(err) {
    console.error('Async: Could not copy text: ', err);
  });
}

ポイント： writeTextメソッドを使う

writeText()でプレーンテキストをクリップボードにコピーすることができます。
返り値はPromiseなので、thenなどを使って適切に処理する必要があります。

プレーンテキスト以外をコピーする場合は、writeメソッドを使います。
また、逆にクリップボードにコピーされているものを取得する際は、readTextやreadメソッドを使います。

ボタンの実装

これは単純にonClickイベントに↑の関数を指定するだけです

<Button onClick={() => copyTextToClipboard()}>
  Copy!
</Button>

おまけ ： ボタンクリックしたときに「コピーしたよ！」とメッセージを出したい

ボタンをクリックするだけだとコピーされたかどうか分かりにくいのでメッセージを表示してあげたいですよね。
こんな感じ

自分はデザインライブラリとしてSemantic-UIを使っているので、簡単に実装できました。
semantic-ui-reactのPopupパターンを使います。

<Popup
  trigger={
    <Button onClick={() => copyUrlToClipboard()}>
      <Icon name='linkify' />
      <div>リンクを<br/>コピー</div>
    </Button>
  }
  content='Copied!'
  on='click'
  position='left center'
/>

---

参照

• Clipboard - Web APIs | MDN
• Async Clipboard APIでJavaScriptからクリップボードを操作する
• ブラウザ上でJavaScriptを利用したクリップボードへのコピー機能の実装Clipboard API版
• Document.execCommand() - Web API | MDN

間違っている点や説明が足りない部分がありましたら、コメントして下さい！ ><