Next.jsで学ぶReact講座（完全初心者向け・30日） | 第1章：準備と超基礎 – React / Next.js とは何か

プログラミング初心者向けに、できるだけ専門用語をかみ砕いて、「React」と「Next.js」の世界をゆっくり案内していきます。
ただ知識として覚えるだけでなく、「自分なら何を作れるかな？」と想像しながら読んでみてください。

React / Next.js とは何か
1. React とは何かをイメージでつかむ
2. Next.js とは何かをイメージでつかむ
WebアプリとWebサイトの違い
Reactで何ができるか
Next.jsを使う理由
完成イメージを見る
1. 作ってみるとイメージしやすいミニアプリ
2. 完成形の感覚を持ちながら学ぶ
まとめと次の一歩

React / Next.js とは何か

React とは何かをイメージでつかむ

まず React は「Webの画面を作るための道具箱」「UIを組み立てるためのレゴブロック」と思ってください。

昔のWebページは、ほとんどが「紙の資料」を画面に映したようなものでした。リンクをクリックすると別のページに移動するだけで、ページ自体はそんなに動きませんでした。

React が登場してからは、ページの一部分だけをサッと入れ替えたり、ユーザーの入力に合わせてリアルタイムに変化するような「動く画面」を作るのが、とても楽になりました。

例えば、次のようなことが簡単にできます。

ボタンを押したら、その場で数字が増える
文字を入力したら、その場でプレビューが変わる
タブを切り替えると、中身だけがスッと入れ替わる

ここで一つ、超シンプルな React の例を見てみましょう。

// Counter.jsx
import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

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

// Counter.jsx
import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

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

JSX

このコンポーネント（パーツ）は、「ボタンを押すと数字が1増える」という小さな機能を持った部品です。
React は、こういった「画面の部品」を組み立てていくための仕組みだと考えると理解しやすいです。

Next.js とは何かをイメージでつかむ

Next.js は、「Reactで本格的なWebアプリやWebサイトを作るためのフレーム（骨組み）」です。

React だけでも画面は作れますが、実際のサービスを作るときは、次のようなものが必要になります。

URLごとにページを分ける仕組み（ルーティング）
ページを表示する前にデータを取ってくる仕組み
SEO（検索に強くする）対策
画像を最適化して表示を速くする仕組み
本番環境にデプロイしやすい構成

React 単体だと「画面作るところ」はとても得意ですが、「アプリ全体の構成」は自分で色々準備しないといけません。
Next.js はそこをまるごと用意してくれる「React 用の最強スターターキット」のような存在です。

イメージとしては、

React → レゴブロックそのもの
Next.js → レゴで家や街を作るための設計図・土台・便利ツール一式

という関係です。

WebアプリとWebサイトの違い

Webサイトのイメージ

Webサイトは「読む・見ることが中心のページ」と考えると分かりやすいです。

例えば、

会社のホームページ
お店の紹介ページ
ブログ記事
ニュース記事

などです。

特徴としては、

情報を「表示する」のが主な役割
ユーザーは読む・見るのが中心
それほど複雑な動きはない（クリックしたら別ページへ行くだけ、など）

という感じです。

Webアプリのイメージ

Webアプリは「Webブラウザの中で動くアプリ」です。スマホのアプリのWeb版、という感覚に近いです。

例えば、

チャットアプリ（Slack / Discord のWeb版）
タスク管理ツール（Todoアプリ）
ブラウザで動く家計簿アプリ
カレンダー・スケジュール管理
Web上で動く図形編集ツールやデザインツール

など、「ユーザーがたくさん操作する前提」のものです。

特徴としては、

画面のあちこちがユーザーの操作で変化する
ページ遷移なしに、その場で内容が動的に変わる
入力・保存・フィルター・検索などの機能が多い

です。

React / Next.js がどちらに向いているか

React は「動きのある部分」に強いので、特に Webアプリと相性が良いです。
ただし、最近は「動きの少ないWebサイト」でも、開発効率やSEO対策のために Next.js がよく使われています。

つまり、

情報中心のWebサイト → Next.jsで高速＋SEO良好なサイトを作りやすい
機能中心のWebアプリ → ReactのUI表現力＋Next.jsの構成力でがっつり作れる

という感じで、どちらにも使えます。

Reactで何ができるか

Reactの一番の特徴「コンポーネント思考」

React で重要なのは「コンポーネント」という考え方です。
コンポーネントとは、「画面の一部分を、ひとつの部品として定義したもの」です。

例えば、こんな分け方ができます。

ヘッダー（ロゴ＋メニュー）
サイドバー
記事カード
コメント欄
ボタン
入力フォーム

それぞれを別々の React コンポーネントとして作っておけば、「同じ部品をいろんなページで再利用する」ことが簡単になります。

小さな例ですが、ボタンコンポーネントを作ってみます。

// PrimaryButton.jsx
export default function PrimaryButton({ children, onClick }) {
  return (
    <button
      style={{
        backgroundColor: "#2563eb",
        color: "white",
        padding: "8px 16px",
        borderRadius: "4px",
        border: "none",
        cursor: "pointer",
      }}
      onClick={onClick}
    >
      {children}
    </button>
  );
}

