はじめに
Reactの基本環境についてのメモ
参考
Node.jsとは
- JavaScript実行環境。JavaScriptをブラウザ上でけではなく、サーバーサイド言語のように使うことができる。
- フロントエンド開発で利用するバンドルやフォーマッターなどの各ツールはNode.js上で動くため、Node.jsが必要
npmとは
- Node.jsのパッケージ管理ツール
- 各ライブラリ(パッケージ)の依存関係を自動解決してくれる
npmのパッケージの依存関係自動解決 (ChatGptに聞いてみた)
Aというパッケージをインストールしたいとします。Aは、BとCという2つのパッケージに依存しており、さらにBはDというパッケージに依存しているとします。この場合、依存関係のツリーは以下のようになります：
A
|-- B
| |-- D
|
|-- C
-
パッケージのインストール:
-
npm install Aを実行すると、npmはまずAをダウンロードします。 - 次に、
Aのpackage.jsonを参照してBとCが依存関係としてリストされているのを確認します。
-
-
再帰的な依存関係の探索:
- npmは次に
BとCをダウンロードします。 -
Bのpackage.jsonを調べると、さらにDに依存していることがわかります。 - そのため、npmは再帰的に
Dもダウンロードします。
- npmは次に
-
バージョンの解決:
- もし、
AがBのバージョン1.0.0に依存しているのに対し、別のパッケージEがBのバージョン1.1.0に依存している場合、npmはそれぞれの要求を満たすように両方のバージョンをnode_modules内に配置することができます。
- もし、
-
node_modulesの構造:
- 上記の依存関係を考慮すると、
node_modulesのディレクトリ構造は以下のようになるでしょう：
- 上記の依存関係を考慮すると、
/node_modules
|-- A/
|-- B/
| |-- node_modules/
| |-- D/
|
|-- C/
このように、npmはパッケージの依存関係を自動的に解決し、適切なディレクトリ構造をnode_modules内に構築します。これにより、開発者は複雑な依存関係やバージョンの問題を気にすることなく、必要なライブラリを簡単にプロジェクトに組み込むことができます。
同じパッケージの違うバージョンに依存する場合の配置
AがBのバージョン1.0.0に依存し、EがBのバージョン1.1.0に依存する場合のnode_modulesディレクトリの配置について説明します。
-
npm install A Eを実行した場合、npmはまずAとEのpackage.jsonを確認します。 -
AとEが異なるバージョンのBに依存しているとわかると、npmはそれぞれの要求を満たすように、最も多くのパッケージが共有できるような配置を試みます。 -
この場合、一般的な配置は次のようになります：
/node_modules
|-- A/
| |-- node_modules/
| |-- B (version 1.0.0)/
|
|-- E/
| |-- node_modules/
| |-- B (version 1.1.0)/
|
|-- B (if one version of B is more commonly required by other packages, it might be placed here)
これにより、AとEはそれぞれの要求に合わせたBのバージョンにアクセスできます。
この配置方法は、特定のバージョンのライブラリに依存する可能性がある複数のパッケージが存在する場合に特に有効です。そのため、npmは依存関係のツリー全体を通じて一貫性を保ちつつ、各パッケージが正確なバージョンの依存ライブラリにアクセスできるようにします。
ただし、npmのバージョンや特定の状況によっては、上記の配置が変わることもあります。
asdf
-
複数のプログラミング言語やツールのバージョンを管理するためのCLIツールです。rbenv（Rubyのバージョン管理）、pyenv（Pythonのバージョン管理）、nodenv（Node.jsのバージョン管理）などの専用のバージョン管理ツールが存在する中、asdfはこれらを統一的なインターフェースで提供することを目的としています。
-
プロジェクトごとに使用するバージョンを指定する（ローカルのバージョン）ことや、システム全体でデフォルトとして使用するバージョンを指定する（グローバルのバージョン）ことが可能です。
-
さまざまな言語やツールに対して、一貫したコマンドセットで操作を行うことができます。
yarnとnpm
- JavaScriptのパッケージマネージャーで、Node.jsのプロジェクトの依存関係を管理するためのツール
- yarnのほうが高速でReactのコミュニティでよく使われている
- yarn install でdependenciesとdevDependenciesのパッケージがインストールされる
- devDependenciesにパッケージをインストール
- yarn add -D または --dev
package.json
- 各パッケージのインストールするべきバージョンの範囲が指定されている
- package.jsonの内容が同じでも、yarn installでインストールされた内容は今日実行するのと、1ヶ月後にじっこうするとのでは異なる場合がある
- もし各々でパッケージのバージョンが異なると挙動が変わることがあるので問題
yarm.lock(yarn)とpackage-lock.json(npm)
- 各パッケージの正確なバージョンを記録します
- リポジトリにコミットすることで、チームのメンバー全員が同じ依存関係のバージョンを使用することが確実になります。
Create React App (CRA)
- 以前はBabel導入、webpack導入、連携するように調整してReact環境を構築していた
- CRAを使用することで煩雑な環境構築の導入を簡単に設定して環境構築することができる
- Webpack、Babel採用、Jst、ESLint、など便利なツールが統合されている
- ejectすることで、Webpackも高度な設定が可能
Vite
- Webpack&Babelの環境は遅い、CRAプロジェクトのメンテナンスが遅く、CRAに変わるViteが登場
- ゼロコンフィグ、ESMネイティブ、爆速、ノーバンドル