🤖

【Node】JavaScriptでコレクション操作を用いる理由

2023/09/27に公開

この記事は?

著者は一貫してJavaScript(TypeScript) を用いてフロントエンド、バックエンドの開発を行なってきたので、言語の特性と実装する上でのアンチパターンが見えてくるようになりました。この記事では、for文を使わない代替案であるコレクション操作について示していきたいと思います。

コレクション操作とforとの違い

※) コレクション操作の概念に入門したい人向けの内容です。適宜読み飛ばしてください

コレクション操作とは、mapやfilterなど複数のデータを持つコレクション(配列やリスト、マップなど)に対して行う操作を指します。for文との違いとしてまず初めに押さえておくべきことは、for文は命令的である一方、コレクション操作は宣言的であるということです。for文では、操作をどう行うか?に焦点を当て具体的に記述しますが、mapやfilterは関数名で何を行うか宣言しており実行の詳細は隠蔽されています。この特徴は、後述するコードの保守性可搬性にも寄与するものです。また、mapやfilterでは新しいコレクションを生成するため、イミュータビリティも担保されていることは大きな特徴です。さらに、RxJSを初めとするリアクティブプログラミングとも相性が良い(本記事では詳細の説明は省きますが、データフローや非同期処理があっても、宣言的なコードを書くと追跡し易いからです。)ことからサービスがグロースして、大規模且つリアルタイムを求める要件があってもスケールしやすいです。ではこれらの性質について、詳しく見ていきましょう。

コレクション操作を使う理由

・変数の不可変性

コレクション操作であるmapやfilterなどの関数はイミュータビリティがあるため、生成結果はもとの変数を変えずに新しくコレクションを生成できます。よって、もとの変数を変えるバグを防ぐことができます。フロントエンドの開発で意図せずにコードを書き損じ、もとの変数まで変えてしまって、表示がおかしくなってしまったことはないでしょうか?そういった人為的なミスは、イミュータブルな関数であるコレクション操作を使えば防げますね。

・実行処理の隠蔽

for文を使って構文を書く場合と異なり、コレクション操作では処理が隠蔽されます。for文では、外部に書いたコードが意図せず干渉する可能性がありますが、コレクション操作を用いるとそういった可能性を排除することができるというメリットがあります。

・コードの可搬性

コレクション操作ではブロック単位でコードがまとまっているため、可搬性が高まり、コードを再利用するユースケースがあっても問題なく対応することができます。

・コードの保守性

コレクション操作は宣言的な記法であるから処理が何をしているのか分かりやすく、前述の通りブロックごとで処理がまとまるため、メンテナンス性も高まり易いです。

・スケーラビリティ

前述の通りコレクション操作の可搬性、保守性はスケーラビリティに寄与し、オンラインで大量データを捌くようなケースであってもリアクティブプログラミングへ移行が容易です。

for文を使うケースは?

では、for文を使うケースはないのでしょうか?よく、for文とforEachで大量のデータを回して速度がfor文の方が速くなった!という記事を散見します。実行環境次第ですが、for文の方が実行結果が速くなるという主張はよく見るものです。筆者の考えは、「JavaScriptにおける開発では、前述の通り不可変性、隠蔽性、可変性、保守性、拡張性を享受するために、できるだけコレクション操作を用いて、必要な時だけfor文を用いよ」 です。これは、通常のアプリの処理ではfor文とコレクションを使う場合の速度差は看過できる程度であり、かつ、多くの現実のアプリケーションがI/Oバウンドであり、CPUバウンドではないからです。つまり、多くのアプリケーションでは、データの出入力(I/O)の方が計算処理(CPU)よりも時間がかかることが多いので、そちらをきちんと設計したり改善する方がパフォーマンスの観点でより重要であると言えます。極端に大量のデータがあるなどCPUバウンドのケースに直面して、for文による速度改善が有効であるときにfor文を使えばよいですが、それ以外の極端なデータ量がなくfor文が対して有効でない場合は、コレクション操作で事足りるケースがほとんどです。また、それほど極端なデータ量になると、RxJSなどのリアクティブプログラミングも検討に入り、前述の通りコレクション操作を使うことが推奨されます。

・なお、RxJSで大量データを捌く方法については、以下の記事が参考になりそうです。
https://qiita.com/ovrmrw/items/2c8bd3d46d7bcc0806d2

コレクション操作が難しい人へ

JavaのStreamAPIと同じで、コレクション操作は慣れていないと難しいという声も聞くことがあります。そこで、以下にreduceについて解説してある記事があるので、よろしければ学習用にお使いください。コレクション操作を使った開発で素敵な開発ライフをお過ごしください。

https://zenn.dev/rio_dev/articles/c4773cdf76a535

Discussion