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

生徒

「Reactを勉強したいんですが、何から始めたらいいかわかりません…」

先生

「Reactの学習には順番があります。いきなり難しいことをやらなくても大丈夫ですよ。」

生徒

「具体的にどんな流れで学べばいいですか？初心者でもできる方法が知りたいです！」

先生

「それでは、Reactの学習ロードマップをステップごとに説明していきましょう。」

1. JavaScriptの基礎を理解しよう

React（リアクト）はJavaScriptというプログラミング言語の上に成り立っています。つまり、まずはJavaScriptの基本的な仕組みを理解しておくことが、スムーズにReactを学ぶうえで欠かせません。

特に最初に触れるのは「変数」「関数」「条件分岐」「繰り返し処理」といった、ごく基本的な文法です。これらは、Webアプリを作るうえでの“共通の土台”であり、Reactで登場するさまざまな機能を理解するときにも役立ちます。

たとえば、次のようなシンプルなJavaScriptのサンプルがあります。初心者の方でも読みやすいように、できるだけやさしい形にしています。


let user = "太郎";

// 条件分岐でメッセージを変える
if (user) {
  console.log("こんにちは、" + user + "さん！");
} else {
  console.log("ユーザー名がありません。");
}

このサンプルでは、「変数に値を入れる」「条件によって表示する内容を変える」という、ごく基本的な処理を行っています。JavaScriptの基礎が身につくと、Reactでユーザーの状態を扱ったり、表示内容を変えたりするときに、自然と理解が追いつくようになります。

Reactはとても便利なツールですが、その土台となるJavaScriptの理解があると、学習効率が大きく上がります。焦らず、まずは基本文法から着実に身につけていきましょう。

2. HTMLとCSSの仕組みを知ろう

Reactで画面を作る前に、まずはWebページの土台となるHTMLとCSSの役割を押さえておきましょう。HTMLは画面の「骨組み」、CSSは色や余白などを決める「デザイン担当」のようなイメージです。

たとえば、見出しや文章、ボタンを並べるにはHTMLのタグを使います。タグは<h1>や<p>、<button>のような「部品の名前」で、これを組み合わせてWebページやWebアプリの画面を組み立てていきます。

そして、その見た目を整えるのがCSSです。「文字を大きくする」「背景色を変える」「ボタンに余白をつける」といった装飾をCSSで指定します。Reactで使うJSXも、このHTMLとよく似た考え方で画面を作るので、ここで仕組みを理解しておくと、このあと出てくるReactのコードも読みやすくなります。

イメージしやすいように、とてもシンプルなHTMLとCSSの例を見てみましょう。プログラミング未経験の方でも、なんとなく「構造」と「見た目」の違いがわかるはずです。


