環境とJSXの設定

Q: npm create vite@latest と npx create-vite の違いは何ですか？

機能はまったく同じです。 npm create vite@latest は npm での推奨構文（npm v7 以降で導入）であり、これにより最新の create-vite パッケージが自動的に検出・実行されます。 npx create-vite も使用可能です。pnpm や yarn を使用している場合は、 pnpm create vite または yarn create vite を使用できます。

Q: なぜJSXで class が使えないのですか？なぜ className を使わなければならないのですか？

class はJavaScriptの予約語だからです。JSXは本質的にJavaScriptであるため、 class は使用できません。レンダリング時に、Reactは自動的に className をHTML属性 class に変換します。同様に、 for → htmlFor となります。

Q: プロジェクト内の .tsx ファイルと .ts ファイルの違いは何ですか？

.tsx ファイルには JSX 構文を含めることができます（つまり、TypeScript で HTML タグを記述できます）が、 .ts ファイルには含めることができません。Reactコンポーネントを含むすべてのファイルには、 .tsx という拡張子をつける必要があります。純粋なロジックファイル（ユーティリティ関数や型定義など）には、 .ts という拡張子を使用できます。

Reactのコードを書くことは、家をリフォームするようなものです。Viteは工事チーム（足場や開発サーバーのセットアップを手助けしてくれます）であり、JSXは設計図（JavaScript内でHTMLを書くための構文）です。このレッスンでは、初めてのReactプロジェクトをゼロから構築していきます。

1. 学習内容

Vite を使って React プロジェクトを素早く作成する
プロジェクトのディレクトリ構造と各ファイルの目的
JSXの構文規則（式、条件、リスト）
JSXとHTMLの主な違い
React DevTools のインストールと使用方法

2. 初心者開発者の実話

(1) 課題：環境のセットアップに丸1日かかってしまった

ボブはJavaScriptを習い始めたばかりで、Reactを試してみたいと思っています。ネットでチュートリアルを検索したところ、「Create React App」を勧める人もいれば、「Vite」を勧める人もいれば、「Next.js」を勧める人もいました。彼は適当にCRAを選んで、インストールを開始しました：

BASH

npx create-react-app my-app

結果：

インストールには8分かかりました（200 MB以上の依存関係をダウンロードしました）
開発サーバーの起動には30秒かかりました
プロジェクトディレクトリには35,000ファイル以上（node_modules）が格納されています
コードを1行変更するだけで、ページの再読み込みに2～3秒かかる

ボブは苛立ちを隠せなかった。「コードを書き始める前から、もう1時間も無駄にしてしまった。」

(2) ViteとReactを用いた解決策

Vite を使用して同じプロジェクトを作成します：

BASH

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev

比較	CRA	Vite
インストール時間	約8分	約30秒
起動時間	約30秒	1秒未満
ホットモジュール交換（HMR）	2～3秒	50ミリ秒未満
ビルド時間	約60秒	約10秒
node_modules のサイズ	約200MB	約80MB

メリット：ボブはインストールから「Hello World」が表示されるまで、わずか3分しかかかりませんでした。また、ホットアップデートは非常に高速なので、待ち時間がほとんど気になりません。

3. JSXの基本ルール

JSX は JavaScript XML の略称です。これは HTML ではありません が、JavaScript の構文拡張です。各 JSX 式は、最終的に React.createElement() 呼び出しにコンパイルされます。

graph LR
    A[JSX Code] --> B[Babel Compilation]
    B --> C[React.createElement]
    C --> D[Virtual DOM Object]
    D --> E[True DOM]
    
    style A fill:#61dafb,color:#000
    style C fill:#ff6b6b,color:#fff

(1) 単一要素の法則

JSX式にはルート要素が必須です。2つの兄弟要素を並べて返すことはできません。

JSX

// ❌ Error：No root element
return (
  <h1>Title</h1>
  <p>Paragraph</p>
)

// ✅ Correct：Use one <div> Package
return (
  <div>
    <h1>Title</h1>
    <p>Paragraph</p>
  </div>
)

// ✅ You can also use React Fragment（<></>），Does not incur additional DOM
return (
  <>
    <h1>Title</h1>
    <p>Paragraph</p>
  </>
)

(2) JSX への JavaScript 式の埋め込み

角括弧 {} を使用して、任意の JavaScript 式を埋め込むことができます：

JSX

const name = 'Alice'
const age = 28
const colors = ['red', 'green', 'blue']

// Variable
<h1>Hello, {name}!</h1>

// Expression Evaluation
<p>Next year {age + 1} years old</p>

// Ternary Operator
<span>{age >= 18 ? 'Adulthood' : 'Minor'}</span>

