Reactの学習ロードマップとハンズオン実例：初心者でもアプリが作れる！

はじめに

執筆者について

デジタルインテグレーション部　岸野 晋太郎

執筆の経緯

私はこれまで3年間、フロントエンドとサーバーサイドの両方を担当してきたエンジニアです。
以前の現場では、PHP/Laravel、JavaScript/jQueryを扱っており、それ以外の言語にはあまり触れてきませんでした。
そんな私がReact未経験の状態からどのように学び、何ができるようになったのかを共有することで、同じような初学者の方の手助けになればと思い、この記事を執筆しました。

Reactとは

React（リアクト）とは、UI（ユーザーインターフェース）を作るためのJavaScriptライブラリです。
Facebook（現Meta）が開発しており、Webアプリやスマホアプリの見た目の部分（フロントエンド）を効率よく作るために使われます。

Reactの特徴

例：Hello, React!

function Hello() {
  return <h1>Hello, React!</h1>;
}

このように、JSXを使ってJavaScript内に記述できます。
JSXとはJavaScriptの拡張構文で、JavaScriptファイル内にHTMLのようなコードを記述できるようにするものです。

よく使われる用途

• チャットアプリ
• SNSの投稿画面
• ダッシュボードや管理画面
• フォームや検索画面などの動的UI

Reactが使われている有名なサービス

学習手順

1. Reactの概要を学ぶ
2. ハンズオンでReactのコードに触れ、学ぶ
3. Reactでアプリを開発する
4. 個人開発に挑戦する

Reactの概要は掴めたので、実際にコードに触りながら学習を進めましょう。

三目並べ

Reactは、初めて学ぶ人向けに公式からチュートリアルが展開されています。
難しい環境構築は不要。実際にコードを書きながら画面を確認し、実装できます。
チュートリアルの内容は割愛しますが、完成形は以下のような画面となります。

私はチュートリアルを通して以下の表に記載した知識を身に付けました。
チュートリアルの最後にサンプルコードがあるので、一通り眺めて、コードとリンクさせましょう。

Reactチュートリアル

チャットアプリ

こちらは私が作成した簡単なチャットアプリです。
サンプルコードを参考に、Reactの状態管理・レンダリング・副作用処理（useEffect）・イベント処理・ロジック設計までを一通り勉強できます。
Reactを使った「動きのあるUIアプリ開発」の基本スキルが一通り身につく内容となるように作成しました。

完成イメージ

サンプルコード

以下は、Reactで作成した簡単なチャットアプリのソースコードです。
localStorage に保存され、Botからの簡易返信も実装されています。
実際に手を動かしたい方は以下のサイトを使用してみてください。

サンドボックス

以下のコードをApp.jsにペーストすると、チャットアプリが使用できます。

import "./App.css";
import { useState, useEffect } from "react";

