リンクをコピーしましたという機能をJavaScriptで実装したい

2024年12月10日

導入・背景

　Webアプリケーションでは、ユーザー体験を向上させるために「リンクをコピーしました」という機能がよく使われます。この機能は、クリップボードにテキストをコピーし、成功を通知することで、共有リンクや情報の提供を効率化します。本記事では、JavaScriptを使ってこの機能を実装する方法を詳しく解説します。

実行コード

以下は navigator.clipboard API を使ったシンプルな実装例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>リンクをコピー</title>
</head>
<body>
  <button id="copyButton">リンクをコピー</button>
  <p id="message"></p>

  <script src="script.js"></script>
</body>
</html>

document.getElementById("copyButton").addEventListener("click", async () => {
  const linkToCopy = "https://example.com";
  
  try {
    await navigator.clipboard.writeText(linkToCopy);
    document.getElementById("message").textContent = "リンクをコピーしました！";
  } catch (err) {
    document.getElementById("message").textContent = "コピーに失敗しました。";
    console.error("コピーエラー:", err);
  }
});

Jestを使ったテストコード

JavaScriptコードのテストには Jest を使用します。

npm install --save-dev jest

jest.mock('navigator.clipboard', () => ({
  writeText: jest.fn()
}));

describe("リンクコピー機能のテスト", () => {
  test("正常にリンクをコピーする", async () => {
    const link = "https://example.com";
    navigator.clipboard.writeText.mockResolvedValue();

    await expect(navigator.clipboard.writeText(link)).resolves.toBeUndefined();
  });

  test("コピー失敗時のエラー表示", async () => {
    const link = "https://example.com";
    navigator.clipboard.writeText.mockRejectedValue(new Error("コピーエラー"));

    await expect(navigator.clipboard.writeText(link)).rejects.toThrow("コピーエラー");
  });
});

コード解説

HTMLのセットアップ: ボタンと通知メッセージ表示用の要素を用意。
イベントリスナーの設定: ボタンクリック時にリンクコピー処理を実行。
非同期処理:navigator.clipboard.writeText() を使用してリンクをコピー。成功/失敗メッセージを表示。
エラーハンドリング: コピー処理が失敗した場合にエラーメッセージを表示し、ログに記録。

navigatorでその他使える機能の紹介

navigator オブジェクトはさまざまなWeb APIにアクセスできます。主な機能を以下に紹介します。

Geolocation API: ユーザーの現在位置を取得

navigator.geolocation.getCurrentPosition((position) => {
  console.log("位置情報:", position.coords.latitude, position.coords.longitude);
});

オンライン状態の確認

if (navigator.onLine) {
  console.log("オンラインです");
} else {
  console.log("オフラインです");
}

ユーザーエージェント情報の取得

console.log("ユーザーエージェント:", navigator.userAgent);

まとめ

　JavaScriptの navigator.clipboard API を使えば、簡単に「リンクをコピーしました」機能を実装できます。clipboard.js などのライブラリも検討すれば、後方互換性を確保できます。また、Jest を使った単体テストで信頼性の高いコードを維持することも重要です。ぜひ、これらの知識を活用して、より使いやすいWebアプリを開発してください。