ViteでReact開発環境を作ろう

学習の目標

本章では、以下の内容を学習します。

• Node.jsとnpmが何なのかを理解する
• WindowsとMacでのNode.jsインストール方法を習得する
• Viteがどのような開発ツールなのかを理解する
• ViteでReactプロジェクトを作成する方法を学ぶ
• 開発サーバーの起動方法と基本的な使い方を習得する

ターミナル・PowerShellに慣れていない方へ

別なレッスンにて、ターミナルやPowerShellの基本的な使い方について学ぶことができます。

ここからはコマンドを入力していく必要がありますので、ターミナルやPowerShellの基本的な操作に慣れていない方は、以下のレッスンを先に学習することをお勧めします。

• 【Mac向け】 ターミナルの操作について
• 【Windows向け】 PowerShellの操作について

Node.jsとnpmの確認

React開発を始める前に、Node.jsとnpmをインストールする必要があります。

Node.jsは、JavaScriptをブラウザ以外の環境（コンピュータ上）で実行するためのツールです。

※Node.js公式サイトより引用

本来JavaScriptはWebブラウザ内でしか動作しませんでしたが、Node.jsによってコンピュータ上でJavaScriptを実行できるようになりました。

また、npm（Node Package Manager）は、Node.jsと一緒にインストールされるツールで、JavaScriptのライブラリやツールを管理するために使用します。

※npm公式サイトより引用

Reactも含めて、多くのJavaScriptライブラリがnpmを通じて配布されています。

まずは、お使いのコンピュータにNode.jsがインストールされているかを確認してみましょう。

Node.jsがインストール済みかの確認方法

Windowsの場合は、スタートメニューから「コマンドプロンプト」または「PowerShell」を開きます。 Macの場合は、Launchpadから「ターミナル」を開きます。

開いたコマンドライン（ターミナル）で、以下のコマンドを実行してください。

node -v

次に、npmが使えるかも確認しましょう。

npm -v

これらのコマンドでバージョン番号が表示されれば、Node.jsとnpmがすでにインストールされています。

その場合は、次の「Viteとは何か」の章に進んでください。

バージョン番号が表示されない場合や、「コマンドが見つかりません」のようなエラーが表示される場合は、Node.jsをインストールする必要があります。

Node.jsのインストール方法

Node.jsがインストールされていない場合は、以下の手順でインストールを行いましょう。 お使いのOS（WindowsまたはMac）に応じて、該当する章を参照してください。

Macでのインストール方法

公式インストーラーを使用する方法（推奨）

最も簡単で確実な方法は、公式インストーラーを使うことです。

ブラウザでNode.jsの公式サイトにアクセスします。

• https://nodejs.org/ja

トップページに表示されている「LTS」（Long Term Support）版のダウンロードボタンをクリックします。 これは安定版と言われ、長くサポートされるバージョンですので、ほとんどの場合こちらを選ぶことをお勧めします。

ダウンロードしたインストーラー（Mac なら.pkgファイル）をダブルクリックして開きます。

あとは画面の指示に従ってインストールを進めてください。 インストール中にパスワードの入力を求められた場合は、パソコンのログインパスワードを入力してください。

インストール後、ターミナルを開いて以下のコマンドを実行し、Node.jsとnpmが正しくインストールされたか確認します。

node -v
npm -v

これでバージョン番号が表示されれば、インストールは成功です。

Homebrewを使用する方法

すでにHomebrewをインストール済みの方は、こちらの方法も便利です。

Homebrewがインストールされていない場合は、まずターミナルを開きます。 ターミナルはLaunchpadから「ターミナル」を検索して開くことができます。

次に、以下のコマンドを実行してHomebrewをインストールします。 （コマンドがうまく実行できない場合は、公式サイトから最新のコマンドをコピーしてみましょう）

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

インストール中にパスワードの入力を求められた場合は、Macのログインパスワードを入力してください。

インストール後、以下のコマンドを実行し、バージョン情報が表示されればOKです。

brew -v

Homebrewがインストールされたら、以下のコマンドを実行してNode.jsをインストールします。

brew install node

インストール後、ターミナルを開いて以下のコマンドを実行し、Node.jsとnpmが正しくインストールされたか確認します。

node -v
npm -v

これでバージョン番号が表示されれば、インストールは成功です。

Windowsでのインストール方法

公式インストーラーを使用する方法

Windows環境では公式インストーラーを使うのが最も簡単で確実な方法です。

ブラウザでNode.jsの公式サイトにアクセスします。

https://nodejs.org/ja

