みんからきりまで

きりみんです。

Flutter Meetup Tokyo #1が最高だったのでFlutter書きたくなってライブコーディングした

Flutter Meetup Tokyo #1に参加してきた。
どうしても参加したかったのでブログ枠で滑り込みました!
というわけで本日のエントリです。

flutter-jp.connpass.com

FlutterGoogle製の新しいモバイル向けクラスプラットフォーム開発フレームワークで、DroidKaigiでこにふぁーさんがiOSアプリをFlutterで作って発表した事で日本のエンジニア界隈でも一気に有名になったような気がする。
ぼくも最近は業務で主にReact Nativeでのクラスプラットフォーム開発をやっているので、Flutterにもとても興味があった。

そんな中で開催されたこの勉強会は、まさに同じようにFlutterに純粋に興味をもったエンジニア達が集まったようで、とても活気があった。
イベントの構成も、最初にFlutterについての説明の後、30分のゲストトークと15分LTが2本、5分LTが7本という充実した内容だった。
5分LTの前に懇親会が始まり、お腹を膨らませて会場が温まった状態でワイワイと5分LTが聴けて楽しかった。

sli.doというサービスで質問を募集する試みも面白かった。

発表のまとめと超ざっくり感想

5分LT「What's Flutter」 rkowase

speakerdeck.com

簡単なFlutterの紹介。
Flutter自体がまだまだ話題になりたてのものだし、ぼくも実際に触ったことは無かったので勉強会の最初に改めておさらいしてもらえて有難かった。

ゲストトーク「仕組みを知れば怖くない!Flutter入門」najeira さん

speakerdeck.com

Flutter開発についてのちょっと踏み込んだ紹介。
気になっていた事がいろいろ聴けたのでとても面白かった。

・Flutterは自前のUI描画なのでiOSや機種による差異は発生しにくい
・基本的にはどのプラットフォームでも共通なので、プラットフォームの標準UIとは異なる場合がある
Androidの場合はほとんど気にならないが、iOSでは少々標準から外れるかもしれない
・ただしナビゲーションアイコンや遷移アニメーションなど一部はプラットフォームごとにFlutterが出し分ける ・プラットフォーム固有の機能を使う場合はプラグインを使う。プラグインは自前でも簡単に作成出来る。

15分LT「FlutterとWebでアプリモデルを再利用しよう」ntaooさん

FlutterとAngularでサーバーサイドとクライアントサイドを全てDartで書いてみるという夢があるお話だった。
個人的には世界大統一言語はKotlinになって欲しいところですが、どうなんでしょう。

15分LT「雰囲気でFlutterをやってみた」syarihuさん

speakerdeck.com

実際にFlutterでアプリを実装してみた生の知見。
コードベースで見せてくれてFlutterでの開発の雰囲気をイメージすることが出来てよかった。

5分LT「Examples Flutter code」sho5nnさん

speakerdeck.com

Flutterのコードの紹介と、公式DocsのCookbookに有用な実装サンプルがたくさんあるよ、というお話。
後発のフレームワークは情報が少ないのが難点になりやすいので、公式でドキュメントが充実しているのはとても素晴らしい。

5分LT「Flutterで画面遷移を検知する」kuwappさん

speakerdeck.com

Flutterで画面遷移のイベントを検知するには、というお話。と、以前は出来なかった事がバージョンが上がったら出来るようになっていてFlutterは日々進化している!というお話。
たしかにまだBeta版なので、Googleのやる気次第でこれからどんどん使いやすくなっていきそうだし、GoogleIOでの新しい情報公開が楽しみ。

5分LT「Flutter Package & Plugin Package」 operandoOSさん

speakerdeck.com

ネイティブブリッジのプラグインをサクッと作ったというお話。
サクッと作っちゃって知見を公開してくれるのもすごいし、IDEでのサポートもあり簡単にプラグインが作れるFlutterもすごい。

5分LT「“Hello Flutter”の次におさえたいFlutterのポイント その2」Kenichi Kambaraさん

www.slideshare.net

用意されていない機能にも高速に対応するためにプラグインを作れるようになろう!というお話。
Flutterはわりとカジュアルにプラグインを入れたり作ったりする文化になるのかもしれない。

5分LT「Exploring Flutter in Android」takahiromさん

speakerdeck.com

FlutterがAndroid上でどう動いているかというお話。
この辺りをスッと深掘りにいける姿勢はいつも尊敬する。
見習いたい。。。

「Flutterでstaging/production環境の切替」fullfoolさん

speakerdeck.com

Flutterでbuild flavorの切り替えのようなことを実現する方法について。
こういう知見はまだまだ情報が少ないと思うのでありがたみがある。
長く参照されるスライドになりそう。

5分LT「flulterを使って感動した話」nabeshiさん

Xamarin使いの方によるFlutterアプリ開発レポ。
ホットリロードが得にXamarinと比べて素晴らしいと感じたポイントとのこと。

質疑応答編

LTの合間に行われたnajeira さんへの質問コーナーも知見に溢れていて素晴らしかった。
いくつか面白かった内容を抜粋。

Q:Dartについて
A:そこそこ良い

Q:Flutterの優位性
A:IDEのサポートもありデバッグがしやすいとか

Q.:MaterialDesign以外のUIを作るのは簡単ですか?
A:プレーンなコンポーネントもあるので、わりと簡単だと思う

Q:どういうアプリがFlutterに向いているか
A:UI表示がメインのアプリ。逆に動画を扱うとかネイティブの機能をガッツリ使う系だとあんまりよくないかもしれない

勉強会で話を聴いたらかなり良さそうだったので自分でもライブコーディングしながらFlutterを触ってみた

というわけで、自分でも触ってみたくなったのでやってみた。

これは完全に余談なんですが、最近バーチャル幼女プログラマーとしての活動をしていまして、せっかくなのでYoutubeLiveでバーチャルライブコーディングを行いました。
Flutterでのコーディングの様子をまとめた動画があるので、興味がある方はぜひご覧ください。

www.youtube.com

実際に自分で書いてみて感じたのは、Java的な言語でコード内にレイアウトを組んでいくのはコードの可読性的に若干厳しいのではということ。
何も考えずに書くとカッコとインデントが無限に入れ子になるので、ちょっと複雑なレイアウトを書くとすぐにわけがわからなくなりそうだなと思った。
この辺りはJSXのReact Nitiveの方が見やすい感あるので、FlutterでもJSX風のDSLが使いたいなぁとちょっと思った。
ちゃんと綺麗にコードを書く場合はコンポーネント単位でメソッド化したりカスタムコンポーネントをたくさん作ったりする感じになるのだろうか。

なお、ライブコーディングで書いたコードは以下のような感じです。