Reactのファイル構成〜アプリが立ち上がる仕組み〜

こんにちは、Reiです！

Reactのプロジェクトを作成すると、
最初からいくつかのファイルが並んでいます。

ここで止まりやすいのが、
「このファイルって何に使うの？」という部分です。

App.js や index.js、package.json など、
見慣れないファイルがいくつもあるので、
どこから見ればいいのか分からなくなりやすいです。

最初は、どのファイルも同じくらい重要に見えて、
手が止まってしまうこともあります。

今回は、プロジェクトを作成した直後にあるファイルに絞って、
それぞれがどんな役割を持っているのかを整理します。

どんなファイルがあるの？
全体の流れをつかむ
package.json は何のためにあるの？
index.js は何をしているの？
App.js は何を書くファイル？
まとめ

どんなファイルがあるの？

Reactのプロジェクトを作成すると、
プロジェクトフォルダの中にいくつかファイルが用意されています。

代表的なものが次の3つです。

package.json
index.js
App.js

最初はそれぞれの違いが分かりにくく、
どれも同じように見えてしまいがちです。

それぞれのファイルは、ざっくり次の役割を持っています。

package.json → プロジェクトの設定をまとめたファイル
index.js → Reactの画面を表示するスタート地点
App.js → 実際の画面の中身を書くファイル

まずは、それぞれが何をしているファイルなのかをざっくりつかんでおきましょう。

全体の流れをつかむ

Reactの画面が表示されるまでの流れを押さえましょう。

package.json をもとに開発環境が動く
↓
index.js が App.js を読み込む
↓
App.js の内容がブラウザに表示される

この順番で見ると、
それぞれのファイルの役割がつながって見えてきます。

この流れを頭に入れておくと、
ファイルを見たときに「何をしているのか」が判断しやすくなります。

package.json は何のためにあるの？

package.json は、プロジェクトの設定を管理するためのファイルです。

{
  "name": "my-react-app",
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "scripts": {
    "start": "react-scripts start"
  }
}

ここには、プロジェクトを動かすために必要な情報がまとめられています。

たとえば、

どのライブラリを使うか
どのコマンドで起動するか

といった内容が記載されています。

このファイルを見ると、
「このアプリがどんな構成で動いているのか」が分かるようになります。

index.js は何をしているの？

次に、実際にReactの画面を表示する役割を持つのが index.js です。

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";

const root = createRoot(document.getElementById("root"));

root.render(
  <StrictMode>
    <App />
  </StrictMode>,
);

ここでは、
App.js をブラウザに表示するための準備をしています。

やっていることはシンプルで、

App を読み込む
表示する場所を決める
そこに <App /> を表示する

という流れで画面を表示しています。

`document.getElementById(“root”)` は、
HTML側にある表示エリアを取得しています。

つまり、このファイルは、
画面の中身ではなく 表示のつなぎ役 で、
Reactの画面を「どこに表示するか」を決めています。

App.js は何を書くファイル？

App.js は、画面を構成するための入口となるファイルです。

export default function App() {
  return (
    <div>
      <h1>Hello React!</h1>
    </div>
  );
}

ここには、見出しやテキストなど、
ブラウザに表示される内容を書きます。

このファイルに書かれた内容が、
最終的に画面として表示されます。

実際には、
1つのファイルだけで書かれるのではなく、
複数の場所に分かれて定義されることが多くなります。

それらの内容が App.js を通してまとめられ、
最終的に画面として表示されます。

まとめ

Reactのプロジェクトを作成した直後にあるファイルは、
それぞれ違う役割を持っています。

最初はすべてを理解しようとしなくても大丈夫です。

まずは、
画面の中身は App.js に書かれていることだけ押さえておくと、
手が止まりにくくなるはずです。

必要になったときに、
index.js や package.json の役割を少しずつ確認していきましょう。

次は、画面を部品ごとに分けて考えるための
「コンポーネント」という考え方を学んでいきます！