{"componentChunkName":"component---src-templates-blog-post-js","path":"/2020-11/2020-11-08-0448-Flutter状態管理/","result":{"data":{"site":{"siteMetadata":{"title":"sasaki takeru Blog"}},"markdownRemark":{"id":"0f43bcdf-5a15-5086-a2e7-26ff8c0bb30e","excerpt":"謎ワード『状態管理』 Flutter…","html":"<h3>謎ワード『状態管理』</h3>\n<p>Flutterについて調べはじめた初心者が２日目あたりに遭遇する謎ワード『状態管理』。</p>\n<p>しかも、ググって出てきた１００いいね超えの良さそうなドヤ記事に書いてある内容も\n半年ごとぐらいに「もっといいヤツ」が登場してオワコン化しているっぽくて、\n今から始めたいんですけど、どれですか、、、ね？？状態。。。</p>\n<p>で、チュートリアルやりつつ、実際のコード書きつつ、その「ジョウタイカンリ」を調べて、\n数週間後の今(2020-11-08)の理解のメモ。</p>\n<h3>問題はなにか？ なにがそんなにむずかしいの？？</h3>\n<p>FlutterはUIをつくるお仕事がメインです。WidgetというUI部品のツリー構造をつくるとiPhoneとAndroidのアプリの画面ができちゃう。それだけ。</p>\n<p>UIの裏側で動くロジック(サーバにAPIゲットしたり、画像ダウンロードしたり、AIがディープラーニングしたりするなど)を書くところや、その仕組み、\nフレームワークはなにも用意されていなくて、好きなようにつくるなり、パクるなりしてやってねということになっている。\nRailsおじさんにはどこに何書いていいかぜんぜんわからないようになっている。</p>\n<p>flutter createで生成されるアプリの雛形(StatefulWidgetの(Stateの)メンバ変数にintを保持していてボタンを押すと数字が増えるやつ)\nを元にして、俺が考えた最強のアプリ作っていくとすると、\nこのStateにどんどん変数が増えるのか？APIにgetするのをonTapに・。。ってのはすぐ無理が見えるので、</p>\n<p>「FlutterのWidgetを構築するコード」と「ビジネスロジックのコード」をきれいに分けたい、整理したい。</p>\n<p>となる。</p>\n<h3>「データ(=状態)」を「画面に表示」したい</h3>\n<p>Flutterにおいて「画面に表示」とはWidgetツリーをつくること。</p>\n<p>Widgetツリーをつくるコードは、</p>\n<ul>\n<li>child,childrenで子を連ねていく</li>\n<li>Widgetを返すbuildコールバックメソッド</li>\n</ul>\n<p>が主原料になっていて、</p>\n<ul>\n<li>なにものかから「build」が呼ばれる</li>\n<li>buildの中で最新のデータを使った最新のWidgetを作り直す</li>\n<li>なにものかが、画面に最新のデータを表示する</li>\n</ul>\n<p>という風なピタゴラ装置になっている。</p>\n<p>画面を更新したかったら、buildが呼ばれるように仕向ければいいんだけど、そのへんを手作業でやるのはきっとややこしいので、</p>\n<p>「データ(=状態)」が変わったら(buildが自動的に呼ばれて)「画面の表示」も『自動的に変わる仕組み』がほしい。</p>\n<p>となる。</p>\n<p>— データはいつ変わるのか？\n— データはどこにあるのか？\n— データを変えるのはだれ？</p>\n<p>あたりが、アプリそれぞれで違ってきてややこしいとこなんだけど、\nこのあたりを上手に整理吸収できたらよくない？かっこよくない？？</p>\n<p>じゃあ、</p>\n<ul>\n<li>データが変わったらWidget(のあたり)に通知するようにしよう</li>\n<li>通知を受け取ったらWidgetを再構築して表示を更新することにしよう</li>\n</ul>\n<p>というアイデアが、Flutter初心者殺し謎ワード『状態管理』テクノロジーが解決する画期的ソリューションなのです。\nあ、これ Virtual DOM のときにみたやつっぽい。</p>\n<h3>いろんな『状態管理』</h3>\n<p><a href=\"https://flutter.dev/docs/development/data-and-backend/state-mgmt/options\">https://flutter.dev/docs/development/data-and-backend/state-mgmt/options</a></p>\n<p>ここにしっかり全部リストされているけども、結論から逆に歴史をたどって調べたメモ。</p>\n<h4>BLoC</h4>\n<ul>\n<li>Widgetとビジネスロジック間はStreamでつなごう</li>\n<li>ビジネスロジック側にView側都合なコード入れないでね(そりゃそうだ)</li>\n<li>Streamか・・・面倒ぽくないかい？しらないけど。</li>\n</ul>\n<h4>Scoped Model</h4>\n<ul>\n<li>ツリーの上の方に「モデル」を置いておいて、</li>\n<li>その配下から「モデル」アクセスできるようにしよう</li>\n<li>「モデル」のデータが変わったら、使ってるWidget再構築しますね(たぶんここが雑でリビルド多すぎどうのこうの問題なんじゃないか)</li>\n</ul>\n<h4>Provider</h4>\n<ul>\n<li>Widget(buildの中やUI操作のコールバックあたり)からビジネスロジック(=のクラスのインスタンス)を見つける仕組み</li>\n<li>なんとかNotifier群。変わったらnotifyするわかりやすいのから、Stream、Futureなど変わる系のものならなんでも対応的な？</li>\n<li>readとwatch(とchange)を上手に使ってリビルド多すぎ問題に対応可能</li>\n</ul>\n<h4>Riverpod</h4>\n<ul>\n<li>Flutter(InheritedWidgetなど)に依存しないように作り直したProvider相当のもの</li>\n</ul>\n<h3>結論 Riverpod</h3>\n<p>進化の到達点である、Riverpodで遊んでおこう。だって今からやる人は古いのとの違いがわからないよ。\n(半年後はまたその時考える)</p>\n<p>でも、まだまだ便利になる余地があるきがします。\nいろいろな背景知識なしで、もっとゆるふわにアプリが作れるように進化するはず。</p>","frontmatter":{"title":"『状態管理』ってなんですか？","date":"November 07, 2020","description":null}},"previous":{"fields":{"slug":"/2020-10/2020-10-27-1547-Provider/"},"frontmatter":{"title":"Providerってなんですか？"}},"next":{"fields":{"slug":"/2021-06/2021-06-14/"},"frontmatter":{"title":"2021年もよろしくおねがいします！"}}},"pageContext":{"id":"0f43bcdf-5a15-5086-a2e7-26ff8c0bb30e","previousPostId":"3b6878e4-f637-5e27-a014-90614ec6ac4c","nextPostId":"92abccd4-4332-5a0e-bb9c-0d7e9e944d0b"}},"staticQueryHashes":["2841359383","3257411868"]}