個人的備忘録：ローカル開発中に出た「セッションIDが見つかりません」エラーと戦った話

はじめに

React や Next.js のアプリケーションで、API にリクエストを送る際に localStorage を使って session_id を扱うことがあります。本記事では、"セッションIDが見つかりません" というエラーが出た際の原因と解決方法についてまとめます。

書こうと思ったきっかけ

受講しているITスクールのハッカソンの開発の一環で、API 呼び出しのときにセッションIDが取得できずに詰まることがあったため、忘れないように原因と対処法を記録しておきます。

実際の画面

内容

エラーの概要

アプリ上で以下のようなエラーが表示された：

localhost:3000 says
セッションIDが見つかりません

このエラーは、以下のようなコードによって発生しています：

if (!sessionId) {
  alert("セッションIDが見つかりません");
  return;
}

原因

localStorage.getItem("session_id") の戻り値が null や文字列として "null"、"undefined" になっている可能性があります。

そのため、sessionId に期待した値が入らず、上記のエラーが発生します。

解決策

localStorage.setItem("session_id", "1");

一時的な回避策：コード側に一時的に挿入する（開発用）

useEffect(() => {
  // ★ テスト用に session_id を強制的にセット
  localStorage.setItem("session_id", "1");

  document.body.classList.add("washitsu");

  const storedToken = localStorage.getItem("token");
  const storedSessionId = localStorage.getItem("session_id");

  if (storedToken) setToken(storedToken);
  if (storedSessionId) setSessionId(storedSessionId);

  return () => {
    document.body.classList.remove("washitsu");
  };
}, []);

※ このコードはあくまで開発・デバッグ用途であり、本番環境では削除すること。

session_id を安全に扱うために

将来的にはログイン処理などでセッションIDを取得し、ログイン時に以下のように自動で保存するのが理想です：

localStorage.setItem("session_id", response.session_id);

まとめ

「セッションIDが見つかりません」エラーは localStorage の値が空であることが原因です。

開発中はブラウザのコンソールや useEffect に仮の session_id を入れておくとスムーズに動作確認できます。

本番環境ではセッションIDを正しく発行・保存する実装が重要ですので、開発が終わり次第修正いたします...！