【React入門①】ViteでReact環境を構築してJSXとコンポーネントの基本を学んだ話

1. はじめに

「挫折しないReactの教科書」でReactの基礎を学んだので、開発環境のセットアップからJSXの文法、コンポーネントとpropsの使い方まで、実際に手を動かしながら理解したことを整理しています。

2. 開発環境のセットアップ

Node.jsとnpmのインストール確認から、Viteを使ったReactプロジェクトの作成方法を学びました。

2.1 Node.jsとnpmの確認

まずターミナルで以下のコマンドを実行してインストール確認をしました。

Node.jsとnpmのバージョンを確認するコマンドです。

node --version
npm --version

Node.jsはLTS（Long Term Support）版を使うのが推奨されているみたいです。

2.2 Viteを使ったプロジェクト作成

ViteはReactプロジェクトの作成に必要な準備を自動で行ってくれるツールみたいです。ホットリロード（ファイル変更の即時反映）機能も備えており、快適に開発を進められると理解しました。

Reactプロジェクトを作成するコマンドです。

npm create vite@latest my-react-app -- --template react --no-rolldown

作成後はプロジェクトフォルダへ移動してライブラリをインストールしました。

cd my-react-app
npm install

2.3 プロジェクト構造の理解

Viteで作成されたプロジェクトの主なファイル構成は以下のようになっています。

my-react-app/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── App.css
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
├── index.html
├── package.json
└── vite.config.js

主に編集するのは src フォルダ内のファイルで、特に App.jsx が中心になると理解しました。

2.4 package.jsonの役割

package.json はプロジェクトで使うライブラリの名前とバージョンを記録するファイルみたいです。以下のような構成になっていました。

package.jsonの内容です。

{
  "name": "my-react-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^19.1.1",
    "react-dom": "^19.1.1"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^5.0.4",
    "eslint": "^9.36.0",
    "vite": "^7.1.7"
  }
}

scripts によく使うコマンドがショートカット化されていて、dependencies には実行に必要なライブラリ、devDependencies には開発時にのみ必要なライブラリが分けて管理されているとわかりました。

よく使うnpmコマンドは以下の通りです。

npm install        # package.jsonに記載されたライブラリを一括インストール
npm run dev        # 開発サーバーを起動
npm run build      # 本番用ファイルをビルド
npm run preview    # ビルド済みアプリをプレビュー

3. はじめてのReactアプリケーション

開発サーバーを起動してReactアプリを動かす方法と、ファイルの役割を学びました。

3.1 開発サーバーの起動

以下のコマンドで開発サーバーを起動し、http://localhost:5173/ にアクセスすると初期画面が確認できました。

npm run dev

3.2 main.jsxの役割

main.jsx はReactアプリをブラウザに表示するための起点となるファイルみたいです。

main.jsxの内容です。

// 必要なファイルやコードを読み込む
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App.jsx';

// index.htmlのdivタグを取得して、Reactアプリケーションを表示する
createRoot(document.getElementById('root')).render(
  <StrictMode>
    {/* Appコンポーネントを表示 */}
    <App />
  </StrictMode>
);

createRoot() で index.html 内の <div id="root"> を見つけ、そこにReactアプリを表示していると理解しました。

3.3 ReactとJavaScriptの比較

通常のJavaScriptでカウンターアプリを作る場合、DOM操作を手書きする必要がありました。

通常のJavaScriptでカウンター機能を実装したコードです。

// カウンターの値を保存する変数
let count = 0;

// 画面の表示を更新する関数
function updateDisplay() {
  // HTML要素を取得
  const counterElement = document.getElementById('counter');
  // テキストを更新
  counterElement.textContent = count;
}

// ボタンにイベントを設定する関数
function setupCounter() {
  // ボタン要素を取得
  const button = document.getElementById('increment');
  // クリック時の処理を設定
  button.addEventListener('click', () => {
    count++;
    updateDisplay();
  });
}

// 初期化処理
updateDisplay();
setupCounter();

Reactでは同じ機能をはるかに少ないコードで実現できると理解しました。

Reactでカウンター機能を実装したコードです。

