React基礎講座 #2 開発環境の設定 (Node.js + Vite)

フレームワーク React
読了 7分

前回はReactとは何か、どんな強みを持っているかを見ました。今回は本格的にコードを書くために開発環境を整え、初めてのReactプロジェクトを作ってみることにしましょう。

今回の記事でやることは大きく3つです。

  1. Node.jsのインストール
  2. Viteで新しいReactプロジェクトを作成
  3. 開発サーバーを起動してブラウザで確認

Node.jsとは何で、なぜ必要なのですか? #

ReactはJavaScriptライブラリです。ただ、私たちが書くReactのコード(JSX、モジュールimportなど)はブラウザがそのままでは理解できない構文を含んでいるため、実行可能なJavaScriptに変換する過程が必要です。この変換をはじめとするビルド作業をコンピュータで実行するにはJavaScriptランタイムが必要で、それがNode.jsです。

Node.jsは元々サーバー開発のために作られましたが、今日ではフロントエンド開発者もNode.jsの上で動作するツール(バンドラー、コンパイラ、パッケージマネージャーなど)を使ってコードを書きビルドします。つまり、Reactで開発するためにはNode.jsが必須です。

Node.jsのインストール #

Node.jsは公式サイトのnodejs.orgからOS別のインストールファイルを取得してインストールできます。

おすすめのバージョンはLTS(Long Term Support) バージョンです。LTSは長期サポートバージョンという意味で、一定期間の安定性とセキュリティパッチが保証されるバージョンです。サイトに入るとLTSバージョンとCurrentバージョンが一緒に表示されますが、初めて始める方はLTSの方をダウンロードしてください。

Windows #

  1. nodejs.orgにアクセス
  2. LTSボタンを押して.msiインストールファイルをダウンロード
  3. インストールファイルを実行し、案内に従って次へ、次へ、インストールを進める
  4. インストールが終わったらコマンドプロンプト(CMD)やPowerShellを新しく開きます(既に開いていたウィンドウにはPATHの変更が反映されません)

Mac #

  1. nodejs.orgにアクセス
  2. LTSボタンを押して.pkgインストールファイルをダウンロード
  3. インストールファイルを実行し、案内に従ってインストール
  4. ターミナルを新しく開きます

MacではHomebrewというパッケージマネージャーを通じたインストールも可能です。

Node.jsインストール (Homebrew) 
brew install node

インストール確認 #

インストールが終わったら、ターミナルやコマンドプロンプトで次の2つのコマンドを実行してみてください。バージョン番号が出力されれば正常にインストールされています。

バージョン確認 
node -v
npm -v

node -vはNode.jsのバージョンを、npm -vはNode.jsと一緒に自動でインストールされるパッケージマネージャーであるnpm(Node Package Manager)のバージョンを出力します。npmはReactをはじめとする数多くのJavaScriptライブラリを私たちのプロジェクトにインストールするときに使うツールです。

注記
会社やチームによってはnpmの代わりにpnpmやyarnのような他のパッケージマネージャーを使う場合も多いです。使い方はほぼ同じなので、この講座ではNode.jsと一緒に自動でインストールされるnpmを基準に進めます。

Viteで新しいプロジェクトを作る #

それでは初めてのReactプロジェクトを作ってみましょう。私たちはVite(フランス語で「速い」という意味、「ヴィート」と発音)というツールを使います。

ViteはReactをはじめとする様々なフロントエンドフレームワークのためのビルドツールです。新しいプロジェクトの初期設定を自動で作ってくれて、開発中は非常に高速な開発サーバーを提供します。以前はcreate-react-appというツールが標準でしたが、今はより高速で軽量なViteが事実上の標準になりました。

希望の場所(例: ~/projectsまたはDesktop)に移動した後、ターミナルで次のコマンドを実行します。

Viteプロジェクト作成 
npm create vite@latest

コマンドを実行するといくつかの質問を受けます。

  1. Project name: プロジェクトフォルダ名。希望の名前を入力します(例: my-first-react)。
  2. Select a framework: Reactを選択します。
  3. Select a variant: JavaScriptを選択します。(TypeScriptは後で慣れた後にチャレンジしてもよいです。)

選択が終わるとViteがプロジェクトフォルダを作ってくれます。最後に次のような案内メッセージが見えるはずです。

実行結果 
Done. Now run:

  cd my-first-react
  npm install
  npm run dev

案内の通りに進めてみます。

依存関係のインストール 
cd my-first-react
npm install

npm installはプロジェクトが依存するライブラリ(React本体、Vite、その他のツール)をインターネットから取得してnode_modulesフォルダにインストールするコマンドです。最初は時間が少しかかることがあります。

開発サーバーの実行 #

それでは開発サーバーを立ち上げてみます。

開発サーバー実行 
npm run dev

次のような出力が見えたら成功です。

実行結果 
  VITE v5.x.x  ready in 250 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

ブラウザを開いてhttp://localhost:5173にアクセスしてみます。Vite + Reactのロゴが回転している基本画面が見えればすべて正常です。

プロジェクト構造を見てみる #

開いたプロジェクトフォルダを見ると、次のような構造が作られています。

my-first-react/ 
my-first-react/
├── node_modules/        ← インストールされたライブラリ (直接触ることはない)
├── public/              ← 静的ファイル (画像、faviconなど)
├── src/                 ← 私たちが書くコードが入るところ
│   ├── App.jsx          ← 最初のコンポーネント
│   ├── main.jsx         ← アプリのエントリーポイント
│   ├── App.css
│   └── index.css
├── index.html           ← アプリが注入されるHTML
├── package.json         ← プロジェクト情報と依存関係リスト
└── vite.config.js       ← Viteの設定

今の段階でもっとも重要なファイルはsrc/App.jsxです。私たちが画面に見せる内容を書くところです。

最初の修正 — Hot Module Replacement体験 #

好きなエディタ(VS Code推奨)でプロジェクトフォルダを開きます。src/App.jsxを開くと次のようなコードが見えます。

src/App.jsx 
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div>
        {/* ... */}
      </div>
      <h1>Vite + React</h1>
      {/* ... */}
    </>
  )
}

export default App

<h1>Vite + React</h1>の部分を次のように変えてみます。

src/App.jsx 
<h1>こんにちは、React!</h1>

保存すると開発サーバーを止めたり、リロードを押さなくてもブラウザの画面が即座に更新されます。この魔法のような機能こそHMR(Hot Module Replacement) — 変更されたモジュールだけをリアルタイムで入れ替えて画面に反映してくれるViteの機能です。開発速度を大きく引き上げてくれるので、今後よく見ることになるでしょう。

ヒント
開発サーバーが立ち上がっている間にコードを修正するとブラウザが自動で更新されます。開発サーバーを終了するにはターミナルでCtrl + Cを押せばよいです。再度起動するときは同じフォルダでnpm run devを実行します。

おわりに #

今回の記事ではNode.jsをインストールし、Viteで初めてのReactプロジェクトを作り、開発サーバーを立ち上げてコードの変更が即座に画面に反映されるところまで確認しました。これで本当にReactのコードを書く準備が整いました。

次の記事「React基礎講座 #3 JSXとは何か」では、Reactコンポーネントを書くときに使う特殊な構文であるJSXを本格的に扱ってみることにしましょう。

X