Flutter七転八倒日記 第2回
こんにちは~、消火器です(Twitterはこちらです→https://twitter.com/super_syokaki)。
今回はFlutter七転八倒日記の第2回でございます。第1回(https://el.jibun.atmarkit.co.jp/uwagoto/2021/01/flutter.html)が今年の1月26日だったので、ちょうど丸一か月ぶりですか。更新がないのでどうせ挫折したんだろう、と思っていらっしゃる方々もいらっしゃるかもしれませんが、
この上なく順調です!
作ろうとしていたアプリがもともと簡単だったこともあって、ちょっと読み書きができるようになってからは実にスラスラと進んでおります。
前回から分かったこと
前回は「全体像が見えずつらい」みたいなことを書いていましたが、なんとなく全体が見えてきました。把握できたのは以下のこと。
・Flutterはすべてをウィジェットという単位で管理する。
・ウィジェットにはステートフルなものとステートレスなものがある。
こう書いただけだとわかりづらいと思うので、ちょっとずつ補足していきます。
Flutterはすべてをウィジェットという単位で管理する
すべてがウィジェットです。アプリ全体も1つのウィジェットだし、テキストフィールドやボタンなんかも1つのウィジェットです。つまり、アプリ全体の構造は、1つの巨大なウィジェットの中に無数のウィジェットが何重にも入れ子になっている、という感じです。ふだんほかの言語でコードを書く時には割と多重入れ子を忌避する傾向があると思うので、この点が最初にFlutterに触れたときのドン引きポイントかもしれません。
ウィジェットとは何か、という問題ですが、スマホとかのウィジェットを想像するととりあえずはイメージしやすいかもしれません。ホーム画面に置くちっちゃいパーツみたいなやつで、時間とか新着ニュースとか検索窓とかが設置できるやつです。特定の機能を持つ単位がウィジェットで、その機能で使うパーツとして、さらに小さなウィジェットが入れ子になる、というイメージでしょうか。
ウィジェットにはステートフルなものとステートレスなものがある
はい。ステートも、Flutterになじみがないとピンときづらいと思いますが、さしあたっては以下のような単純な理解で何も困っていません。
・ステートとは表示の状態を管理するものである。
・リアクティブに表示を切り替えたければ画面をステートフルで、切り替える必要がなければステートレスで作るべし。
絶対不正確な理解だと思うんですが、とりあえず作り始めるときはこれぐらいの理解でも作れる、ということで......。
ステートについてですが、たとえば、ボタンを押したときにテキストの文言を変えたいとします。たとえばSwiftでは、ボタンを押すたびに直接UILabelの文言を書き換えるか、RxSwiftなどを使ってリアクティブな画面表示を実現するのだと思います(後者は触ったことがないのでわからん)。これを、Flutterの場合は、ステートの変化として管理します。
どういうことかというと、ステートフルなウィジェット内で、状態によって変えたい値を予め定義しておくわけです。そして、実際に変更するさいには、ステートを変更するメソッドを呼び出すことで、状態を変更することができるわけです。
......ん、Swiftのほうが簡単じゃない?あまりステートによる管理のメリットがわからないのは、まだ全然複雑なアプリを作っていないからだと思います......。
あとがき
ということで、現状報告でした。来月中にはアプリ完成させたいなー。いまは大量にあるテキストフィールドと戦っています(笑)。純粋にめんどくさい!