React実践入門

第3回

Viteでプロジェクトを作る：Hello Reactを表示するまで

npm create vite@latestコマンドでReact+TypeScriptプロジェクトを作成し、生成されたファイル構造を理解して、ブラウザに最初の画面を表示するまでの全手順。

·12分で読める
たける
たける 環境は整いました！ で、Reactのプロジェクトってどうやって作るんですか？ 公式サイト見たら「Create React App」って書いてあったんですけど。
りこ
りこ Create React Appはもう使われていない。今は Vite（ヴィート）を使う。ビルドが速くて、設定もシンプル。

Viteとは

Viteは、フロントエンド開発のためのビルドツール。Reactプロジェクトの雛形を作る機能と、開発中にコードの変更を即座にブラウザへ反映する機能（ホットリロード）を持っている。

「ヴィート」と読む。フランス語で「速い」を意味する。

プロジェクトを作成する

ターミナルで、プロジェクトを作りたいフォルダに移動してから以下を実行する。

npm create vite@latest my-site -- --template react-ts
  • my-site：プロジェクト名（フォルダ名になる）。好きな名前でよい
  • --template react-ts：React + TypeScript の雛形を使う指定
たける
たける"> TypeScriptって必要ですか？ JavaScriptでよくないですか？
りこ
りこ 最初から TypeScript で書く。変数や関数に型がつくので、コードを書いている途中でミスに気づける。「後から追加するより最初から使うほうが楽」というのが現場の共通認識になっている。

コマンドを実行すると my-site フォルダが作られる。次にそのフォルダへ移動して依存パッケージをインストールする。

cd my-site
npm install

npm install は package.json に書かれているパッケージ（ReactやTypeScriptなど）をすべてダウンロードする。初回は少し時間がかかる。

完了したら開発サーバーを起動する。

npm run dev
  VITE v6.x.x  ready in 300 ms

  ➜  Local:   http://localhost:5173/

このURLをブラウザで開くと、Reactの初期画面が表示される。

生成されたファイルを理解する

VS Codeでプロジェクトフォルダを開く（code . とターミナルで打つと現在のフォルダで開ける）。

my-site/
├── public/          # 画像やfaviconなど静的ファイルを置く場所
├── src/             # ここにコードを書く
│   ├── App.tsx      # アプリのルートコンポーネント
│   ├── main.tsx     # エントリーポイント。ReactをHTMLに接続する
│   └── index.css    # グローバルCSS
├── index.html       # HTMLのテンプレート。<div id="root">がある
├── package.json     # プロジェクトの設定と依存パッケージのリスト
├── tsconfig.json    # TypeScriptの設定
└── vite.config.ts   # Viteの設定
たける
たける `index.html` があるのはわかるんですけど、`main.tsx` は何ですか？
りこ
りこ `index.html` の中に `<div id="root">` という空の箱がある。`main.tsx` は「その箱の中にReactアプリを入れる」命令を書いているファイル。

main.tsx を実際に見てみる。

// src/main.tsx
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>,
)

createRoot で index.html の <div id="root"> を見つけ、そこに <App /> コンポーネントを描画している。これがReactアプリの起点。

App.tsxを書き換えてみる

初期の App.tsx はViteのデモ画面が書かれている。これを自分の内容に変えてみる。

src/App.tsx を開いて、全部消して以下を書く。

// src/App.tsx
function App() {
  return (
    <div>
      <h1>こんにちは、React！</h1>
      <p>登場人物紹介サイトを作っていきます。</p>
    </div>
  )
}

export default App

保存した瞬間、ブラウザが自動で更新されて表示が変わる。これがViteのホットリロード。

たける
たける 保存したら即座に変わりましたね。リロードしなくていいのか。
りこ
りこ これがあると開発のテンポが全然違う。ファイルを保存するたびに変更が反映される。
たける
たける `function App()` の中に `return` があって、HTMLみたいなのがありますよね。これって何ですか？
りこ
りこ JSX（ジェイエスエックス）。JavaScriptの中にHTMLライクな記法で書ける構文。次回の第4回で詳しく説明する。今は「これがコンポーネントの基本形」と覚えておけばいい。

コンポーネントの基本形を覚える

今書いた App.tsx がReactコンポーネントの最小構成。

// コンポーネントの基本形
function コンポーネント名() {  // ① 関数として定義する（名前は大文字始まり）
  return (
    <div>                      // ② 返すUIをJSXで書く
      <h1>タイトル</h1>
    </div>
  )
}

export default コンポーネント名  // ③ 外から使えるようにexportする

3つのルール：

  1. コンポーネント名は大文字始まり（app ではなく App。小文字だとHTMLタグと区別できない）
  2. 必ず何かをreturnする（何も表示しない場合は return null）
  3. exportする（別のファイルから import して使うために必要）

まとめ

  • Vite：Reactプロジェクトの雛形作成とホットリロードを担うビルドツール
  • npm create vite@latest → npm install → npm run dev：この3コマンドでブラウザに表示される
  • main.tsx：ReactをHTMLの <div id="root"> に接続するエントリーポイント
  • コンポーネントの基本形：「大文字始まりの関数がJSXをreturnしてexportする」

次の第4回からは、実際にトップページを作り始める。まずHTMLを全部 App.tsx に書いた状態から始めて、コンポーネントに分割していく流れで進む。