先生と生徒の会話形式で理解しよう

生徒

「Reactでプロジェクトを作ったら、いろんなフォルダがありますが、どれを使えばいいんですか？」

先生

「Reactのプロジェクトには、特に重要なフォルダが2つあります。srcとpublicです。」

生徒

「名前は見たことありますけど、違いがよく分かりません……」

先生

「それでは、この2つのフォルダの役割をやさしく解説していきますね！」

1. Reactのプロジェクト構成とは？

Reactでプロジェクトを作成すると、最初に自動的にいくつかのフォルダやファイルが生成されます。その中でも特に重要なのが、アプリの「中身」を作るsrcディレクトリと、アプリの「土台」を支えるpublicディレクトリです。この2つの役割が分かると、Reactで作られたアプリがどのように動いているのかが、ぐっと理解しやすくなります。

フォルダは、パソコンの中の「引き出し」のようなものだと思ってください。書類を種類ごとに分けるように、Reactもファイルを用途ごとに整理しておくことで、後から迷わずに作業が進められます。たとえば、画面を構成するコンポーネントはsrcへ、アプリの外枠となるHTMLはpublicへ置くといった具合です。

もう少しイメージしやすいように、Reactプロジェクトを作った直後の典型的な構成を見てみましょう。


my-react-app/
├─ public/
│   ├─ index.html
│   ├─ favicon.ico
│   └─ logo.png
├─ src/
│   ├─ App.jsx
│   ├─ main.jsx
│   └─ index.css
└─ package.json

これを見ると、public と src の役割がなんとなく見えてきませんか？public は「外側の素材」、src は「実際に動くアプリ本体」。初心者の方でも、この2つの違いを押さえるだけでReactの構造が理解しやすくなります。

2. srcディレクトリの役割

srcは「source（ソース）」の略で、Reactの実際のプログラムを書く場所です。画面のタイトル、ボタン、入力フォームなど、ユーザーがブラウザ上で目にするほとんどの動きは、このsrcフォルダの中のファイルによって決まります。開発中に一番よく触るのも、このsrcディレクトリだと覚えておくとよいでしょう。

たとえば、もっとも基本的なファイルの1つがsrc/App.jsxです。ここには「このアプリでどんな画面を表示するか」が書かれており、Reactコンポーネントの入口とも言える存在です。次のようなシンプルなコードが書かれていることが多いです。


import React from "react";

function App() {
  return (
    <div>
      <h1>ようこそReactアプリへ！</h1>
    </div>
  );
}

export default App;

（画面に「ようこそReactアプリへ！」と表示されます）

このように、Reactコンポーネントと呼ばれる部品を作っていくのがsrcの中の主な仕事です。コンポーネントは「見た目」と「動き」をひとまとめにした小さなパーツで、ボタン用コンポーネント、ヘッダー用コンポーネント、フッター用コンポーネントといった形で、用途ごとに増やしていくことができます。

さらに、srcの中にはApp以外にも、アプリ全体を起動するためのファイルや、デザインをまとめたファイルが含まれています。これらが連携することで、1つのReactアプリとしてブラウザに表示される仕組みになっています。

src内のよくあるファイル

App.jsx（またはApp.tsx）：画面全体のメインの部品となるコンポーネント
main.jsx：Appコンポーネントをpublic/index.htmlのdiv#rootに差し込むための入口
index.css：全体のデザイン（文字の色・大きさ・余白など）をまとめて設定するスタイルシート

実際にReactの学習を進めるときは、まずこのsrcフォルダの中でコンポーネントを追加・編集していくことになります。「画面の中身はsrcに集まっている」と意識しておくと、どこをさわればよいか迷いにくくなり、プロジェクト構成の理解もスムーズになります。

3. publicディレクトリの役割

publicは、Reactアプリの「表に出る素材」をまとめておく場所です。たとえば、ブラウザのタブに表示されるfaviconや、アプリの土台となるindex.html、ロゴ画像などがここに入っています。ユーザーが最初にアクセスするときの入り口を支えるフォルダだとイメージすると分かりやすいでしょう。

大きな特徴は、Reactのコンポーネントから直接importしなくても、そのまま配信されるという点です。たとえば、public/logo.pngというファイルは、ブラウザから/logo.pngというパスでそのままアクセスできます。アプリの外側から参照したい固定ファイルを置いておくのに向いているフォルダです。

