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

生徒

「Reactの開発を始めたいんですが、最初に何をすればいいんですか？」

先生

「まずはcreate-react-appというツールを使って、Reactプロジェクトを作成してみましょう！」

生徒

「create-react-appって何ですか？難しいですか？」

先生

「とても簡単ですよ。難しいプログラムや設定を自動でやってくれる便利な道具なんです。」

1. create-react-appとは何か？

create-react-app（クリエイト・リアクト・アップ）は、Reactアプリを作りたい人が「最初の一歩」を迷わず踏み出せるように用意された便利なツールです。複雑な初期設定をすべて自動で行い、すぐに開発を始められる環境を作ってくれるため、初心者でも安心して使えます。

Reactを動かすには、本来はフォルダ構成を整えたり、設定ファイルを作ったりと、初心者には少しハードルの高い作業が必要です。しかし、create-react-appを使えば、それらがすべてボタンひとつ・コマンドひとつで準備されます。

イメージとしては、「必要な道具が全部そろった工作キット」のようなものです。開けた瞬間からすぐに作業を始められるため、余計な準備に時間を取られず、Reactの学習に集中できます。

たとえば、以下のような最低限必要なファイルが自動で用意されます：


my-app/
  ├─ src/
  ├─ public/
  ├─ package.json
  └─ README.md

このように、create-react-appはReactのスタートラインに立つための環境を一瞬で整えてくれる頼れるツールです。これからReactを学びたい人にとって、まず覚えておいて損のない存在といえるでしょう。

2. create-react-appを使う準備

create-react-appを使うには、まずNode.jsとnpmがインストールされている必要があります。Node.js（ノードジェイエス）は、ブラウザの外側でもJavaScriptを動かせるようにするための土台となるソフトで、npm（エヌピーエム）はその上で動く「道具（パッケージ）を管理するためのツール」です。

まだNode.jsとnpmをインストールしていない人は、公式サイトからインストーラーをダウンロードし、案内に沿って進めてください。基本的には「Next」ボタンを押していくだけで完了します。インストールするバージョンは、安定して使えるLTS版を選んでおくと安心です。

インストールが終わったら、本当に正しく入っているか簡単に確認してみましょう。ターミナル（またはコマンドプロンプト）を開き、次のコマンドを入力します。


node -v
npm -v

それぞれのコマンドを実行してバージョン番号（例：v20.x.x）が表示されれば、Node.jsとnpmが正しくインストールされています。

さらに、Node.jsがきちんと動くか試してみたい場合は、エディタでhello.jsというファイルを作成し、次の1行だけ書いて保存してみてください。


console.log("Node.js が正しく動いています！");

その後、ターミナルでこのファイルがあるフォルダに移動して、node hello.jsと実行します。画面にメッセージが表示されれば準備完了です。ここまでできれば、create-react-appを使ってReactプロジェクトを作る土台は整っていますので、次のステップに進みましょう。

3. プロジェクトを作るフォルダを選ぼう

まずは、Reactアプリを作りたい場所を決めましょう。たとえば「デスクトップ」に作りたい場合は、以下のように操作します。

パソコンで「ターミナル」や「コマンドプロンプト」を開く
以下のコマンドを入力してデスクトップに移動します


cd Desktop

「cd」は、「change directory（フォルダを移動する）」という意味です。

4. create-react-appでプロジェクトを作ろう

次に、create-react-appを使ってReactアプリを作成します。以下のコマンドを入力してください。


npx create-react-app my-first-app

ここで使われている「npx」は、一時的にツールを使うための命令です。

my-first-appの部分は、自分の好きなアプリ名に変えても大丈夫です（例：「todo-app」など）。

しばらく待つと、自動的にたくさんのファイルが作成され、Reactアプリの土台が完成します。

5. Reactアプリを起動してみよう

プロジェクトができたら、フォルダに移動してReactアプリを動かしてみましょう。


cd my-first-app
npm start

「npm start」は、「アプリを起動してブラウザで表示する」という命令です。

（自動的にブラウザが開き、「Reactのロゴとようこそ画面」が表示されます）

6. Reactのコードを編集してみよう

Reactアプリは、作成されたフォルダ内のファイルを編集することでカスタマイズできます。