// Function Call
<p>Today's Date：{new Date().toLocaleDateString()}</p>

// Array Length
<p>Total {colors.length} A Color</p>

(3) クイックリファレンス表：JSXとHTMLの違い

特集	HTML	JSX
クラス名	`class="box"`	`className="box"`（class は JavaScript の予約語です）
タグ属性	`for="input"`	`htmlFor="input"`（「for」はJavaScriptの予約語です）
インラインスタイル	`style="color:red"`	`style={{ color: 'red' }}` (オブジェクト構文)
ブール型プロパティ	`disabled`	`disabled={true}` または `disabled`
自動閉じタグ	`<br>` `<img>`	必ず閉じる必要があるタグ: `<br />` `<img />`
注	`<!-- comment -->`	`{/* comment */}`
イベントバインディング	`onclick="handle()"`	`onClick={handle}`
CSS プロパティ名	`font-size`（ハイフン）	`fontSize`（キャメルケース）

(1) ▶ サンプル：JSXとHTMLの比較

JSX

// ============================================
// Example：The Same Card，HTML vs JSX Comparison of Writing Styles
// ============================================

// ---- HTML Writing Style ----
<div class="card" style="background-color: #f0f0f0; padding: 20px;">
  <img src="avatar.jpg" alt="Avatar" class="avatar">
  <label for="name">Name：</label>
  <input type="text" id="name" disabled>
  <!-- This is a comment. -->
  <button onclick="handleClick()">Click</button>
</div>

// ---- JSX Writing Style ----
<div className="card" style={{ backgroundColor: '#f0f0f0', padding: '20px' }}>
  <img src="avatar.jpg" alt="Avatar" className="avatar" />
  <label htmlFor="name">Name：</label>
  <input type="text" id="name" disabled={true} />
  {/* This is a comment. */}
  <button onClick={handleClick}>Click</button>
</div>

▶ 試してみよう

4. Vite を使った React プロジェクトの作成

(1) 環境要件

ツール	バージョン要件	確認コマンド	インストール方法
Node.js	18.0 以上	`node -v`	nodejs.org
npm	9.0 以上	`npm -v`	Node.js とともに自動的にインストールされます
エディタ	任意	—	推奨：VS Code

(2) プロジェクトを作成して起動する

BASH

# 1. Create a Project（react-ts = React + TypeScript Template）
npm create vite@latest my-react-app -- --template react-ts

# 2. Go to the project directory
cd my-react-app

# 3. Install Dependencies
npm install

# 4. Start the development server
npm run dev

出力：

TEXT

  VITE v5.x  ready in 320ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://192.168.1.100:5173/

http://localhost:5173/ を開くと、Vite + React のデフォルトのウェルカムページが表示されるはずです。

(3) プロジェクトのディレクトリ構造

BASH

my-react-app/
├── index.html              # Entrance HTML Documents（Vite Parsing Entry Point）
├── package.json            # Project Configuration and Dependencies
├── vite.config.ts          # Vite Profile
├── tsconfig.json           # TypeScript Layout
├── tsconfig.app.json       # Applications TS Layout
├── tsconfig.node.json      # Node.js Environment TS Layout
├── public/                 # Static Resources（Will not be compiled）
│   └── vite.svg
└── src/                    # Source Code Directory
    ├── main.tsx            # App Entry Point（Render the root component）
    ├── App.tsx             # Root Component
    ├── App.css             # Root Component Styles
    ├── index.css           # Global Styles
    └── assets/             # Resource Files（will be compiled）
        └── react.svg

ファイル	目的
`index.html`	ページのエントリポイント。Viteはここから解析を開始する
`src/main.tsx` JavaScriptのエントリ、`<App />`を`#root`にレンダリング
`src/App.tsx`	ルートコンポーネント。他のすべてのコンポーネントはここから始まる
`vite.config.ts`	Viteの設定（エイリアス、プロキシ、プラグインなど）

(1) ▶ サンプル：最もシンプルなReactコンポーネントの作成

TSX

// ============================================
// Example：from  main.tsx The Complete Process for Navigating to the Page
// ============================================

// src/main.tsx —— App Entry Point
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import './index.css'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>
)

▶ 試してみよう

TSX

// src/App.tsx —— Root Component
function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>This is my first one React Applications 🎉</p>
    </div>
  )
}

export default App

CSS

/* src/index.css —— Global Styles */
body {
  font-family: Arial, sans-serif;
  max-width: 600px;
  margin: 50px auto;
  text-align: center;
}

5. React DevTools

React DevTools は、React アプリケーションのデバッグに欠かせないツールであり、コンポーネントツリー、プロップ、ステート、パフォーマンスを確認することができます。

