はじめに
Reactアプリケーションの起動時の手順やブラウザ表示までのおおまかな流れを備忘録としてまとめます。
アプリケーションの作成方法
1. アプリの作成
Viteを使ってアプリケーションの雛形を作成。
npm create vite@latest アプリケーション名
コマンド実行をすると、以下のような構成のフォルダが作成される。
my-vite-app/ # プロジェクトのルートディレクトリ
├── node_modules/
├── public/
│ └── vite.svg
├── src/
│ ├── assets/
│ │ └── react.svg
│ ├── App.css
│ ├── App.jsx
│ ├── index.css
│ └── main.jsx
├── .gitignore
├── index.html
├── package.json
├── README.md
├── vite.config.js
└── jsconfig.json（TypeScriptで作った場合は tsconfig.json）
各ファイル・ディレクトリの説明
-
public/
静的ファイルを置く場所(例: favicon, 画像, アイコン など) -
src/
ソースコード一式を格納するフォルダ。
| ファイル名 | 内容 |
|---|---|
| main.jsx | アプリのエントリーポイント。ReactDOMでAppをレンダリング。 |
| App.jsx | メインコンポーネント。初期状態では簡単なUIが表示される。 |
| index.css | グローバルCSS。 |
| App.css | App.jsxに対応するCSS。 |
| assets/ | アイコンや画像ファイルなど静的アセット。 |
- プロジェクトルート
| ファイル名 | 内容 |
|---|---|
| index.html | ルートHTMLファイル。Viteはこれを基にビルド。 |
| package.json | 依存パッケージやスクリプトの管理。 |
| vite.config.js | Viteの設定ファイル（ポート、エイリアス、プラグインなどを定義可能）。 |
| .gitignore | Gitで無視するファイル。 |
| README.md | 初期README。 |
| tsconfig.json | Typescript用設定ファイル（パスエイリアスなどの指定用）。 |
2. アプリケーションの起動
npm run devコマンドでアプリケーション起動が可能。
npm run dev
localhost:5173にアクセスして以下のような画面表示がされれば成功。
ブラウザに表示されるまでの流れ
-
ユーザーがlocalhost:5713にアクセスする。
-
Vite開発サーバが起動をして、
index.htmlファイルを返す。 -
index.htmlファイル内の以下の記述をブラウザが読み込む。
<script type="module" src="/src/main.tsx"></script>
4.Viteが main.tsx を検出し、esbuildを使ってトランスパイル（TSX → JS）
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
// id="root"を持つ要素に<App />コンポーネントを描写するという記述
createRoot(document.getElementById('root')!).render(
<StrictMode>
<App />
</StrictMode>,
)
5. main.tsx 内の import に応じて他の .tsx や .ts ファイルを個別に変換・提供
6. ブラウザが変更後のJSコードを読み取って、Reactアプリが描写される。
補足：トランスパイルとバンドル
トランスパイラーとは？
ブラウザではJSXやTypescriptのコードをそのまま実行できないため、利用可能なJavascriptの形式に変換しておく必要がある。この「ある言語で書かれたコードを別の言語に変換する作業」をトランスパイルという。
バンドルとは？
複数のファイルやコードをブラウザで動くように1つにまとめること。
複数のモジュールを1つずつ読み込んでいくのは非効率であるため、1つの使える形にまとめて効率的にブラウザで読み込めるようにファイルをまとめておくと便利。
このバンドル作業を担ってくれるのがバンドラーと呼ばれるツール。
esbuildとは？
一言で言うと「JSXやTypeScriptのコードを、ブラウザで使える形に高速で変換してくれるトランスパイラー」のこと。
esbuildはJavascript/TypeScriptコードを変換（トランスパイル）するツールで、他のツールよりも処理が高速。かつ、複数のファイルを1つにまとめてくれるバンドルも行うことができる。
DOMとは？
DOM(ドキュメントオブジェクトモデル)は、Web上の文書のコンテンツと構成からなるオブジェクトのデータのこと。
WebページはHTMLの集まりでできており、そのHTMLをツリー状に表現したものをDOMという。
見出しや段落、画像、ボタンなどはDOMのノード(枝や葉っぱ)のように部品として扱われる。
JavascriptではこのDOMを操作して、見た目を変えたり内容をhんかさせたりできる。
仮想DOMとは？
Javascriptでページの要素を変える場合、実際のDOMに対して直接手を加えるが、この操作はとても重たい作業。
Reactでは高速に変更を加えるために、仮想DOMというメモリの軽いコピーを操作して、仮想DOMが変化した場合に差分だけ抽出する。抽出した差分のみ本番のDOMに変更することで、無駄な更新が減り画面をスムーズに動かすことができる。