💀

Flutterのconstを書いたり消したり...疲弊した彼に送る〜鎮魂歌〜

2023/09/01に公開

世界最速解説

./analysis_options.yml
rules:
    - prefer_const_constructors 

ターミナルで実行

terminal
dart fix --apply

あら不思議!constが適切なポジに!

ある日のFlutter 〜不幸な男〜

ある日の蒸し暑い夏のこと。
私は自分のアイデアで世界を変えるため、Flutterで個人アプリ開発に勤しんでいた。
今日から始めた。何事も千里の道は一歩からだ。

Center(
  child: Text('Hello Flutter!'),
  // パフォーマンスを向上させるには、コンストラクターで 'const' を使用します。
  // コンストラクターの呼び出しに「const」キーワードを追加してみてください。
)

そうそう。今のエディタは素晴らしい。コードを解釈して、パフォーマンス改善の提案までしてくれるのだ。
いい時代になったものだ。と感心しながらTextにconstキーワードを付与した。

Center(
  // パフォーマンスを向上させるには、コンストラクターで 'const' を使用します。
+   child: const Text('Hello Flutter!'),
-   child: Text('Hello Flutter!'),
)

ん...?そうか。Centerは子要素にconst Text()だけを持つのだから、Centerのインスタンス自体が不変になるんだな。ならこうして...と。
私はCenterにconstキーワードを付与した。

+ const Center(
- Center(
     child: const Text('Hello Flutter!'),
     // 不要な「const」キーワード。 キーワードを削除してみてください。
)

お、あぁ...?次はなんだ?親要素のCenterにconstが付与されている場合、子要素にはconstは不要になる。ということか...OK。大丈夫だ。私は天才プログラマーだ。
こんなことは障害じゃない。私にはできる。
大きく息を吸い込んで、改めてモニターに向かうことにした。
そうして、Textからconstキーワードを削除した。

const Center(
+  child: Text('Hello Flutter!'),
-  child: const Text('Hello Flutter!'),
)

ついにエディタを黙らせることができた。デキタゾ...!
そういえば、Textの中身は固定の文字列ではなかったな。
ユーザーの入力に応じて変化する値だったはずだ。
嫌な予感の足音を感じながらも、Textの中身を変数に置き換えた。
起こる。何かが起こる...

const Center(
+  child: Text(_inputValue),
-  child: Text('Hello Flutter!'),
   // error: 定数作成の引数は定数式である必要があります。
)

な...!何!!!なんだ!次から次へと!何が目的なんだ!私をどうしたいんだ!
陰謀だ。これは大企業の陰謀なのだ。
そうか、そうだ。わかったぞ。constだ!全てconstが悪いんだ!!
ハハハハハ!おれはエンジニアをやめるぞ!ジョジョーー!!
constなんかに人生を振り回されてたまるガァぁぁ!!!


おっと。ついにconstキーワードに疲弊した彼は、モニターをバキバキにした後、エンジニアを辞めてしまいましたネ...
本当なら彼は後に、世界を席巻するSNSを開発し、GAFAを過去の存在とするような、世界的大企業を育てるはずでした。
しかし、Flutter(Dart)のconstが存在したために、歴史は変わってしまったのです。

彼が逃げ出してしまったので、代わりに先ほどのエラーの修正版を残しておきます。
(Centerからconstを削除すれば良いだけ)

+ Center(
- const Center(
  child: Text(_inputValue),
)

これで終わってしまっては彼が報われないので、解決策を示して、彼へのレクイエムとしましょう。

面倒な作業はAIに...!の前にlinterに!

昨今は凄い時代です。さまざまなAIサービスが登場し、エンジニアでさえAIに淘汰されるという話を毎日聞きます。
人間が面倒だと感じる作業は全てAIにやらせましょう。仕事も料理も家事も、はたまた生きることさえもAIに任せましょう。 何よりもconstキーワードをAIに監視させましょう。

と考えているAI至上主義の方々に朗報です。AIは金がかかります。めちゃくちゃかかります。
その代わりにタダ働きしてくれる「linter」さんをまずは頼ってみましょう。

literとは(簡潔に)

コードに含まれる潜在的な問題点の指摘や、コードスタイルが推奨されるものに準拠しているかどうかなど、コードがまともかどうかいい感じにチェックしてくれるツールです。
しかも可能な範囲で、それらの問題点を自動で修正してくれます!!(スゴイゾ!)

Flutterでのlinter

多くの場合は、自分でlinterツールを選定し、インストールし、セットアップする必要があります。
しかし、我らがFlutterは流石です。linterは組み込まれています。
ルールの追加もとても容易です。

./analysis_options.ymlにルール名を加えるだけ!

./analysis_options.yml
rules:
    - prefer_const_constructors // 今回の大目玉。

そしてターミナルで以下を実行してください。

terminal
dart fix --apply

すると、どうでしょう。なんと、あっという間に適切な位置にconstが記述されたではありませんか...!

Before-After

+const Center(
- Center(
+  child: Text('Hello Flutter!'),
-  child: const Text('Hello Flutter!'),
)

素晴らしいですネ。私たちはconstに振り回されることなく、開発に集中することができるわけです。

もしも、過去に戻ることができて、あの彼にlinterの存在を教えてあげることができれば、今の世界は少し違ったのかもしれません。
一方、この記事を見たあなたが、linterのおかげで、極上の開発体験を手に入れ、世界を変えるその日までモチベーションを保つことができる...かもしれません。

ん?iOS、Androidの新機能が使えなくて困ってる?
え?UIをOSごとに特化させたい?
ふぁ?パフォーマンスがネイティブよりも悪い?

それはlinterではどうにもできないからワガママ言うならネイティブを書くんだ!!!!!!

環境

Flutter 3.13.0

CHILLNN Tech Blog

Discussion