このプロジェクトは、株式会社ゆめみのフロントエンドコーディング試験として開発された、都道府県別の総人口推移グラフを表示するSPA（Single Page Application）です。
総開発時間: 60時間程度
- 都道府県の選択
- 選択した都道府県の人口推移グラフ表示
- 複数都道府県の同時比較
- 人口カテゴリー (総人口、年少人口、生産年齢人口、老年人口) の選択と表示
- React (v18.3.1) - UIライブラリ
- TypeScript (v5.2.2) - 静的型付け言語
- Vite (v5.3.1) - 開発環境とビルドツール
- Axios (v1.7.2) - HTTPクライアント
- Recharts (v2.12.7) - グラフライブラリ
- Jest (v29.7.0) - テストフレームワーク
- React Testing Library (v16.0.0) - Reactコンポーネントのテスト
-
リポジトリをクローン:
git clone https://github.com/Ojoxux/yumemi_intern_assignment.git
-
プロジェクトディレクトリに移動：
cd yumemi_intern_assignment -
依存関係のインストール：
npm install
-
開発サーバーの起動：
npm run dev
-
ブラウザで表示されたローカルホストのURLを開いてアプリケーションにアクセス（通常は http://localhost:5173）
テストを実行するには以下のコマンドを使用：
npm testテストカバレッジを実行するには以下のコマンドを使用：
npm run test:coverageこのコマンドを実行すると、テストカバレッジレポートが生成されます。コンソールにサマリーが表示されるほか、詳細なレポートはプロジェクトルートの coverage ディレクトリ内にHTML形式で生成されます。
ブラウザで coverage/lcov-report/index.html を開くと、より詳細なカバレッジ情報を確認できます。
プロダクションビルドの作成：
npm run buildこのアプリケーションは、Vercelにデプロイされています。 デプロイされたWebサイトは、以下のURLから確認できます。 https://yumemi-intern-assignment.vercel.app/
このプロジェクトを通じて、以下の点で改善の余地があることに気づきました：
-
コミット管理
- 作業後のコミットを忘れることがあった
- 改善策：作業の区切りごとに定期的なコミットを心がける
-
ブランチ管理
- ブランチ名と編集内容の不一致
- 誤ったブランチへのプッシュ
- 不適切なブランチでの作業とマージ
- 改善策：
- 作業前にブランチを確認し、適切な名前で新しいブランチを作成する
- 誤ってプッシュした場合は
git cherry-pickを活用して修正する
-
プルリクエスト管理
- ベースブランチの選択ミス
- 改善策：プルリクエスト作成時に必ずベースブランチを確認する
-
同期とデプロイ
- リモートブランチとの同期不足によるデプロイエラー
- 改善策：新たな作業を始める前に必ず
git fetchやgit pullを実行し、最新の状態を維持する
これらの経験から、Git の基本的な操作とワークフローの重要性を再認識しました。今後のプロジェクトでは、これらの点に特に注意を払い、より効率的で確実な開発プロセスを目指します。
このプロジェクトには、さらなる改善の余地があります。以下は、時間や範囲の制約により実装できなかった機能や改善点です：
-
UIの改善
- チェックボックスをよりわかりやすく、使いやすいUIに変更
- モダンなUIコンポーネントライブラリの導入による全体的なデザインの向上
-
パフォーマンスの最適化
- 大量のデータを扱う際のレンダリング最適化
- データのキャッシュ機能の実装
-
追加機能
- グラフの表示オプション（線グラフ/棒グラフの切り替えなど）
-
テストの拡充
- エンドツーエンドテストの追加
- より詳細なユニットテストの実装
これらの改善点は、今後のバージョンアップや機能拡張の際に検討していきたいと考えています。