【5分で実装】「クリックしてコピー」ボタンの作り方｜HTML＋JavaScriptだけでOK

本記事には広告が含まれています

2025/04/212025/04/22

【5分で実装】「クリックしてコピー」ボタンの作り方｜HTML＋JavaScriptだけでOK

「クリックしてコピー」機能は、ユーザーがテキストを選択せずにワンクリックでクリップボードへコピーできる便利な仕組みです。この記事では、純粋なHTML＋JavaScriptだけを使い、5分以内に実装できる手順を解説します。外部ライブラリは不要で、誰でもすぐに試せます。

前提条件

モダンブラウザ（Chrome・Firefox・Edge・Safari など）
テキストエディタとブラウザがあればOK

実装手順

ステップ1: HTMLの準備

コピー対象のテキストとボタンを用意します。ID属性を付けることで、スクリプト側から簡単に参照できます。


<!-- copy.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>クリックしてコピー機能デモ</title>
  <!-- 後述のJavaScriptを外部ファイルにしたい場合は defer を使うと安全です -->
  <script defer src="script.js"></script>
</head>
<body>
  <div>
    <input type="text" id="textToCopy" value="ここにコピーしたいテキストを入れる">
    <button id="copyBtn">コピー</button>
  </div>
</body>
</html>

ステップ2: JavaScriptの実装

以下のコードを script.js（または<script>タグ内）に記述します。


async function copyText() {
  const text = document.getElementById('textToCopy').value;

  // Clipboard API の存在チェック（typeof を利用）
  if (typeof navigator.clipboard !== 'undefined' && navigator.clipboard.writeText) {
    try {
      await navigator.clipboard.writeText(text);
      alert('コピーしました: ' + text);
      return;
    } catch (err) {
      console.warn('Clipboard API失敗、フォールバック実行', err);
    }
  }

  // フォールバック：document.execCommand('copy') は非推奨扱い
  const textarea = document.createElement('textarea');
  textarea.value = text;
  textarea.style.position = 'fixed';
  textarea.style.left = '-9999px';
  // textarea.style.opacity = '0'; // 代替手段の例
  document.body.appendChild(textarea);
  textarea.select();

  try {
    document.execCommand('copy');
    alert('コピーしました: ' + text);
  } catch (err) {
    console.error('フォールバックコピーに失敗:', err);
    alert('コピーに失敗しました。');
  } finally {
    document.body.removeChild(textarea);
  }
}

// DOMContentLoaded で安全にイベントを登録
document.addEventListener('DOMContentLoaded', () => {
  document.getElementById('copyBtn').addEventListener('click', copyText);
});

ステップ3: HTMLへ組み込む

上記のHTMLファイルをブラウザで開くだけで動作します。<script defer src="script.js"></script>を使うか、<body>末尾に<script>タグを置くことで、getElementByIdがnullになるリスクを避けられます。

補足: セキュアコンテキストについて

Clipboard APIはHTTPSまたはlocalhostのようなセキュアコンテキストでのみ動作します。
※ファイル直開き（file://）やHTTP環境では動かない場合があるので、確実に動作確認するにはHTTPS配信をおすすめします。

5分で試す方法

本文のHTML＋JavaScriptをコピーし、新規ファイル（例: copy.html と script.js）に貼り付ける
ローカルまたはHTTPS環境でブラウザで開く
入力欄に任意のテキストをセットし、「コピー」ボタンをクリック
別の場所でペーストして、コピーが成功することを確認

これで5分以内に導入から動作確認まで完了します。

よりプロっぽく見せるためのTips

textarea.select() の前に focus() を追加する

一部環境では select() のみでは反応しないケースがあります。明示的に focus() を当てることで安定性を向上させましょう。
🔽 修正前のコード


// フォールバック部分（修正前）
textarea.select();

try {
  document.execCommand('copy');
  alert('コピーしました: ' + text);
} catch (err) {
  console.error('フォールバックコピーに失敗:', err);
  alert('コピーに失敗しました。');
}

✅ 修正後のコード


// フォールバック部分に focus() を追加
textarea.focus();  // 明示的にフォーカスを当てる
textarea.select();

try {
  document.execCommand('copy');
  alert('コピーしました: ' + text);
} catch (err) {
  console.error('フォールバックコピーに失敗:', err);
  alert('コピーに失敗しました。');
}

alert() の代わりにトースト通知を使う

alert() は操作を一時停止させるため、非同期で自動消去するトースト通知のほうがUXに優れています。
🔽 修正前のコード（Clipboard API 成功時）


await navigator.clipboard.writeText(text);
alert('コピーしました: ' + text);

✅ 修正後のコード（トースト通知に置き換え）


await navigator.clipboard.writeText(text);
showToast('コピーしました: ' + text);

以下の showToast() 関数をスクリプトの末尾に追加してください。


function showToast(message) {
  const toast = document.createElement('div');
  toast.textContent = message;
  toast.style.position = 'fixed';
  toast.style.bottom = '20px';
  toast.style.left = '50%';
  toast.style.transform = 'translateX(-50%)';
  toast.style.backgroundColor = '#333';
  toast.style.color = '#fff';
  toast.style.padding = '10px 20px';
  toast.style.borderRadius = '6px';
  toast.style.boxShadow = '0 2px 6px rgba(0,0,0,0.3)';
  toast.style.zIndex = '1000';
  toast.style.opacity = '0';
  toast.style.transition = 'opacity 0.3s ease';

  document.body.appendChild(toast);

  // 表示開始
  requestAnimationFrame(() => {
    toast.style.opacity = '1';
  });

  // 3秒後にフェードアウト＆削除
  setTimeout(() => {
    toast.style.opacity = '0';
    setTimeout(() => document.body.removeChild(toast), 300);
  }, 3000);
}