function App() {
  // useStateで現在のカウント値と更新関数を管理する
  const [count, setCount] = useState(0);

  return (
    <>
      <h1>カウンターアプリ</h1>
      <div>{count}</div>
      {/* ボタンクリックでcountを1増やす */}
      <button onClick={() => setCount(count + 1)}>
        カウントアップ
      </button>
    </>
  );
}

4. JSXの基本文法

JSXはJavaScriptの中でHTMLのような記法を使ってUIを作成できる技術みたいです。

4.1 JSXの基本ルール

以下のコードでJSXの文法ルールを一通り確認しました。

JSXの基本的な書き方をまとめたコードです。

import './App.css';

function App() {
  return (
    <>
      {/* 複数の要素は一つの親要素（<>...</>）で包む */}
      <h1 className="title">タイトル</h1>
      {/* classではなくclassNameを使う */}
      <p>説明文</p>
      {/* forではなくhtmlForを使う */}
      <label htmlFor="name">名前：</label>
      {/* 終了タグは必須（自己終了タグで記述） */}
      <input id="name" type="text" placeholder="お名前を入力" />
    </>
  );
}

export default App;

<>...</> はReact Fragment（複数要素をまとめるReactの機能）と呼ばれ、余分なHTML要素を追加せずに複数の要素をまとめられると理解しました。class と for はJavaScriptの予約語のため、JSXでは className と htmlFor を使うと理解しました。また <img /> や <input /> のように子要素を持たない要素は自己終了タグで記述します。

4.2 波括弧{}でJavaScriptを埋め込む

波括弧 {} を使うとJavaScriptの定数や計算式をJSXに埋め込めるみたいです。

定数と計算式をJSXに埋め込んだコードです。

function App() {
  // 定数を定義
  const userName = '田中太郎';
  const age = 20;
  const price = 1000;
  const quantity = 3;

  return (
    <>
      {/* 波括弧{}を使って定数の値を表示 */}
      <p>名前：{userName}</p>
      <p>年齢：{age}歳</p>
      {/* 値を直接埋め込む */}
      <p>価格：{price}円</p>
      {/* 計算式を直接埋め込む */}
      <p>税込：{price * 1.1}円</p>
      {/* 定数同士を使った計算 */}
      <p>合計：{price * quantity}円</p>
    </>
  );
}

4.3 JSX内のコメント

JSX内でコメントを書く場合は {/* ... */} で囲む書き方を使います。

{/* 1行のコメント */}
<h1>タイトル</h1>

{/*
  複数行のコメントも
  このように書けます
*/}
<p>内容</p>

5. JSXの実践的な使い方

条件に応じた表示の切り替えとスタイリングの方法を学びました。

5.1 条件付きレンダリング

条件付きレンダリングには主に3つの方法があると理解しました。

3つの条件付きレンダリングをまとめたコードです。

import './App.css';

function App() {
  // 各条件を制御する定数を定義
  const isOpen = true;
  const score = 85;
  const passScore = 80;
  const hasNewMessage = true;
  const unreadCount = 5;
  const userName = '';

  return (
    <>
      {/* 三項演算子：条件 ? 真の場合 : 偽の場合 */}
      <p>{isOpen ? '営業中' : '閉店'}</p>
      {/* 数値の比較でも使える */}
      <p>{score >= passScore ? '合格おめでとう！' : 'もう少し頑張ろう'}</p>

      {/* 論理演算子&&：条件がtrueのときのみ表示 */}
      {hasNewMessage && <p>新しいメッセージがあります</p>}
      {/* 比較演算子と組み合わせる */}
      {unreadCount > 0 && <p>{unreadCount}件の未読メッセージ</p>}

      {/* 論理演算子||：値が空のときデフォルト値を表示 */}
      <p>こんにちは、{userName || 'ゲスト'}さん！</p>
    </>
  );
}

export default App;

三項演算子は「AまたはBのどちらかを表示したい」場合、&& は「条件が満たされた場合のみ表示したい」場合、|| は「値が空のときデフォルト値を表示したい」場合に使い分けると理解しました。

5.2 JSXでのスタイリング

スタイリングには3つの方法があると理解しました。

スタイリングの3つのパターンをまとめたコードです。

import './App.css';