たとえば、以下のようなコードに変えてみると、表示されるメッセージが変わります。


import React, { useState } from "react";

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

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

export default App;

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

このように、自分で文字を変えたり、ボタンを追加するだけでもReactの勉強になります。

7. よくあるトラブルとその対処法

create-react-appを使っていて、うまくいかないときの代表的なトラブルも紹介します。

「npxコマンドが見つからない」エラー： → Node.jsのインストールが正しくできていないかもしれません。もう一度インストールし直してみましょう。
「Reactの画面が表示されない」： → コマンドを入力する場所が違っていたり、フォルダ移動を忘れている可能性があります。
英語のエラーが出て意味がわからない： → エラーメッセージをGoogle検索してみましょう。「React npx error」などで検索すると、同じ問題を解決した人の記事が見つかることがあります。

8. create-react-appを使うと何が嬉しいのか？

手作業でReactアプリの環境を作るのは、初心者にはとても難しいです。

でも、create-react-appを使えば、そうした難しい設定をすべてスキップしてすぐに開発を始められるのが最大のメリットです。

初めての人でも安心してReactの世界に入っていけるように設計されたツールです。

Reactの学習をスタートするなら、まずはこの方法から始めてみましょう！

まとめ

Reactでアプリケーションを作り始めるとき、create-react-appを利用することで開発環境の準備が驚くほど簡単になるという点はとても大きな魅力です。とくに、はじめてフロントエンド開発を学ぶ人にとって、複雑な設定を自力で行うのは負担が大きく、つまずく原因にもなります。その点、create-react-appはコマンドひとつでReactアプリの土台を素早く整えてくれるため、学習の最初の壁をやさしく取り除いてくれます。さらに、Reactの基本構造やコンポーネントの仕組み、状態管理の流れを理解するうえでも役立つ構成になっているため、実際のコードを編集しながら学習していく流れもスムーズに進められます。また、フォルダ移動やnpm startのように開発でよく使う基本操作を自然に覚えられる点も、初心者にとって大きな学びになります。この記事で触れたように、プロジェクト作成からアプリ起動、コード編集まで一連の動作を繰り返すことで、Reactの基礎的な流れが身につき、自分で小さなアプリケーションを作る力が養われていきます。トラブルが発生したときも、原因を順番に確認しながら対処する習慣をつけることで、開発全体の理解が深まりやすくなります。こうした積み重ねが、より高度なReact開発へのステップに繋がっていきます。学習を続ける際には、create-react-appで作ったプロジェクトのコードを追加したり機能を増やしたりしながら、Reactの構文やコンポーネントの扱いに慣れていくことがとても有効です。

サンプルプログラム（Appコンポーネント応用例）


import React, { useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("ようこそReactの世界へ");

  return (
    <div class="wrap">
      <h1>{text}</h1>
      <p>現在のカウント：{count}</p>
      <button onClick={() => setCount(count + 1)}>
        カウントを増やす
      </button>
      <button onClick={() => setText("メッセージが変更されました！")}>
        メッセージを変更
      </button>
    </div>
  );
}

export default App;

このサンプルでは、状態管理の基本であるuseStateを複数組み合わせ、メッセージ表示やカウント機能を組み込んだReactコンポーネントを構築しています。このように小さな動作を作りながら学ぶことで、Reactの特徴である「状態が変わるとUIが自動更新される」仕組みを自然に体験できます。またcreate-react-appで生成される初期構造を理解し、自分なりのコードを追加していくことで、ファイルの役割やコンポーネントの管理方法も身についていきます。Reactの学習では、こうした小さな積み重ねを継続することが、大きなアプリケーションを作る力へとつながっていきます。

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

生徒：「create-react-appって本当に便利ですね。最初の準備で迷わなくて助かりました。」

先生：「そうですね。環境構築のハードルが下がるので、Reactそのものの理解に集中できます。」

生徒：「コードを書き換えたら画面がすぐ反映されるのも面白かったです！」

先生：「Reactの魅力のひとつですね。状態が変わるとUIが更新される仕組みは、実際に触ると理解が進みます。」

生徒：「create-react-appで作ったアプリをもっと大きくしていけばReactに慣れていけそうです。」

先生：「その通り。小さな機能を追加しながら学ぶのがいちばん身につきますよ。」