Flutter初心者がおうちハッカソン参加してきた
はじめに
現在，新型コロナウィルス感染症毎年恒例で行われているオフラインハッカソンが軒並み延期しているようです．
これに21卒で同期になる予定の友達4人とCyberAgentの人事のごってぃさんの計5人のチームで参加してきました．
とても楽しかったので記事に残したいと思います．
おうちハッカソンとは
詳しくはconnpassの詳細を見てみてください．
簡単に説明すると期間は一応5日間あってフルリモートで行うハッカソンです．
そのうち何日参加するのかやメンバー構成は自由でした．
テーマはお家で楽しめるなにかです．
参加したのは全体で40人弱くらいいました．
チーム構成
チームは5人いましたが，フロントエンドが4人とバックエンド1人という偏った構成でした．
フロントエンド
バックエンド
やったこと
つくったもの
僕は今まで何回か大学の友達とハッカソンに参加したことかあるのですが，アイデア出しでいつも躓いて時間を取られて開発に時間があまり取れず最後死にかける経験をしてきたのでアイデア出しは収束させるのに苦手意識がありました．
ですが今回はサクッと決まって12時位にはアイデアが決まって昼休憩後には機能の洗い出しや，今回最低限実装したい機能の決定と役割を決められていたと思います．
作ったのはこれです．
新型コロナウィルスによって家にいる時間が増えた今，家の掃除をしたり断捨離する人が増えているそうです．
そこで，掃除する前のBefore画像と掃除した後のAfter画像を投稿してどのように掃除したかやこういう感じに掃除しましたというのを楽しく共有できるSNSを考えて作りました．
どのような機能があるのか簡単に説明すると，先程の画像の左上の投稿一覧TL画面の上の検索入力をタップすると左下の画面のようにカテゴリー別で検索できます．一覧に表示される投稿画像は掃除する前のBeforeの画像が表示されてユーザにAfter画像に興味をもたせるような意図があります．
投稿をタップすると上段の真ん中の投稿の詳細画面に飛んで，Before画像からAfter画像までゆっくりフェードイン・フェードアウトのアニメーションとともに，劇的ビフォー・アフターの匠のBGMが流れる仕様になっています．
この詳細画面の部分は僕が作ったのですが，画像をAppbarが表示される部分まで全画面で見せるようにしたり，詳細部分は自由に動かせるBottomSheet的なので実装したりもともとUIに興味があるということもありこだわって作りました．
右上の投稿画面はごってぃさんがほぼすべて作りました．普段エンジニアではなく，人事をしている方なのに作業時間的にもクオリティ的にも現役エンジニアだなという感じで尊敬です…
ごってぃさんほんとになんでもできちゃう．
バックエンドは，@kosuke_kawanoが実装してくれていたのですが，デプロイなどに苦戦して僕らのチームには他にバックエンドを担当している人が不在であまり協力してあげられることができず，Firebaseをもりもりに使って実装しました．力になれず申し訳ない…
でも，Firebaseに移行しようとなってから@ry_ittoが爆速に対応してくれて，僕がUIにこだわっている間に気づいたらなんかできてたって感じでた笑
使った技術
タイトルにあるようにFlutterを用いてフロント側は開発を行いました．
開発した人の中で，ごってぃさんは前から少し勉強したことがあったりしましたが他の3人は全く初めて（僕は以前にハッカソンで使って挫折していた）だったりと言う感じでした．
なので，最初の方はいろいろな記事を眺めて勉強してました．
チームメンバーの中にはUdemyで勉強してる人もいました．
Flutter 全部俺 Advent Calendar 2019
この記事は最初難しくてわからない箇所が多かったですが，実際に手を動かしてみたあとに振り返ってみるととても参考なることばかり書かれていておすすめです．
あとはmonoさんのブログもかなりおすすめです．
これらを主に参考に最初に読み込んで勉強しました．
あとは実際に手を動かしながらわからないことはググってやるというような感じで，Flutterは日本語の記事もかなり多くてわからなくて詰まったということはあまりなかったです．調べたら何かしら記事が出てきて解決できた気がします．
僕は普段KotlinでMVVMを使ったAndroid開発をよくするのですが，今回採用したProviderパッケージを使ったFlutter開発はとても似ていてとっつきやすかったです．
Widgetに書く以外のロジックだったり状態はすべてChangeNotifierにまとめて書いて状態が変更された際はWidgetにChangeNotifierProviderで通知するといった感じでシンプルでわかりやすいのに柔軟性があってなんでもできちゃう感じで大好きです．
このハッカソンでしかFlutterはここまで触ったことがないのですが，よく耳にするBLoCというのも気になりますがそれを知らなくてもこれだけでいいんじゃないかって思うくらいProviderいいなって思ってます．気になるのでBLoCや他の技術についても勉強したいなとは思ってます．
開発環境
MTGや作業するときはDiscordのサーバを使ってボイスチャットを使用して行いました．
フルリモートで5日間のハッカソンという性質上モチベーション維持が大変そうでしたが，Discordで話しながら夜中の3時頃まで作業したりなどでき，オンラインでもみんなと頑張れる雰囲気があってよかったです．
アイデア出しは初日の朝10時にDiscordに集まってmiroというサービスのリアルタイムに複数人で同時編集できるホワイトボードを使ってオンラインでもオフラインでいるように付箋を貼ってアイデア出しをできたり特に問題なく使えました．
実際に使っていた画面はこんな感じ．
技術よりな環境としては，CI/CD周りの環境も構築して複数人で短期間で色々変更が起こってもよくわからないバグでアプリが動かなくなるというようなことは一度もありませんでした．
また，FirebaseのAppDistributionというサービスを用いて手元の端末に簡単にデバッグアプリを配布して確認できるような仕組みも整えていい感じにしてました．
おわりに
すごいサクッとでしたが，おうちハッカソンについて書いてみました．
チームにいた@hohohorisがもっといい感じに書いてくれてるのでそちらもぜひ読んでみてください．
Flutterとても楽しいです．
約一年前も別のハッカソンでFlutterを使ったときは右も左も分からず挫折しましたが，Android開発を経ていま触ると最高に楽しかったです．
こんなに楽しくてAndroidとiOSとあわよくばWebフロントなども開発できるというもう最高です．
めちゃくちゃ直感的にレイアウトも組めるし，状態管理も簡単できるのでおすすめです．
僕は完全に小さい頃にLEGOブロックで遊んでいたときのような感覚でWidget触ってました．
皆さんもあまり外に出られない今だからこそぜひ．
