【Flutter】ヘルパーメソッドよりWidgetが優れている3つの理由について解説してみたよ

Dart

概要

どうも、@daiki1003です!

先日、こんな動画を見つけたので共有しつつ記事にもしていこうと思います。
めちゃくちゃ良い動画だなと思ったのでまだの方は是非ご覧いただければと!

個人的にはこの動画見ただけでこの方のファンになりましたw
もうすでに笑顔が素敵笑

それでは行ってみましょー!

🌈 ざっくり概要

以下のような果物リストを表示するだけのウィジェットがあるとします。

この繰り返し部分はコードの再利用性を高めるためにも切り出す必要がありそうですね。
あなたならどちらの切り出し方をしますか?

案1:ヘルパーメソッドを作る

案2: (プライベート)クラスを作る

さて、どちら派だったでしょうか?

本記事及び上記動画のサマリ

・基本的にはヘルパーメソッドより新たなWidgetを作ろう
  ・無駄な再描画を防ぎやすい
  ・テストしやすい
  ・適切なBuildContextが受け取れる

それでは解説に移りたいと思います!

基本的にはヘルパーメソッドより新たなWidgetクラスを作ろう

本記事及び上記動画でのおすすめは案2のクラスを作る、です。
さてなぜこれがおすすめなのでしょうか?

確かに、ヘルパーメソッドだと元のクラスであるMyGreatestWidgetのプロパティ
に簡単に触ることが出来るため、引数を簡略化できるというメリットはあります。
上記例で言うと、onPressedに関しては、引数に必要ないですよね。

では、ここからは両者を比べつつ解説出来ればと思います。

無駄な再描画を防ぎやすい

以下のような少し大きめのウィジェットの右下にいいねボタンがあったとします。

ヘルパーメソッド

いいねボタンを押した際にリビルドされる範囲はSomeBigWidget全体になります。
つまり、_buildSomeWidget1などもリビルドされます。

クラス化

リビルドは_LikeButtonのみに閉じます。
これは想像通りの挙動ではないでしょうか。

テストしやすい

では、テストについてはどうでしょうか?

ヘルパーメソッド

テストをするためには、ヘルパーメソッドを含むクラスのインスタンスを作る必要があります。
冒頭の例で言うところの、MyGreatestWidgetです。

クラス化

そのクラスのみインスタンス化すればテストが可能になります。
今回の例でいうFruitItemです。

適切なBuildContextが受け取れる

下の様なBuilderを持つWidgetについて考えてみましょう。
Buliderbuilderプロパティの引数はinnerContextbuildが持つそれとは別名にしてありますね。

この場合、IconButtonが参照している、contextは時と場合によっては
古いものを参照してしまう可能性があります。

クラス化

改善したのがこちらです。

こうすれば、NewIconButtonは確実に、正しいBuildContextを得ることができます。

ヘルパーメソッドって使うことあるの?

僕の場合、クラス化した上で、コールバックが多いなどインスタンス化処理が長くなってしまった場合になど
可読性を高める用途で使ったりしています。

🎯 最後に

いかがでしたでしょうか?
Flutterは、本当に書いてて楽しいのですが、
まだデファクトスタンダードと呼ばれるものが他言語に比べると少なく、
たまにこう言うどっちがいいんだろう?みたいな判断に迷うことがあるのでそういった迷いを
なくせる記事を今後も書けると良いなーと思います。

誰かのお役に立てば。

Twitterフォローお願いします

「次回以降も記事を読んでみたい!」
「この辺分からなかったから質問したい!」

そんな時は、是非Twitter (@daiki1003)Instagram (@ashdik_flutter)のフォローお願いします♪

Twitterコミュニティ参加お願いします

Twitterコミュニティ「Flutter lovers」を開設しました!
参加お待ちしております😁

☕️ Buy me a coffee

また、記事がとても役に立ったと思う人は
コーヒーを奢っていただけると非常に嬉しいです!

コメント

タイトルとURLをコピーしました