Flutterのfor文が分かりにくすぎる話

for文、読みにくすぎ問題

実務で苦しめられたので自分ではやらないように書いてみた
UIにfor文を使っていて酷いと感じたが、今回はロジック部分のサンプルで説明

読みにくいfor文のサンプル

List<String> visibleLabels = [];
for (var i = 0; i < items.length; i++) {
  if (items[i].isVisible) {
    visibleLabels.add(items[i].label);
  }
}

• サンプルコードなのでなんとなくわかるが、さらに長くなると理解できなくなる
• 条件分岐も実務だと増える可能性あり
• リストへの追加が追いにくい

処理が混ざり合っていてノイズが多く感じる

🤖 AIに聞いてみた

final visibleLabels = items
    .where((item) => item.isVisible)
    .map((item) => item.label)
    .toList();

変数減ったりメリットはあるが、実務だと処理が複雑になりがちなので無理に1行にしない方がよさそう

✅ 改善案

where + mapを段階的に使う
同じ処理を、意図がわかりやすくなるように役割ごとに分割

final visibleItems = items.where((item) => item.isVisible).toList();
final visibleLabels = visibleItems.map((item) => item.label).toList();

• whereで「表示対象だけ抽出」
• mapで「labelを取り出す」
• 変数名で処理の意味が明確に

ありがちな“地獄for文”の例

List<String> results = [];
for (int i = 0; i < items.length; i++) {
  if (items[i].flag1) {
    if (!items[i].flag2) {
      results.add(items[i].label.toUpperCase());
    }
  }
}

• 条件がネストして、読んだ瞬間にため息が出るコード

✨ 改善案

final filteredItems = items
    .where((item) => item.flag1 && !item.flag2)
    .toList();

final upperCaseLabels = filteredItems
    .map((item) => item.label.toUpperCase())
    .toList();

処理の意図が一目でわかるように変更
※条件：flag1かつ!flag2(実務ではちゃんと書かないといけないがサンプルなので)
→必要に応じて変数に入れてあげるとさらにわかりやすく

まとめ

条件で絞るときは where()、加工ではmap()を使うと◎

forEachや最悪for(final item in items)を使いたい

初心者やチーム開発では、処理を分けて書く方が圧倒的にわかりやすい

「コードを短く書く」<「意図がすぐに伝わるコードを書く」ことを心がけたい

おまけと感想

filterはDartにはなく、whereがその代わり(慣れるまで時間かかりそう)

サンプルコードも実務のコードでも見かけたが、List.addって途中で処理追いにくいので使いたくない