JX通信社のアプリエンジニアのぬまっち(@numatch2552)です。普段はAndroidエンジニアをやっています。 そして１年ほど前に技術書ビブリオバトルの記事を書いた者です。
早いものであの記事から1年が経ちました。今回も自分が担当する社内勉強会ではちょっと変わった趣向で開催してみました！
高まるFlutterの機運
昨年末に安定版がリリースされたFlutterですが、社内でも機運が高まっていました！ さらにアプリエンジニアとして、業務で使う事もあって自分として知見もあったので 勉強会のメインに選定しようと思いました。
しかし新しいプラットフォームでの勉強会って、参加者の環境構築で躓くことが多いですよね。 かくいう自分も経験があります。 最初はFlutterのハッカソンを考えていましたが、Flutter未体験の参加者が多い状態なので頭を悩ませました。
モブプログラミングでやってみよう
そこで思いついたのは、モブプログラミングと掛け合わせることでした。
モブプログラミングとは下記の記事を参考にさせて頂きました。↓↓↓
まだ1人でコード書いてるの？モブプロを1日中、3週間毎日続けて得た知見 | Kurashicom Engineers' Blog
第一に勉強会なので、業務のようにスピード優先というものはありませんし、 知見の共有という点ではモブプロが最適に思えました。 モブプロも初めての実践でしたが、「やればきっと出来る！」くらいの勢いで挑みました（笑）
どこまでを目指すのか
社内勉強会は2時間なので、その範囲でどこまで作るのかを事前に考えようと思いました。 しかもモブプロ未経験者が集まって進めるので、スピードは上がらないことが予想されます。
その上で Flutterってこういう作りなんだ！ という体験はしてもらいたかったので、
下記の仕様を考えました。
- 全部で2画面
- 最初の画面（main.dart）
- 画面中央にテキスト・ボタンがある
- ボタンの押下で2番目の画面に遷移する
- 2番目の画面（second_page.dart）
- FloatingActionButtonがある
- FABが押下されるとリストが描画される
- FABが押下される度にリストの項目が増えていく
当日イメージしやすいように、事前にこちらで簡単なアプリを作成しておきました。 モブプロに入る前に参加者に見て貰うことで、どこまでをゴールにするかが明確に伝わったかなと思います。
勉強会当日
12人によるモブプログラミング
当日、勉強会を開催する時間になると参加者が集まってきました。 その数12人！（事前に把握しておけよ、と）
経験者を除くと10人が未経験者でした。 これでモブプログラミングが成り立つのかと正直焦りましたが、もうやり遂げるしかありません。
キーボード問題
始めようとしてすぐに問題が発覚です。 キーボードには USキーボードとJISキーボードがあるのです。
JX通信社では好きな方のキーボードを選ぶ事ができます。（ちなみに自分の業務用MacBookはUSキーボードです。） 自分のMacBookをみんなで回していけばモブプログラミング出来るだろう、と考えていましたがJIS派のエンジニアもいるので、頭を抱えました。
ここでメンバから「複数のワイヤレスキーボードを接続すればいける」と助言を頂いて助かりました。 初っ端から躓きましたが、社内から両方のキーボードを揃えてきてスタートです。
最初の画面を作る
基本的に経験者はノータッチですが、本当に詰まった時は助言する形で進めました。
「Widgetって何だろう」 「とりあえずMaterialAppってのを使うといいみたい！」
main関数から最初を画面を呼び出しところから始まり、ツールバーを表示する方法などをみんなで調べながら進めていました。
みんなDart言語も初めてなので、コンパイルエラーの解決方法も一苦労です。
「ここでreturnが必要なのはなのは何でだろう？」 「何かが足りないってエラー出てますね。セミコロンかも。」
（言語の好みの話題も出てきて、個人的に興味深かったです。）
ドライバーを5分交代で次々と変えていきながら、ナビゲーターがサポートする形で進めていきました。
やがてStatelessWidgetとScaffoldWidgetを使って最初の画面が形作られます。
ButtonWidgetの実装で詰まった時の事が印象的でした。
一口にButtonのWidgetといってもFlatButtonやIconButtonなど種類がありますが、
みんなで意見を出し合って仕様を満たすRaisedButtonが選ばれました。
押下後の動作についての実装もWebメインの方だとイメージが湧きにくかったようですが、 経験者がアロー関数で実装する方法を紹介して最初の画面が完成します。
二番目の画面の実装
次の画面では FloatingActionButtonが押される度に画面に表示されるリストの内容が更新される という目標があります。
ここでは Flutterの要素でも重要な StatefulWidget を使う必要が出てきます。
だんだん参加者の方たちも、最初の画面よりは慣れてきたのか進みが早くなってきましたが、
FloatingActionButtonの実装や、表示するList内容の定義まではすんなり迷う事なく進んでいたと思います。
Button押下時の実装方法は前の画面で分かってきましたが、中々画面の表示を更新させる方法が分からずにドライバーが交代していきました。
経験者が助言しなければ厳しいのではないか、とも思っていました。
ですが、9人のナビゲーターが調べていく中で助言なしに StatefulWidget と setState()を組み合わせることでbuildが再度コールされる事に辿り着きました。
画面表示が更新された時、自然と歓声が湧き上がったのがとても印象的でした。 ナビゲーターが知見を共有しあって実装の解を見つけ、みんなで進捗を祝う。まさにモブプログラミングの醍醐味を味わえた瞬間だったと思います。
そして、2時間という決まった枠組みの中で目標としていた仕様を満たしたアプリが出来上がりました。
開催してみて
正直始まるまでは上手く進行できるのか、決められた枠組みの中で目標としたアプリが出来るのか、不安でいっぱいでした。
サーバーサイドエンジニアやフロントエンジニアなど、普段ネイティブアプリ開発とは離れた業務をされてる方も沢山参加頂きましたが、 抜群のチーム開発力を発揮して、みんなでモブプログラミングを進めることが出来て嬉しかったです。
終わってみればJXエンジニアのメンバがFlutterに対して興味津々であったことに、非常に助けられたと思います。
FlutterのWidgetを元とした構成のおかげで、複数のファイルを行き来することなく一つのファイルで画面を構成することが出来ることも モブプログラミングとの相性が良いのではないか？と感じる事も出来ました。
改めてFlutterの可能性も再発見出来たので、嬉しく感じる勉強会になったと思います。
