Zenn
📘

React + TypeScript | クリップボードにURLをコピーしたい

2023/02/23に公開
JavaScript
Next.js
React
TypeScript
TypeScript
tech

やりたいこと

ブラウザのアドレスバーに表示されているURLをクリップボードにコピーしたい

ブラウザのアドレスバーに表示されているURLとは
Google Chrome ブラウザの場合はこれ☟に該当します。

ブラウザのアドレスバーに表示されているURL
ブラウザのアドレスバーに表示されているURL

技術選定

  • "next": "12.0.10",
  • "react": "17.0.2",
  • "react-dom": "17.0.2",

実現方法

Webフロントエンド開発の場合は、clipboard.js のライブラリを使用せずに実装可能です。

具体的には、navigator.clipboard.writeText | MDN を使用します。

サンプルコードは以下になります。

const isBrowser = typeof window !== 'undefined'

export const urlCopyHandler = async (url: string) => {
  // Next.jsを使用している場合はbuild時にコケるので`isBrowser`の条件分岐が必要です
  if (!isBrowser) return;

  try {
    await navigator.clipboard.writeText(url);
    console.log('URLのコピーに成功しました')
  } catch {
    console.error('URLのコピーに失敗しました')
  }
};

この urlCopyHandler 関数の第一引数に
コピーしたいURL文字列を指定して使用します。

ボタンクリック時にブラウザのURLをコピーするサンプルコード

ブラウザのアドレスバーに表示されているURLは
location.href で取得できます

urlCopyHandler 関数の第一引数に
location.href を指定します

const UrlCopyComponent = () => {
  const isBrowser = typeof window !== 'undefined';

  const urlCopyHandler = async (url: string) => {
    // Next.jsを使用している場合はbuild時にコケるので`isBrowser`の条件分岐が必要です
    if (!isBrowser) return;

    try {
      await navigator.clipboard.writeText(url);
      console.log('URLのコピーに成功しました');
    } catch {
      console.error('URLのコピーに失敗しました');
    }
  };

  return (
    <button type='button' onClick={() => urlCopyHandler(location.href)} >
      ブラウザのアドレスバーに表示されているURLをコピーする
    </button>
  );
}

そのあとに、UrlCopyComponent を呼び出します。

そうすると以下の動画の様に、ボタンをクリックすると
URLのコピーに成功することの動作確認が出来ます。

URLコピー成功動画
URLコピー成功動画

↑の手順でクリップボードにURLがコピーされます
そのあとに command + V でペーストしてみてください
ブラウザのアドレスバーに表示されているURLがペーストできます

今回の動画の場合、http://localhost:3000/ で検証しており
アドレスバーにも http://localhost:3000/ が表示されているので
command + V でペーストするとhttp://localhost:3000/をペーストできます

Discussion