トップページに表示されている「LTS」（Long Term Support）版のダウンロードボタンをクリックします。 これは安定版と言われ、長くサポートされるバージョンですので、ほとんどの場合こちらを選ぶことをお勧めします。

インストーラーの実行

ダウンロードしたインストーラー（.msiファイル）をダブルクリックして開きます。 開いたら、「Next」ボタンをクリックして、インストールを進めていきます。

基本的にはデフォルト設定のままで問題ありませんので、「Next」を押して進めていきましょう。

「インストールの準備ができました」という画面が表示されたら「Install」ボタンをクリックします。

インストールが開始され、しばらく待つとインストールが完了します。 最後に「Finish」ボタンをクリックしてインストーラーを終了します。

インストールの確認

インストール後、コマンドプロンプト（またはPowerShell）を開いて以下のコマンドを実行し、Node.jsとnpmが正しくインストールされたか確認します。

npmとは、Node.jsで使えるライブラリを管理するツールです。

コマンドプロンプトは、Windows検索ボックスに「cmd」と入力し、表示された「コマンドプロンプト」をクリックして開くことができます。

コマンドプロンプトが開いたら、以下のコマンドを入力して実行します。

node -v

次に、npmのバージョンも確認しましょう。

npm -v

これらのコマンドを実行した結果、バージョン番号が表示されれば、インストールは成功です。

Viteとは何か（高速な開発環境）

Node.jsのインストールが完了したら、次はViteについて学んでいきましょう。

Vite（ヴィート、フランス語で「速い」という意味）は、モダンなWebアプリケーションを開発するためのビルドツールです。 React、Vue.js、Vanillaなど、様々なフレームワークに対応しています。

※Vite公式サイトより引用

Vite は近年、フロントエンド開発の標準的なツールとして広く使われるようになりました。

これまでのReact開発では、Create React Appというツールがよく使われていました。 しかし、プロジェクトが大きくなるにつれて、以下のような問題が発生していました。

• 開発サーバーの起動が遅い
• ファイルを変更してからブラウザに反映されるまでに時間がかかる
• ビルド（本番用ファイルの生成）に時間がかかる

そこで、Viteはこれらの問題を解決するために設計されました。 Viteは、以下のような特徴を持っています。

• 開発サーバーの起動が非常に速い
• ファイルの変更を即座にブラウザに反映するHot Module Replacement機能を持つ
• 本番用のビルドが高速で、最適化されたファイルを生成する
• モダンなJavaScript機能をサポートし、最新のブラウザに最適化されている

初心者のうちはあまり意識する必要はありませんが、ViteはReact開発をより快適にするための強力なツールですので、今のうちから使い方を覚えておくと良いでしょう。

今回のテキストでも、Viteを使ってReact開発環境を構築していきます。

ViteでReactプロジェクト作成

それでは、実際にViteを使ってReactプロジェクトを作成してみましょう。

プロジェクト作成コマンドの実行

まず、プロジェクトを作成したいフォルダに移動します。

特に指定がなければ、デスクトップやドキュメントフォルダなど、分かりやすい場所を選んでください。

例えば、デスクトップやドキュメントフォルダなど、分かりやすい場所を選びましょう。

ターミナル（またはコマンドプロンプト）を開いて、以下のコマンドを実行します。

npm create vite@latest myapp -- --template react

このコマンドを実行すると、myappという名前のフォルダが作成され、その中にReactプロジェクトの基本ファイルが生成されます。

$ npm create vite@latest myapp -- --template react

> npx
> create-vite myapp --template react

│
◇  Scaffolding project in /Users/username/Desktop/doc_test/myapp...
│
└  Done. Now run:

  cd myapp
  npm install
  npm run dev

コマンドの説明をしておくと、以下のような意味になります。

• npm create vite@latest: 最新版のViteを使ってプロジェクトを作成
• myapp: プロジェクト名（お好きな名前に変更可能）
• -- --template react: Reactテンプレートを使用することを指定

依存関係のインストール

では、プロジェクトが作成されたら、次のステップに進みましょう。

プロジェクトが作成されたら、そのフォルダに移動して必要なライブラリをインストールします。

cd myapp

cdコマンドは、指定したフォルダに移動するコマンドです。 これでmyappフォルダの中に移動しました。

次に、プロジェクトに必要なライブラリをインストールします。

ライブラリとは、ReactやViteなどの機能を提供するコードの集まりのことでして、これらをプロジェクトに追加することで、開発をスムーズに進めることができます。

npm install

このコマンドを実行すると、Reactやその他の必要なライブラリが自動的にダウンロードされ、インストールされます。 初回は少し時間がかかる場合がありますが、しばらく待ちましょう。

最後に以下のように表示されれば、依存関係のインストールは成功です。

