JavaScript | Web API：クリップボード・共有 － ペースト処理

「ペースト処理」は“ユーザーのクリップボードの中身を、アプリに連れてくる”こと

コピー処理が「アプリ → クリップボード」だとしたら、
ペースト処理はその逆、「クリップボード → アプリ」 です。

ユーザーが Ctrl+V で貼り付ける代わりに、
ボタン 1 回で「今クリップボードに入っているテキスト」を
アプリ側に持ってきてあげるイメージです。

ここで主役になるのが、Clipboard API の

navigator.clipboard.readText()

navigator.clipboard.readText()

です。
これは「クリップボードに入っているテキストを取得する」ための関数で、
Promise（非同期）を返します。

基本の形：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;
  }
});

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;
  }
});

ここでしっかり押さえてほしいポイントは 3 つあります。

1. readText は「非同期」で、必ず await で待つ

navigator.clipboard.readText() は、
すぐに値を返す関数ではありません。

ブラウザが OS のクリップボードにアクセスし、
必要なら権限を確認し、
その結果としてテキストを返します。

だからこそ、await で待つ必要があります。

const text = await navigator.clipboard.readText();

const text = await navigator.clipboard.readText();

この一行で、
「クリップボードの中身が取れるまで一旦待つ」
という意味になります。

2. 失敗する前提で try…catch を書く

クリップボードの読み取りは、
コピー以上に「プライバシーに近い操作」です。

そのためブラウザは、

• HTTPS でない
• ユーザーが権限を拒否した
• ブラウザの設定で禁止されている

などの理由で、普通に失敗させてきます。

だからこそ、失敗を前提に書くのが大事です。

try {
  const text = await navigator.clipboard.readText();
  // 成功時の処理
} catch (err) {
  // 失敗時の処理
}

try {
  const text = await navigator.clipboard.readText();
  // 成功時の処理
} catch (err) {
  // 失敗時の処理
}

「うまくいったらラッキー」ではなく、
「うまくいかないこともある世界でどう振る舞うか」を考えるのが、
実用的なペースト処理です。

3. これも「ユーザー操作に紐づける」のが基本

コピーと同じく、
ペーストもユーザー操作に紐づいていないと
ブラウザに拒否されることが多いです。

ボタンのクリック、ショートカットキー、
そういった「ユーザーが何かした瞬間」に
readText を呼ぶようにしましょう。

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

「クリップボード → テキストエリア」の王道パターン

HTML:

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

JavaScript:

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

pasteToMemoBtn.addEventListener("click", async () => {
  if (!navigator.clipboard) {
    status.textContent = "このブラウザでは Clipboard API が使えません";
    return;
  }

  try {
    const text = await navigator.clipboard.readText();
    memo.value = text;
    status.textContent = "貼り付けました";
  } catch (err) {
    status.textContent = "貼り付けに失敗しました: " + err;
  }
});

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

pasteToMemoBtn.addEventListener("click", async () => {
  if (!navigator.clipboard) {
    status.textContent = "このブラウザでは Clipboard API が使えません";
    return;
  }

  try {
    const text = await navigator.clipboard.readText();
    memo.value = text;
    status.textContent = "貼り付けました";
  } catch (err) {
    status.textContent = "貼り付けに失敗しました: " + err;
  }
});

ここでの重要ポイントは、

• navigator.clipboard が存在するかを最初にチェックしている
• 成功時と失敗時でメッセージを分けている
• 「どこに貼り付けるか」が明確（テキストエリア）

というところです。

ユーザーから見て、

「このボタンを押すと、
今コピーしている内容がここに入るんだな」

と一瞬で分かる UI にするのが大事です。

JSON やコードを貼り付けて「解析」するような使い方

クリップボードの JSON をパースして表示する

ペースト処理は、
単にテキストを表示するだけでなく、
「貼り付けた内容を解析して何かする」
という使い方と相性が良いです。

