Money Forward Developers Blog

株式会社マネーフォワード公式開発者向けブログです。技術や開発手法、イベント登壇などを発信します。サービスに関するご質問は、各サービス窓口までご連絡ください。

20230215130734

<特別賞受賞！>有志で挑んだ東京Flutterハッカソンレポート

こんにちは！マネーフォワード エックスカンパニーでFlutterエンジニアをやっているheyhey1028です。

2023年9月30日(土)、10月1日(日)の2日間にかけて開催された東京Flutterハッカソンにマネーフォワード横断有志で参加してきたので、レポートしていきたいと思います！

東京Flutterハッカソンとは

hackathon.flutteruniv.com

東京Flutterハッカソンとは、Flutterエンジニアコミュニティの Flutter大学 とFlutterエンジニアが多数所属する 株式会社ゆめみ の共同開催による、Flutterに特化したハッカソンです。今年が初開催でしたが、100人を超えるエンジニアが参加し、会場のアベマタワーズにて2日間熱い戦いを繰り広げました。

参加メンバー

今回は発起人のしげる氏を筆頭に以下のようなメンバーで参加しました。

左から

  • さかい　ゆうのすけ(@_ski_u)　マネーフォワードPay事業本部所属
  • てらむら　たかお　aka てらお(@trobxd)　デザイン戦略室所属
  • うちにし　こういち aka しげる(@_4geru) マネーフォワードビジネスカンパニー所属
  • おがわ　しょうへい(@heyhey1028)　マネーフォワードエックスカンパニー所属
  • はぎお　あきと(@a_key_bako)　マネーフォワードホームカンパニー所属

マネーフォワードは各ドメインごとにバーチャルカンパニーがあり、それぞれ「個人向けのホームカンパニー」「法人向けのビジネスカンパニー」「金融機関向けのエックスカンパニー」の3つが存在します。その他、さかい氏やてらお氏のようにカンパニーに所属しない事業本部も複数存在する体制となっています。 IR情報

今回集まったメンバーはエンジニア4人にデザイナー1人。見事に所属カンパニーも拠点も横断したメンバーとなり、普段の業務範囲もバックエンド、iOSエンジニア、Androidエンジニア、Flutterエンジニア、デザイナーとバランスの取れたチーム構成になりました。

発起人のしげる氏以外はそれぞれお互い「はじめまして」でした。自分としげる氏は以前Flutter関連のイベントでご一緒した事があり、そこからの縁。しげる氏からこんなイベントあるんだけど、出たい！とお声がけいただき、そこから誰を誘おうか？というところからの始まりでした。社歴の長いしげる氏が思い付くメンバーに声をかけて誘ったところ、このメンバーが集まりました。

全体の体験

初の開催とはいえ、参加人数は100人を超え、会場はわいわいとした雰囲気でした。企業チームも多く、遠くは福岡から参加したメンバーもいました。

お題は「テスト」。そこからは長い長い戦いの始まりです。 てらお氏を中心にアイデアの発散と収束を繰り返します。あっという間に過ぎていく時間。

気分転換にみんなでカニ玉チャーハンを食べたり

アベマくんと写真を撮ったり

何度目かの方向転換の末、なんとか方向性を定め、いざ開発。

あっという間に1日目の終了時間を迎えるも、進捗は全体の５割程度。普段からFlutterを書いてるはぎお先生の爆速開発もあり、あながち悪いペースではない。

私は子供の寝かしつけの為、一時離脱。残りのメンバーはオフィスに移動して終電まで開発を続けました。

その後は各自帰宅し、担当分を仕上げて翌朝会場に集合です。自分は寝落ちした1時間以外は寝ずに開発し、翌朝会場入りしました。

出来上がったもの

私たちの作り上げたサービスは「Manabi Forward We」。どこかで聞いたことのある名前ですね。。。

私たちのメンバーにとって共通のテストとして思いついたのは「TOEIC」でした。メンバー共通の喫緊の課題が弊社エンジニア組織の英語化への対応です。

moneyforward-dev.jp

社内ではTOEICやPROGOSといった英語力テストで一定レベル以上に達することを目標として日夜頑張っているのですが、複数の英語アプリを使いながら自分がどれくらい学んできたのかが分からなくなる。またチームをリードする側の人間はメンバーがどれくらい学習できているかが分からない。

そんな悩みをマネーフォワードの代名詞とも言える「 アグリゲーション 」で実現しよう！というアイデアです。英語学習の家計簿「英語学習版マネーフォワードME」のようなサービスです。

