React プロジェクトセットアップ：Vite で最初のアプリを作成・実行

はじめに

初めての React 実験へようこそ！React は、動的でインタラクティブなユーザーインターフェースを構築するための強力な JavaScript ライブラリです。React 開発を始めるには、まず適切な開発環境をセットアップする必要があります。

この実験では、最新のビルドツールである Vite を使用して新しいプロジェクトをブートストラップします。プロジェクト構造の探索、依存関係のインストール、開発サーバーの起動、既存コンポーネントの変更、新しいコンポーネントの作成といったプロセスを順を追って説明します。この実験の終わりには、React プロジェクトのセットアップに関する基本的な理解が得られ、独自のコンポーネントを構築する準備が整います。

プロジェクトの探索と依存関係のインストール

セットアッププロセスにより、Vite を使用して my-app という名前のディレクトリに新しい React プロジェクトが既に作成されています。まず、開発環境に必要なツールである Node.js と npm が存在することを確認しましょう。

ターミナルを開き、以下のコマンドを実行してバージョンを確認してください。

node -v

以下のような Node.js のバージョンを示す出力が表示されるはずです。

v22.19.0

次に、npm のバージョンを確認します。

npm -v

npm のバージョンについても同様の出力が表示されるはずです。

10.9.3

次に、プロジェクトディレクトリに移動します。以降のすべてのコマンドはこのディレクトリ内から実行してください。

cd my-app

React アプリケーションが機能するためにはいくつかのパッケージが必要であり、それらは package.json ファイルにリストされています。npm を使用してこれらの依存関係をインストールする必要があります。

以下のコマンドを実行してください。

重要： セキュリティ上の理由により、無料ユーザーはインターネットに接続できません。そのため、npm パッケージをインストールすることはできません。ドキュメントの続きを読む、他の Web 開発 Lab を体験する、または Pro ユーザーへのアップグレードを検討してください。

npm install

このコマンドは package.json ファイルを読み込み、プロジェクト内の node_modules フォルダーに必要なすべてのライブラリをダウンロードします。パッケージがインストールされるにつれて、進捗バーといくつかのメッセージが表示されます。

開発サーバーの起動

React アプリケーションを実際に動作させるには、開発サーバーを起動する必要があります。my-app ディレクトリ内にいるので、Vite によって提供されるスクリプトを使用できます。

以下のコマンドを実行して、ポート 8080 でサーバーを起動します。

npm run dev -- --host 0.0.0.0 --port 8080

このコマンドはサーバーを起動し、ターミナルを占有して、アプリが実行されているローカル URL を表示します。このターミナルは実行したままにしておいてください。しばらくすると、サーバーが準備完了であることを示すメッセージが表示されます。

アプリケーションを表示するには、インターフェース上部にある Web 8080 タブをクリックしてください。デフォルトの Vite および React のウェルカムページが表示されるはずです。

注意： アプリケーションが表示されない場合は、Web 8080 タブのアドレスバーの左側にある更新ボタンをクリックしてみてください。

最初のコンポーネントの変更

Vite の開発サーバーは Hot Module Replacement (HMR) を備えており、ファイルの変更を保存するとブラウザ上のアプリケーションが即座に更新されます。これを実際に試してみましょう。

左側のファイルエクスプローラーで、my-app -> src に移動し、App.jsx ファイルをクリックしてエディタで開きます。このファイルはメインの App コンポーネントを定義しています。

return ステートメントの中には、HTML のようなコードブロックがあります。これは JSX と呼ばれ、JavaScript の構文拡張であり、おなじみの方法で UI 構造を記述できます。

return (...) の中の内容全体を、簡単な見出しに置き換えてください。App.jsx ファイルは以下のようになります。

import "./App.css";

function App() {
  return (
    <>
      <h1>Hello, LabEx!</h1>
    </>
  );
}

export default App;

ファイルを保存します (Ctrl+S または Mac では Cmd+S を押します)。次に、Web 8080 タブに戻ります。ページが即座に更新され、「Hello, LabEx!」という新しい見出しが表示されているのがわかるはずです。

新しいコンポーネントの作成

React の中心的な原則は、コンポーネントと呼ばれる小さく再利用可能な部品から UI を構築することです。新しいコンポーネントを作成してみましょう。

左側のファイルエクスプローラーで、my-app 内の src ディレクトリを右クリックします。
「新規ファイル」を選択し、Welcome.jsx という名前を付けます。
新しく作成された Welcome.jsx ファイルを開き、以下のコードを追加します。

import React from "react";

function Welcome() {
  return <h2>Welcome to my first React App!</h2>;
}

export default Welcome;

このコードを分解してみましょう。

import React from 'react';: この行は、JSX を使用するすべてのファイルに必要です。
function Welcome() { ... }: これは Welcome という名前のシンプルな関数コンポーネントを定義します。
return <h2>...</h2>;: コンポーネントは、画面にレンダリングされる JSX 要素を返します。
export default Welcome;: これにより、Welcome コンポーネントが他のファイルで使用できるようになります。

ファイルを保存します (Ctrl+S)。この新しいコンポーネントを使用していないため、ブラウザにはまだ何も変更されません。

新しいコンポーネントの使用

Welcome コンポーネントを作成したので、これをメインの App コンポーネント内で使用してみましょう。これはコンポーネントの合成 (component composition) と呼ばれます。

my-app/src/App.jsx ファイルを再度開きます。
ファイルの先頭に、新しいコンポーネントをインポートするための import ステートメントを追加します。

import Welcome from "./Welcome.jsx";

次に、App コンポーネントの return ステートメント内に新しいコンポーネントを配置します。コンポーネントをレンダリングするために、<h1> タグの下に <Welcome /> を追加します。App.jsx の最終的なコードは以下のようになります。

import "./App.css";
import Welcome from "./Welcome.jsx";

function App() {
  return (
    <>
      <h1>Hello, LabEx!</h1>
      <Welcome />
    </>
  );
}

export default App;