最終回です。作ったものを公開できる形にします。
npm run buildで何が起きるか
開発サーバーを止めずに、別のターミナル（またはCtrl + Cで止めてから）で打ちます。
npm run buildvite v8.2.0 building client environment for production...
✓ 18 modules transformed.
dist/index.html 0.48 kB │ gzip: 0.34 kB
dist/assets/index-CLcBXoKv.css 10.85 kB │ gzip: 2.93 kB
dist/assets/index-J346tj5A.js 193.28 kB │ gzip: 61.14 kB
✓ built in 381msdist/フォルダに、公開用の一式ができました。
dist/
├── assets/
│ ├── index-CLcBXoKv.css
│ └── index-J346tj5A.js
├── birds.json
├── favicon.svg
└── index.htmlやっていることは3つです。
- JSXをふつうのJavaScriptに変換する——ブラウザはJSXを読めないので
- ファイルをまとめる——
App.tsx・BirdCard.tsx・React本体などを1つのJSに - CSSを書き出す——Tailwindが、実際に書いたクラスだけを集めて出力する
public/に置いたbirds.jsonが、そのままdist/にコピーされているのも確認できます。
公開する前に手元で確認する
dist/index.htmlをダブルクリックで開いても正しく動きません（ファイルの読みこみ方が変わるため）。確認用のコマンドが用意されています。
npm run previewhttp://localhost:4173のようなURLが出ます。これが本番と同じ形です。開発サーバーと違って自動更新はしないので、コードを直したらnpm run buildからやり直します。
正直な話：Reactを積むと重くなる
さきほどのビルド結果を、もう一度見てください。
| ファイル | サイズ | 圧縮後 |
|---|---|---|
| JavaScript | 193.28 kB | 61.14 kB |
| CSS | 10.85 kB | 2.93 kB |
このアプリのコードは200行ほどです。残りはReactの本体。つまり、何を作っても最低60KBほどのJavaScriptが乗るということです。
どこに置くか
dist/の中身はただの静的ファイルなので、置き場所は選び放題です。
- Cloudflare Pages——このサイトも使っています。無料枠が広い
- Netlify——
distフォルダをドラッグ＆ドロップするだけでも公開できる - GitHub Pages——Gitコースで扱った方法がそのまま使えます
どれもGitHubのリポジトリとつなぐと、pushするたびに自動でビルドして公開してくれます。手元でnpm run buildを打つ必要すらなくなります。
設定値は.envに置く
公開先によって変わる値（APIのURLなど）をコードに直接書くと、環境ごとに書きかえることになります。Viteでは.envファイルが使えます。
VITE_API_URL=https://api.example.comconst url = import.meta.env.VITE_API_URL名前の先頭をVITE_にしたものだけが読みこまれます。これは「うっかり全部の環境変数がブラウザに出てしまう」のを防ぐための決まりです。
次に学ぶこと
このコースでは、Reactの本体・Router・TypeScript・データ取得・テストまで扱いました。ここから先は、必要になったときに足す道具です。
| 次の一歩 | どんなときに要るか |
|---|---|
| React Hook Form ＋ zod | 入力欄が10を超えるフォーム。検証ルールを型と一緒に持てる |
| 状態管理ライブラリ（Zustandなど） | Contextでは配りきれないほど状態が増えたとき。多くのアプリでは不要 |
| E2Eテスト（Playwrightなど） | 画面をまたいだ流れ（ログイン→購入）をまるごと確かめたい |
| デザインシステム／UIライブラリ | チームで見た目をそろえる。自作か既製品かの判断ごと |
WordPressをやってきた人なら、この知識はそのまま2方向につながります。
- ブロックの自作——WordPressのブロックエディタはReactで作られています。
propsもuseStateもそのまま出てきます - ヘッドレス構成——WordPressをデータの置き場（REST API）にして、表側をReactで作る
公式ドキュメントも見てみる
ja.react.dev外部サイトReact アプリの作成 – React公式の「Reactアプリの作成」。フレームワークを使う選択肢がまとまっています。次の一歩を選ぶときに読んでくださいこのレッスンのまとめ
npm run buildでdist/に公開用の一式ができる（JSXの変換・結合・CSSの書き出し）- ファイル名の英数字は中身から計算した目印——キャッシュ事故を防ぐしくみ
- 手元での最終確認は
npm run preview（index.htmlの直開きでは動かない） - Reactを積むと圧縮後で約60KB増える。変わらないページには向かない
dist/はただの静的ファイル——Cloudflare Pages・Netlify・GitHub Pagesに置ける- サブフォルダ公開で真っ白になったら
baseを指定する - 次はフォームライブラリ・状態管理・E2Eテスト——必要になってから足せばいい
全32回、おつかれさまでした。Reactは「画面を作り直す係」——最初の回で言ったこれが、いまは実感として分かるはずです。
