天の月

ソフトウェア開発をしていく上での悩み, 考えたこと, 学びを書いてきます(たまに関係ない雑記も)

Flutter実践開発 ─ iPhone／Android両対応アプリ開発のテクニックに参加してきた

forkwell.connpass.com

こちらのイベントに参加してきたので、会の様子と感想を書いていこうと思います。

会の概要

以下、イベントページから引用です。

第49回目では『Flutter実践開発 ── iPhone／Android両対応アプリ開発のテクニック』を取り上げます。

プロフェッショナルなFlutterエンジニアになるための近道、と書かれた本書は現在別の技術を扱ったり、学んでいるけど、これからFlutter を習得していきたい、モバイルアプリ開発のスキルを高めたいというエンジニアのみなさんにオススメとなっています。

今回は著者である渡部 陽太氏に本書のポイントについてお話していただきます。

会の様子

講演〜FlutterビギナーのためのWidget完全攻略〜

Flutterとは？

Flutterの要点として、

が挙げられていました。

環境構築の要点

Flutter SDKのインストール + iOS開発環境とAndroid開発環境が必要だという話がありました。

IDEとしてはVSCやAndroid studio, InteliJ IDEAが使えて、バージョン管理ツールはFVMで行うのが基本ということです。

Widget前編

すべてのFlutterクラスはWidgetであるという話がありました。

Widgetを活用することでWidgetの親子関係や組織構造でUIが表現できるうえに、必要に応じて独自Widgetを作成することもできるということです。

また、Widgetで動的な画面更新をしたいときは、

  • StatefulWidgetを継承
  • setStateメソッドで状態更新
  • Buildメソッドが再び呼ばれてWidgetを再構築

という仕組みで実現できるということです。

Widget後編

デモを通して、WidgetよりもStateの方がライフサイクルが長くなっているように見えることが実演された後、KeyはElement再利用の判断材料となっていることが解説としてありました。

なお、ElementはBuildContextとなっているということです。

書籍のポイント

手軽にアプリを作りたいという人にはマッチしないかもしれないけれど、Flutterの基礎に関して学び直せるよな書籍になっているのがアピールポイントだということでした。

Q&A

講演の後はQ&Aがありました。以下、質問と回答を常体かつ一問一答形式で記載していきます。

ネイティブでできることはFlutterですべてできるか？

コードレベルではおそらくない。Flutter純正にない機能でなおかつ汎用的な機能(GPS)ではないようなものだとネイティブで書かないといけない。あとはプラットフォームの制約でいけないところはある。

riverPodを利用する際、MVVMで開発するとriverPodとViewModelとComsumerStatefulWidgetの3つで状態管理することになる。riverPodはグローバルなアプリ全体を通した状態管理をしてViewModelはページ専用の状態を監視するものだと思うが、StatefulWidgetにもページ独自の定義を書いてしまい、何が正しいのかわからない

状態が色々なところに分散しているのはよくない。この場合だと、StatefulWidgetが状態を持っているのがよくないのでグローバルな方はriverpodに寄せたりするとよさそう。あるいはStatefulWidgetだけで管理してしまえば良い気がする。

DateSource層やRepository層で取得するデータをローカライズしたい場合、contextを引き込むべきかプレゼンテーション層で処理するかどちらがいいか？

断然プレゼンテーション層派。

riverpod使用時のlocalStateとglobalStateの切り分け方を知りたい

localStateってどれくらいのlocalStateなんだろうみたいな疑問はあるが、決めの問題な気はする。開発者が想像していないようなことが起きているならなおさら。共通のUIパーツとかならriverpod使わないほうがいいし、画面状態ならriverpod使ってもいい。

Flutterを書いているとインデント深くなりがちなのだがどう対処しているのか？

細かい単位でメソッド化するかWidget化するかだと思うが、関数化するのはあまり推奨されていないので、再利用性のある単位でWidgetを分けるのがおすすめ。

Widgetを使えばconstを活用することで再利用がせき止められる。

ライブラリの生き死にや更新の速さが結構辛いのだが何か解決策はあるか？

サードパーティのライブラリを必要最低限に抑えるのが元も子もない回答。riverpodだって、使わないという選択肢も全然あると思う。

IDEはAndroid StudioとVSCどちらがいいか？

後でどうこうとかはあんまりないと思う。併用しても良いと思う。VSCはcopilotとの相性がよく、Android Studioしか見れないパフォーマンス項目はある。

Flutterのバージョンアップするときに自動マイグレーション使えるみたいな話はある。

Flutter開発はWebアプリやデスクトップアプリへのデプロイはあまりやらないのか？

あまりやらない。

Webアプリの開発にFlutterを使う場合AndroidとiOSで表示崩れが起きるのだが対応策はあるのか？

webアプリ開発をやっていないので回答が難しい。

実務で求められるレベル目安が知りたい

色々な角度があると思うのだが、Flutter実践開発にある内容を一通り理解できている、というのはある。

Flutterで開発することの利点・欠点・将来性があれば知りたい

利点...ワンコードで書けるので開発コストが下がる傾向にある。また、同じことを別の言語で別の人でやらないといけないという事態を避けることができる

欠点...大分解消されているのであまり思いつかないのが正直なところ

将来性...これはわからない。開発者体験がよくてコミュニティが反映しているのは将来性豊かとは言える

Fluuterの場合画像が自動でdpi補正されるがどういった基準で画像リソースを考えるのか？

drawableみたいなことができるし、書籍にも一通り書いてある。

MVVMの視点で実装をすると基本的にプレゼンテーション層に記述せずにVM層で記述するほうがいいみたいな話はあるが、プレゼンテーション層で行ってよい処理とだめな処理はあるか？

Viewとロジックに分けるなら、はっきり分けたほうがよい。この場合、基本は全部VM層に書いたほうがいい。

ただし、何がプレゼンテーション層なのかという話はある。

Reactなどを含めた宣言的UIではViewModelを責務毎に細かく分割したState単位で管理がよいと考えられているが、複数Stateを1Actionで状態に応じて更新したい場合、ロジックがプレゼンテーション層に入り込んでしまう。これは構成としてよいのか？

内容にはよってしまう。State同士の関係が近いなら、ViewModelが他のViewModelを参照する。MVVMとしてはいけていない気がするが、riverpodアーキテクチャだと思っているので、複数Stateを参照するnotifierを書いてしまって、他からProvider取ってくるみたいなのはriverpodアーキテクチャとしておかしくないと思う。

会全体を通した感想

講演に関しては、思ったよりも初心者向けの内容ではありましたが、説明の構成などから、こういう風に動くよね！ではなくどういう仕組でどのような動きになるのか？というのが丁寧に説明されていたのはよかったです。また、質疑応答では実務的な内容にしっかり踏み込んでいたので、落差が良い意味であって面白かったです。

書籍としても基礎が学べる本という話があって、講演の内容からしてもそのような内容になっていそうだなあというのが予感できるイベントでした。