設置方法	手順
Chrome 拡張機能	Chrome ウェブストアで「React Developer Tools」を検索
Firefox 拡張機能	Firefox アドオンで「React Developer Tools」を検索
スタンドアロンアプリ	`npx react-devtools`

(1) ▶ サンプル：DevTools を使用してコンポーネントを表示する

インストール後、開発者ツール（F12）を開くと、コンポーネントとプロファイラーという2つの新しいタブが表示されます：

JSX

// in  DevTools You can view these components in real time here Props and  State
function App() {
  const [count, setCount] = React.useState(0)
  return (
    <div>
      <Header title="Counter" />
      <Counter count={count} onIncrement={() => setCount(c => c + 1)} />
      <Footer year={2026} />
    </div>
  )
}

// Components The panel will display：
// ├── App
// │   ├── Header (props: { title: "Counter" })
// │   ├── Counter (props: { count: 0, onIncrement: fn })
// │   └── Footer (props: { year: 2026 })

▶ 試してみよう

(2) ▶ サンプル：JSX の条件付きレンダリングとリストの組み合わせ

JSX

function ProductCatalog({ products, isLoading, error }) {
  if (isLoading) return <p style={{ textAlign: 'center', padding: 40 }}>Loading products...</p>
  if (error) return <p style={{ color: '#ff4d4f', textAlign: 'center' }}>Error: {error}</p>
  if (products.length === 0) return <p style={{ textAlign: 'center', color: '#999' }}>No products found</p>

  return (
    <div style={{ maxWidth: 600, margin: '0 auto' }}>
      <h2>Product Catalog ({products.length})</h2>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', gap: 16 }}>
        {products.map(product => (
          <div key={product.id} style={{ border: '1px solid #eee', borderRadius: 8, padding: 12 }}>
            <h4 style={{ margin: '0 0 8px' }}>{product.name}</h4>
            <p style={{ color: '#ff4d4f', fontWeight: 'bold', margin: '0 0 4px' }}>${product.price}</p>
            {product.inStock ? (
              <span style={{ color: '#52c41a', fontSize: 12 }}>In Stock</span>
            ) : (
              <span style={{ color: '#999', fontSize: 12 }}>Out of Stock</span>
            )}
          </div>
        ))}
      </div>
    </div>
  )
}

function CatalogPage() {
  const sampleProducts = [
    { id: 1, name: 'Keyboard', price: 79, inStock: true },
    { id: 2, name: 'Mouse', price: 49, inStock: true },
    { id: 3, name: 'Monitor', price: 399, inStock: false },
  ]
  return <ProductCatalog products={sampleProducts} isLoading={false} error={null} />
}

▶ 試してみよう

(3) ▶ サンプル：総合編—React プロジェクトのエントリファイルの分析

JSX

// package.json Key Dependencies
// {
//   "dependencies": { "react": "^18.3", "react-dom": "^18.3" },
//   "devDependencies": { "vite": "^5.0", "@types/react": "^18.3", "@types/react-dom": "^18.3" }
// }

// src/main.jsx - App Entry Point
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

// src/App.jsx - Root Component
import { useState } from 'react'

function App() {
  const [currentPage, setCurrentPage] = useState('home')

  return (
    <div style={{ fontFamily: 'sans-serif', maxWidth: 800, margin: '0 auto', padding: 20 }}>
      <nav style={{ display: 'flex', gap: 16, marginBottom: 24, borderBottom: '2px solid #1890ff', paddingBottom: 12 }}>
        {['home', 'about', 'contact'].map(page => (
          <button key={page} onClick={() => setCurrentPage(page)}
            style={{
              padding: '8px 16px', border: 'none', borderRadius: 4, cursor: 'pointer',
              background: currentPage === page ? '#1890ff' : '#f0f0f0',
              color: currentPage === page ? 'white' : '#333',
            }}>
            {page.charAt(0).toUpperCase() + page.slice(1)}
          </button>
        ))}
      </nav>
      <main>
        {currentPage === 'home' && (
          <div>
            <h1>Welcome to React</h1>
            <p>This is a minimal React app with Vite. Edit src/App.jsx and save to reload.</p>
            <p>Current time: {new Date().toLocaleTimeString()}</p>
          </div>
        )}
        {currentPage === 'about' && (
          <div>
            <h2>About</h2>
            <p>Built with React 18 + Vite for fast development and HMR.</p>
          </div>
        )}
        {currentPage === 'contact' && (
          <div>
            <h2>Contact</h2>
            <p>Email us at hello@example.com</p>
          </div>
        )}
      </main>
      <footer style={{ marginTop: 40, paddingTop: 12, borderTop: '1px solid #eee', color: '#999', fontSize: 13 }}>
        © 2026 React Tutorial. Built with Vite + React 18.
      </footer>
    </div>
  )
}