// PrimaryButton.jsx
export default function PrimaryButton({ children, onClick }) {
  return (
    <button
      style={{
        backgroundColor: "#2563eb",
        color: "white",
        padding: "8px 16px",
        borderRadius: "4px",
        border: "none",
        cursor: "pointer",
      }}
      onClick={onClick}
    >
      {children}
    </button>
  );
}

JSX

このボタンを、どのページでもこうやって使えます。

import PrimaryButton from "./PrimaryButton";

export default function Page() {
  return (
    <div>
      <h1>ようこそ</h1>
      <PrimaryButton onClick={() => alert("こんにちは！")}>
        挨拶する
      </PrimaryButton>
    </div>
  );
}

import PrimaryButton from "./PrimaryButton";

export default function Page() {
  return (
    <div>
      <h1>ようこそ</h1>
      <PrimaryButton onClick={() => alert("こんにちは！")}>
        挨拶する
      </PrimaryButton>
    </div>
  );
}

JSX

「ボタンのデザインを変えたい」と思ったときに、PrimaryButton だけを直せば、全ページのボタンが一気に統一されます。
これがコンポーネント思考の強さです。

状態管理で「動くUI」を作る

React では、「状態（state）」という考え方が超重要です。
状態とは、「今の画面の中で変わる可能性のある値」です。

例えば、

カウントの値
入力フォームの文字
ログインしているかどうか
開いているタブの種類
チェックボックスがオンかオフか

などが状態です。

React の基本的な書き方は次のようになります。

import { useState } from "react";

export default function NameForm() {
  const [name, setName] = useState("");

  return (
    <div>
      <input
        value={name}
        onChange={(event) => setName(event.target.value)}
        placeholder="名前を入力してください"
      />
      <p>こんにちは、{name || "ゲスト"} さん！</p>
    </div>
  );
}

import { useState } from "react";

export default function NameForm() {
  const [name, setName] = useState("");

  return (
    <div>
      <input
        value={name}
        onChange={(event) => setName(event.target.value)}
        placeholder="名前を入力してください"
      />
      <p>こんにちは、{name || "ゲスト"} さん！</p>
    </div>
  );
}

JSX

ここで起きていることを整理すると、

name が「状態」
ユーザーが入力するたびに setName で状態を更新
状態が変わると、自動的に画面が再描画され、表示も変わる

「状態が変わったら、それに合わせてUIも変わる」というのが React の基本的な考え方です。
この感覚をつかむと、「Reactが分かってきた」という実感が出てきます。

Reactで作れるものの具体例

初心者でも、React を使えば次のようなものを作り始められます。

ToDoリストアプリ

タスクを追加・削除・完了済み表示
完了済みタスクをグレーにする
未完了タスク数をカウントして表示

簡単な家計簿

収入・支出を入力するフォーム
月ごとの合計を画面に表示
グラフライブラリと組み合わせて棒グラフ化

クイズアプリ

問題を1問ずつ表示
ボタンで回答
正解・不正解の結果を表示
最後に正解数を集計

どれも「状態を持つ画面の組み合わせ」として考えれば、React の考え方で実現できます。

Next.jsを使う理由

単純な React だけでは足りなくなるところ

React だけで始めると、次のような問題にぶつかりがちです。

どのファイルに何を書けばいいか、構成が迷子になる
ページごとのURLをどう管理するか決めないといけない
APIからデータを取るタイミングや方法を自分で設計する必要がある
SEO（検索）で有利になるように、HTMLの出し方を工夫する必要がある

初心者には、この「構成を全部自分で決める」部分のハードルが特に高いです。

Next.js は、そこを「こうするといいよ」というベストプラクティス付きで用意してくれます。

Next.js が用意してくれる便利さ

Next.js を使うと、例えば次のようなことが自然にできます。

ファイルベースのルーティング

ページをファイルで分けるだけで、URL が自動で決まります。

app/
  page.jsx          →  "/" のページ（トップページ）
  about/
    page.jsx        →  "/about" のページ
  blog/
    page.jsx        →  "/blog" のページ

React 単体だとルーティングライブラリを入れて、自分で設定を書く必要がありますが、Next.js ではフォルダ構成でかなり直感的に管理できます。

サーバーサイドレンダリングとSEO

通常の React アプリは、初回表示時に「ほぼ中身のないHTML」が返ってきて、そのあとブラウザがJavaScriptを読み込んでから画面を描画します。
これは検索エンジン的には少し不利になるケースがあります。

Next.jsでは、サーバー側であらかじめ画面を描画してHTMLを返すことができるので、

表示が速く感じられる
検索エンジンにも内容が分かりやすい

といったメリットがあります。

画像最適化やリンクコンポーネント

Next.js には、よく使う機能のための特別なコンポーネントが用意されています。

next/image → 画像を自動的に最適なサイズや形式で配信してくれる
next/link → ページ遷移を高速にしてくれるリンク

