React

Reactの構成｜コンポーネントとファイル構造を理解する

Reactプロジェクトを作成すると、複数のファイルやフォルダが自動生成されます。ここでは、Reactアプリケーションの基本的なファイル構造と、各ファイルがどのように連携して画面を表示するのかを解説します。

基本的な使い方

Step 1Reactの基本的な読み込みの流れ

Reactでは、ブラウザでページにアクセスされると以下の順番でファイルが読み込まれます。

  1. public/index.html — HTMLテンプレートが読み込まれる
  2. src/index.js — JavaScriptのエントリーポイントが実行される
  3. src/App.js — メインコンポーネントが描画される

この流れを理解することで、Reactがどのように画面を構築しているのかが把握できます。

public/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>React App</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

id="root"のdiv要素がReactの描画対象です。Reactはこの要素の中にコンポーネントを描画します。

Step 2index.jsの役割：ルートの設定

src/index.jsはReactアプリケーションの起点となるファイルです。ここで描画先（ルート）の指定と、表示するコンポーネントの読み込みを行います。

src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(
  document.getElementById('root')
);

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

ReactDOM.createRoot()で描画先を指定し、root.render()で表示するコンポーネントを渡します。<React.StrictMode>は開発時に潜在的な問題を検出するためのラッパーで、本番ビルドでは無視されます。

Step 3App.jsの役割：メインコンポーネント

src/App.jsはアプリケーションのメインコンポーネントです。return()内に記述したJSXが画面に表示されます。

src/App.js
function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>Reactアプリケーションへようこそ</p>
    </div>
  );
}

export default App;

初期状態ではReactのロゴが表示されますが、return()内を書き換えることで自由に表示内容を変更できます。

Step 4index.jsに直接表示内容を記述する方法

App.jsを使わずに、index.jsのrender内に直接表示内容を記述することも可能です。

src/index.js
import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(
  document.getElementById('root')
);

const name = 'React';

root.render(
  <>
    <h1>Hello, {name}!</h1>
    <p>直接記述した内容です</p>
  </>
);

{name}のようにJSX内で波括弧を使うと、JavaScriptの変数を埋め込むことができます。また、<>...</>はReact.Fragmentの省略記法で、余分なDOM要素を追加せずに複数の要素をまとめられます。

注意

render関数では複数の要素を直接並べるとエラーになります。必ず1つの親要素で囲む必要があります。<div>で囲むか、<React.Fragment>（または<></>）を使用してください。

Step 5コンポーネントの分割

Reactでは機能ごとにコンポーネントを分割してファイルを作成します。以下は、ヘッダーとフッターを別コンポーネントに分ける例です。

src/Header.js
function Header() {
  return (
    <header>
      <h1>サイトタイトル</h1>
      <nav>
        <a href="/">ホーム</a>
        <a href="/about">概要</a>
      </nav>
    </header>
  );
}

export default Header;
src/App.js
import Header from './Header';

function App() {
  return (
    <div>
      <Header />
      <main>
        <p>メインコンテンツ</p>
      </main>
    </div>
  );
}

export default App;

コンポーネントを分割することで、コードの再利用性と保守性が大幅に向上します。大規模なアプリケーションでは、src/components/フォルダを作成してコンポーネントファイルを整理するのが一般的です。

ファイル構成のベストプラクティス

プロジェクトが大きくなったら、以下のようなフォルダ構成が推奨されます。

  • src/components/ — 再利用可能なUIコンポーネント
  • src/pages/ — ルーティング対象のページコンポーネント
  • src/hooks/ — カスタムフック
  • src/utils/ — ユーティリティ関数

まとめ

  • Reactはindex.html → index.js → App.jsの順にファイルを読み込む
  • index.jsでルート（描画先）を設定し、render()で表示する
  • App.jsはメインコンポーネントで、return()内にJSXを記述する
  • JSX内では{変数名}でJavaScriptの値を埋め込める
  • 複数要素は必ず1つの親要素（<div>や<Fragment>）で囲む
  • コンポーネントを分割してファイルを整理すると保守性が向上する