【Reactが動く仕組み】シリーズ
Reactでコードを書いて、アプリは作れる。
でも、「どうやって動いているのか？」と聞かれると、言葉にできない…。
一歩踏み出して、「裏側の仕組みを理解して説明できる」を目指したシリーズです。
全７弾で以下の内容を記載予定です。
１．Node.js（実行環境）
２．ビルド（構築の流れ）
３．Babel / polyfill（変換）
４．DOM / 仮想DOM（仕組み）
５．レンダリング（動き）
６．再レンダリング（なぜ起きる？）
７．最適化（どう見極める？）
今回はその第1弾として、「Node.jsとは何か」を整理していきます。
はじめに
先人の方々が残してくださった記事やブログを参考に、環境構築を進めてきたのですが、
正直なところ「Node.jsとは何か」をあまり意識したことがありませんでした。
- 何ができるのか
- 何のためにインストールしたのか
（同じように、なんとなく使っていた方もきっといるはず…）
ということで、今回は基礎から整理してみることにしました。
そのため、内容はそこそこ初心者向けになっていると思います。
この記事でわかること
- Node.jsとは何か
- JavaScriptはどこで動くのか
- なぜReact開発にNode.jsが必要なのか
Node.jsとは何か
Node.jsとは何かを一言でいうと、
👉 JavaScriptを「ブラウザ以外」で動かすための実行環境
👉 この「ブラウザ以外で動く」という特徴が、React開発で重要
JavaScriptはもともとどこで動くのか
普段書いているJavaScriptは、基本的にブラウザ上で動いています。
例えば
- ボタンをクリックしたときの処理
- 入力フォームのバリデーション
- 画面の表示切り替え
こういった処理はすべて、ブラウザの中で実行されています。
ブラウザだけではできないこと
ただし、ブラウザで動くJavaScriptには制限があります。
例えば
- ローカルファイルの読み書き
- サーバーとしての処理（リクエストを受け取るなど）
👉 これらはブラウザではできません
👉 Reactアプリを作る過程では、これらの処理が必要
そこで登場するのがNode.js
Node.jsを使うと、JavaScriptをブラウザの外で動かすことができます。
つまり
- ファイルの読み書きができる
- サーバーとして動かせる
- コマンドラインでスクリプトを実行できる
👉 「裏側の処理」もJavaScriptで書けるようになる
なぜそれができるのか？
Node.jsは、JavaScriptを実行するためのエンジン（V8）をベースにして、
ファイル操作やネットワーク通信といった機能を追加した環境です。
そのため
👉 ブラウザではできないことも実行できる
混乱したポイント
ちょっと待った。
Node.jsって、環境構築で入れた「開発ツール」じゃなかったっけ？
それなのに、サーバー？ファイル操作？
「Node.jsでビルドする」という記事も見るけど…どういうこと？
開発中は、ビルドやパッケージ管理などでNode.jsを使っていますが、
一方で「Node.jsはサーバーサイドで使われる」という説明もよく見かけます。
そのため、
- 開発で使うNode.js
- サーバーとして動くNode.js
が、別のもののように感じてしまい、なかなかモヤが晴れませんでした。
結論
👉 どちらも同じNode.js
ただし、使われる役割が違うだけです。
開発時のNode.js
- ビルド（Babel / webpack）
- 開発用サーバーの起動
（作成中のアプリをブラウザで確認できるようにし、変更を自動反映してくれる） - パッケージ管理（npm）
👉 Reactアプリを「作るための道具」
本番環境でのNode.js（使う場合）
- APIの処理
- データベースとのやり取り
- ファイル操作
👉 サービスの「裏側を動かす役割」
このように、Node.jsは「サーバー」「開発環境」のくくりではなく、
JavaScriptを実行するための環境です。
👉 「Node.js＝サーバー」ではなく、
👉 「サーバーとしても使える実行環境」 と考えると整理しやすいです。
そのため、同じNode.jsでも用途によって役割が変わることで、
別のもののように見えてしまっていた、というのが今回の混乱の原因でした。
では、この整理を踏まえて、本題に戻ります。
👉 React開発では、このNode.jsがどのように使われているのか？
なぜReact開発にNode.jsが必要なのか
ここまでで、Node.jsの基本は理解できました。
ではここで、「React開発でなぜNode.jsが必要なのか」を整理します。
結論からいうと、
👉 Reactアプリを「開発・ビルドするための処理」を動かすために必要だからです
Reactでアプリを作るとき、ブラウザで動かす前に、いくつかの処理が行われています。
例えば：
- JSXをJavaScriptに変換する（Babel）
- 複数のファイルを1つにまとめる（webpackなど）
- 開発用サーバーを起動する
- 必要なライブラリをインストールする（npm）
これらの処理は、すべてブラウザでは実行できません。
そこで登場するのがNode.jsです。
混乱ポイントで少し触れましたが、Node.jsを使うことで、
- コマンドラインでビルド処理を実行する
- 開発サーバーを立ち上げる
- パッケージ管理を行う
といった、「開発に必要な裏側の処理」を動かすことができます。
👉 つまり、React開発におけるNode.jsは
👉 アプリを動かすためではなく、「アプリを作るため」に使われている
このように、Node.jsはReactの実行そのものではなく、
開発環境を支える重要な役割を担っています。
まとめ
- JavaScriptは、もともとブラウザで動く言語
- Node.jsは、JavaScriptをブラウザ外で動かすための実行環境
- Node.jsは、「開発ツール」と「サーバー」の2つに分かれているわけではなく、
👉 同じ環境が用途によって役割を変えているだけ
- React開発では、Node.jsは
👉 アプリを動かすためではなく、「アプリを作るためのツール」として使われている
- 具体的には、ビルドや開発サーバー、パッケージ管理など、
👉 ブラウザではできない処理を担っている
一言にまとめると、
👉 Reactはブラウザで動くが、その裏側はNode.jsが支えている
第２弾に向けて
ここまでで、Node.jsが「JavaScriptをブラウザ外で動かす実行環境」であり、
React開発では「アプリを作るためのツール」として使われていることがわかりました。
では、そのNode.jsは実際に何をしているのか？
例えば、
- JSXがJavaScriptに変換される
- 複数のファイルが1つにまとめられる
- 開発サーバーが起動する
といった処理は、どのように行われているのか？
👉 次回は「ビルド」をテーマに、
👉 Reactアプリがどのように構築されているのかを整理していきます。