はじめに
こんにちは。新卒1年目の佐藤、緑川、keyliumです。
本記事では3日間の社内ハッカソンにて私たちのチームが開発したWebアプリケーションについて紹介していきます。
開発合宿の概要記事はこちらをご覧ください。
メンバー紹介
普段、私たちはOJTジョブローテの3期目で、それぞれ異なる部署で業務を行っています。
佐藤
- 普段の業務：会員向けアプリ「マイニフティ」の開発
- 今回の担当：バックエンド
- ひとこと ：普段触らない技術に悪戦苦闘した楽しい3日間でした！
緑川
- 普段の業務：IPv6関係のプロジェクトのAWS移行
- 今回の担当：フロントエンド
- ひとこと ：ギリギリまで粘って欲しい機能が実装できて安心しました！！！！
keylium
- 普段の業務：社内ネットワーク運用
- 今回の担当：ゲームロジック
- ひとこと ：作りたいものはシンプルでしたが、実際に作ると大変でした！
制作物紹介
概要
複数人で整数を投票し、最小で固有の数字を投票した人が優勝するゲームを遊べるWebアプリケーション
遊び方
- HOME画面にて、部屋を選択、ユーザー名を入力し、ENTRYを押します
- 投票画面へ遷移後、同じ部屋の他ユーザーと数字が重複しない最小の数値を予想して入力します
- 投票画面では数字のスタンプなどが用意されており、駆け引きができます
- 同じ部屋に3人が集まり、3人全員が投票完了すると結果発表に自動遷移します
- 3人の中で重複なし かつ 最小の数値に投票した方が優勝となります
システム構成
今回は
- フロントエンド：TypeScript + React
- バックエンド ：AWS
で開発を行いました。
バックエンドにはAWS Amplifyを採用しました。
フロントエンドはAWS Amplifyにホストし、4つのDynamoDBとのやりとりにはAWS AppSyncのGraphQLを使っています。
AWS Amplifyとは？
Webアプリケーションやモバイルアプリの開発を高速化してくれるサービスです。
使用することで以下のメリットが得られます。
- 認証基盤やストレージ、データベースなど、開発に必要なリソースを自動で作成してくれる
- GitHubのリポジトリと連携することでCI/CDのプロセスを自動化し、環境ごと（本番 / 開発 / ステージング / ローカルなど）・プルリクエストごとに専用のリソースを作成してくれる
今回は開発日数が3日間と短い時間だったので、AWS Amplifyを使うことで開発スピードを早めることを図りました。
AWS Amplifyのおかげで、設定ファイルで必要なリソースを定義するだけで手動で作成することなく、また、PRが来るごとに正しく動作しているのか、実際にアクセスして確認することができました。
一方、デメリットとして、
- 自動でリソースを作ってくれるため、内部でどんな操作をしているのかが不明
- Gen 2のバージョンの日本語記事が少なく、英語記事を読む or 手探りで開発をしていく必要がある
の2点が挙げられます。
特に2つ目について、3人ともAWS Amplifyを使うのが初めてだったこともあり、とても苦戦しました。
後ほど、AWS Amplifyについての記事を投稿する予定です。
公式ドキュメント（Gen2 React版）はこちら
工夫した点
- AWS Amplifyを使うことでCI/CDやAWSリソース作成の自動化
- AWS公式のAWS Amplify用のテンプレートamplify-vite-react-templateを使用し、仕様理解を促進
- AWS AppSyncのPub/Subによってユーザーなどの状態をリアルタイムで監視
上記3つの技術詳細につきましては、後日投稿予定の記事にて記載いたします。
- Notionを活用したスキーマ設計
- UIコンポーネントライブラリ（Material UI）を使用することでデザインの統一
- GitHubでカンバンを作り、それぞれが行う作業を可視化
- アーキテクチャ図を早期に作って全メンバーで認識を共通化
学んだこと・成長したこと
- 初めて触るAWS AmplifyやReactの理解
- 公式ドキュメントを読み込むことの重要性
- タスクの取捨選択の重要性
- PRレビューへの積極的参加の重要性
- 開発における体力・集中力アップ
まとめ
私たちが3日間で開発した制作物について紹介しました。
普段の業務の中でここまで集中して1つのものを開発できる機会はなかなかないと思うので、とても良い経験となりました。
十分なエラーハンドリングが無かったり、テストコードを書いていなかったりと、完璧ではありませんでしたが、3日間で動くものができた！ということを自信に、これからの業務に生かしていこうと思います！
