JavaScript | Web API：クリップボード・共有 － Clipboard API

JavaScript JavaScript
スポンサーリンク

Clipboard API は「コピー／ペーストをコードから扱うための正式な入口」

普段、コピーやペースストは
キーボードの Ctrl+C / Ctrl+V や右クリックメニューでやりますよね。

Clipboard API は、その「クリップボード（コピーされた内容が一時的に置かれる場所）」に
JavaScript からアクセスするための仕組みです。

一番よく使うのは次の 2 つです。

navigator.clipboard.writeText("文字列")
navigator.clipboard.readText()

前者は「文字列をクリップボードにコピーする」、
後者は「クリップボードに入っている文字列を読み取る」ための関数です。

どちらも Promise（非同期）を返すので、async/await で書くとスッキリします。

まずは「コピー」から：writeText でテキストをクリップボードに送る

一番シンプルな「コピー」ボタン

HTML:

<div id="text">このテキストをコピーします</div>
<button id="copyBtn">コピー</button>
<div id="status"></div>

JavaScript:

const textEl = document.querySelector("#text");
const copyBtn = document.querySelector("#copyBtn");
const statusEl = document.querySelector("#status");

copyBtn.addEventListener("click", async () => {
  const text = textEl.textContent;

  try {
    await navigator.clipboard.writeText(text);
    statusEl.textContent = "コピーしました！";
  } catch (err) {
    statusEl.textContent = "コピーに失敗しました: " + err;
  }
});
JavaScript

ここで押さえてほしいポイントは、次の 3 つです。

ひとつめは、navigator.clipboard.writeText が Promise を返すので await で待っていること。
ふたつめは、try...catch でエラーをちゃんと受けていること。
みっつめは、「ボタンのクリックイベントの中で呼んでいる」という点です。

Clipboard API はセキュリティの都合で、
ユーザーの操作（クリックなど）に紐づいていないと動かないことが多いです。
「ページ読み込み直後に勝手にコピー」は基本的にできない、と思ってください。

HTTPS（安全なコンテキスト）がほぼ必須

もうひとつ大事な制約があります。
Clipboard API は、ほとんどのブラウザで「安全なコンテキスト（HTTPS）」でしか動きません。

ローカル開発なら http://localhost は特別扱いで OK ですが、
本番環境では https:// で提供していることが前提になります。

もし navigator.clipboard が undefined なら、
「ブラウザが対応していない」か「安全なコンテキストではない」可能性が高いです。

簡単なチェックはこう書けます。

if (!navigator.clipboard) {
  console.log("Clipboard API は使えません");
}
JavaScript

「ペースト」側：readText でクリップボードの文字列を読む

ボタンを押したらクリップボードの中身を表示する

HTML:

<button id="pasteBtn">貼り付け</button>
<div id="result"></div>

JavaScript:

const pasteBtn = document.querySelector("#pasteBtn");
const resultEl = document.querySelector("#result");

pasteBtn.addEventListener("click", async () => {
  try {
    const text = await navigator.clipboard.readText();
    resultEl.textContent = "クリップボードの内容: " + text;
  } catch (err) {
    resultEl.textContent = "取得に失敗しました: " + err;
  }
});
JavaScript

ここでも、async/await と try...catch の組み合わせが基本形です。

重要なのは、「クリップボードを読む」という行為は
「ユーザーのプライバシーに近い操作」だということです。

そのためブラウザは、
権限（permission）を求めたり、
ユーザー操作に紐づいていないと拒否したりします。

「クリックしたときにだけ readText を呼ぶ」という形にしておくと、
動作しやすく、ユーザーにも分かりやすいです。

テキストエリアに貼り付けるパターン

HTML:

<textarea id="memo" rows="4" cols="40" placeholder="ここに貼り付けられます"></textarea>
<button id="pasteToMemo">クリップボードから貼り付け</button>

JavaScript:

const memo = document.querySelector("#memo");
const pasteToMemoBtn = document.querySelector("#pasteToMemo");

