1. 今回の作業概要

アサーションCheckの分析結果表示について、sessionStorage を使用する方式から、PostgreSQLに保存されたデータを取得する方式へ変更した。

これまで、分析直後の結果表示と履歴詳細画面では、異なる方法でデータを取得していた。

今回のリファクタリングでは、分析直後も履歴からアクセスした場合も、同じ詳細画面を使用する構成に統一した。

今回の目的

2. 変更前の構成

2-1. 分析直後の処理

変更前は、AIによる分析結果をDBに保存した後、フロントエンドでも sessionStorage に保存していた。

ユーザーが分析を実行
        ↓
Next.jsからHonoのAPIを呼び出す
        ↓
Amazon Bedrockで分析
        ↓
PostgreSQLに分析内容・結果を保存
        ↓
APIから分析結果を返却
        ↓
sessionStorageに分析結果を保存
        ↓
/analysis/result に遷移
        ↓
sessionStorageから結果を取得
        ↓
分析結果を表示

フロントエンドでは、以下のような処理を使用していた。

const result: AnalysisResultData = await apiResponse.json();

sessionStorage.setItem(
  "analysisResult",
  JSON.stringify(result)
);

router.push("/analysis/result");

2-2. sessionStorageとは

sessionStorage は、ブラウザにデータを一時的に保存するための仕組み。

主な特徴は以下のとおり。