第1回オンラインハッカソンに参加してきた!!

Ruten主催第一回オンラインハッカソンに参加してきました!

今まで参加したハッカソンの中でまじで一番楽しかった。これまじ

ハッカソン概要

リモートワーク時代に必要になるツールをテーマにチーム毎にプロダクトを考え、制作物を作り、オンラインで発表する(Zoomを使った)。

自己紹介

チーム名は賞金で二郎一生分食べたい です。

  • やぱた: 二郎が好きです

twitter.com

  • reudくん: 二郎が好きです

twitter.com

  • たかひろさん: 二郎が好きです

twitter.com

僕らは去年の夏、某F社のサマーインターンで出会いました。インターンで結構仲良くなって、インターン中も後も結構交流してました。

成果物

Cheers!ってアプリです。知らない人と気軽にオンライン飲み会できるアプリです。

話題を選んで、部屋を作るor入るなどをしてテレビ通話をすることができます。4人までテレビ通話できます(4人が一番会話が弾みそう)。

f:id:ziroppe:20200525192706p:plain
Cheers!

デプロイ先のリンクは下です↓ cheers.reud.net

GitHubのレポジトリのリンクは→ https://github.com/yuziroppe/we_wanna_eat_Jiro

使用技術・環境

  • SkyWay (通話機能, P2PSFU技術を利用しています)
  • Cloud Firestore (DB)
  • Firebase Authentication
  • Vercel (CI構築)
  • git/github (バージョン管理)
  • now (デプロイツール)
  • Next.js (SSR)
  • Typescript

これはreudのブログからパクりました。

開発の感想

開発がめっちゃ楽しかった!!信頼できるチームメイトはマジで偉大!

皆さんかなり強強で、開発がとんとん拍子に進んで楽しかったです!!二週間でこんだけコミット数あるのエグい(コメントがreudのパクリになっている気がするが気にしない)

f:id:ziroppe:20200525200029p:plain
commit数

なんでこんなに開発が楽しかったか振り返ってみます。

1. アプリ仕様に関する手戻りがなかった

最初にそこそこしっかりアプリの仕様を決めたため、アプリをピポットするみたいなことが全く無く機能に関する意思疎通が取りやすかった。

2. お互いにめっちゃ質問しあえた

しっかり認識できなかった部分に対して、自分が理解できるまでお互い質問しあえたため、仕事を始めるとき認識間違いがほぼなかった気がする。

3. タスクの粒度、誰にタスクを投げるかがちょうどよかった

これは自画自賛的なこともあるが(自分が仕事の割り振りを結構決めることが多かった)、仕事をお願いする側、お願いされる側で双方向で議論してタスクをうまく切り分けできた気がする。

あと、それぞれお互いが得意な技術における仕事を投げれた気がする。 例えば、reudの場合はFirestore周り、チーム開発手法に関する知見、たかひろさんはFirebase Authenticationやプレゼンテーション、デザイン周り、自分はNext、React特有の技術周りが得意だった。

4. 皆開発が早い!!

チームメイトが非常に優秀なので、開発スピードが皆早く、どんどんと機能が出来上がっていくのがとても楽しかった。 どんどん新しいプルリクが出て、レビューをし、masterにマージするペースが本当に早かった!!

5. ペアプロ、コードレビューで見つかる新たな発見

自分一人でコードを書いていると乗り越えられない壁も、仲間となら乗り越えられる。これまじ

実装に詰まっているときは、それを早めに伝えてペアプロorプルリク書いてレビューをもらうができたのが大きかった。

実際に今考えている実装方針を仲間に伝えるともっといいやり方を仲間が教えてくれたり、がお互いにできた気がする。

詰まっても議論することで新しい発見が得られて壁を乗り越えられた気がする!!

6. 技術選定

TypeScript, Next.jsを導入し、バックエンドをFirebase(Authentication, Firestore)を利用したことで開発スピードが爆速だった気がする。

ESLint, Prettierを途中から導入して、コードに統一性が取れたのも大きかった。

デプロイもgit pushしたら自動で完了されるようになったし(Vercelまじで神)、ハッカソンにうまく合った形で開発できた気がする。

開発で大変だったこと

1. SkyWayの通話周り

SkyWayのSDKを用いて、複数人テレビ電話を実装したわけですが、Peer(ルーム参加者)が入るとき、抜けるときの処理が大変だった。

最初の方は、誰かが部屋を抜けるとうまくMediaStreamを受け取れなくなって、エラーを吐いてサーバが落ちたりとか色々あった。

コンポーネントのライフサイクルを意識して、通話画面に入ったら自動でPeer通信できるように実装するのがマジでムズかった。

たかひろさんが最高のデザインを仕上げてくれたおかげで、自分はSkyWayの通話ロジックの実装に集中できた。。。

2. 部屋に入るor抜けるときのDB処理周り

これはまじでreudが神だった。

彼がルーム入退室におけるDB処理をほぼすべて書いてくれた気がする。

結果

入賞できた!3位を頂きました!!

f:id:ziroppe:20200525201503p:plain
3位!!

周りがかなりレベルが高い中入賞できたのはかなり嬉しいです!!

他のチームへの感想

みんなつええ...

Zoomにニコ動みたいに字幕をつけるアプリケーションを作成するチームがあって、やべえ...となりました。

また、相手側のスマホで映像のある場所にタップすると、現実世界でタップされた場所にレーザーポインターが指されるシステムを作るチームもいて、自分たちではできないアプローチで面白いアプリを作っているチームがいて感心しました。

交流の時間もめっちゃ楽しかったです!!

ハッカソンに対する良かった点、改善希望点はreudとほぼ同じなので飛ばします。

最後に

一緒にハッカソン完走してくださったチームメイトに感謝でいっぱいです。

次もISUCON頑張ろうな

(追記) Gitの鬼、権化になりてえ...