イベント

2020.11.04

飲食店を救え!Firebaseハッカソンに参加しました!

みなさんは「ハッカソン」という言葉を聞いたことがありますか?
ハッカソンとは、Hack(ハック)とMarathon(マラソン)を掛け合わせた造語です。エンジニアやデザイナーが数名集まって、なにか新しいものを短期間で作るイベントのことです。

今回は、先日開催されたFirebase Hackathon #4で「新型コロナウィルスの影響を受けている飲食店をサポートするアプリ」を開発部メンバー5人で作成したので、参加レポートを書いていこうと思います。

ちなみにFirebaseというのはGoogleが提供しているクラウドサービスです。弊社では主に、楽待(大家さん向け)アプリと楽待(不動産会社さん向け)アプリで利用しています。

参加した経緯

「そろそろハッカソン出たくない?」

とある開発部メンバーの一言がきっかけで、ハッカソンへの参加が決まりました。他の人がどうやってFirebaseを使ってサービス開発をするのか知らなかったので、設計の引き出しを増やすという目的でFirebaseハッカソンに申し込むことに。

幸い、参加メンバー集めは特に苦労せず、興味を持った人が自主的に集まってきました。

実は今回参加したメンバーのうちの3名は、去年にも別のハッカソンに参加して「とりあえず動くハリボテを作るので精一杯」という散々な結果を残しています…。「今度こそ絶対に良いものを作りたい」という熱い想いを胸に、今回挑戦することになりました。

作ったもの

今回制作したのは「Jucy」というサービス。お客さんを増やしたい飲食店と、ロケ地を探している食レポYouTuberを結びつけるマッチングサービスです。

プログラミング言語はTypeScript + Next.jsを採用することに。両者とも実務での使用経験はなかったのですが、「新しい技術を試してみたい」というメンバーの希望(ゴリ押し)があり、勉強しながらコードを書いていくという進め方に決めました。

サービス構成図

製作工程

申し込みからイベント当日までは、ざっくりと以下のようなスケジュールで準備を進めました。

1週目:要件定義

はじめの1週間は、「何を作るか決める」時間です。昼休みにランチを持ち寄ってブレストをしたり、使用技術に関して話し合いをしました。

ブレストでは飲食店を助けるためのアイデアが色々出ましたが、「YouTuberに食レポを頼めるサービス」という意見が、時代のニーズに合っていそうということで採用に。

データベース設計は、簡単なメモ書き程度で済ませていました

この時点でサービスのコンセプトを決めて、実装する機能の一覧とUIのワイヤーフレーム(デザインの下書き)を作成しました。「機能一覧」と「ワイヤーフレーム」の2点があれば、あとは各自で開発が進められると判断したためです。

2~3週目:実装

作るものを決めたあとは、実装に着手します。

使用技術のNext.jsは全員初心者レベルだったので、まずは公式のチュートリアルを進め、チュートリアルが終わり次第、業務後や休日の空いている時間で本実装に着手することに。休日は会社のラウンジに自由参加で集まって、お菓子を食べながらお昼ごろから夕方までワイワイと開発をしていました。

タスク管理にはGithub Issuesを使用します。各自好きなタスクを自分を担当に割り振って開発する体制をとりました。

前日:プレゼン準備

急ピッチで開発していたこともあり、前日は不具合の修正に追われることになりました…。(業務では品質を重視していますよ!)

当日のプレゼン資料も作る必要があるので、バグ対応チームとプレゼン準備チームの二手に分かれて作業を進めました。バグ対応チームはGithub Issuesに登録されたバグを片っ端から修正していき、プレゼン準備チームはスライドとデモ動画の撮影を行います。

私はバグ対応チームとして作業していたのですが、最後の最後でデプロイ(Webへの公開)に失敗して焦ったことをよく覚えています。19時くらいには解散予定だったところ、結局23時までかかってしまいましたが、失敗した原因究明をメンバー全員が手伝ってくれたおかげで無事完成させることができました。普段大事にしているチームワーク力が生きた瞬間だったと思います。

当日:発表

感染症拡大防止のため、各チームのプレゼンはZoom上で行われました。発表チームの他に視聴者枠も多数あったので、オーディエンスは全体で50名くらいでした。

どのチームも短期間で作ったとは思えない高クオリティの成果物で驚きましたが、中でも一番驚いたのは「おもちかえりログ」という、ユーザーがテイクアウトできる飲食店を登録してレビューを書けるスマホアプリです。使っている技術がReact Nativeという楽待アプリでも使っているフレームワークだったので、「たった2日でここまで作れるのか…」とメンバー一同衝撃を受けていました。

ZOOM上でのプレゼンは経験が少なく非常に緊張しましたが、Jucyの発表ではスライドに仕込んだ小ネタで笑い声も聞こえたりと、狙い通りのプレゼンができたと思います。

プレゼン中の様子

プレゼン後の視聴者投票を経て、ありがたいことにファーストロジックチームは「オーディエンス賞」「伊藤忠商事特別賞」のW受賞となりました!

どのチームも素晴らしい発表だったので、「まさか自分たちが受賞できるとは…」という嬉しい驚きでした。前日、念入りにプレゼン準備やリハーサルを行ったのが功を奏したと思います。

「アイデア性とUIがよかった」「jucyに登録していないYouTuberにも依頼できるとなお良い」というフィードバックもいただけました。

ハッカソン終了後にインタビューも受けたので、興味のある方は合わせてご覧ください。
Firebaseハッカソンで飲食店を救いたいという想いを持った仲間が集まりました

賞品として本マグロをいただき、メンバー全員でおいしく食べました

おわりに

ハッカソンを含む趣味開発は、試してみたい技術を自由に使える「遊び場」だと思います。「やってみたいけど自信がない…」という方も一度飛び込んでみるといい経験になるはずですよ!

今回の例で言えば、Firebaseを使ってイチからアプリを作ったことで、普段業務で書いているプログラムをより深いレベルで理解することができました。また、Next.jsに関しても今は業務では使っていませんが、メリット・デメリットを挙げられるくらいには理解することができました。ここで得た知見は、新規開発の技術選定できっと役立つと思っています。

また、ファーストロジックは、面白そうなイベントへの参加を提案すれば自然に人が集まってくる環境です。技術イベントに興味のある方はぜひ一度オフィスに遊びに来てみてください!