私が開発した「お金の診断ツール」シリーズをご紹介します。
目次
プロジェクトの概要
今回公開したのは、資産形成や家計管理をテーマにした無料診断ツールです。
感覚的に使えるように設計しており、7問前後の質問に答えるだけで自分の傾向をチェックできます。
技術スタック
この診断シリーズは、以下の構成で作成しています：
- Astro：静的サイトジェネレーター（SSG対応）
- React（TypeScript）：診断UIや計算ロジックを担当
- JSON構成の診断定義：
config.tsで質問・結果・推奨ツールを管理 - 構造化データ（FAQ, JSON-LD）：SEO強化・Googleリッチリザルト対応
- CoreServer：自動デプロイ環境
実装方法は、「フロントでユーザー入力 → JSON定義で判定 → 結果を表示」というシンプルなアーキテクチャになっています。
実装した診断コンテンツ
| 診断名 | 質問数 | 内容 |
|---|---|---|
| 貯蓄タイプ診断 | 7問 | 使う派？貯める派？をチェック |
| 投資スタイル診断 | 6問 | 守り／攻め／バランスを判定 |
| FIRE達成度診断 | 6問 | 現在のFIREまでの距離を確認 |
いずれもシンプルを意識して作っており、複雑な計算を使わず直感的に理解できる設計になっています。
開発の意図としては、「UIとUXの調整を学ぶ実例」としても活用できる構成です。
関連するシミュレーション機能
診断結果のページからは、次のような実用ツールに連動します：
「診断 → ツールへ誘導 → 行動提案」という流れを、1ページ完結で体験できるのが特徴です。
react chartを利用したグラフで表現しているのが特徴です。
学習者へのヒント
このような診断型コンテンツは、
- フォーム入力や状態管理（React useState）
- 条件分岐による結果判定
- JSON設計と型定義の組み合わせ
といった基本的な実装練習に最適です。
プログラミング学習の後半で「動くWebアプリを作りたい」と思ったときに、ちょうど良い規模の題材になるでしょう。
まとめ
今回の診断ツールは、教材で扱う技術の実例として公開しました。
「学んだことをどう応用できるか？」を具体的に感じられるプロジェクトになっています。