Next.jsでX(旧Twitter)のシェアボタンcomponentを作りたい

Engineering
この記事を書いた人

PharmaXというオンライン薬局のスタートアップで薬剤師・エンジニアとして働いています。Rails・React・TypeScriptなどを書きます。英語が得意でTOEIC900点・通訳案内士資格取得。主に薬剤師の働き方やプログラミング、英語学習について書きます。当サイトではアフィリエイトプログラムを利用して商品を紹介しています。
>> 詳しいプロフィール

Tomoyuki Katoをフォローする

X(旧Twitter)のシェアボタンをNext.jsのcomponentを作ったので、その時のメモ書き。

 

X(旧Twitter)のシェアボタンをNext.jsで実装する

結論から言うと、以下のように書くとX(旧Twitter)のShareボタンcomponentを作れる。

 

# TwitterShareButton.tsx
import { useEffect } from "react";

function TwitterShareButton() {
  useEffect(() => {
    // Twitterのスクリプトを動的にロード
    const script = document.createElement("script");
    script.src = "https://platform.twitter.com/widgets.js";
    script.charset = "utf-8";
    script.async = true;
    document.body.appendChild(script);

    // コンポーネントのアンマウント時にスクリプトを削除することで、リソースをクリーンアップ
    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return (
    <a 
           href="https://twitter.com/share?ref_src=twsrc%5Etfw" 
           className="twitter-share-button"
           data-show-count="false">
          Tweet
        </a>
  );
}

export default TwitterShareButton;

 

以下、簡単にコードの解説をする。

    const script = document.createElement('script');
    script.src = 'https://platform.twitter.com/widgets.js';
    script.charset = 'utf-8';
    script.async = true;
    document.body.appendChild(script);

 

新しい<script> タグを作成し、Twitter の widgets.js スクリプトをそのソースとして設定している。

このスクリプトは、ページ上の Twitter ボタンを自動的に変換して動作するボタンにしてくれる。

そして、この新しいスクリプトタグを document.body に追加している。

 

    return () => {
      document.body.removeChild(script);
    };

 

ここでは、useEffect のクリーンアップ関数を返している。

この関数は、コンポーネントがアンマウントされるとき(DOM から削除されるとき)に実行される。

 

この場合、動的に追加した Twitter のスクリプトをページから削除している。

これにより、不要なリソースを解放し、ページのパフォーマンス問題やその他の問題を防ぐことができる。

 

以上。