JavaScriptでコピー＆ペーストをする方法

Javascriptでコピー＆ペーストを実装するには、２つの方法があります。

• document.execCommandを使う方法
• Clipboard APIを使う方法

前者のdocument.execCommandを使う方法はモダンブラウザであれば、すべて対応しています。
なので、基本的にはこちらを使えばOKだと思います！

後者のClipboard APIはモダンブラウザでも対応していない場合があります。
ただ、クリップボードに関する様々なAPIが追加されてます。
現状は「document.execCommand」で大丈夫ですが、将来のことを見据えて「Clipboard API」も学んでおきましょう！！
各ブラウザの対応状況はこちらから

クリップボードへコピー

Javascriptでコピー機能を実装することで、ユーザはワンクリック(ワンタップ)で文字列をコピーすることが出来ます。
例えば、Google検索にある翻訳機能にもコピーボタンがあります。
さすがGoogle先生！

ボタン1つでコピーできれば、ユーザの満足度（ユーザビリティ）がアップしていきます！
ユーザビリティを向上させることはSEOの向上にもつながります。
なので、ユーザがコピーする可能性のある文言については、コピーボタンを設置してあげましょう！！

もちろん、当ブログのコード表示にもコピー機能があります！！

document.execCommandを使う方法

まずは、結論から！

const copyText = (target) => {
  // テキストの選択
  document.getSelection().selectAllChildren(target);
  // 選択範囲のコピー
  document.execCommand("copy");
  // テキスト選択の解除
  document.getSelection().empty(target);
}

See the Pen テキストのコピー(document.execCommand) by カノト (@kanoto) on CodePen.

せっかくなので関数（copyText）にまとめてみました！！
このまま持って行って大丈夫です～♪
※関数にラムダ式を使っているのでIEに対応している場合はご注意ください。

中身を解説していきます！

// テキストの選択
document.getSelection().selectAllChildren(target);

ここではクリッピボードにコピーしたいテキストを選択しています。
テキストが入っている要素を引数(target)に渡してあげてください！

// 選択範囲のコピー
document.execCommand("copy");

ここでは実際に選択したテキストをクリップボードに貼り付けています。

// テキスト選択の解除
document.getSelection().empty(target);

最後に対象のテキストの選択を解除しています。
この処理をしないと、コピーした後、下の画像のように選択状態が解除されないままになってしまいます。
（ちょっとダサい・・・）

Clipboard APIを使う方法

const copyText = (target_str) => {
  // Clipboard APIが使えるかの確認
  if(navigator.clipboard){
    // 対象となる要素のテキストをコピー
    navigator.clipboard.writeText(target_str);
    return true;
  } else {
    return false;
  }
}

See the Pen テキストのコピー(Clipboard API) by カノト (@kanoto) on CodePen.

コードの解説をしていきます！

// Clipboard APIが使えるかの確認
if(navigator.clipboard){
  return true;
} else {
  return false;
}

ここでは、表示中のブラウザが「Clipboard API」に対応しているかどうかを判断しています。
作成した関数では、対応していたら「true」対応していなければ「false」を返すようにしています。

// 対象となる要素のテキストをコピー
navigator.clipboard.writeText(target_str);

ここで、テキストをクリップボードに貼り付けています。
「Clipboard API」ではクリップボードに貼り付けをしたい文字列を引数で渡しています。

クリップボードからペースト

ペースト機能は、各ブラウザで対応状況が変わってくるので、現状実装するのはあまりオススメ出来ません・・・。

ペーストは使用する機会が少ないですが、使用する際には対応しているブラウザの場合のみペーストボタンを表示する対応が必要ですね！

また、「document.execCommand」でもペースト処理は用意されていますが、確認した限りだとペーストの機能は使えないようでした。

なので、現状は「Clipboard API」一択になりそうです！

Clipboard APIを使う方法

const pasteText = (callback) => {
  // 閲覧しているブラウザが「navigator.clipboard」に
  // 対応しているか確認
  if(navigator.clipboard){
    // クリップボードにあるテキストを読み込み
    navigator.clipboard.readText().then((text) => {
      // 読み込んだテキストを操作
      callback(text);
    });
    return true;
  } else {
    return false;
  }
}

See the Pen テキストのペースト(clipboard API) by カノト (@kanoto) on CodePen.

コードの解説をしていきます！

// Clipboard APIが使えるかの確認
if(navigator.clipboard){
  return true;
} else {
  return false;
}

先ほどのコピーの時と同じように、表示中のブラウザが「Clipboard API」に対応しているかどうかを判断しています。

// クリップボードにあるテキストを読み込み
navigator.clipboard.readText().then((text) => {
  // 読み込んだテキストを操作
  callback(text);
});

ここでは、クリップボードにアクセスして、貼り付けされている文字列を取得しています。
また、「callback(text);」ではクリップボードから受け取った文字列（text）を引数で渡しています。

ちなみにコールバック関数を使って処理をしているのは、以下の処理になります。

paste_target.value = text;

受け取ったテキストを「textarea」の中に貼り付けてるだけですね！

コピーのイベントハンドラ

最後にイベントハンドラについて触れていきます。
イベントハンドラを使うことで、ユーザーがテキストをコピーしたときに何かしらの処理を自動で行うことが出来ます。

// コピーイベント
document.addEventListener('copy', () => {
  const result = pasteText((text) => {
    paste_target.innerHTML = text;
  });
});

See the Pen 自動ペースト by カノト (@kanoto) on CodePen.

この例はユーザがテキストをコピーしたときに自動的に「textarea」にペーストされる処理になります。

以上で終わりになります！！
コピー＆ペーストを使いこなして、ユーザビリティの高いサイトを作りましょう！！