はじめに
こんにちは!!新卒一年目のパクパク、やまだ25、大村です。
本記事では、私達が参加したエンジニア定例合宿で開発した、ユーザ投票ベースの電車混雑予想アプリを紹介します。
エンジニア定例合宿の詳細につきましては以下の記事をご覧ください。
メンバー紹介
パクパク
- 普段の業務: 入会会員の運用
- 今回の担当: フロントエンド
- ひとこと: アニメで見た合宿の宴会が実在してて感動しました。
やまだ25
- 普段の業務: データ基盤
- 今回の担当: バックエンド
- ひとこと: 3日目にホテルの窓からうっすらと富士山が見えて感動しました。
大村
- 普段の業務: 会員基盤の運用
- 今回の担当: バックエンド、DB
- ひとこと: ホテルで食べた7食全部が豪華でした。
アプリ紹介
概要
チームWATCHME.mdでは、主観ベースの混雑予想アプリを作成しました。
実装したもの:
- ユーザがある路線の区間の混雑率を投稿
- 選択した路線の混雑度をヒートマップのように、区間ごとで色分け
実装しきれなかったもの:
- 曜日や天気、祝日などを考慮して、混雑度に重み付け
- ユーザごとの混雑度の感じ方に応じて、表示を調整
成果物
- 検索画面
- 結果画面
- 経路上の各駅間において、 どのくらい混んでいるのかを色合いで教えてくれます
- 経路上の各駅間において、 どのくらい混んでいるのかを色合いで教えてくれます
- 検索結果
どの程度混んでいたかを共有
使用技術
- フロントエンド: React
- バックエンド: Python(FastAPI)、PostgreSQL
- その他: Docker、Docker Compose
開発の流れ
事前準備
- アイデアソン
- 使用技術調査
1日目: 仕様書作成
- 機能要件
- API設計
- DB設計
- GitHub、Dockerでチーム開発の環境構築
2日目: 環境構築･実装
- 午前
- FastAPI、Reactの環境構築
- テーブル作成
- 午後
- メイン･結果画面実装
- API 中身実装
3日目: 最終調整・成果発表
- 午前
- テスト
- バグ修正
- 午後
- 成果発表
工夫したこと
画面レイアウトについて
メインの画面を混雑率の検索画面とし、ユーザは路線名、出発駅、到着駅を選択するだけで混雑率をすぐに検索するように画面レイアウトを設計しました。
投票画面の部分も同様に路線名と出発駅、到着駅、混雑率を選ぶだけで投票できるように設計し、ユーザの操作数を少なくするよう工夫しました。
タスク管理について
我々のチームではタスク管理としてGitHub Projectsのカンバンを使いました。これにより、各メンバーの作業状況や各タスクの進捗状況を一目で確認することができ、さらに手が空いたら別のタスクにすぐに取り掛かることができました。 また、開発以外のタスク（勤怠の申請や日報の作成など）もカンバンに記載することで申請漏れなどを防ぐことができました。
学んだこと・成長したこと
Zustand
今回の合宿では、フロントエンドの状態管理ライブラリとしてReduxの代わりにZustandを初めて使用してみました。Reduxと比較すると、Zustandはシンプルでした。
Reduxではactionsやreducerなど複数のファイルにわたってコードを記述する必要がありましたが、Zustandでは一つのファイル（appStore.ts）で路線、駅、混雑度データなどすべての状態を管理できました。
|
1 2 3 4 5 |
<code>// Redux: actionTypes.ts + actions.ts + reducer.ts + コンポーネント dispatch(actions.setDepartureStation(station)); // Zustand: appStore.ts + コンポーネント setDepartureStation(station);</code> |
また、メイン画面で駅を選択すると、結果ページでpropsを渡さずに駅データをすぐに使用できた点も楽でした。
Zustandを使用することで、コード量を削減しながらも、コア機能に集中することができ、短時間で実装できました。
FastAPI
バックエンドではFastAPIを使用しました。コードを書くだけでSwagger UIによりAPI文書が自動生成され、別途文書を作成する時間を削減できました。以前Flaskを使ったときより、APIを簡単に構築することができました。
AIの活用
今回の開発で、要件定義やAPI、DBの設計といった上流工程ではNotion AIを活用し、思考の整理やドキュメント化を高速化しました。 また、実装の部分ではClaude Codeを活用することで、コーディングに書ける時間を大幅に削減し、3日間という短い期間で効率的に開発を進めることができました。 開発終盤ではAIの出力結果に対してレビューが不足な部分があり一時的にアプリが起動しなくなる場面もありました。この経験から、AIの出力結果を鵜呑みにするのではなく結果の内容をレビューすることでAIのメリットを最大限活用することができることを学べました。
まとめ
今回のエンジニア定例合宿では、これまでの研修で培ったスキルだけでなく、初めて使用する技術やAIエージェントを最大限活用することができ、大変有意義なものとなりました。
会社の業務から離れて、3日間という短い期間の中で様々な技術を使って開発を進めることができた経験を糧に、今後の研修や業務で生かしていきたいです！
