Reactを学ぼう

― コンポーネントベースでUIを組み立てるモダンな開発入門

はじめに

これまでの学習では、HTML・CSS・JavaScriptの3つの技術を組み合わせて、動的なWebアプリケーションを手作業で構築してきました。コードの記述量は増え、機能も複雑になり、いよいよ次のステップが必要になってきます。

そこで登場するのがReact（リアクト）です。Reactは、Facebook（現Meta）によって開発されたUIライブラリで、現代のフロントエンド開発における事実上の標準となっています。

Reactを学ぶことで、以下のような恩恵が得られます：

  • コンポーネント単位で再利用可能なUIを構築
  • データの状態に応じた自動的なDOM更新
  • アプリの構造を小さく分割し、保守性と拡張性を高められる

今回は、Reactの思想と基本的な使い方を体験し、次回以降の実装につなげるための土台を作ります。

なぜReactが必要なのか？

JavaScriptでWebアプリを構築していくと、次のような問題に直面します：

  • DOM操作が多くなり、バグが出やすい
  • UIとロジックが混在してコードが読みにくい
  • 状態管理が煩雑になってくる
  • 大規模アプリになると構造が破綻する

Reactはこれらを**「UIを状態から宣言的に記述する」**というアプローチで解決します。

たとえば、次のような命令型（vanilla JS）コード：

if (isLoggedIn) {
  showWelcomeMessage();
} else {
  showLoginButton();
}

Reactではこれを以下のように書きます：

{isLoggedIn ? <WelcomeMessage /> : <LoginButton />}

**「状態がこうなら、このUI」**という考え方が自然にコード化できるのがReactの強みです。

Reactの基本構造を知ろう

Reactは以下の3つを基本要素として構成されます：

JSX（JavaScript XML）

HTMLのような構文をJavaScript内で使える記法です。

function Hello() {
  return <h1>こんにちは、React！</h1>;
}
  • 実際にはJSの構文
  • return文の中でHTMLライクに記述可能
  • 必ず1つの親要素でラップする

コンポーネント

UIの部品を関数やクラスで定義し、再利用可能にします。

function UserCard({ name, email }) {
  return (
    <div className="card">
      <h2>{name}</h2>
      <p>{email}</p>
    </div>
  );
}
  • Propsで値を受け取る
  • 呼び出し時に <UserCard name="山田" email="sample@example.com" /> のように使用

State（状態）

ボタンのクリックや入力値など、動的に変わる情報をReactが管理します。

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

<button onClick={() => setCount(count + 1)}>クリック: {count}</button>
  • 状態が変わると自動でUIを更新してくれる
  • useState フックを使用（React Hooks）

セットアップ方法：Vite × Reactで環境構築

Reactアプリの作成は、従来はcreate-react-appが主流でしたが、現在では高速で軽量なViteが人気です。

ステップ1：Node.jsインストール

https://nodejs.org/ja/ から最新版のNode.jsをインストール

ステップ2：ViteでReactプロジェクト作成

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

http://localhost:5173 にアクセスすれば、Reactアプリが立ち上がります。

🔗 参考：Vite公式ドキュメント

Reactの練習：カウントアプリを作ってみよう

最初のReactアプリとして、状態管理とイベント処理を試せるカウントアプリを作成してみます。

import { useState } from 'react';

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

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

export default App;
  • useState で状態を定義
  • setCount() を呼ぶと自動で再レンダリングされる
  • すべてがコンポーネント内で完結する

このように、**「UIは状態の関数である」**というReactの思想を体感できます。

よくある初心者ミス

  • JSXで複数要素をreturnする際にラップし忘れる（<> ... </>で囲う）
  • 関数名の先頭が小文字 → Reactコンポーネントは必ず大文字から始める
  • useStateを関数外で使おうとする → フックは必ずコンポーネント関数の中で呼び出す

Reactはルールが明確なので、エラーが出たらエラーメッセージをよく読み、リファレンスやドキュメントを確認しましょう。

まとめ

Reactは、UIの設計方法そのものを根本から変える強力なライブラリです。

  • コンポーネント指向でUIを分割
  • 状態に基づいてDOMを自動更新
  • JSXによりHTMLとJSの自然な融合

これまで手作業で行っていたUI制御を、明示的・再利用可能・保守しやすいコード構造へ変換してくれるのがReactの真価です。

次回は、Reactを使って実際に「ユーザー情報の取得と表示」を行うアプリケーションを構築し、状態管理・イベント処理・データ取得のReact的な書き方を学んでいきます。

次回予告

Reactでユーザー一覧アプリを作ろう ― 状態・イベント・API連携の実践

コメント

タイトルとURLをコピーしました