Biomeでの配列操作ではfilterやmapも推奨されないケースがある

## Biome

こちらが[公式ページ](https://biomejs.dev/)です。[こちらの記事](https://zenn.dev/akineko/articles/d967d5dcada598)でセットアップや初期設定がわかりやすくまとめられていたので、説明は省略させていただきます。

## 本題の配列操作について

[こちらの公式ページ](https://biomejs.dev/ja/linter/rules/no-for-each/)のドキュメントを参考にしました。結論から言うと`forEach`だけがダメというわけでなく、`filter`や`map`でメソッドチェーンにするのも推奨していない主張みたいです。

実際に[こちらのPlayground](https://biomejs.dev/playground/?code=IAAgAGMAbwBuAHMAdAAgAG4AdQBtAGIAZQByAHMAIAA9ACAAWwAxACwAIAAyACwAIAAzACwAIAA0ACwAIAA1ACwAIAA2AF0AOwAKAAoAIAAgAC8ALwAgAFMAdABlAHAAIAAxADoAIABgAGYAaQBsAHQAZQByAGAAZzB2UHBlkjC9YvpRCP8xAN5W7nZuMM1TqV%2FmUQZ0Cf8KACAAIABjAG8AbgBzAHQAIABlAHYAZQBuAE4AdQBtAGIAZQByAHMAIAA9ACAAbgB1AG0AYgBlAHIAcwAuAGYAaQBsAHQAZQByACgAKABuAHUAbQApACAAPQA%2BACAAbgB1AG0AIAAlACAAMgAgAD0APQA9ACAAMAApADsACgAKACAAIAAvAC8AIABTAHQAZQBwACAAMgA6ACAAYABtAGEAcABgAGcwJFCSMDIADVBrMAlZ22MI%2FzIA3lbudm4wzVOpX%2BZRBnQJ%2FwoAIAAgAGMAbwBuAHMAdAAgAGQAbwB1AGIAbABlAGQATgB1AG0AYgBlAHIAcwAgAD0AIABlAHYAZQBuAE4AdQBtAGIAZQByAHMALgBtAGEAcAAoACgAbgB1AG0AKQAgAD0APgAgAG4AdQBtACAAKgAgADIAKQA7AAoACgAgACAALwAvACAAUwB0AGUAcAAgADMAOgAgAGAAZgBvAHIARQBhAGMAaABgAGcwUH2cZ5Iw%2BlGbUgj%2FMwDeVu52bjDNU6lf5lEGdAn%2FCgAgACAAZABvAHUAYgBsAGUAZABOAHUAbQBiAGUAcgBzAC4AZgBvAHIARQBhAGMAaAAoACgAbgB1AG0AKQAgAD0APgAgAHsACgAgACAAIAAgAGMAbwBuAHMAbwBsAGUALgBsAG8AZwAoACcAPdiA3iAAfgAgAGQAbwB1AGIAbABlAGQATgB1AG0AYgBlAHIAcwAuAGYAbwByAEUAYQBjAGgAIAB%2BACAAbgB1AG0AOgAnACwAIABuAHUAbQApADsACgAgACAAfQApADsA)でもエラーになるので、見てみてください。それでは、どのように対処するのかというと、`for…of`で対応するのが推奨されているみたいです。実際に[こちらのPlayground](https://biomejs.dev/playground/?code=IAAgAGMAbwBuAHMAdAAgAG4AdQBtAGIAZQByAHMAIAA9ACAAWwAxACwAIAAyACwAIAAzACwAIAA0ACwAIAA1ACwAIAA2AF0AOwAKAAoAIAAgAGMAbwBuAHMAdAAgAHIAZQBzAHUAbAB0ACAAPQAgAFsAXQA7ACAALwAvACAAUH2cZ5IwPGgNfVkwizBNkRdSCgAKACAAIAAvAC8AIABgAGYAbwByAC4ALgAuAG8AZgBgAGcwMQDeVm4wzVOpX%2BZRBnRnMIxbUH0KACAAIABmAG8AcgAgACgAYwBvAG4AcwB0ACAAbgB1AG0AIABvAGYAIABuAHUAbQBiAGUAcgBzACkAIAB7AAoAIAAgACAAIABpAGYAIAAoAG4AdQBtACAAJQAgADIAIAA9AD0APQAgADAAKQAgAHsACgAgACAAIAAgACAAIAAvAC8AIAB2UHBlkjAkUppbCgAgACAAIAAgACAAIAByAGUAcwB1AGwAdAAuAHAAdQBzAGgAKABuAHUAbQAgACoAIAAyACkAOwAgAC8ALwAgADIADVBrMAlZ22NXMGYwUH2cZ2sw%2FY%2BgUgoAIAAgACAAIAB9AAoAIAAgAH0A)で`for…of`で配列操作を行なってもエラーになりません。

## 実装

`filter`や`map`と`forEach`を組み合わせて、配列操作を行います。

```jsx
  const numbers = [1, 2, 3, 4, 5, 6];

  // Step 1: `filter`で偶数を抽出（1回目の反復処理）
  const evenNumbers = numbers.filter((num) => num % 2 === 0);

  // Step 2: `map`で値を2倍に変換（2回目の反復処理）
  const doubledNumbers = evenNumbers.map((num) => num * 2);

  // Step 3: `forEach`で結果を出力（3回目の反復処理）
  doubledNumbers.forEach((num) => {
    console.log('🚀 ~ doubledNumbers.forEach ~ num:', num);
  });
```

上記のコードで計3回の反復をしています。

- `numbers`の要素を`filter`で1回目の反復。
- 新しく生成された`evenNumbers`を`map`で2回目の反復。
- 新しく生成された`doubledNumbers`を`forEach`で3回目の反復。

`for…of`を用いた配列操作を行います。

```jsx
  const numbers = [1, 2, 3, 4, 5, 6];
  
  const result = []; // 結果を格納する配列

  // `for...of`で1回の反復処理で完結
  for (const num of numbers) {
    if (num % 2 === 0) {
      // 偶数を判定
      result.push(num * 2); // 2倍に変換して結果に追加
    }
  }
```

一方でこちらは、計1回の反復をしています。

- 配列`numbers`を一回だけ反復し、条件に一致した値を直接処理しています。

## filterやmapの単独使用は上記の主張に反していないのか考えてみる

結論としては、逸脱していないと考えられる。上記での議論は`filter`や`map`と`forEach`と複数回の反復が発生するケースを問題視しているためです。`map`で一回の反復になるケースとなる単独での使用は該当しないと考えられます。`React`実装者ならよく使うこのケースですが、特に問題ないと言えるでしょう。

## 参考記事

https://biomejs.dev/ja/linter/rules/no-for-each/