execCommand や DOM要素を作らなくても実装できます!
みなさん、こんにちは。どんぶラッコです。
今日はボタンをクリックしたら文章がコピーされる機能を作っていこうと思います。
検索すると execCommand()
などを使う方法が出てきたりしますが、機能が廃止されているので使わないようにしましょう。

ではどうしたらいいのか?
今回は navigator.clipboard を使う方法をご紹介します!
こちらを使えば、「文章 コピー」などで上位の結果に表示される ”DOM要素を作って、文章を作って、クリップボードにコピーする…” なんて面倒なステップを踏まなくて良くなるのでオススメです!
ということで早速みていきましょう。
ちなみに、 navigator.clipboard
の対応状況はこんな感じです(2021年7月26日 現在)

IEが対応していませんが、もうサポートが終了するブラウザなので特に気にせずとも良いでしょう!
サンプルコード
See the Pen by cha1ra (@cha1ra) on CodePen.
※埋め込みのボタンをクリックしても実行されないので、 codepenのサイトに遷移してからお試しください!
https://codepen.io/cha1ra/pen/VwbyMdb
HTML
<button id="button">
文書をコピー
</button>
JavaScript
const button = document.querySelector('#button')
button.addEventListener('click', () => {
navigator.clipboard.writeText('コピーされた文章')
button.innerHTML = 'コピー完了!'
setTimeout(() => button.innerHTML = '文章をコピー', 1000)
})
解説
実際に文章のコピーをしているところはたった1行です。
navigator.clipboard.writeText('コピーされた文章')
これを書けばOK!
— 完 —
で終わってしまうとあまりにも味気ないので、 navigator
の部分を深堀りします。
navigator とは?
ブラウザでJavaScriptを実行する際に、デフォルトでNavigatorオブジェクトを取得することができます。
これは、ユーザの状態などを取得することができるメソッドやプロパティがたくさん用意されています。
例えば、Chromeのコンソール画面で navigator.language
と入力してみてください。

すると、このように今ブラウザを見ているユーザがどの言語が一番望ましいかを返してくれます。今は日本語で表示しているので “ja” が返ってきていますね。
このように様々ある navigator
プロパティの一つが clipboard
です。その名の通り、クリップボードの情報を読み書きすることができるオブジェクトです。
なので Clipboard オブジェクト内の writeText()
メソッドを使うことでクリップボードの中身が書き代わり、コピーをした状態と同じになったというわけです!
この記事のまとめ
clipboardへの貼り付けを導入に、navigatorについても学習しました。こうやって芋づる式に知識を増やしていくと自分のためになりますね!