index.htmlの重要な役割

Reactアプリは、実際にはこのpublic/index.htmlの中に描画されます。とはいえ、ファイルを開いても長いHTMLが並んでいるわけではなく、ぱっと見は中身がほとんどないように感じるかもしれません。ですが、その中にある<div id="root"></div>という1行がとても重要な役割を持っています。


<body>
  <div id="root"></div>
</body>

このid="root"と書かれた場所が、Reactアプリが差し込まれる「受け皿」です。srcディレクトリ側のコード（main.jsxなど）で「rootというIDの要素にReactを表示してね」と命令することで、画面全体がここに描画されます。普段は意識しにくい部分ですが、Reactがどこに表示されているのかを理解するうえで、とても大切なポイントです。

publicに置くとよい主なファイル

index.html：Reactアプリの土台となる1枚きりのHTML
favicon.ico：ブラウザのタブに表示される小さなアイコン
ロゴ画像やOGP画像など、URLで直接アクセスさせたい静的ファイル

逆に、ボタンの表示や画面のレイアウトなど「中身の動き」を作るコードは、publicではなくsrc側に書きます。publicはあくまで「外側の器」や「固定の素材」を置く場所、と覚えておくと、srcとの役割分担がはっきりしてプロジェクト構成が理解しやすくなります。

4. srcとpublicの違いをイメージで理解しよう

Reactのプロジェクト構成を理解するとき、専門用語だけで説明されてもイメージがつかみにくいものです。そこで、より分かりやすい例えを使ってsrcとpublicの違いを整理してみましょう。プロジェクト全体を「劇場で上演される舞台作品」だと思ってみてください。

publicは舞台セットや照明が組まれたステージです。観客が会場に入ったとき、まず目にするのはステージの枠組みや背景です。Reactアプリでいうと、index.htmlや固定画像など、アプリを支える土台の部分にあたります。これは常に同じ形で存在し、演者によって変わるものではありません。
srcは俳優の動きやセリフ、演技そのものです。物語の進行や表情の変化、アクションなど「動き」を作り出すのがsrcフォルダにあるコンポーネントの役割です。ボタンを押したときの反応や表示の切り替えなど、実際に変化が起こるのはこちら側です。

つまり、publicはアプリの器、srcはアプリの中身という関係です。この2つが揃うことで、初めてReactアプリという作品が成立します。publicがしっかり舞台を支え、srcがその上でストーリーを展開していると考えると、構造の理解がぐっと進みます。特に初心者の方は、このようなイメージを持っておくことで、フォルダ構成の役割を迷わず整理しやすくなります。

違いを体感できるシンプルなサンプル

たとえば、public側に背景画像を置き、src側でボタンの動きを制御するイメージを持つと分かりやすいです。背景画像は使い回す「舞台セット」、ボタンのクリック反応は「俳優の演技」にあたります。


import { useState } from "react";

function App() {
  const [message, setMessage] = useState("こんにちは！");

  return (
    <div>
      <h1>{message}</h1>
      <button onClick={() => setMessage("ボタンがクリックされました！")}>
        クリック
      </button>
    </div>
  );
}

export default App;

（画面に「こんにちは！」と表示され、ボタンを押すと「ボタンがクリックされました！」に変わります）

このように、publicは常に同じ形で存在し、srcのコードが動くことで画面が変化します。両方の役割を区別して覚えておくと、プロジェクトを見るときに「どこを触ればよいか」が自然と分かるようになります。

5. よくある疑問：画像や音楽はどこに置けばいい？

よくあるのが「画像ファイルはsrcとpublicのどっちに置くのが正解？」という疑問です。

基本的には、Reactのコードの中で使う画像はsrcに置くのがおすすめです。理由は、import（読み込み）で型チェックやエラー確認ができるからです。

逆に、コードの外から直接アクセスさせたいファイル（例：ドキュメントや音楽ファイルなど）は、publicに置くことで簡単にURLで読み込めます。

6. React開発で覚えておきたいディレクトリの使い分け

最初は「どっちに何を入れるか迷う……」と思うかもしれませんが、ポイントは以下の通りです。

