要素のテキストをコピーする - Javascript

  • 作成日：
  • 最終更新日：2026/02/08

要素のテキストをコピーする

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./script.js"></script>
</head>
<body>
  <div>
    <button class="btn">copy</button>
    <pre><code class="target">console.log("Hello, World");</code></pre>
  </div>
  <div>
    <button class="btn">copy</button>
    <pre><code class="target">console.log("Hello, Javascript");</code></pre>
  </div>
  <div>
    <button class="btn">copy</button>
    <pre><code class="target">console.log("Hello, Python");</code></pre>
  </div>
</body>
</html>
async function copyText(text) {
  if (!text) {
    return "コピーする内容がありません。";
  }

  try {
    await navigator.clipboard.writeText(text);
    return "コピーしました。";
  } catch(e) {
    console.error(e);
    return "コピーに失敗しました。";
  }
}

window.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.btn').forEach(btn => {
    btn.addEventListener('click', async () => {
      const target = btn.parentElement.querySelector('.target');
      const code = target?.textContent ?? '';

      const message = await copyText(code);
      alert(message);
    });
  });
});