JavaScriptでコピーボタンを作る方法のJavaScriptの説明

JavaScriptでコピーする

JavaScriptは、Webページに動きを付けるためのプログラミング言語です。

このページでは、ボタンがクリックされたときにテキストエリアの内容を取得し、クリップボードへコピーする処理を行っています。

今回使用しているのは Clipboard API の navigator.clipboard.writeText() という機能です。 現在の主要なブラウザで利用できる標準的なコピー方法で、 簡単にテキストをコピーできます。
⭐ サンプルを見てみる

コード

function copyText(){

const text = document.getElementById("text").value;

navigator.clipboard.writeText(text);

}

コードの解説

① function copyText()

「copyText」という名前の関数（処理のまとまり）を作成しています。 コピーしたいときにこの関数が実行されます。

② document.getElementById("text").value

idが「text」のtextareaから入力されている文章を取得しています。

③ navigator.clipboard.writeText(text)

取得した文章をクリップボードへコピーします。

処理の流れ

  1. 📋 コピー ボタンをクリックする
  2. JavaScriptの copyText() が実行される
  3. textareaの文章を取得する
  4. Clipboard APIでクリップボードへコピーする
  5. Ctrl + V または ⌘ + V で貼り付けできる

ポイント

定型文をあらかじめ表示する方法

テキストエリアは、ユーザーに自由に入力してもらうだけでなく、 最初から定型文を表示しておくこともできます。

例えば、AIプロンプトやお問い合わせテンプレート、CSVデータなどを あらかじめ表示しておけば、ユーザーはそのままコピーしたり、 必要な部分だけ編集したりできます。

コード

<textarea id="text">ID
名前
メールアドレス
電話番号</textarea>

表示結果

ID
名前
メールアドレス
電話番号

ポイント