これらを使うことで、「意識しなくてもわりと高速なサイト」になりやすいです。

初心者でも Next.js から始めてよいか

むしろ、今から始めるなら「Reactの基礎を押さえつつ、Next.js ベースで学ぶ」のはかなり良い選択です。

理由としては、

Next.js のプロジェクトをテンプレートから作ると、すでに「現場で通用する構成」に近い形が手に入る
実際の仕事でも Next.js が使われることが多い
React だけで作ってから Next.js に移行するより、最初から Next.js で進めたほうが遠回りになりにくい

ただし、Next.js を使うときも「React の基本（コンポーネント」「状態」「props）」はしっかり理解する必要があります。
ここは逃げられないコア部分なので、時間をかけてゆっくり慣れていけばOKです。

完成イメージを見る

作ってみるとイメージしやすいミニアプリ

ここでは、「Next.js × React で作る超シンプルなWebアプリ」の完成イメージを言葉で描いてみます。

テーマは「簡易メモアプリ」です。

画面には次のような要素があります。

画面上部にタイトル「今日のメモ」
その下に、メモを入力するテキストボックス
「追加」ボタン
画面下部に、今まで追加したメモの一覧

動きとしては、

テキストボックスに文字を入力
「追加」ボタンを押す
下のリストにメモが1行追加される
入力欄は空になる

というシンプルなものです。

これを React コンポーネントで書くと、例えば次のようになります（概念イメージです）。

// app/page.jsx （Next.js のトップページ例）
"use client";

import { useState } from "react";

export default function Home() {
  const [text, setText] = useState("");
  const [memos, setMemos] = useState([]);

  function handleAdd() {
    if (!text.trim()) return;
    setMemos([...memos, text]);
    setText("");
  }

  return (
    <main style={{ maxWidth: "600px", margin: "40px auto", fontFamily: "sans-serif" }}>
      <h1>今日のメモ</h1>
      <div style={{ display: "flex", gap: "8px", marginBottom: "16px" }}>
        <input
          style={{ flex: 1, padding: "8px" }}
          placeholder="メモを入力..."
          value={text}
          onChange={(e) => setText(e.target.value)}
        />
        <button onClick={handleAdd}>追加</button>
      </div>
      <section>
        {memos.length === 0 ? (
          <p>まだメモがありません。</p>
        ) : (
          memos.map((memo, index) => (
            <p key={index}>・{memo}</p>
          ))
        )}
      </section>
    </main>
  );
}

// app/page.jsx （Next.js のトップページ例）
"use client";

import { useState } from "react";

export default function Home() {
  const [text, setText] = useState("");
  const [memos, setMemos] = useState([]);

  function handleAdd() {
    if (!text.trim()) return;
    setMemos([...memos, text]);
    setText("");
  }

  return (
    <main style={{ maxWidth: "600px", margin: "40px auto", fontFamily: "sans-serif" }}>
      <h1>今日のメモ</h1>
      <div style={{ display: "flex", gap: "8px", marginBottom: "16px" }}>
        <input
          style={{ flex: 1, padding: "8px" }}
          placeholder="メモを入力..."
          value={text}
          onChange={(e) => setText(e.target.value)}
        />
        <button onClick={handleAdd}>追加</button>
      </div>
      <section>
        {memos.length === 0 ? (
          <p>まだメモがありません。</p>
        ) : (
          memos.map((memo, index) => (
            <p key={index}>・{memo}</p>
          ))
        )}
      </section>
    </main>
  );
}

JSX

これがブラウザで動くと、

入力するたびに画面が変わる
ボタンを押すと即座にメモが追加される
ページのリロードなしでスムーズに動作する

という「Webアプリっぽさ」を体感できます。

完成形の感覚を持ちながら学ぶ

React / Next.js を学ぶときは、「何のためにこれを覚えているのか」が見えにくくなると辛くなりがちです。

なので、学習中も常に、

自分ならどんなミニアプリを作りたいか
今覚えている概念は、そのアプリのどこに使えそうか

を考えながら進めると理解が定着しやすくなります。

まとめと次の一歩

ここまでの要点を整理します。

React は「画面部品（コンポーネント）を組み立てて、動くUIを作るためのライブラリ」
Next.js は「Reactで本格的なWebサイト・Webアプリを作るための骨組みと便利ツールのセット」
Webサイトは「読む中心」、Webアプリは「操作中心」
React では「コンポーネント」と「状態」が超重要
Next.js を使うと、ページ構成・ルーティング・表示速度・SEOなどを一気に整えやすい
小さなメモアプリやToDoアプリからでも、十分に「Reactらしさ」「Next.jsらしさ」を体感できる

もし次のステップに進むなら、

React の「コンポーネント」「props」「state」を、小さい例でたくさん書いてみる
Next.js のプロジェクトを一つ作って、app/page.jsx に今日のカウンターやメモアプリを書いて動かしてみる

あたりから始めると、かなりスムーズに「実際に動くもの」を作れるようになっていきます。

「これくらいなら、自分でも作れそうかも」と感じたところからがスタートラインです。

月	火	水	木	金	土	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31