【コピペOK】JavaScriptでクリップボードにテキストをコピーする方法｜navigator.clipboard.writeText()の使い方

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

ボタンをクリックするだけで、特定のテキストをクリップボードにコピーできたら便利ですよね。
問い合わせ先メールアドレス、クーポンコード、シェア用URLなど、ユーザーに手間をかけずに情報を提供したい場面は多々あります。

今回は、JavaScriptのnavigator.clipboard.writeText()を使って、簡単にクリップボードへコピーする実装方法をご紹介します。
対応ブラウザ、注意点、活用例も解説するので、コピペしてすぐに実装したい方にもおすすめです。

navigator.clipboard.writeText()とは？

navigator.clipboard.writeText() は、指定したテキストをユーザーのクリップボードにコピーするためのWeb APIです。

対応ブラウザ

基本のコピペコード

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

よくある失敗例

より実践的な活用例

動的に入力内容をコピー

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

SNSシェア用のURLコピー

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

注意：フォールバック対応が必要なケース

一部のブラウザや環境では、clipboard APIが使えない場合もあります。

そんなときは、従来のtextareaを使った方法をフォールバックとして用意しておくと安心です。

詳細は別記事「JavaScriptでクリップボードに対応するフォールバック実装方法」で解説しています。

まとめ：ユーザー体験を向上させる小さな工夫

ユーザーの「面倒」をひとつ解消することで、コンバージョンや再訪率がアップすることもあります。ぜひ、あなたのWebサイトにも実装してみてください。

satokotadesignキャンペーン実施中！