LoginSignup
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@huangmuz266

HTML/CSS経験者のためのReact入門：基本からミニアプリ開発まで完全ガイド

Posted at

🟢 第1章：Reactってなに？HTMLとの違いを知ろう

はじめに

Web制作をしていると、「React（リアクト）」という言葉をよく目にすることはありませんか？
Reactは、動きのあるWebアプリを効率よく作るためのJavaScriptライブラリです。

この記事では、HTMLとCSSはわかるけど、JavaScriptやReactはまだ不安……という方に向けて、Reactの基本的な考え方や、HTMLとの違いをやさしく解説していきます。

1. Reactとは？

Reactは、Facebook（現Meta）が開発した、ユーザーインターフェース（UI）を作るためのライブラリです。

たとえばこんなことができます：

  • ボタンを押すとカウントが増える
  • 入力フォームに文字を打つとリアルタイムで反映される
  • リスト表示やタブ切り替えなどの動的な表示

つまり、「動くWebページ」を部品（コンポーネント）で効率よく作るのがReactの得意分野です。

2. HTMLとの違いは？

Reactでは、HTMLに似た構文を使います。これを「JSX（JavaScript XML）」と呼びます。

JSXの特徴

以下のような記述になります：

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

ぱっと見、HTMLと同じようですが、いくつかの違いがあります。

✅ JSXとHTMLの違い（一部）

HTML JSX
class className
onclick onClick
属性値は文字列 {} でJavaScriptを書く

例：HTMLとJSXの比較

HTML

<button class="my-button" onclick="doSomething()">Click me</button>

JSX

<button className="my-button" onClick={doSomething}>Click me</button>

このように、見た目はHTMLに似ているけれど、実はJavaScriptの一部として書くのがReactの特徴です。

3. 環境構築は不要！CodeSandboxで始めよう

Reactを始めるのに特別なインストールは不要です。
まずは以下のサービスを使えば、すぐにReactを体験できます。

👉 CodeSandbox（Reactテンプレート）

初めてのReactコードを書いてみよう

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

export default App;
  • App はReactコンポーネントの名前
  • return の中に書いたものが、画面に表示されます

右側のプレビューに「Hello, React!」と表示されていればOKです！

まとめ

この章では、Reactが「動くUIを部品として作れるライブラリ」であること、
そしてその記法である「JSX」がHTMLと似て非なるものだとわかりました。

次章では、Reactの肝である「コンポーネント」について、もっと深く見ていきましょう！

🔵 第2章：コンポーネントを理解しよう：HTMLを部品に分ける感覚

はじめに

Reactの最大の特徴は「UIを部品（コンポーネント）として分けて使えること」です。

HTML/CSSの経験がある方は、「ヘッダー」「カード」「ボタン」などを部品のように使い回していたかもしれません。Reactでは、それをコードレベルで部品化して、再利用できるのが魅力です。

この章では、Reactのコンポーネントとは何か？どうやって作るのか？を実際に体験してみましょう。

1. コンポーネントってなに？

Reactでは、1つ1つのUIパーツを「関数」として定義します。
これが「関数コンポーネント」と呼ばれるものです。

例：見出しコンポーネント

function Heading() {
  return <h1>こんにちは、React！</h1>;
}

この Heading 関数は、HTMLでいう <h1> を返すだけの単純な部品です。
このコンポーネントを使いたいときは、タグのように <Heading /> と書きます。

App内で使ってみよう

function App() {
  return (
    <div>
      <Heading />
    </div>
  );
}

function Heading() {
  return <h1>こんにちは、React！</h1>;
}

export default App;

2. コンポーネントを組み合わせてみよう

今度は、「ボタン」も別のコンポーネントとして作ってみましょう。

例：Buttonコンポーネント

function MyButton() {
  return <button>クリックしてね</button>;
}

App コンポーネントの中で使う：

function App() {
  return (
    <div>
      <Heading />
      <MyButton />
    </div>
  );
}

ここまでで、「見出し」と「ボタン」を別々の部品として定義して組み合わせるという流れが体験できました。

3. props（プロップス）で値を渡す

Reactでは、コンポーネントに「データ」を渡すことができます。
そのときに使うのが「props（プロップス）」です。

例：ボタンのラベルを変更できるようにする

function MyButton(props) {
  return <button>{props.label}</button>;
}

これで、以下のように使うとラベルを変えられます。

function App() {
  return (
    <div>
      <MyButton label="送信" />
      <MyButton label="キャンセル" />
    </div>
  );
}

props.label の中身が、それぞれのボタンに渡されて表示されます。

まとめ

この章では、Reactの「コンポーネント」という概念を学びました。

  • 関数でUI部品を定義できる
  • 複数の部品を組み合わせてページを構成できる
  • props を使って、カスタマイズ可能な部品が作れる

まさに、HTML/CSSの「部品化」をコードの中でも実現できるイメージですね。