pasteToMemoBtn.addEventListener("click", async () => {
  try {
    const text = await navigator.clipboard.readText();
    memo.value = text;
  } catch {
    alert("クリップボードから取得できませんでした");
  }
});
JavaScript

これだけで、
「ワンクリックでクリップボードの内容をテキストエリアに貼り付ける」
という便利な UI が作れます。

旧来の execCommand との違いと、なぜ Clipboard API を使うべきか

昔は document.execCommand("copy") というメソッドで
コピー処理をしていましたが、これは今は非推奨です。

理由は主に 3 つあります。

仕様として標準化されておらず、ブラウザ間の挙動が不安定だったこと。
セキュリティ上の懸念があり、今後いつ動かなくなってもおかしくないこと。
Clipboard API という、より安全で明確な API が用意されたこと。

Clipboard API は、

navigator.clipboard.writeText / readText でテキストを扱う
navigator.clipboard.write / read で画像なども含むリッチなデータを扱う

という形で整理されています。

初心者のうちは、まず writeText と readText だけを
しっかり使えるようになれば十分です。

ちょっと応用：コピー完了のフィードバックを出す

コピー機能は「ちゃんとコピーされたか」がユーザーから見えにくいので、
フィードバックを出してあげると UX が一気に良くなります。

HTML:

<div id="code">npm install awesome-lib</div>
<button id="copyCodeBtn">コピー</button>
<span id="copyMessage"></span>

JavaScript:

const codeEl = document.querySelector("#code");
const copyCodeBtn = document.querySelector("#copyCodeBtn");
const copyMessage = document.querySelector("#copyMessage");

copyCodeBtn.addEventListener("click", async () => {
  const text = codeEl.textContent;

  try {
    await navigator.clipboard.writeText(text);
    copyMessage.textContent = "コピーしました";
    setTimeout(() => {
      copyMessage.textContent = "";
    }, 1500);
  } catch {
    copyMessage.textContent = "コピーできませんでした";
  }
});
JavaScript

ここでやっていることはシンプルですが、
「押したらすぐ反応が返ってくる」ことで、
ユーザーは安心して機能を使えるようになります。

実務でも、
コピー系ボタンにはほぼ必ず「コピーしました」などの表示を付けます。

もう一歩先：テキスト以外も扱える Clipboard API の世界

Clipboard API には、テキスト専用の writeText / readText のほかに、
write / read という「任意のデータ」を扱うメソッドもあります。

例えば、画像をクリップボードにコピーしたり、
HTML とプレーンテキストを両方入れたり、といったことができます。

ただし、ここは一気に難易度が上がります。

ClipboardItem を作って MIME タイプごとにデータを渡したり、
ブラウザごとの対応状況を気にしたりする必要が出てきます。

初心者の段階では、

テキストのコピーは writeText
テキストの取得は readText

この 2 本柱をしっかり使えるようになることを優先して大丈夫です。

初心者として Clipboard API で本当に掴んでほしいこと

Clipboard API の本質は、とてもシンプルです。

「ユーザーのコピー／ペーストという行動を、
JavaScript から“安全に”扱うための正式な窓口」

ということです。

そのために、次の感覚を持っておいてください。

navigator.clipboard.writeText と readText は Promise を返すので、async/await で扱う。
ユーザー操作（クリックなど）に紐づけて呼ぶのが基本。
HTTPS（安全なコンテキスト）でないと動かないことが多い。
失敗する可能性を前提にして、try...catch でエラーを扱う。

まずは次の 2 つを、自分の手で書いてみてください。

任意のテキストをコピーする「コピー」ボタン。
クリップボードの内容を取得してテキストエリアに貼り付ける「貼り付け」ボタン。

これがスムーズに書けるようになったとき、
Clipboard API は単なる「便利な小技」ではなく、
あなたの Web アプリに「コピー／ペーストという自然な動作」を
しっかり組み込むための、頼れる道具に見えてくるはずです。

スポンサーリンク
タイトルとURLをコピーしました