今日の開発内容

今回の開発は非常に勉強になった。

• ヘッダーを layout.tsx から page.tsx に移管
  • これで

    use client

    が使えるので、アカウントアイコンをログイン/ログアウトに応じて変更できるようになった
• リフレッシュトークンを使用してアクセストークンを取得する
  • リフレッシュトークンによるアクセストークンの取得はミドルウェアではなく、カスタムフックで実装した
• カスタムフックをストレージイベントで呼び出すようにした

カスタムフック

カスタムフックとは、React 組み込みのフック（

useState

や

useEffect

）とは異なり、React に組み込まれていない独自のフックのこと。

カスタムフック

独自のフックを開発者が作ることができる。カスタムフックは、組み込みフックだけでは複数のコンポーネントでロジックが重複する場合に効果を発揮する。例えば、アプリ内でユーザーのログイン状態をステートとして保持したいとする。

const [isSignedIn, setIsSignedIn] = useState(false);

このステートはログインを必要とするすべてのコンポーネントで必要である。しかしすべてのコンポーネントにステートを定義するのは冗長である。そこでカスタムフックを使う。カスタムフックはステートを返すため、すべてのコンポーネントでステートのみ受け取ることができる。

• カスタムフック

export const useAuthStatus = () => {
  const [isSignedIn, setIsSignedIn] = useState(false);

  // ユーザーのログイン状態を確認してステート isSignedIn を更新する処理

  return isSignedIn;
};

• カスタムフックのステートを受け取るコンポーネント

const Header = () => {
  const isSignedIn = useAuthStatus();

  // isSignedIn を使った処理
};

今回、個人開発アプリではログイン状態を様々なコンポーネントで必要であったため、カスタムフックを導入した。

ストレージイベント

ストレージイベントとは、ローカルストレージの変更イベントである。

Window: storage イベント

個人開発アプリでは、アクセストークンをローカルストレージに保存しており、ログイン/ログアウト時にローカルストレージの変更が発生する。そこで、上記のカスタムフック

useAuthStatus

をストレージイベントが発生したときに呼び出すようにした。

export const useAuthStatus = () => {
  const [isSignedIn, setIsSignedIn] = useState(false);

  useEffect(() => {
    // isSignedIn の更新処理
    checkSignedIn();

    // イベント登録
    window.addEventListener('storage', checkSignedIn);

    // 登録解除
    return () => window.removeEventListener('storage', checkSignedIn);
  }, []);

  return isSignedIn;
};

しかし、イベントが発生してもなぜか登録した関数がトリガーされなかった。原因はわからないが、次のように強制的にイベントを発生されるようにした。

window.dispatchEvent(new Event('storage'));

EventTarget: dispatchEvent() メソッド

参考

• カスタムフック
• Window: storage イベント
• EventTarget: dispatchEvent() メソッド