次の章では、Reactに動きをつける「状態管理（useState）」について学んでいきます！

🟠 第3章：useStateを使って状態を持たせよう：カウントアプリで体験

はじめに

前章では、「ReactはUIを部品（コンポーネント）として作れる」という話をしました。

でも、ただ見た目を表示するだけでは、動きのあるアプリにはなりません。
ボタンを押してカウントが増えるような、「状態（state）」の変化が必要になります。

Reactでは、この「状態」を useState という仕組みで扱います。

1. 状態（State）ってなに？

状態（State）とは、「画面の中で変化する値」のことです。

たとえば、次のようなものが状態です：

  • カウントの数字
  • 入力された文字
  • チェックボックスのオン/オフ

HTMLだけでは「ページを再読み込みしないと反映されない」ような変化を、Reactでは画面の一部だけをサッと更新できます。

2. useStateでカウント機能を作ってみよう

まずは、ReactのuseStateを使ってカウントアプリを作ってみましょう。

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

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

export default App;

解説：

  • useState(0)：初期値は0
  • count：現在の状態
  • setCount：状態を更新する関数
  • onClick={() => setCount(count + 1)}：ボタンがクリックされたとき、countを1つ増やす

▶ 実行してみよう！

CodeSandboxでこのコードを試してみてください。
ボタンをクリックするたびに、カウントが増えていけば成功です！

3. 状態を複数使ってみよう（応用編）

