Zenn
😸

【今からReact #1】JavaScriptだけでやってきた私が今からReactを学ぶ理由

に公開
JavaScript
jQuery
Next.js
React
idea

はじめに

これまで関わってきた制作現場では、ずっと素のJavaScriptやjQueryが中心。
しかも複数の制作会社が関わっていたため、自分だけReactやNext.jsに乗り換えるわけにもいかず、技術の波に乗れずにいました。

でも、技術書やSNSの情報を見ていると、「このままじゃマズいかも」という焦りも。
そんな思いから、いまさらですがReactを勉強してみました。

この記事では、初心者目線でReactの基本を整理してみます。
同じような立場の方のヒントになればうれしいです。

なぜReactなのか？

Reactを学んで気づいたのは、単なる流行りじゃなく、根本的な開発の考え方そのものが進化しているということでした。

ポイント JavaScript React
開発の視点 DOMを直接操作する UIの状態と構造を宣言的に定義する
UIの作り方 要素の追加・削除・変更を記述 状態に応じてどう見えるべきかをコンポーネントで表現
画面更新の方法 イベントごとにDOMを都度操作 状態の変化に応じてReactが最適に差分更新を行う
コードの保守性 状態や操作が散らかりやすい コンポーネント単位で整理され、再利用しやすい
概念的なポイント 命令型プログラミング（どう動かすかを書く） 宣言型プログラミング（どうあるべきかを書く）

従来のJavaScriptでは、「どう操作するか」を1つ1つ指定して画面を変えてきました。
しかしReactは、「状態に応じてどうあるべきか」と宣言しておけば、自動で画面を整理してくれるようになります。

結果として

  • 複雑に絡み合うUIも整理しやすくなる
  • 保守性・再利用性が大幅にアップ
  • 後から機能を足したり変えても安心して整理し直せる

というわけです。
次に、そんなReactの基本に少し足を踏み入れてみましょう。

開発に必要なもの

Reactの開発に欠かせないのがNode.jsやnpmというツールです。
素のJavaScriptやjQueryでは必要なかったので、「なにこれ？」と思うかもしれません。
少し整理してみましょう。

Node.jsとは？

Node.jsは、JavaScriptをブラウザ外で動かす実行環境です。新しい言語ではなく、JavaScriptの活用範囲をサーバーやPC上に広げるための環境と考えるとイメージしやすいです。

Node.js自体はReactのためだけにあるわけではありませんが、Reactの開発を行う際には必須の環境となっています。

もともとはブラウザ専用のJavaScript

JavaScriptといえば、画面にメッセージを表示したり、ユーザーの操作に応じて動作させたりすることが主な使い方でした。しかし、Node.jsの登場により、JavaScriptをブラウザの外、サーバーやPCの上でも動かせるようになりました。

Node.jsがReact開発に欠かせない理由

Reactは最新のJavaScript文法で書かれていて、そのままブラウザでは動かせない場合が多いです。そのため、Reactのコードはブラウザが理解できる形に変換（ビルド）する必要があります。

実際のビルド処理は、react-scriptsやwebpack、Viteといったビルドツールが担当します。
Node.jsは、それらのビルドツールを動かすための実行環境として機能しています。

つまり、Node.jsがあるからこそ、これらのビルドツールが動き、Reactのコードをブラウザ対応の形に変換できるのです。

npmとは？

npm（node package manager）は、Node.js用のプログラム（パッケージ）を管理してくれるツールで、ライブラリやプログラムを簡単にインストール・管理するために使います。

なぜnpmが必要なのか？

Reactのようなモダンな開発では、複数のライブラリを組み合わせて使うことが一般的です。
しかし、それぞれのライブラリが他のモジュールに依存している場合も多く、手動で管理すると非常に複雑になります。

npmが解決する4つのポイント

  1. 依存関係の自動管理
    複数のモジュールを組み合わせると、それぞれがさらに別のモジュールに依存していることがよくあります。npmはそうした依存関係を自動で解決し、必要なものをすべて正しくインストールしてくれます。

  2. バージョン管理がラクになる
    特定のバージョンを指定してインストールできるため、安定した環境を保てます。

  3. 簡単にアップデートできる
    npmコマンド一つで使っているモジュールを最新にできるので、メンテナンスが楽です。

  4. プロジェクトの再現性が高い
    package.jsonやpackage-lock.jsonにモジュールの情報がまとまっているので、別環境でも同じ状態を再現しやすいです。

package.json
{
  "version": "0.1.0",
  "dependencies": {
    "react": "^19.1.0",
    "react-dom": "^19.1.0",
    "react-scripts": "5.0.1",
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
}

だからReactのようなモダンなフレームワークを使うなら、npmの活用は必須と言えます。

まとめ

Reactって、もうずいぶん前からある技術ですよね。
でも、JavaScriptだけでやってきた自分には「今さら？」と思う気持ちも正直ありました。

それでも実際に触ってみると、Reactが注目される理由がちゃんとあるんだなと感じました。
ビルドやパッケージ管理といった開発の仕組みもずっと進化しているんです。

だからこそ、これからのフロントエンド開発には欠かせないものだと実感しています。
同じようにJavaScriptだけでやってきた方にも、ぜひReactを学んでみてほしいです。

では、また次回お会いしましょう！

Discussion