就活に役立つアプリをAI駆動開発で一日で作った話

就活の自己分析に使える「エピソード × 強み」を整理・評価できる小さなWebアプリを、AIを相棒に一日で作りました。既存のサービスでは「強み」が表れる度合いでフィルタリングができなかったので、自分で作ってみました。

デモ

リポジトリ

---

できること

• 強みの管理: 強み（例: 主体性、分析力）を追加・編集・削除
• エピソード登録: タイトル・内容・関連する強みを紐づけ
• スコア付け（1〜5）: 強みごとに「どれくらい表れたか」を評価
• フィルタリング: 強みで絞り込み、スコアの高い順に自動ソート
• 永続化: ブラウザの localStorage に保存（オフラインでもOK）

補足: 以前は Firebase Firestore を使っていましたが、現在はローカル保存に移行しました（firestoreを使う意味がないと感じたから）。

---

デモ／リポジトリ

• デモ（例）: https://self-analysis-phi.vercel.app/
• リポジトリ構成（主要ファイル）
  • 画面: src/app/page.tsx
  • フォーム: src/components/EpisodeForm.tsx, src/components/StrengthForm.tsx
  • 型定義: src/types/self-analysis.ts
  • 保存: src/utils/storage.ts（localStorage）
  • 過去の遺物: src/utils/firebase.ts, src/utils/firestore.ts

---

技術スタック

• Next.js (App Router), React, TypeScript
• Tailwind CSS
• 保存: localStorage（Firebase 周辺コードも残してる）

---

使い方（セットアップ）

npm install
npm run dev
# ブラウザで http://localhost:3000 を開く

• バックエンド不要。すべてブラウザ内に保存されます。
• 別端末同期をしたい場合は、コードを編集して Firestore を使ってください。

---

• データモデルのシンプルさ
  • Episode（エピソード）: タイトル・本文・関連強み配列・作成/更新日時
  • Strength（強み）: 名前・説明
  • EpisodeStrength（関連スコア）: どのエピソードのどの強みが何点か
• UXの工夫
  • 強みチェック時のみスコア入力を表示 → フォームがスッキリ
  • 強みで絞ると、スコアの高いエピソード順に並ぶ → 面接準備やES対策に直結
• 責務分離
  • データ保存/読込は utils/storage.ts に集約
  • 画面は「いつ保存するか」に集中

---

画面の流れ（ざっくり）

1. 強みの追加（名前・説明）
2. エピソードの追加（タイトル・内容・関連強みのチェック＋各強みのスコア設定）
3. 一覧で確認（必要に応じて編集）
4. 強みでフィルタ → スコアの高い順で面接に使える話からチェック

---

AI駆動開発で一日で作った進め方

• 要件の粒度を先に決める
  「強みとエピソード」「強み別ソート」「最小UI」「ローカル保存でOK」など。
• AIへの依頼は具体的に
  「型の提案」「フォームの状態管理」「保存の切り出し」など、タスク単位で相談。
• 小さく作る→違和感に気づく→最小修正
  完成度を後回しにして価値が出る最小機能から組み立て。

---

就活での活用ヒント

• エントリーシート: 強みでフィルタ→スコア上位のエピソードから使う
• 面接準備: 質問想定に合わせて強みを選び、即「話の核」を抽出
• 自己分析の深化: 同じ強みでもエピソードで強度が違うことに気づける

---

その他

• IDは一旦 Date.now().toString()（将来 uuid に置換しやすい）
• 保存系はユーティリティに集約してUIから分離
• 「あとから伸ばせる構造」を先に作る（Firestore へのブリッジを残す）

まとめ

• 強み × エピソードを「選んで点ける」だけの最小UIで、就活の自己PR準備が加速します。
• 小さな要件でも、AIの力を適切に借りれば一日で価値あるものが作れます。
• データモデルと保存の分離で、将来の拡張もスムーズです。

小さく作って早く試す、ぜひやってみてください！