例えば、
クリップボードに JSON をコピーしておいて、
ボタン 1 回で整形表示するツールを作れます。

HTML:

<button id="pasteJsonBtn">JSON を貼り付けて整形</button>
<pre id="jsonView"></pre>

JavaScript:

const pasteJsonBtn = document.querySelector("#pasteJsonBtn");
const jsonView = document.querySelector("#jsonView");

pasteJsonBtn.addEventListener("click", async () => {
  try {
    const text = await navigator.clipboard.readText();
    const data = JSON.parse(text);
    jsonView.textContent = JSON.stringify(data, null, 2);
  } catch (err) {
    jsonView.textContent = "JSON として読み取れませんでした: " + err;
  }
});

const pasteJsonBtn = document.querySelector("#pasteJsonBtn");
const jsonView = document.querySelector("#jsonView");

pasteJsonBtn.addEventListener("click", async () => {
  try {
    const text = await navigator.clipboard.readText();
    const data = JSON.parse(text);
    jsonView.textContent = JSON.stringify(data, null, 2);
  } catch (err) {
    jsonView.textContent = "JSON として読み取れませんでした: " + err;
  }
});

ここでの流れは、

クリップボードからテキストを取得
JSON.parse でオブジェクトに変換
JSON.stringify で整形して表示

というものです。

「ペースト → 解析 → 見やすく表示」という流れは、
デバッグツールや社内ツールでめちゃくちゃよく使われます。

ペースト処理と「通常の Ctrl+V」との違い

ブラウザ標準の貼り付けと、JavaScript からの readText

ユーザーが Ctrl+V を押したとき、
ブラウザはフォーカスのある要素（テキストエリアなど）に
自動的に貼り付けを行います。

これは「ブラウザの標準動作」であって、
JavaScript が介入しなくても動きます。

一方、navigator.clipboard.readText() は、
JavaScript が「クリップボードの中身を直接読む」ための API です。

違いをざっくり言うと、

標準の貼り付け:
「ユーザーがどこに貼るかを決める」

Clipboard API のペースト処理:
「アプリがどこに、どう使うかを決める」

という感じです。

だからこそ、
Clipboard API を使うときは、

• どこに貼るのか
• 貼ったあとどう見せるのか
• 解析や変換を挟むのか

といった「アプリ側の意図」を
しっかり設計する必要があります。

セキュリティと制約をちゃんと意識する

なぜ「勝手にクリップボードを読む」のは危険なのか

もし JavaScript が、
ユーザーの許可なくいつでもクリップボードを読めたらどうなるか。

ユーザーがパスワードやクレジットカード番号をコピーした瞬間、
それを勝手に盗み見るサイトが作れてしまいます。

それを防ぐために、ブラウザは

• HTTPS（安全なコンテキスト）でしか Clipboard API を許可しない
• ユーザー操作に紐づいていない readText を拒否する
• 場合によっては権限ダイアログを出す

といった制限をかけています。

開発者としては、

「クリップボードを読むのは、
ユーザーが明確に“今読んでいいよ”と示した瞬間だけ」

という前提で設計するのが大事です。

初心者として「ペースト処理」で本当に掴んでほしいこと

ペースト処理の本質は、
「ユーザーのクリップボードの中身を、アプリの世界に連れてくる」
という一点です。

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

navigator.clipboard.readText() は非同期で、await で待つ。
失敗することを前提に try...catch で書く。
ボタンなどのユーザー操作に紐づけて呼ぶ。
「どこに貼るか」「貼ったあとどう見せるか」をアプリ側で決める。

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

クリップボードの内容を取得して <div> に表示する「貼り付け」ボタン。
クリップボードの JSON を読み取って、整形して <pre> に表示するボタン。

これが自然に書けるようになったとき、
ペースト処理は単なる「コピーの逆」ではなく、
あなたの Web アプリにとっての
「外の世界からデータを一瞬で取り込む入口」
として、かなり頼もしく感じられるはずです。