function App() {
  const score = 85;
  const passScore = 80;

  // スタイルをオブジェクトで定義（CSSプロパティはローワーキャメルケース）
  const titleStyle = {
    color: 'blue',
    fontSize: '24px',
  };

  // 条件に応じてスタイルを動的に切り替える
  const resultStyle = {
    color: score >= passScore ? 'green' : 'red',
  };

  // 条件に応じてクラス名を切り替える
  const isGreen = true;

  return (
    <>
      {/* スタイルオブジェクトをstyle属性に渡す */}
      <p style={titleStyle}>スタイル付きタイトル</p>
      {/* 動的に生成されたスタイルを適用 */}
      <p style={resultStyle}>点数：{score}点</p>
      {/* クラス名を動的に切り替える */}
      <p className={isGreen ? 'green' : 'red'}>サンプルテキスト</p>
    </>
  );
}

export default App;

CSSではハイフンで区切る（例：font-size）プロパティ名を、JSXではローワーキャメルケース（例：fontSize）で記述するみたいです。

6. コンポーネントとprops

Reactの最も重要な概念であるコンポーネントとpropsを学びました。

6.1 コンポーネントとは

コンポーネントはUIを独立した再利用可能な部品として定義する仕組みで、一度定義すると <Profile /> のように何度でも使い回せると理解しました。

Profileコンポーネントを定義して再利用するコードです。

import './App.css';

// Profileコンポーネントを定義
function Profile() {
  return (
    <>
      <h2>田中太郎</h2>
      <p>年齢：20歳</p>
      <p>学生</p>
    </>
  );
}

function App() {
  return (
    <>
      {/* コンポーネントを何度でも再利用できる */}
      <Profile />
      <Profile />
    </>
  );
}

export default App;

コンポーネント名は必ず大文字（パスカルケース）で始める必要があるみたいです。小文字で始めるとReactが標準のHTMLタグとして認識してしまい、正しく動作しません。

6.2 propsでデータを渡す

propsはコンポーネントの外側からデータを渡す仕組みで、JavaScriptの関数の引数と同じイメージと理解しました。propsの受け取りは分割代入を使うのが標準的な書き方みたいです。

propsの分割代入とchildrenを使ったコードです。

import './App.css';

// 分割代入でpropsを受け取る（props.nameではなくnameとして直接使える）
function Profile({ name, age, isStudent, hometown, children }) {
  return (
    <>
      <h2>{name}</h2>
      <p>年齢：{age}歳</p>
      {/* 三項演算子で学生か社会人かを切り替える */}
      <p>{isStudent ? '学生' : '社会人'}</p>
      <p>出身地：{hometown}</p>
      {/* childrenは開始タグと終了タグの間の内容 */}
      {children}
    </>
  );
}

function App() {
  return (
    <>
      {/* 文字列はダブルクォート、数値・真偽値は波括弧{}で渡す */}
      <Profile name="田中太郎" age={20} isStudent={true} hometown="東京">
        <p>趣味：プログラミング</p>
      </Profile>
      <Profile name="佐藤花子" age={30} isStudent={false} hometown="大阪">
        <p>職業：デザイナー</p>
      </Profile>
      {/* childrenは省略可能 */}
      <Profile name="山田次郎" age={40} isStudent={false} hometown="福岡" />
    </>
  );
}

export default App;

children は開始タグと終了タグの間に書いた内容をコンポーネントに渡す仕組みで、省略することもできると理解しました。

6.3 コンポーネントを使う利点

例えば3人のプロフィールに「出身地」という項目を追加したい場合、コンポーネントを使えば定義部分の1箇所を修正するだけで、そのコンポーネントを使っているすべての箇所に自動的に変更が反映されます。従来のHTMLでは3箇所すべてを手動で修正する必要があるため、修正漏れやミスが起きやすくなると理解しました。

まとめ

• npm create vite@latest でReactプロジェクトを素早く作成でき、npm run dev で開発サーバーが起動できると理解しました
• package.json はプロジェクトのライブラリ一覧を管理するファイルで、npm install 一発でライブラリを再現できると理解しました
• JSXでは className・htmlFor・自己終了タグなど、HTMLとは少し異なる書き方のルールがあると学びました
• 波括弧 {} で定数・計算式・条件分岐などJavaScriptのあらゆる式をJSXに埋め込めると理解しました
• コンポーネントは一度定義すれば何度でも使い回せて、propsで外からデータを渡すことでさまざまな内容を表示できると理解しました