React入門

React 紹介

Web アプリやサービスを開発する上で、いまや欠かせない存在となっているのが React です。React は Meta（旧 Facebook）が開発したフロントエンドライブラリで、世界中のエンジニアに広く利用されています。シンプルな学習曲線でありながら、高い柔軟性と拡張性を持ち、個人開発から大規模サービスまで幅広く使えるのが魅力です。この記事では、これから React を学びたい人に向けて、基礎的な概念や実際のコード例を紹介します。

React とは何か？

React は「UI（ユーザーインターフェース）を構築するためのライブラリ」です。Angular や Vue のような「フレームワーク」とは違い、React はあくまで UI 部分に特化しています。
特徴は大きく次の 3 つです：

コンポーネント志向
アプリを小さな部品（コンポーネント）の集合体として構築する考え方。再利用性が高く、コードが整理されやすい。
宣言的 UI
「どう表示するか」ではなく「何を表示するか」に集中できる。DOM 操作を自分で書く必要が少ない。
仮想 DOM
実際の DOM 操作を最小限に抑えることで、高速なレンダリングを実現。

開発環境の準備

React を始める最も手軽な方法は、公式が提供している create-react-app や最近人気のある Vite を使うことです。
ここでは Vite を例にとります。

# プロジェクト作成
npm create vite@latest my-app

# セットアップ時に "React" または "React + TypeScript" を選択
cd my-app
npm install
npm run dev

これでブラウザに「Vite + React」の初期画面が表示されれば成功です。

React コンポーネントの基本

React の中心となるのが コンポーネント です。コンポーネントは関数として定義され、UI の一部を表します。
例として、シンプルな「こんにちは」コンポーネントを作ってみましょう。

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

export default Hello;

このコンポーネントを App.jsx に組み込むと、ブラウザに表示されます。

import Hello from "./Hello";

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

export default App;

ポイントは JSX という構文です。JSX は JavaScript の中で HTML のようなコードを書ける仕組みで、React の直感的な書きやすさを支えています。

Props でデータを渡す

同じコンポーネントを繰り返し使いたいとき、データを渡す仕組みが props です。

function Hello(props) {
  return <h1>こんにちは、{props.name}!</h1>;
}

function App() {
  return (
    <div>
      <Hello name="太郎" />
      <Hello name="花子" />
    </div>
  );
}

こうすると「こんにちは、太郎!」「こんにちは、花子!」と表示されます。
コンポーネントを部品のように扱えるのが React の強みです。

状態管理（useState）

動的な UI を作るには、状態（state） を管理する必要があります。React では useState フックを使って状態を扱います。

import { useState } from "react";

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

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>＋1</button>
    </div>
  );
}

ボタンをクリックするたびに count が増えていきます。
useState によって「状態が変わると UI が再描画される」という React の基本動作が体験できます。

副作用処理（useEffect）

API からデータを取得したり、DOM を直接操作したい場合は useEffect を使います。

import { useState, useEffect } from "react";

function Time() {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const timer = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(timer); // クリーンアップ
  }, []);

  return <p>現在時刻: {time.toLocaleTimeString()}</p>;
}

useEffect は「レンダリング後に実行される処理」を書く場所です。API 通信やタイマー処理などで活躍します。

React を学ぶときのポイント

小さなアプリから始める
いきなり大規模なアプリを作ろうとせず、カウンターや Todo リストなど簡単なものを作ると理解が深まります。
公式ドキュメントを読む
React 公式サイトは非常に丁寧で、最新のベストプラクティスが載っています。
Hooks に慣れる
近年の React ではクラスよりも関数コンポーネントと Hooks が主流です。useState と useEffect を重点的に学ぶと効率的です。

まとめ

React はシンプルで強力なライブラリです。

コンポーネント志向 で UI を分割
props でデータを渡す
state と hooks で動的な動きを作る

これらを理解するだけで、Web アプリの開発がぐっと楽になります。最初は戸惑うこともありますが、少しずつコードを書きながら慣れていくのが一番の近道です。React を学べば、モダンなフロントエンド開発の大きな世界が広がっていきます。

React 紹介#

React とは何か？#

開発環境の準備#

React コンポーネントの基本#

Props でデータを渡す#

状態管理（useState）#

副作用処理（useEffect）#

React を学ぶときのポイント#

まとめ#