<!DOCTYPE html>
<html>
  <head>
    <title>はじめてのWebページ</title>
    <style>
      h1 {
        color: blue;
        font-size: 24px;
      }
      p {
        font-size: 16px;
      }
      button {
        padding: 8px 16px;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <h1>こんにちは、Webページ！</h1>
    <p>これはHTMLとCSSだけで作ったシンプルなページです。</p>
    <button>ボタンを押してみる</button>
  </body>
</html>

このサンプルでは、HTMLが「見出し」「文章」「ボタン」といった画面の構造を担当し、CSSが「文字色」「文字サイズ」「ボタンの余白」といった見た目のデザインを担当しています。最初はすべてを暗記しなくても大丈夫です。「HTMLで中身を作り、CSSで見た目を整える」という感覚がつかめれば十分です。

Reactの学習を進めると、JSXという書き方で画面を作るようになりますが、「これはHTMLの見出しっぽい」「ここでCSSが効いている」とイメージできると理解がぐっと楽になります。まずは自分で簡単なHTMLとCSSのページを1つ作ってみて、Webページの仕組みに慣れておきましょう。

3. JSXの基本を覚えよう

Reactでは、画面の表示をJSX（ジェイエスエックス）という書き方で記述します。見た目はほとんどHTMLですが、実際にはJavaScriptの中に書かれた特別な文法で、「JavaScriptのコードの中にHTML風のタグを書ける書き方」だとイメージするとわかりやすいです。

JSXを使うと、これまで学んできたHTMLのタグとJavaScriptの変数や計算結果を、ひとつの場所でまとめて扱えるようになります。最初は「本当にこれってJavaScriptなの？」と不思議に感じるかもしれませんが、書いていくうちに自然と慣れていきます。

ポイントは、{ }（波かっこ）の中にJavaScriptの式を書けることです。たとえば、変数の中身や簡単な計算結果を、そのまま画面の中に埋め込むことができます。


import React from "react";

function App() {
  const user = "太郎";
  const message = "Reactの学習を始めましょう";

  return (
    <div>
      <h1>こんにちは、{user}さん！</h1>
      <p>{message}</p>
    </div>
  );
}

export default App;

このサンプルでは、userとmessageという2つの変数を用意し、その値を{ }の中に書いて画面に表示しています。<h1>や<p>といったタグはHTMLと同じように見えますが、実際にはJSXとしてJavaScriptのコードの一部として扱われています。

また、returnの中身がひとつの大きなタグ（ここでは<div>）で囲まれていることにも注目してください。JSXでは、基本的に「ひとつのまとまり（親要素）」として返す必要があるため、複数の要素をまとめるときはこのように<div>などで包むのが定番の書き方です。

JSXの雰囲気さえつかめれば、「HTMLで画面の形を作りつつ、必要なところだけ{ }でJavaScriptを差し込む」という感覚でコードを書けるようになります。ここでは細かいルールをすべて覚える必要はありません。まずは「HTMLに似た書き方だけれど、中身はJavaScriptで動いている」というイメージを持っておき、次のステップで少しずつ慣れていきましょう。

（上のコードを実行すると、画面に「こんにちは、太郎さん！」とその下にメッセージが表示されます）

4. コンポーネントを使って画面を作ろう

Reactの大きな特徴のひとつが、画面をコンポーネント（部品）として分けて作れることです。コンポーネントは「ひとつの役割を持つ小さなパーツ」のようなもので、ボタン・ヘッダー・メニュー・リストなど、画面の一部分を独立した形で作れます。

この仕組みを使うことで、同じパーツを使い回せたり、あとから修正するときもその部分だけ直せばよかったりと、作業がぐっと効率的になります。まるでレゴブロックを組み立てるように、必要な部品を組み合わせてアプリを作るイメージです。

イメージしやすいように、初心者向けのとてもシンプルなコンポーネントの例を見てみましょう。


import React from "react";

// あいさつを表示するコンポーネント
function Greeting() {
  return <h2>こんにちは！Reactへようこそ</h2>;
}

function App() {
  return (
    <div>
      <Greeting />
      <p>この下に他のコンポーネントを追加することもできます。</p>
    </div>
  );
}

export default App;

この例では、Greetingという「挨拶だけを表示するコンポーネント」を用意し、<Greeting />と書くだけで簡単に表示できます。タグのように見えますが、これはまさにReactの部品を呼び出しているイメージです。

コンポーネントを使うと、画面を役割ごとに整理できるため、アプリが複雑になっても迷いにくくなります。まずは小さなコンポーネントから作り、少しずつ画面を組み立てていく流れに慣れていきましょう。

5. useStateで状態管理に挑戦しよう

Reactでは、ユーザーの操作に応じて画面の表示を切り替えるために、状態（State）という考え方を使います。「今ボタンは何回押されたのか」「入力欄にどんな文字が入っているのか」といった、そのときどきの情報を覚えておくメモ帳のような役割だとイメージするとわかりやすいです。

関数コンポーネントでは、この状態を扱うためにuseStateというフックを使います。難しそうな名前ですが、やっていることは「値を覚えておき、必要に応じて書き換える」だけです。まずは、Reactの状態管理のイメージをつかむことを目標にしましょう。

下のサンプルは、ボタンを押すたびに数字が1ずつ増えていく、とてもシンプルなカウントアプリです。プログラミング未経験の方でも雰囲気がつかめるように、できるだけ素直な書き方にしています。


import React, { useState } from "react";

function App() {
  // countが「今の数値」、setCountが「数値を更新するための関数」
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>現在のカウント: {count}</h1>
      <button onClick={() => setCount(count + 1)}>1増やす</button>
    </div>
  );
}

export default App;

このコードでは、useState(0)と書くことで「最初の値が0の状態」を用意しています。[count, setCount]という書き方は、「現在の値を入れておく変数（count）」と「その値を変更するときに呼び出す関数（setCount）」の2つをセットで受け取っている、と考えてください。ボタンをクリックするとsetCount(count + 1)が呼ばれ、数値が1増えた状態に更新されます。

画面の中では、{count}と書かれている部分に、常に最新のカウント数が表示されます。つまり、「状態（count）を更新すると、その状態を参照している部分の表示も自動で変わる」というのが、Reactの状態管理の大きな特徴です。自分で「ここを書き換えて…」と細かく命令しなくても、状態を変えるだけでReactがいい感じに画面を描き直してくれます。

最初は、useStateは「値を覚えておく箱」と「その値を変えるボタン」をセットで用意してくれるもの、というイメージで十分です。カウントアップのような小さな例から試してみて、「値を変えると表示も変わる」という感覚に慣れていくと、後でフォーム入力やチェックボックスなどの状態を扱うときにもスムーズに理解できるようになります。

（ボタンを押すたびに状態が更新され、「現在のカウント:」の数字が1ずつ増えていきます）