マネーフォワードMEにおけるアグリゲーションとは、金融機関やクレジットカードの情報をAPI等を用いて収集し、集めた情報を一箇所で閲覧できる状態にすることを指します

デザイナーてらお氏が夜なべして作ってくれた発表資料がこちらです👇

秀逸なサービス名を考案してくれたのもてらお氏。さすがです👏

技術スタック

フロントエンドはFlutterを用いたモバイルアプリとFlutter Webによる管理画面。バックエンドとインフラは最近注目度が増しているBaaS「Supabase」を使いました。

supabase.com

Supabaseが提供しているサーバーレス関数 Edge functionsをしげる氏が当日にキャッチアップし、複雑なバックエンド処理も実装してくれました。

結果発表

結果は特別賞「ゆめみ賞」を頂きました！🙌 優勝とまではいきませんが、評価頂けたことは素直に嬉しい。

決め手は「堅実なチーム開発」。サービスに加え、細かいPRとレビュー、充実したREADMEなどチーム力が問われる評価ポイントで選んで頂きました。 さかい氏が最後の最後に綺麗に整えてくれたREADMEが大きく受賞に寄与してくれました🥳

レポジトリ公開しているので興味のある方は覗いてみてください👇 github.com

ちなみに優勝はFlutter WebとFirebaseを駆使して、サイゼリヤの間違い探しの同時100人プレイを実現した「Widget Wizards」というチームでした。Flutterエンジニアコミュニティ「Flutter大学」のメンバーによって構成されたチーム。その場で触って楽しめるものはやっぱり強い。

メンバーコメント

最後にチームメンバーのコメントを紹介します。

てらお

リーダーしげるさんに声をかけて頂き参加しました！ ハッカソン初参加でデザイナーが果たして役に立てるのか？と不安でしたが、いらぬ心配でした。

みんなのチームワークが最高で、作るものが決まった後は阿吽の呼吸。楽しくパスし合い、お互いを信じて背中を預け合い、結果最高のアウトプットに🔥ハッカソンはデザイナーも楽しめる！みんなでモノづくりするのはやっぱり面白いですね。

はぎお

ハッカソン参加者を募っている社内Slackに いじらしく 👀スタンプをつけていたら小川さんに誘っていただけました。 普段の業務以上にスピード感ある開発ができてとてもいい経験になりました！

バランスいいチーム構成で、各々がプロフェッショナリズムを発揮できる強いチームで参加できて幸せです。

他のチームのアウトプットのクオリティにも圧倒され、大いに刺激を受ける機会となりました。とはいえ力は出し切れたので例え受賞はなくとも爽やかな充足感は得られていたのかなと思います。

最近Flutterのコードを書けていなかったのもあるのですが、プロトタイピング能力をもっと鍛えてまた似たような機会で挑戦できれば良いなと思いました💪

しげる

ハッカソンが好きなエンジニアのしげるです。 普段は一人でハッカソンに参加したりしているのですが、会社の人と一緒に出たいな〜と思い声をかけました。

それぞれ専門が違うので、Flutter, Supabaseを使っていろいろなことを学べてよかったです。業務では、関わらないメンバーで、お互いをリスペクトし、プロフェッショナルな仕事をやり遂げ、スピード感高く、普段とは違った開発ができて、とても楽しかったです。

優勝はできなかったですが、ゆめみ賞をいただき、持てるものを全て出しきれました。

さかい

声をかけていただき勢いで参加を決めたものの、Flutterを普段からバリバリ扱っているわけでもないので、果たしてどう貢献できるのだろうかと悩みながら始まったハッカソンでした。

しかし蓋を開けてみると、企画や開発、発表準備の各段階でそれぞれの能力を存分に発揮するメンバー達に引っ張られる形で、Flutterだけでなく様々なことに取り組むことができ、とても満足感のある二日間になりました！

賞をいただいたことも非常に嬉しいですし、普段は関わることがない方々とチームを組んだことで、同じ会社にいるけれども話したことがなかった素敵なメンバーと知り合うこともでき、参加して良かったと心から思います！

まとめ

以上、東京Flutterハッカソンにグループ横断の有志で参加したレポートでした！

所属する事業本部もバラバラで、初めて一緒に作業をした5人でしたが、驚くほど議論も作業もスムーズで、とても楽しかったです。これもマネーフォワードのカルチャーが成せる技なのかなと感じました。