$ npm install

added 155 packages, and audited 156 packages in 13s

33 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

開発サーバーの起動と確認

ライブラリのインストールが完了したら、開発サーバーを起動してみましょう。

開発サーバーの起動

以下のコマンドを実行します。

npm run dev

このコマンドを実行すると、開発サーバーが起動し、以下のようなメッセージが表示されます。

VITE v4.x.x  ready in xxx ms

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

この表示が出れば、開発サーバーの起動は成功です。

ここで、http://localhost:5173/というURLが表示されていることに注目してください。 これは、Viteがローカルで開発サーバーを起動していることを示しています。 localhostは自分のコンピュータを指し、5173はViteが使用しているポート番号です。

ポート番号とは、開発サーバーがどのポートで待ち受けているかを示しています。 ポート番号は通常、5173がデフォルトで使用されますが、他のアプリケーションがそのポートを使用している場合は、Viteが自動的に別のポートを割り当てることもあります。

そのため、実際に開発サーバーを起動した際に表示されるURLは、必ず確認してください。

ブラウザでの確認

ブラウザを開いて、表示されたURL（通常はhttp://localhost:5173/）にアクセスしてみましょう。

以下のような画面が表示されれば、Reactアプリケーションが正常に動作しています。

画面には、Viteのロゴとともに「Vite + React」のような表示が出ているはずです。 また、カウンターボタンをクリックすると、数字が増えることも確認できます。

この画面が表示されれば、Viteを使ったReact開発環境のセットアップは成功です。

なお、パソコンの設定がダークモードかどうかで、画面の色合いが異なる場合がありますが、基本的な内容は同じです。

開発サーバーの停止方法

開発サーバーを停止したい場合は、ターミナル（またはコマンドプロンプト）でCtrl + C（MacでもWindowsでも同じ）を押します。

サーバーが停止すると、ブラウザでページを更新してもアクセスできなくなります。

ターミナルは以下のような表示になります。

  VITE v6.3.5  ready in 356 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
^C
myapp $

上記の一番下の行のように $ という表示に戻れば、サーバーは正常に停止しています。

なお、ターミナル上の$は、コマンドの入力待ち状態を示しています。 （Windowsでは>と表示されることもあります。多少、環境によって異なる場合がありますが、基本的には同じ意味です。）

ファイル変更の自動反映を確認

Viteの便利な機能の一つであるHot Module Replacementを体験してみましょう。

もう一度、開発サーバーを起動します。

npm run dev

ブラウザでhttp://localhost:5173/にアクセスして、先ほどのReactアプリケーションが表示されていることを確認してください。

開発サーバーが起動した状態で、VS Codeでsrc/App.jsxファイルを開いてみてください。 このファイルには、先ほどブラウザで見た画面の内容が記述されています。

ファイル内のテキストを少し変更して保存してみましょう。 例えば、「Vite + React」の部分を「Learning Next React!」に変更してみます。

// 変更前
<h1>Vite + React</h1>

// 変更後
<h1>Learning Next React!</h1>

保存するには、VS CodeではCtrl + S（MacではCmd + S）を押します。 保存後、ブラウザに戻ると、変更が自動的に反映されていることが確認できるはずです。

ファイルを保存すると、ブラウザが自動的に更新され、変更内容がすぐに反映されることが確認できるはずです。 この機能により、コードを書きながらリアルタイムで結果を確認することができます。

また、ついでに少しカウンター機能も変更してみましょう。 src/App.jsxのカウンター部分を以下のように変更してみます。

// 変更前
<button onClick={() => setCount((count) => count + 1)}>count is {count}</button>

// 変更後
<button onClick={() => setCount((count) => count + 100)}>count is {count}</button>

元々、カウンターは 1 ずつ増えていましたが、変更後は 100 ずつ増えるようになります。 保存してブラウザを確認し、count is 0 というボタンをクリックすると、100 ずつ増えることが確認できるはずです。

まとめ

本章では、ViteでReact開発環境を構築する方法について学習しました。 習得できた内容は以下の通りです。

• Node.jsとnpmがReact開発に必要な基盤ツールであることを理解しました
• WindowsとMacそれぞれでのNode.jsインストール方法を学びました
• Viteが高速で効率的な開発環境を提供することを理解しました
• ViteでReactプロジェクトを作成し、開発サーバーを起動する方法を習得しました
• ファイル変更が自動的にブラウザに反映される便利な機能を体験しました

これで、React開発を始めるための基本的な環境が整いました。 開発サーバーが正常に動作していることを確認できたら、次はプロジェクトの構成について詳しく学んでいきましょう。