function App() {
  const [messages, setMessages] = useState([]);
  const [name, setName] = useState("");
  const [text, setText] = useState("");

  // ✅ 画面初回表示時に localStorage から読み込む
  useEffect(() => {
    const saved = localStorage.getItem("chatMessages");
    if (saved) {
      setMessages(JSON.parse(saved));
    }
  }, []);

  // ✅ messagesが更新されるたびに localStorage に保存
  useEffect(() => {
    localStorage.setItem("chatMessages", JSON.stringify(messages));
  }, [messages]);

  const handleSend = () => {
    if (!name || !text) return;

    const newMessage = {
      name,
      text,
      time: new Date().toLocaleTimeString(),
    };

    setMessages((prev) => [...prev, newMessage]);
    setText("");

    // 🔍 Botの返答ロジック（キーワード応答＋ランダム応答）
    const keywordReplies = [
      {
        keywords: ["疲れた", "だるい", "しんどい"],
        reply: "おつかれさまです。無理せず休んでくださいね。",
      },
      {
        keywords: ["ねむい", "眠い"],
        reply: "眠い時は寝ましょう！体が資本です😴",
      },
      { keywords: ["ありがとう", "感謝"], reply: "どういたしまして😊" },
      {
        keywords: ["おはよう"],
        reply: "おはようございます！今日もがんばりましょう！",
      },
      { keywords: ["こんにちは"], reply: "こんにちは！今日はいい日ですね☀️" },
    ];

    const defaultReplies = [
      `${name}さん、どうされましたか？`,
      `なるほど、${name}さん。`,
      `${name}さん、詳しく教えてください！`,
      `そうなんですね、${name}さん。`,
    ];

    const lowerText = text.toLowerCase();
    let replyText = null;

    for (const entry of keywordReplies) {
      if (entry.keywords.some((kw) => lowerText.includes(kw))) {
        replyText = entry.reply;
        break;
      }
    }

    if (!replyText) {
      replyText =
        defaultReplies[Math.floor(Math.random() * defaultReplies.length)];
    }

    setTimeout(() => {
      const botMessage = {
        name: "🤖 Bot",
        text: replyText,
        time: new Date().toLocaleTimeString(),
      };
      setMessages((prev) => [...prev, botMessage]);
    }, 1500);
  };

  const handleClear = () => {
    if (window.confirm("チャット履歴をすべて削除しますか？")) {
      setMessages([]);
      localStorage.removeItem("chatMessages"); // 保存データも削除
    }
  };

  return (
    <div className="chat-container">
      <h2>💬 チャットアプリ</h2>

      <div className="input-area">
        <input
          className="input-name"
          type="text"
          placeholder="名前"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
        <input
          type="text"
          placeholder="メッセージ"
          value={text}
          onChange={(e) => setText(e.target.value)}
          onKeyDown={(e) => e.key === "Enter" && handleSend()}
        />
        <button onClick={handleSend}>送信</button>

        {/* 👇 削除ボタン追加 */}
        <button onClick={handleClear} style=>
          全削除
        </button>
      </div>

      <div className="chat-box">
        {messages.map((msg, i) => {
          const isBot = msg.name === "🤖 Bot";
          return (
            <div key={i} className={`message ${isBot ? "bot" : "user"}`}>
              <div className={`bubble ${isBot ? "bot" : "user"}`}>
                <strong>{msg.name}</strong> ({msg.time}):<br />
                {msg.text}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

export default App;

※このままではエラーになってしまうため、srcディレクトリ配下に「App.css」を作成し、以下を入力してください。

.chat-container {
  max-width: 500px;
  margin: 20px auto;
  font-family: sans-serif;
}

.input-area {
  margin-bottom: 10px;
}

.input-name {
  margin-right: 5px;
}

.chat-box {
  border: 1px solid #ccc;
  padding: 10px;
  height: 300px;
  overflow-y: scroll;
}

/* 吹き出し全体 */
.message {
  display: flex;
  margin-bottom: 10px;
}

/* Bot（左側） */
.message.bot {
  justify-content: flex-start;
}

/* 自分（右側） */
.message.user {
  justify-content: flex-end;
}

/* 吹き出し内容 */
.bubble {
  max-width: 70%;
  padding: 10px;
  border-radius: 10px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Botの吹き出し（グレー） */
.bubble.bot {
  background-color: #eee;
  color: #333;
  text-align: left;
}

/* 自分の吹き出し（青） */
.bubble.user {
  background-color: #007bff;
  color: white;
  text-align: right;
}

これでチャットアプリの完成です。
今回はサンプルコードを用意しましたが、私は以下の流れで開発しました。

1. チャットアプリ全体像を作成
2. localStorageに保存
3. 自動返信BOTを作成
4. 返信パターンを追加（キーワードに応じた応答）
5. チャット履歴削除機能を実装

この流れに沿って開発していくと、サンプルコードのイメージが湧きやすくなります。
慣れていない方はサンプルコードと画面を照らし合わせて読み進めてみてください。

次に挑戦するべき機能例

Reactに慣れてきたら、以下のような機能にも挑戦してみましょう。
1つずつ機能を拡張していくことで、実践的なアプリ開発スキルが身についていきます。
バックエンドに挑戦することもおすすめですよ。

さいごに

今回Reactについてと、私が作ったハンズオンを執筆させていただきました。
拙いコードではありますが、React初心者の方でもこの程度のアプリはすぐに作れるようになると感じていただけたら嬉しいです。
ぜひ読んでくださった皆さんには、ここからさらに機能を発展させたり、新規開発に挑戦してみてほしいです。
一緒に学んでいきましょう！

参考

• クイックスタート – React