export default App

▶ 試してみよう

❓ よくある質問

Q npm create vite@latest と npx create-vite の違いは何ですか？

A 機能はまったく同じです。npm create vite@latest は npm での推奨構文（npm v7 以降で導入）であり、これにより最新の create-vite パッケージが自動的に検出・実行されます。npx create-vite も使用可能です。pnpm や yarn を使用している場合は、pnpm create vite または yarn create vite を使用できます。

Q なぜJSXでclassが使えないのですか？なぜclassNameを使わなければならないのですか？

A classはJavaScriptの予約語だからです。JSXは本質的にJavaScriptであるため、classは使用できません。レンダリング時に、Reactは自動的にclassNameをHTML属性classに変換します。同様に、for → htmlForとなります。

Q JSX の style 属性で、なぜ二重の波括弧 {{}} が使われているのですか？

A 外側の波括弧は「JSX に埋め込まれた JavaScript 式」を示し、内側の波括弧は「これは JavaScript オブジェクトである」ことを示します。したがって、style={{ color: 'red' }}は、{ color: 'red' }というJSオブジェクトをstyle属性の値として渡すことを意味します。

Q プロジェクト内の .tsx ファイルと .ts ファイルの違いは何ですか？

A .tsx ファイルには JSX 構文を含めることができます（つまり、TypeScript で HTML タグを記述できます）が、.ts ファイルには含めることができません。Reactコンポーネントを含むすべてのファイルには、.tsxという拡張子をつける必要があります。純粋なロジックファイル（ユーティリティ関数や型定義など）には、.tsという拡張子を使用できます。

Q ViteとWebpackの違いは何ですか？このチュートリアルでViteが選ばれた理由は？

A Viteは開発サーバーにネイティブなESモジュールを使用しており、ミリ秒単位のコールドスタートを実現します。一方、Webpackは起動前にアプリケーション全体をバンドルする必要があるため、プロジェクトが大きくなるほど起動が遅くなります。また、ViteのHMR（Hot Module Replacement）は、変更されたモジュールのみを置き換えるだけで済むため、処理が高速です。本番環境向けのビルドでは、どちらもバンドルにRollup/esbuildを使用するため、パフォーマンスに大きな違いはありません。このチュートリアルでViteが選ばれたのは、開発体験が優れており、Reactコミュニティにおける新しいトレンドを体現しているからです。

📖 まとめ

npm create vite@latest my-app -- --template react-ts を使って、React + TypeScript プロジェクトを素早くセットアップする
JSXはHTMLではなく、JavaScriptの構文の拡張です。classの代わりにclassNameを使用し、式を埋め込むには{}を使用してください
すべての JSX 式にはルート要素（<></> フラグメントでもよい）が含まれていなければならない
Vite は CRA よりも 10 倍以上高速です。このチュートリアルでは、全編を通じて Vite を使用しています。
React DevTools は、コンポーネントツリーやステートを表示できる、不可欠なデバッグツールです

📝 練習問題

基本演習（難易度 ⭐）：Vite を使用して新しい React + TypeScript プロジェクトを作成し、App.tsx を修正して、自分の名前と簡単な自己紹介が表示されるようにしてください。
演習（難易度：⭐⭐）：App コンポーネント内に const isLoggedIn = true という名前の変数を作成し、JSX で三項演算子を使用して、「Welcome back」または「Please log in」のいずれかを表示してください。
調査（難易度：⭐）：React DevToolsで「コンポーネント」パネルを開き、Viteのデフォルトテンプレートのコンポーネントツリー構造を確認し、スクリーンショットを撮って保存してください。

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

私たちについて

404 Not Found

環境とJSXの設定

1. 学習内容

2. 初心者開発者の実話

(1) 課題：環境のセットアップに丸1日かかってしまった

(2) ViteとReactを用いた解決策

3. JSXの基本ルール

(1) 単一要素の法則

(2) JSX への JavaScript 式の埋め込み

(3) クイックリファレンス表：JSXとHTMLの違い

(1) ▶ サンプル：JSXとHTMLの比較

4. Vite を使った React プロジェクトの作成

(1) 環境要件

(2) プロジェクトを作成して起動する

(3) プロジェクトのディレクトリ構造

(1) ▶ サンプル：最もシンプルなReactコンポーネントの作成

5. React DevTools

(1) ▶ サンプル：DevTools を使用してコンポーネントを表示する

(2) ▶ サンプル：JSX の条件付きレンダリングとリストの組み合わせ

(3) ▶ サンプル：総合編—React プロジェクトのエントリファイルの分析

❓ よくある質問

📖 まとめ

📝 練習問題