はじめに

　業務システムの開発で大量の情報を高速に閲覧したいという顧客の要望から、Webはどうしてももっさりしていたのでオンプレミスのクライアントサーバーで開発していました。その結果、あまりフロントエンドになじみがありませんでした。
　最近フロントエンドも少し使うようになり、このQiitaでも関連記事を書いてみていますが、開発ではテンプレートを利用していればNode.jsやrollupなどのツールが何をしているのかわからなくても開発できてしまいますし、エラーが出てもそれをググってしまえば、おぼろげな理解でも問題が解消できてしまいます。
　気になって出てきたツール類をググってみても、そのツールについては書かれていても、全体像がわかりにくいので背景も含めて自分なりにまとめてみました。（まとまっていないかも...）
　間違っているかもしれませんので、ご指摘とかいただけるとうれしいです。
　フロントエンドを始める方には、理解の一助にでもなればいいかなと思います。

フロントエンドの環境

　まずフロントエンドのブラウザの環境を整理すると

そもそもブラウザはHTML、css、JavaScriptしか使えない

　今の開発環境ではReact、Angular、Vue等のフレームワークが使われていおり、言語もTypeScriptだったりスタイルシートも sass、scssなんかも使われています。しかしながらブラウザでは、TypeScriptやsas、scss、フレームワークで記述されたものもは直接扱えません。その為、一旦全てをHTML、css、JavaScriptに変換する必要があります。

JavaScriptにバージョンがありブラウザによってサポートレベルが違う

　さらにはJvaScriptにはいくつかのバージョンがあります。現在主力となっているのはES5、ES6というところでしょうか。（JavaScriptのバージョンの表記もES5のようにバージョンで記述するのと、ES6からの様ですがES2015の様に年号、またはES2015(ES6)の様に両方記述しているものもあり混乱します。）このJavaScriptのバージョンも現在、ES10まであるようです。（違っていたらごめんなさい）

JavaScriptはES6以降が望ましいのでしょうが

　基本的にはES6以降が望ましいようですが、いまだに数多く残る悪名高きIE11のサポートの為に実際にはES5が使われているのが実情のようです。

補足：
　IE11はHTML5のサポートは壊滅的ですし、マイクロソフトもEdgeを推奨しており、Office365でもサポートしないとしたので、徐々になくなってはいくでしょう。しかしながら、各企業ではいまだにIE11でしか動作しない社内システムが数多く残っており、まだまだなくならないのが実情です。

そこで開発時にツールを使っている

　HTML、css、JavaScriptで記述してしまえば、開発環境など必要ありません。そのままブラウザが参照できるようにしてしまえば、動作するからです（バックエンドは考えていませんよ）。
　しかしながらフロントエンドの処理の増大により、各種フレームワークが開発され、さらに巨大なフロントエンドの記述が必要となったことで、フロントエンドの開発環境が整備されていくようになり、各種ツールが使われるようになってきたようです。

それぞれのツールは何をしているのか

　たいていはNode.jsのインストールに始まりその、Node.jsのパッケージ管理であるnpmを利用してインストールしている各種ツールが何をしているのかというと、開発した各種ファイルをブラウザが処理できるものに変換するというのが基本になります。ただし、それ以外にも高速化など以下の変換を行っているようです。

トランスパイル：マシン語にするならコンパイルですが、言語の変換なのでこのような単語になっているようです）
ES5変換：これもトランスパイルの一種ですが、言語の変更ではなくJavaScriptのバージョンの変更になります。IE11への対応なのでしょう。
sass,scss変換（忘れてたので追加）：なんかcss系の変換を忘れてました。cssを使うなら不要ですが。
バンドル：複数のJavaScriptやcssファイルをまとめることで読み込み処理の高速化を図っているようです。
ミニファイ：ファイルサイズを小さくして読み込みや実行速度を高速化しています。JavaScriptのライブラリのファイル名によく見られる「-min」はこれをしたファイルであることを意味しています。ミニファイすると中身が読みにくいので、ミニファイする前のファイルも提供されている場合がほとんどです。どっちでも動作しますが、デバッグの時はミニファイしていないものとmapファイルを使います。（このマップファイルも出力するようになっています。mapファイルが無いとデバッグ時の元のソースとでのデバッグができません）

　そしてこれらの処理の手順を記述し、その基準に従って処理をするためのツールがタスクランナーと呼ばれます。ここで書いた以外の事も登録され、実行されています。
　さらに、このタスクランナーを実行したり、ツールのインストールやアップデートをするのに使われているのがNode.jsというJavaScriptを実行させるためのツールのようです。

補足：
　最近ではJavaScriptでは動作が遅いということで、スクリプトではなくネイティブで処理する、esbuildの様なツールもあるようです。

Node.js

　フロントエンドで使うJavaScriptが便利だし、バックエンドで違う言語で開発するの大変なので、バックエンドもJavaScriptで開発できれば便利。ということで作成されたJavaScriptの実行ツールがNode.jsです。バックエンドで利用できる様にファイル操作等の処理が追加されています。
　様々な環境で動作する為、フロントエンドのタスクランナー等の処理記述に使われるようになったのでしょうか、他のスクリプトではOSによって実行可能なスクリプト言語が違うので、OSの依存度が少ないNode.jsが使われるようになったのかと思います。

役割が完全に分かれているわけではない

　これが状況をさらにわかりにくくしているのですが、各ツールは上記の様にタスクランナーや各種処理毎に分かれているわけではなく、複数の機能を有しています。
　例えばwebpackは名前からすると基本的にバンドラー（バンドルするツールの意味）となりますが、プラグインの機能が有るので、外部のツールを取り込んで事前処理や事後処理を実行できるので、タスクランナーにもなります。

Node.js以外によく見かけるツール等

　よく見かけるツールをちょっと書いておきます。オープンなのでツールはそのほかにも山ほどあります。テンプレートでできたコンフィグなどを眺めてみて、わからなければググってみましょう。

webpack：JavaScriptやcssをまとめるバンドラ。タスクランナーとしても機能している
rollup：タスクランナー（だよね）
Babel：ES5への変換をする

ついでにフレームワークやWeb Assenblyについて

　React、Angular、Vue等のフレームワークは、トランスパイルして実行されますが、仮想DOMを構成する巨大なJavaScriptライブラリも利用しています。
　最近見かけるsvelteは、参照するライブラリを持たないフレームワークで、仮想DOMがありません。純粋なJavaScriptとして動作するので小さくて高速になるとか
　高速という意味では、WebAssemblyというのがありますが、上記のフレームワークではなくブラウザ上で動作するバイナリコードとなります。バイナリコードですのでスクリプトより高速に動作するようです。言語もCとかPythonで書ける上にJavaScriptと連携することも可能とか。でもDOM構造にアクセスできないとの記述も見かけたのですが、これは私もまだよくわかっていません。これからいろいろなフレームワークが出てくるもしくは対応してくるかもしれませんね。

　あとがき

　ここまで読んでいただいた方には感謝いたします。間違っているところを指摘してもらったり、さらにこんなことも知っているといいよとかあれば教えてください。