【B104】見える査定エンジンを実装する

Astro + Reactで構築する透明なUIダッシュボード

前回の【B103】で、我らが第2段エンジン（GAS）は、国交省の実勢価格データからノイズを抜き、特定リスクを排除した「純度100%のサニタイズ・データ（JSON）」を精製することに成功した。

バックエンド側の準備は完全に整った。 いよいよ今回は、この「安全な燃料」を飲み込み、視覚的に表現するためのフロントエンド、つまり 「見える査定エンジン」のダッシュボード を構築していく。

1. 静と動の融合：Astroのアイランドアーキテクチャ

ダッシュボードの土台として選んだのは、軽量かつ爆速のフレームワーク Astro だ。

Astroは基本的にJavaScriptをブラウザに送らず、極限まで静的なHTMLとして画面を描画する。この「静的なガワ」の中に、動的なグラフを描画したい部分だけを React コンポーネントとして配置する。いわゆる「アイランド（島）アーキテクチャ」である。

今回は、ダッシュボードのヘッダーや、算出条件、ポテンシャルの概要カードといった基本レイアウトを Astro と Tailwind CSS で「深夜2時に映えるダークモード」として構築した。 そして、画面の中央に React + Chart.js で作られた「統計分布グラフの島」をドロップしたのだ。

2. 視覚化された「実在気体」：Chart.jsによる分布グラフ

ダッシュボードの本丸は、平米単価のばらつきを可視化した棒グラフ（Bar Chart）だ。 B103のGASエンジンで計算された「四分位範囲（IQR）」の判定結果（isOutlierフラグ）を使い、グラフの色を動的に塗り分けるロジックを組んだ。

// 🎨 isOutlier（外れ値フラグ）を見て、色を動的に変更するハック
const bgColors = sortedData.map(
  (item) =>
    item.isOutlier ? 'rgba(244, 63, 94, 0.8)' : 'rgba(20, 184, 166, 0.8)', // 外れ値は赤(Rose)、正常は青緑(Teal)
);

データを安い順（昇順）に並べ替えてプロットすると、中央の大部分はサイバーな青緑（Teal）で美しいS字カーブを描く。 そして、左端（安すぎる取引）と右端（高すぎる取引）の極端なデータには、はっきりと警告の赤色（Rose）が灯る。

平均値を無自覚に引っ張り、相場を歪める「ノイズ」の正体が、画面上に明確に炙り出された瞬間だ。

3. 全プロセスを公開する：アーキテクチャの可視化

ダッシュボードの右下には、B103で作成した「システム処理フロー」のアーキテクチャ図（MermaidをPNG化したもの）をマウントした。

ただ結果の数字をドーンと見せるだけの、既存のブラックボックスなAI査定サイトとは違う。 「どこからデータを拾い、どうサニタイズし、どのような数理ロジックで計算したのか」という全プロセスを、ユーザー（現時点では自分自身の区域だが）が100%検算・確認できるUIにしたかったのだ。

数字の根拠がすべて見えているからこそ、その評価額には圧倒的な「納得感」が宿る。

4. 次なる展望：第三者への安全な解放へ向けて

この「不動産固有ポテンシャル監視モニター」は、現在のところ私のローカル環境（Antigravity要塞）でのみ静かに稼働している。自分の城の現在地を知るための、言わば「自分専用の羅針盤」だ。

だが、このUIが組み上がった今、少し先の未来が見えてきた。

世の中には、不動産屋の営業トークや不透明な査定アルゴリズムに疑問を持ちながらも、自らコードを書いて検算する術を持たない人々がたくさんいる。 今回のB103で実装した「データの匿名化（サニタイズ）」の仕組みをさらに洗練させ、GASをAPIとして公開すれば、「将来、第三者が自分の生活の価値を、誰にもデータを奪われずに安全に検算できる仕組み」へと昇華できるかもしれない。

自分のために書き始めたコードが、いつか誰かのブラックボックスを壊すハンマーになる。 それもまた、シニアハッカーとしての密かな愉しみである。

（次回、最終回【B105】へ続く……？）

🎧 AIによる副音声解説（Audio Overview）

本プロジェクトの裏側や思想について、AIホスト2名が熱く語るポッドキャスト風解説です。記事と合わせてお楽しみください。

「見える査定エンジン」のフロントエンド

執筆協力：ChatGPT+Gemini+NotebookLM / 編集・監修：電脳古老）