場所	用途	特徴
`src`	Reactのコード・CSS・画像など	importして使う。エラー検知あり
`public`	HTML・favicon・外部素材	URLで直接アクセス可能

開発が進むと、自分でcomponents（部品）やpages（ページ）などのサブフォルダをsrcの中に追加して、もっと整理することもできます。

まとめ

Reactのプロジェクト構成について振り返ってみると、初心者が最初につまずきやすい「srcディレクトリ」と「publicディレクトリ」の役割が明確に整理され、それぞれが果たしている大切な役割がよく理解できます。とくに、srcはReactアプリの中心となるコンポーネントや状態管理のコードを書く場所であり、画面の動きやボタンの反応などアプリの動作に関わるすべてのロジックが集まる場所です。一方、publicはアプリの土台としてのindex.htmlや、外部から直接参照したい画像・音声・ドキュメントなどを保管するための場所であり、Reactを裏側で支える「ステージ」のような存在です。こうした役割の違いを知ることで、プロジェクトが複雑になっても整理しやすくなり、データの置き場所に迷わず判断できるようになります。Reactの開発では、機能ごとにコンポーネントを整理したり、ページごとにフォルダを分けたりすることで、より見通しのよい設計が可能になります。この整理された構造は、大規模な開発や複数人での共同作業でも非常に重要で、後から修正する際の負担を大きく減らすことにつながります。 React開発の基本となる構成を理解したうえで、小さなコンポーネントから実際にコードを書くことで、フォルダの役割がより自然に身につきます。以下に、srcフォルダ内で使われる典型的なコンポーネントのサンプルコードを示します。実際のファイル構成を意識しながら、どのようにAppコンポーネントが画面に表示されるのかを理解する助けにしてください。

Reactのsrc内に置くコンポーネント例


import React, { useState } from "react";

function SampleComponent() {
  const [message, setMessage] = useState("Reactのディレクトリ構成を学ぼう");

  return (
    <div className="card p-3 mt-3">
      <h2 className="fw-bold fs-4">{message}</h2>
      <button 
        className="btn btn-primary mt-2"
        onClick={() => setMessage("srcにコンポーネントを置く理由がよく分かった！")}
      >
        メッセージ更新
      </button>
    </div>
  );
}

export default SampleComponent;

このコンポーネントは、src内で作成されたファイルの代表的な形で、Reactが得意とする「状態管理」「コンポーネント化」「UI更新」の仕組みをシンプルに体験できます。publicフォルダに存在するindex.htmlの<div id="root">に、main.jsxを通してこのコンポーネントが差し込まれることで、初めて画面として表示されます。フォルダの役割を理解しながらコードを書くことで、React特有の仕組みが自然と身につき、今後の学習にも大きく役立ちます。さらに、開発の規模が大きくなるほど、src配下にcomponentsフォルダやpagesフォルダを作り、用途ごとにコードを整理する重要性が高まります。publicには外部から直接アクセスする素材を配置し、srcにはReactのロジックとUIを配置するという明確な分担があることで、プロジェクト全体の見通しがよくなります。React開発では、この土台を理解しているかどうかが、効率的な実装やトラブル回避に直結します。

先生と生徒の振り返り会話

生徒：「publicとsrcの違いがようやく分かりました！どちらも大事だけど役割がぜんぜん違うんですね。」

先生：「その通り。publicはアプリの土台で、srcは中身を作るための場所なんだ。特にsrcはReact開発で一番よく触るところだよ。」

生徒：「画像や音楽の置き場所も迷っていたんですが、使い方によって置く場所が変わるのも勉強になりました。」

先生：「Reactのコードでimportするならsrc、外部からURLで読み込みたいならpublicという使い分けを覚えておくと便利だね。」

生徒：「サンプルコンポーネントも試してみたいです。実際に動かすともっと理解できそう！」

先生：「その意欲が大事だよ。フォルダ構成を意識しながら自分でコンポーネントを作ると、Reactの基本がぐっと深まるはずだよ。」

生徒：「これでプロジェクトの構成が怖くなくなりました！次はコンポーネントを増やしたり、ページを作ってみたいです！」

先生：「いいね。Reactの魅力は、コツをつかむとどんどん開発が楽しくなるところだから、ぜひいろいろ挑戦してみてね。」