おうちハッカソン2でReact/Django計算ゲーム開発

5/6/2021•Hackathon React Django Personal Development For Kids

外出出来ないGWなので、ハッカソンデビューしてみました。 3日間で作り切ることで自身の成長にもなり、参加者の皆さんの開発への姿勢やプロダクト、技術のレベルの高さを体感でき非常に勉強になりました。

自分@tanosugi の簡単なプロフィールは

昔Visual C++使ってバイトしてたが暫くプログラミングを離れていた
個人開発をしてみたくなり、1年前からUdemyでReact、Django、AWS等を勉強
ポートフォリオを一つ作成中で8割出来たところ

という感じです。

おうちハッカソン2

期間は3日間で、チームで作るもよし、個人で作るもよし、勉強会するもよし、最後の発表会で各自10分間で成果を共有しました。昨年に続き二回目の開催なのでおうちハッカソン2です。
テーマ：みんなで楽しめる何か
スケジュール： 5/3 10:00 自由に開発開始、発表会まではSlackで開発状況を自由につぶやく 5/5 17:00 発表会、投票して賞を発表 5/5 20:00 懇親会

https://connpass.com/event/211876/

作成したもの：計算ゲーム

足し算、引き算、掛け算、割り算のどれかを選び、10問回答するという非常に単純なゲームです。
Webアプリですが、スマホのサイズに合うように作ってあり、PCでもスマホでもブラウザで遊べます。
対戦ありを選ぶと登録、対戦IDの共有を経て対戦が始まります。対戦中は相手の進捗(何問終わったか)も表示されます。
Demo: 削除済み Github：https://github.com/tanosugi/calcgame

作成目的

楽しみながら子供が勉強できるものを作成したい
プログラミングを勉強すれば何が作れるかを子供に理解してもらう
計算ゲームで対戦できるものが少ないので、自分で作ろう
公園や友達とのLine ビデオ通話でも子供同士が対戦できるのでは
1台のスマホを2人で操作する対戦アプリ、コンピューターと対戦するアプリはあるが通信対戦するアプリは見当たらない

使用技術

FrontendはReact/Typescript, Material UI, react router等を使いました。
BackendはDjango、仮想環境はpoetry、データベースはdocker上でPostgreSQLを使いました。
FrontendとBackendの間はGraphqlで通信しています。
デプロイはAWS CLI経由、S3とEC2に置きました。EC2上で開発しコード管理はGithubです。
CIは開発期間3日間なので無しです。簡単なシェルスクリプトを走らせるとデプロイできるようにしました。

作成スケジュール

3日間ずっと作っていた感じです。
期限が区切らた環境で必死に目指したものを作り切ったので3日間で成長した実感があります。去年は5日間だったようですが、自分としては3日間がちょうどよい期間でした。
1日目午前：大まかなデザインとデータ構造を設計 1日目午後-夜：バックエンドを作成
2日目午前-夜：フロントエンド
3日目午前-16:00：フロントエンドとバックエンドの繋ぎこみ 3日目 16:00-17:00：発表原稿準備 3日目 17:00 発表会、投票して賞を発表 3日目 20:00 懇親会

###1日目午前を終えて大会参加者つぶやき用のSlackに投稿したデザインとデータ構造計算ゲームのデザインのスクリーンショット.png

参加して得られたもの

参加者の皆さんの発表を聞き自分もまだまだ勉強しなくてはと思いました。私はこの1年で学んだ一番得意分野の言語のみを使ったのですが、普段と違う技術に挑戦しながら3日間でプロダクトまでもっていったグループも多かったのは驚きでした。
音声入力チャット、自然言語処理、ブラックジョークの入ったゲーム、2年かけて制作中の本格ゲームアプリ、と非常に幅広いテーマ、様々な技術で面白かったです。
私が作成した計算ゲームの相手の進捗(今何問終わったか)の表示は「Graphql経由、Django経由、SQLに自分の進捗を置きに行って、それをゲーム番号をキーに相手の進捗を取り出す」という方法を取りました。永続化する必要もなく短時間で通信するので、少し邪道だったようです。一般的には「WebSocket使うかWebRTCでP2P」を使うというのを発表時に教えていただきました。
懇親会では、「宣言的UIでないUIとは何か」、「ハッカソンでテストを書くべきか」、「コードフォーマッタはローカルとCIのどちらで走らせるか」、「ホームページ作成を請け負うなら適正な単価は」等を話せたのも、普段独学で進めている自分としては非常に楽しい時間でした。
ご一緒させていただいた皆様、ありがとうございました。