今度は、別の状態も一緒に使ってみます。たとえば「名前の入力」と組み合わせてみましょう。

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState("");

  return (
    <div>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="名前を入力"
      />
      <h2>こんにちは、{name}さん！</h2>

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

export default App;
  • name という状態を追加
  • テキストボックスで name を更新
  • 画面にリアルタイムで反映

このように、Reactでは複数の状態を自由に組み合わせて、動的な画面が作れます。

まとめ

この章では、Reactの「状態（state）」について学びました。

  • useState で変化する値を管理できる
  • 状態が変わると、Reactは自動的に画面を更新してくれる
  • 入力フォームやボタンの動作が、すべて状態で管理できる

次の章では、イベントの扱い方やユーザー操作への反応をさらに深堀りしていきます！

🟣 第4章：イベントでユーザー操作に反応しよう：onClick/onChangeの基本

はじめに

Reactでは、ユーザーの操作（クリック・入力など）に応じて、UIを動的に変化させることができます。

そのために使うのが「イベントハンドラ」です。
この章では、よく使うイベントである onClick と onChange の使い方を、やさしく解説していきます。

1. イベントとは？

イベントとは、ユーザーの操作によって発生する「できごと」のことです。

代表的なイベント：

イベント名 発生条件
onClick ボタンや要素がクリックされたとき
onChange 入力欄の値が変更されたとき
onSubmit フォームが送信されたとき

Reactでは、要素にイベントハンドラを設定して、操作に応じた処理を実行します。

2. onClick：クリックされたときに動かす

ボタンがクリックされたときに、アラートを出してみましょう。

function App() {
  const handleClick = () => {
    alert("クリックされました！");
  };

  return (
    <div>
      <button onClick={handleClick}>クリックしてね</button>
    </div>
  );
}

export default App;

解説：

  • handleClick は関数（イベントが起きたときに実行される）
  • onClick={handleClick} でボタンと関数をつなげている

3. onChange：入力値をリアルタイムで取得

テキストボックスに入力された文字を、画面に表示してみましょう。

import { useState } from "react";

function App() {
  const [text, setText] = useState("");

  const handleChange = (e) => {
    setText(e.target.value);
  };

  return (
    <div>
      <input value={text} onChange={handleChange} placeholder="何か入力してみてね" />
      <p>入力中：{text}</p>
    </div>
  );
}

export default App;

解説：

  • value={text} で入力欄の値と状態を連動
  • onChange={handleChange} で変更を検知
  • e.target.value で入力された文字を取得

4. よくある注意点：即時実行に注意！

以下のように書くと、クリック前に関数が実行されてしまいます。

// ❌ NGパターン
<button onClick={handleClick()}>押す</button>
  • handleClick() は「今すぐ関数を実行する」という意味になります
  • Reactがレンダリングした瞬間に実行されてしまいます

✅ 正しくは「関数そのもの」を渡しましょう：

<button onClick={handleClick}>押す</button>

まとめ

この章では、Reactにおける「イベント処理」の基本を学びました。

  • onClick：ボタンや要素がクリックされたとき
  • onChange：入力欄の値が変更されたとき
  • イベントハンドラ関数を使って、ユーザー操作に反応できる

Reactでは、「ユーザーの行動に応じて何をするか？」をしっかりコードで管理できます。

次章では、これまでの知識を活かして、実際に簡単なミニアプリを作ってみましょう！

🟢 第5章：集大成！ミニアプリを作ってみよう：ToDoリスト編

はじめに

ここまでで、Reactの基本的な機能を学んできました。

  • JSXでHTMLのように書く
  • コンポーネントでUIを部品化する
  • useStateで状態を管理する
  • イベントでユーザー操作に反応する

今回はこれらをすべて活用して、簡単なToDoリストアプリを作ってみましょう！

完成イメージ

  • 入力欄にやることを入力して追加ボタンを押すと、リストに追加される
  • リストはリアルタイムで画面に表示される
  • 削除ボタンで項目を消せる（オプション）

1. 基本構造を用意しよう

まずは、必要な状態と基本レイアウトを用意します。

import { useState } from "react";

function App() {
  const [task, setTask] = useState("");
  const [tasks, setTasks] = useState([]);

  const handleAdd = () => {
    if (task.trim() === "") return;
    setTasks([...tasks, task]);
    setTask("");
  };

  return (
    <div>
      <h1>ToDoリスト</h1>
      <input
        value={task}
        onChange={(e) => setTask(e.target.value)}
        placeholder="やることを入力"
      />
      <button onClick={handleAdd}>追加</button>

      <ul>
        {tasks.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

2. ポイント解説

  • task：入力欄の文字を保持する状態
  • tasks：やることの一覧を配列で保持する状態
  • setTasks([...tasks, task])：配列に新しいタスクを追加（スプレッド構文）

3. 削除機能も追加してみよう（応用）

const handleDelete = (index) => {
  const newTasks = tasks.filter((_, i) => i !== index);
  setTasks(newTasks);
};

表示部分を少し変更します：

<ul>
  {tasks.map((item, index) => (
    <li key={index}>
      {item}
      <button onClick={() => handleDelete(index)}>削除</button>
    </li>
  ))}
</ul>

4. ちょっとした工夫：空文字を追加できないようにする

以下のように、空文字やスペースだけの場合は追加されないようにしています。

if (task.trim() === "") return;

Reactは「UIの状態」を自分でコントロールできるので、こうしたちょっとした工夫も簡単に取り入れられます。

まとめ

この章では、ToDoリストという形で、Reactの基礎知識を総動員しました。

  • 状態（task, tasks）で画面を制御
  • イベントで追加・削除を処理
  • JSXでリストをレンダリング

こうした小さなアプリを作ることで、Reactの「使える実感」がグッと湧いてきたと思います！

次の章では、ここまで学んだ内容の振り返りと、次に目指すステップについてまとめましょう。

🧩 第6章：まとめと次のステップ：Reactを使いこなすために

1. ここまでの振り返り

Reactの入門として、HTML/CSS経験者向けにやさしく学んできました。
1つ1つの章で、新しい考え方と技術を身につけてきたと思います。

章 内容
第1章 JSXの基本：HTMLにそっくりな構文でUIを定義
第2章 コンポーネント：UIを部品化して再利用する考え方
第3章 useState：状態を持って画面を動かす
第4章 イベント処理：ユーザー操作に応じて反応する
第5章 ToDoアプリ作成：実際に小さなアプリを作る体験

ここまでの内容をしっかり理解していれば、Reactの基礎はマスターできています！

2. よくあるつまずきポイント

Reactを学び始めたときによくある疑問・つまずき：

  • なぜ useState が必要なの？ → UIの動的な変化を自動で管理するため
  • コンポーネントの分け方がわからない → 1つの部品に1つの役割をもたせよう
  • props と state の違いは？ → 外から渡すのが props、自分で管理するのが state

焦らず、「UIを分割し、状態を管理する」という本質を意識しましょう。

3. 次に進むためのステップ

✅ やってみるとよいこと

  • 別のミニアプリを作ってみる

    • 例）メモ帳アプリ、買い物リスト、カウンター、タイマー など

  • 状態をもっと複雑にしてみる

    • オブジェクトや配列の状態管理にチャレンジ

  • 複数コンポーネント間でデータをやりとり

    • props を渡して親子関係を意識する

📚 学習の次のテーマ候補

  • useEffect（副作用の処理）
  • コンポーネントの分割と設計
  • React Router（画面遷移）
  • コンポーネントのスタイリング方法（CSS Modules, Styled Components など）
  • 状態管理ライブラリ（Context, Redux など）

4. おわりに

Reactはとても強力なライブラリですが、最初は「考え方」が少し独特で戸惑うこともあるかもしれません。

しかし、今回のようにHTML/CSSの経験を活かしながら、1ステップずつ進めていけば、確実に理解が深まります。

あなたが今日作ったToDoアプリは、小さな第一歩ですが、そこにはすでにReactの本質が詰まっています。

ぜひ、次の一歩として「自分のアプリを作る」という体験にチャレンジしてみてください！

一緒に、楽しみながらReactを学んでいきましょう！

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?