コンテンツにスキップ
jsys Web 研修 2026

2. 環境構築

HTML や CSS、JavaScript で Web ページを作った際はそれぞれに対応するファイルを作成するだけで良かったですが、React を使用して Web ページを構築する際には、少し複雑な環境構築を要します。本章では React を取り巻くツールなどについて述べた後、実際の環境構築の方法を解説していきます。

2.1 React を取り巻くツール

React を使用して Web ページを構築する際には、Node.js と npm、そして Vite といったツールが必要になります。これらのツールは React を使用して Web ページを構築する際の必須ツールであるため、まずはこれらをインストールしていきます。

2.2 環境構築

2.2.1 Node.js のインストール

まだ Node.js をインストールしていない人は、次の手順に従ってインストールしてください。

2.2.2 プロジェクトの作成

Node.js がインストールできたら、早速プロジェクトを作成していきます。以下の作業は Windows / macOS 共通です。なお、作業前にプロジェクトを作成しても良い適当なディレクトリに移動しておいてください。

まず、次のコマンド群を順に実行していきます。

Terminal window
# samnple-app プロジェクトを作成する
npm create vite@latest sample-app -y -- --template react-ts

すると、このように質問されると思うので、yes のまま Enter を押してください。

◆  Install with npm and start now?
│  ● Yes / ○ No
└

続いて、このコマンドを実行してください。

Terminal window
# sample-app ディレクトリに移動する
cd sample-app


# パッケージのインストール
npm install

ここまで終わったら、あとは開発サーバを起動してブラウザからアクセスするだけです。次のコマンドで開発サーバを起動してみましょう。

Terminal window
npm run dev

そして http://localhost:5173 にブラウザでアクセスします。おそらく画像のような画面が表示されるはずです。

Vite + React

素晴らしい画面が出てきて感動できますが、今後使用するためにサンプルのコードは削除しておきましょう。

src/App.tsx

function App() {


  return (
    <>
    </>
  );
}


export default App

src/main.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'


ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)
  • src/App.css：中身を空にする
  • src/index.css：中身を空にする
  • src/assets：削除

おめでとうございます！これで環境構築は完了です。