ほりすのぶろぶろぶろぐ

ほりすのぶろぶろぶろぐ

非情報系から最高のエンジニアを目指す旧帝大学生

Firebase Startup Hackathonに参加しました

先日、FIrebaseを使ってサービス開発をするHackathonに参加したので、その概要と感想をまとめたいと思います。

Firebase Startup Hackathon

f:id:kurutabrog:20200121090424p:plain
connpassからの切り取り

上記画像に記載の通り、SingularitySocietyさん主催のFirebase Hachathonでした。
自分は初のHackathon参加なので、新鮮でした。

内容は、

Firebaseを使い、WordPressのようなCMSを開発していただきます。

というもので、

Firestoreでのラフなデータ構造を共有して、それに基づいて、Web, iOS, Androidなど、各人各々の得意な環境で実装を行っていきます。

とのことでした。

ここでいうCMS(コンテンツ・マネジメント・システム)は、ブログのようなイメージで、現在台頭している、

のようなサービスを作ろうというものです。

企画側でfirebaseを使ってサービスを作るためのアイデアソンをした際、WordPressって以外と古くない?新しくfirebaseで作り直そうよ、となったそうです。

WordPressの特徴である
- サーバーが必要
- PHP
- 20年前の設計
- MySQL
- 複雑

と比較して、

firebaseを使うと

  • スケールが青天井
  • サーバレス
  • Realtime Webで、クロスプラットフォームにも対応
  • 無料枠がある
  • NoSQL, NodeJS,Cloud Functionが使える

などのメリットがあり、確かにfirebaseでの再設計は良さそうという所感でした。

叩き台

今回のHackathonは、上述の通り1から実装するのではなく、既に主催側である程度実装したリポジトリに、新しい機能をつけるという趣旨でした。
そのリポジトリこちら

詳細はconnpassにも記載あります。
firebase-community.connpass.com


で、こちらのリポジトリなのですが、 書かれている言語及びフレームワークが、
React
だったんですね。

自分は、1年前にプログラミングを始め、それ以降Android一筋で開発してきたため、
Reactは言うまでもなく、JavaScript自体全くわからん状態なのです。


いやconnpassに載ってるし予めRepositoryみとけよって話なんですけど、

本イベントでは、Firestoreでのラフなデータ構造を共有して、それに基づいて、Web, iOS, Androidなど、各人各々の得意な環境で実装を行っていきます。

とか、対象者欄に

iOS/android/Flutterに興味がある

と記載があり、

「あ、レベル感的にこんな感じなんだ。Androidで開発するぞ💪」なスタンスで参加したので少し驚きました。 ※全然文句を言ってるわけではなく、純粋に驚いたという感想です


今回自分は、Firebase運用経験もなく、枠が余ってそうだったので初心者枠で申し込みました。
Hackathonの参加者を見る感じ、

  • SIerでマネジメント寄りのポジション
  • デザイナーだが最近プログラミングを始めた

という初心者から

  • 個人開発でも業務でもFirebaseを使っている
  • 言語のコミッター

などのつよつよエンジニアまで幅広くいらっしゃいました。

初心者は中級〜上級者と一緒に設計/開発してみましょうという雰囲気でした。

やったこと

本題に入ります。

アイスブレイク(10:00~10:15)

特に初めからチーム分けされているわけではなく、適当に座った席の周りの人たちと軽い自己紹介のようなものをしました。


白紙を4分割して、
1. 名前/やっていること
2. Firebase習熟度(☆5段階) 3. どんな技術が好き/得意か 4. Firebaseを絵で表すとしたらどんな絵か


を互いに発表し合いました。

4つ目はみなさんもちろん"🔥"を描かれていて、
そりゃそうですよねw
って感じになりました。

リポジトリHackathon概要説明(10:30~11:00)

これは上述したので省きます。

Firebase LT会(11:00~11:40)

Hackathonを始める前に、Firebase個人/業務で使っててすごく分かるマンな方たちが、1人10分で4名LTしてくださいました。

以前のFirebase Hackathon?Ideathon?で優勝された方々が、実際にFirebaseを使ってサービスを作ったそうで、LT会でもそのお話をされていました。

slidelive.jp

一言で言うと、リアルタイムなスライド共有サービスで、 登壇者がスライドを移動すると視聴者のスライドも追従します。
また、画面端にコメントを書き込めるので、わざわざ tweetdeckとかでハッシュタグ追いかけたり、公のTLを荒らさずに済むので良いなと思いました。

(個人的にTwitterハッシュタグつけてLTの内容を連続投稿するのはあまり好きじゃない... 需要と供給が一致していないことが多い気がする)


LTのスライドも上記のリンクのFirebase Startup #3 Hackathonにあると思うのでご覧になりたい方は是非。

お昼休憩/チーム分け(12:00~12:20)

本当は実装の前に"設計"タイムがあったのですが、LTが白熱したため時間が取れませんでした。
お昼休憩も20分ほどしかなかったのですが、お弁当を用意していただいたので、食べながらチーム分けを行っていました。


叩き台は主に、

  • ログインができる
  • マークダウンで記事が投稿できる という2つの機能に止まっていたため、  

チーム分けは、既存の叩き台にどんな機能を付け加えたいかをアンケートを取り、その機能を付け加えたい人同士が適当にチームを組んで実装するという割と勢いのある分け方でした。


機能の候補としては、

  • SNSシェア機能
  • お気に入り機能
  • TypeScript化
  • コメント機能
  • テンプレート導入
  • タグ導入
  • etc...

がありましたが、Reactが全くわからん状態で複雑な機能を実装できる自身がなかったため、SNSシェア機能を選択しました。

チームメンバーはほぼ全員がReactを触ったことがなく、チームエンジョイ勢として実装に取り掛かりました。

実装(12:20~15:20)

まあここは言わずもがなですね。


ほぼ何も出来ませんでした


悔しい。

一応機能は完成したので全く出来なかったわけではないですが、参加前の自分の期待値より大幅に下回っていたので自己評価は低めです。


流れとしては、チームで要件を話し合い、要件を細分化し、チーム内で割り振ってReactで要件を実装する方法を調べて、できそうであれば実装
といった感じでした。

Android開発しかやっていないと、Android APIであったり、ライブラリの使い方、Androidにおけるライフサイクルには詳しくなれるのですが、
Web関連の知見が全くないんですよね。(あたりまえ)

なので、ルーティングであったり、リダイレクト、そもそもJavaScript/Reactがわからなかったり....
今回の限られた時間の中で全てを理解するのは至難の技でした。というか無理でした。


ですが、最低限のITリテラシーはあったため、なんとか見様見真似でTwitterシェア機能をつけることに成功しました。

おわりに

実装が終わったあとは発表、講評、懇親会でした。

とくに順位を競い合うイベントではなかったためここは省略します。
他の班も限られた時間ではなかなかうまく実装ができなかったようで、大変でしたね、と慰め合いました。



今回のHackathonは、参加前の期待値が高すぎて、少し思ったものとは違う感想ではあるものの、
クオリティの高いReact + Firestore + Cloud Functionのサンプルコードを得られてかつWeb領域へのやっていきの必要性を感じられた良い機会になったかなーと思います。

というか、今回Firebase HackathonなのにFirebaseのこと全く書いていないですね。
というのも、実装テーマがFirebaseにあまり関係なかったことと、設計タイムが取れなかったためFirebaseの知見はあまり得られなかったので、リポジトリを眺めつつ、勉強していこうと思います。

Firebaseのイベントは、次回は2月末の開催だそうです。
次も参加しようと思います。
Firebase + Webの知識つけるぞ。