6. イベントと関数を組み合わせよう

Reactでは、ユーザーが操作したときの反応をイベントとして扱います。たとえば「ボタンをクリックしたら文字を変える」「フォームに入力したら反映する」などです。

イベントと関数を組み合わせることで、インタラクティブなアプリを作れるようになります。

7. 最後は小さなアプリを作ってみよう

基本的な構文や機能を学んだら、簡単なアプリを自分で作ってみるのがおすすめです。たとえば、以下のようなものが人気です。

・ToDoリストアプリ（やることを管理）
・カウントアップアプリ（数字を増やす）
・おみくじアプリ（ボタンで運勢を表示）

実際に動くものを作ることで、自信がついて理解も深まります。

8. Reactの学習ロードマップ一覧

① JavaScriptの基礎文法を覚える
② HTMLとCSSの基本を理解する
③ JSXの使い方に慣れる
④ コンポーネントを分けて画面を構成する
⑤ useStateなどで状態管理を覚える
⑥ イベントや関数を活用する
⑦ 簡単なReactアプリを作ってみる

このステップに沿って学べば、Reactの基本を最短で習得できます。焦らず一歩ずつ進めることが、成功への近道です。

まとめ

Reactの学習を進めるにあたり、最初に取り組むべき基礎知識から、実際にアプリを作る段階までを一つずつ丁寧に積み重ねていくことが大切です。とりわけ、JavaScriptの基礎やHTMLとCSSの基本構造を理解しておくことは、Reactという仕組みを正しく捉えるための土台になります。画面を構成するコンポーネントの概念や、状態管理に欠かせないuseStateの仕組みを身につけることで、より動きのあるインタラクティブなアプリケーションを作れるようになります。さらにJSXの書き方を繰り返し練習すれば、自然とReact独自の構文にも慣れていき、開発スピードも向上していきます。

Reactの学習ロードマップを進める中で、特に意識しておきたいのは「小さな成功体験を積み重ねること」です。たとえば、簡単なカウントアプリや入力フォームなどのミニプロジェクトを一つずつ作ることで、自信がつき、コンポーネントやイベント処理の理解がより深まります。また、Reactの特徴である「部品化」「再利用」「状態管理」などを繰り返し体験することで、自然と実践的な発想が身につきます。やがて、ToDoリストやおみくじアプリのような簡単なアプリを完成させられるようになると、さらに大きなアプリにも挑戦できるようになり、自分の成長を実感できるようになるでしょう。

実際の学習では、Reactの公式ドキュメントや、JavaScriptのチュートリアル、CSSレイアウトの解説サイトなど、信頼できる情報源を活用することがとても効果的です。特にReactはバージョンアップによる改善が頻繁で、フックや記述方法が更新される場合もあります。そのため、最新の情報を参考にしながら理解を深めていくことで、より効率的で再現性の高い学習ができます。基礎をしっかり押さえた後は、React Routerを使ったページ遷移や、外部APIとの通信など、ステップアップ要素にも目を向けると、学べる幅がさらに広がっていきます。

また、Reactでの学習を進めるなかで「コードを書いて動かすこと」が最も重要です。たとえば次のような小さなコンポーネントを自分で書いてみるだけでも、理解が大きく進みます。


import React, { useState } from "react";

function MessageBox() {
  const [text, setText] = useState("はじめまして！");
  return (
    <div>
      <h2>{text}</h2>
      <button onClick={() => setText("Reactの学習を続けていこう！")}>
        メッセージを変更
      </button>
    </div>
  );
}

export default MessageBox;

このような簡単なコンポーネントでも、JSXでの表示方法、useStateでの状態管理、イベント処理など、Reactの重要な要素が自然と身につきます。少しずつ試しながら理解を積み上げていけば、Reactを使った画面の作成が驚くほどスムーズになります。アプリの構成を小さく分けて考える習慣も身につき、開発全体の見通しが良くなるため、Reactの魅力を実感しながら学習を続けられます。

最後に、焦らずゆっくりと段階を踏むことが学習成功のポイントです。Reactは最初こそ難しく感じる部分があるかもしれませんが、JavaScriptの基礎やHTMLとCSSの考え方を理解していれば、必ず理解できます。学びを楽しみながら、一歩ずつ確実に進めていきましょう。

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

生徒

「Reactの学習って、最初は難しいと思っていましたが、順番に学べばできそうだと感じました！」

先生

「その通りです。土台となるJavaScriptやHTML、CSSの理解が進むほど、Reactの仕組みは自然と理解できますよ。」

生徒

「useStateとかイベント処理など、少しずつ触ってみると意外と面白いですね。」

先生

「まずは小さなアプリから作っていくことが大事です。積み重ねれば必ず力になりますよ。」

生徒

「はい、今回のロードマップに沿って、少しずつReactの学習を進めていきます！」