こんにちは！アプリケーションサービス部ディベロップメントサービス 1 課の滝澤です。
本記事をご覧いただき、ありがとうございます。
昨年、私は ANGEL Dojo に参加し、チームとして成果を出すために多くの挑戦をしてきました。本記事では、その経験を通して得た技術的な学びや成長について振り返ります。
はじめに
私が昨年参加した ANGEL Dojo の技術的な観点に絞って振り返ります。 概要や技術以外の話は以下の記事をご参照ください。
また、以下で紹介する内容は、私が ANGEL Dojo に参加した際の経験をもとに書いています。 これが正解というわけではありませんが、効率的な開発ができたと感じています。
もし来年参加を検討している方がいれば、この記事が少しでも参考になれば幸いです。
全体的なアプリケーション設計
設計プロセス
- Figma を使用してワイヤーフレームを作成しました
- 大まかな流れとしては ワイヤーフレーム → API 設計 → アクセスパターンを考慮した DB 設計 → フロントエンド/バックエンド/インフラの開発 のように進めました
- 開発経験者が私のみであり、私はフロントエンド開発の方が経験が多かったため、フロントエンドの設計を中心に進めた
API 仕様書
- API 仕様書: OpenAPI 形式を採用
- API 仕様書を作成し、フロントエンドもバックエンドも仕様書を参照して開発を進めました
- Redocly を使用して仕様書を公開し、チーム内で共有しました
ブランチ戦略
- 大まかに以下のブランチを使用し、ブランチとデプロイを紐づける管理をしました
- feature ブランチ: 開発用
- staging ブランチ: ステージング用
- production ブランチ: 本番用
- PR 作成・更新時に自動デプロイが実行されるように設定しました
- CI/CD パイプラインには自動テストを組み込み、品質を担保しました
フロントエンド
技術選定
- React / Vite / TanStack Router: 知見があったため採用しました
- shadcn/ui: モダンな技術に触れてみたかったため採用しました
- Tailwind CSS: 柔軟かつ効率的なスタイリングを実現しました
- Orval: OpenAPI 仕様書から API クライアントを自動生成し、モック API も生成可能です
工夫した点
- レスポンシブデザイン:
- メインターゲットはスマホユーザーだが、管理画面は PC サイズでも利用できるようにレスポンシブデザインを採用しました
- API クライアント生成:
- Orval を活用し、API の型安全性を確保しました
- バックエンドとの連携がスムーズになりました
得られた成果
- モダンな技術スタックにより、開発効率が向上しました
- ワイヤーフレームを早い段階で作成してメンバーに共有することでイメージをより具体的に共有することができました
バックエンド
技術選定
- Python（LangChain 周り）:
- LangChain は Python のサポートや情報が豊富だったため採用しました
- ※ 後半には LangGraph を採用し、一部で TypeScript も活用しました
- TypeScript:
- メンバーの技術スタックを考慮し、その他の部分は TypeScript を採用しました
工夫した点
- API クライアント生成:
- OpenAPI Generator CLI を使用し、型安全な API クライアントを生成しました
- README の充実:
- 開発初心者でも迷わないよう、README を充実化しました
得られた成果
- 型安全性が確保され、バックエンド開発の安定性が向上しました
- README の充実により、開発初心者でも迷わず開発に参加できる環境を整えました
学びと成長
- フロントエンド／バックエンド／インフラの全体設計を通してそれぞれの手札が増えたように感じます
- 今後はその手札を増やせるよう、新しい技術にも積極的にチャレンジしていきたいと考えています
おわりに
最後までありがとうございました！ 少しでも参考になれば幸いです。
