# Node, npm, webpack, Vue, Reactなどについて

[TOC]

Vue, React, Nuxt, Nextなどは、基本的にはwebpackが無いと動かない。
※Vue, Reactは簡単な構成だったら、CDNでも可能

## webpack
元々は、複数ファイルを１つのJSファイルにまとめてくれるツール。
Webでは、読み込むファイル数が多いと、表示速度が下がるので、できるだけファイル数を少なくしたい。

今は、さらにSassのコンパイル（変換）・コードの圧縮・サーバーの立ち上げなど色々な機能が搭載されているが、以前はGruntやGulpというツールがそれを担っていたが、
GruntやGulpの機能をwebpackができるようになっったので、webpackだけが使われるようになった。

## Node.js
Grunt,Gulp,webpackはNode.jsで動いています。
Node.jsとは、ブラウザ以外で動作することができるJS。

### npm
Nodeのパッケージ（プラグイン）を管理してくれる、ツール。パッケージマネージャーという。Nodeをインストールするときに一緒に勝手にインストールされる。

### yarn
npmと機能は一緒だが、違う会社が作っている。
今は速度がnpmと一緒だが、当初はyarnの方が早かった。
体感的にnpmより、yarnの方がバグが少ない。

### pnpm
npmやyarnより早いが、全てのパッケージに対応しているわけでは無いので、将来的には普及する見込みだが、今は様子見

## コマンドラインツール
Node.jsやnpmなどは基本的には、コマンドで操作する必要があるので、コマンドラインの知識が必要。

## Vite, TurboPack...
Webpackの数倍早いのもある。
今後も新しいのが出てくると思います。
- Vite → React, Vue, astroなど色々対応してる。
- TurboPack → Next.js専用

## まとめ
- VueやReactはWebpackが必須
- webpackはNodeが必須
- Nodeはnpmなどが必須
- Nodeやnpmはコマンドラインツールが必須

###### tags: `自分用メモ`