就活管理アプリ
概要
本アプリは、就活に関する企業情報・選考状況・スケジュール・タスク等を一元管理できるWebアプリケーションです。
複数企業の選考を並行して進める中で、情報が分散することによる管理の煩雑さを解消し、 効率的に就職活動を進められるようにすることを目的としています。
デモ
利用上の注意
- 右記のテスト用アカウントでのみ利用可能です
- 初回アクセス時に時間がかかる場合があります（Render無料プラン）
テストアカウント
| メールアドレス | パスワード |
|---|---|
| test1@example.com | password123 |
スクリーンショット
ホーム画面
企業一覧画面
カレンダー画面
ESグループ画面
企業詳細画面
タスク管理画面
ES一覧画面
機能一覧
企業・選考管理
- 企業を登録し、志望度ごとに分類・並べ替えができる
- 企業ごとに以下の情報を一元管理できる
- 基本情報: 業界、従業員数、所在地など、任意の項目を登録・編集
- 企業メモ: 企業研究や面談で得た情報をMarkdown形式で保存
- 選考状況: 応募から内定までの選考フローをステップ単位で管理し、各ステップの結果・日時・メモを記録
- やり取り履歴: 企業との連絡・手続きの履歴を日時やアクションの主体（企業／ユーザー）とともに記録
- 関連情報: 企業に紐づく予定やタスクをまとめて確認
スケジュール・タスク管理
- カレンダー
- 面接・説明会・インターン等の予定を登録・管理
- 予定の種類や実施形式（オンライン／オフライン）を設定
- 説明会・インターンの参加予定・未定を管理
- 予定を企業に紐づけて管理
- タスク
- ES提出や面接準備等のタスクを期限・メモとともに管理
- 企業への紐づけ、チェックリストによる進捗管理が可能
ES・ドキュメント管理機能
- ES管理
- エントリーシートの設問と回答をセットで保存
- 企業との紐づけや、ユーザー定義のグループによる分類が可能
- 志望動機・ガクチカ等、過去の回答を整理・再利用できる
- ドキュメント管理
- 自己分析や面接対策などの文書をMarkdown形式で作成・保存
認証・ユーザー管理
- アカウント登録・ログイン・ログアウト
使用技術・選定理由
フロントエンド
- React: UIをコンポーネント化し、再利用性・保守性を高めるため採用
- TypeScript: 型安全性を確保し、開発時のバグを減らすため採用
- Vite: 高速な開発環境を構築するためのビルドツールとして使用
バックエンド
- Spring Boot / Java: REST API設計を意識したバックエンド開発経験を得るため採用
- Gradle(Kotlin DSL): ビルドおよび依存関係管理に使用
主要ライブラリ
- Spring Web: REST APIの実装に使用
- Spring Security: 認証・認可の実装に使用
- Spring Data JPA: データベース操作の簡略化のため使用
データベース
- PostgreSQL: リレーショナルデータの管理およびTEXT型の活用のため採用
インフラ
- Cloudflare Workers: フロントエンドのホスティングに使用
- Render: バックエンドのデプロイ先に使用
- Neon: PostgreSQLデータベースのホスティングに使用
その他
- Docker: 開発環境の構築およびコンテナ化に使用
- Flyway: データベースのスキーマ変更をマイグレーションファイルとして管理するため導入
- OpenAPI: API仕様の定義・ドキュメント化、およびフロントエンドの型定義・APIクライアント、バックエンドの型定義等を自動生成
苦労した点
データベース設計・ビジネスロジックの実装
本アプリでは、データの整合性を保ちながら、柔軟に情報を管理できる仕組みの設計に注力しました。
特に選考状況の管理では、前のステップが合格にならない限り次のステップに進めないよう、バックエンドで状態遷移を制御しました。
また、企業一覧などの並べ替え機能では、各レコードに一定間隔で整数のpositionを割り当て、並べ替え時には前後の値の中間値を設定する方式を考案・実装しました。 中間値を確保できなくなった場合のみ値を振り直すことで、更新対象を抑えられるよう工夫しました。
API設計・OpenAPIの活用
本アプリでは、OpenAPIを導入し、API仕様からフロントエンドの型定義・APIクライアントとバックエンドの型定義を自動生成しました。 これにより、フロントエンドとバックエンドの仕様の不整合を防ぎ、保守性を高めることを目指しました。
API設計では、リソース間の関係をエンドポイントにどう反映するかに苦労しました。 そこで、企業に完全に従属する情報はネストしたパスで扱い、独立して管理できる情報はトップレベルのパスに配置し、企業との紐付けをクエリパラメータで指定する方針としました。
この経験から、API設計では各リソースの性質や利用方法を考慮し、一貫性のある構造にすることが重要だと学びました。
コーディングエージェントを活用したフロントエンド開発
本アプリでは、初めてフロントエンドの実装を全面的にコーディングエージェントに任せる開発手法を実践しました。
まず、ディレクトリ構成やコーディング規約を指定した上で、画面要件を伝えてモックを作成させ、 その後、OpenAPIによるAPI定義の完成に合わせて実際のAPIとの連携も実装させました。
一方で、開発途中に新たな設計方針やルールを追加したことで、既存コードの修正や手戻りが発生する場面もありました。
この経験から、自分で設計・管理する部分とAIに実装を任せる部分の責任範囲を明確にし、 事前に方針や制約を整理することが、コーディングエージェントを効果的に活用する上で重要だと学びました。
拡張予定
機能追加予定
認証機能
- メールアドレス認証機能の追加
- パスワードリセット機能の追加
やりとり履歴の自動記録
- 選考ステップの結果変更やタスクの完了等を契機に、企業とのやりとり履歴を自動追加する機能の実装
- 例：一次面接の結果を「合格」に変更した際、企業からのアクションとして「一次面接 合格」を記録
通知機能
- 面接・説明会等の予定に対するリマインダー機能の実装
- タスクの期限に応じた通知機能の実装
ES×AI機能
- 保存したESの内容を元に、AIを利用して文章を生成・改善する機能の実装
機能追加予定
- バックエンドの自動テストの整備
- ログの整備によるエラー調査・運用保守性の向上
- UI・UXの改善
導入予定技術
- GitHub Actions: ビルド・テスト等の自動化およびCI/CDの構築に利用予定