React useで始める基本的な使い方

フロントエンド開発•2025/1/21

皆さんはReactを使ったアプリケーション開発に興味をお持ちではないでしょうか。 React useというキーワードを検索する人の多くは、Reactがどのように動くのか知りたい、あるいはReactで何ができるのかを理解したいと考えているようですね。とくに初心者の方は、公式ドキュメントで示される概念やサンプルコードだけではイメージがわきにくいと感じる場合があるかもしれません。

ただ、Reactはシンプルなコンポーネント指向のライブラリなので、使い方の基本を押さえればアプリを組み立てやすくなるでしょう。コンポーネント単位で画面を分割できるので、小さなパーツをつなげて全体を完成させることができます。さらに、React 18ではさまざまな機能が強化されており、複雑なアプリでも管理しやすい仕組みが用意されています。

一方で、何から取り掛かればいいのか迷う方がいるようです。たとえば「React useStateって何？」「どのように画面を切り替えるの？」などの疑問が浮かぶかもしれません。そこでこの記事では、Reactをまったく触ったことがない方でも理解しやすいように、実際のコード例を見せながら説明していきます。

Reactでどんなことができるのか。どんな点を意識すれば、初めてのアプリケーション開発がスムーズに進むのか。こうしたテーマを噛み砕いて解説するので、気軽に読み進めてみてください。

ここで紹介するコードはReact 18を想定しています。最新バージョンに合った内容を押さえることで混乱を避けやすくなります。

Reactを使うための準備

Reactの基本に触れる前に、まずは環境を整える必要があるでしょう。多くの方はNode.jsとnpm、またはyarnと呼ばれるパッケージマネージャを使ってReactを導入します。 Node.jsはJavaScriptの実行環境で、npmやyarnを使ってReact関連のパッケージをインストールできます。

Reactのアプリを立ち上げる方法はいくつかあります。たとえば、Viteを使うと比較的高速にReactのプロジェクトを作成できるかもしれません。簡単な例として、Vite CLIでReactプロジェクトを生成するコマンドを見てみましょう。


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

これでローカルサーバーが起動し、ブラウザで指定のURLへアクセスするとReactの初期画面が表示されます。こうした基本プロセスを通じてReactのファイル構成に慣れておくと、後々どこを編集すればよいのか分かりやすいかもしれません。

Reactのプロジェクトを始める際は、ディレクトリ構造にも注目してみましょう。 srcフォルダの中にApp.jsxやmain.jsxといったファイルがあり、それらがアプリのエントリーポイントになっています。初心者の方は、これらのファイルを編集して画面がどのように変化するのかを試すだけでも理解が深まるのではないでしょうか。

WindowsやMacなど環境によってインストール手順が異なる場合があります。そのため、各プラットフォームのセットアップ方法を確認したうえでReactを導入してみてください。

コンポーネントの基本的な作り方

Reactにおける基本的な考え方は、画面を構成する単位をコンポーネントとしてまとめることですね。コンポーネントはJavaScriptの関数として定義され、HTMLのように使えるJSXという記法を使ってUIを宣言します。少し例を挙げてみましょう。


import React from "react";

function Greeting() {
  return (
    <div>
      <h1>皆さん、こんにちは</h1>
    </div>
  );
}

export default Greeting;

これは単純なコンポーネントの例です。 Greetingという関数で、JSXをreturnしているだけです。 JSXはHTMLに見えますが、実際にはJavaScript上でUIを表現するための文法だと考えてみてください。

別のコンポーネントファイルでGreetingをインポートして使うこともできます。


import React from "react";
import Greeting from "./Greeting";

function App() {
  return (
    <div>
      <Greeting />
      <p>このようにして複数のコンポーネントを組み合わせます。</p>
    </div>
  );
}

export default App;

この例のように、Appコンポーネントの中でGreetingコンポーネントを読み込みました。すると、画面には「皆さん、こんにちは」というタイトルと、その下に段落が表示されるはずです。

コンポーネントは再利用性を高めるうえでの重要なポイントになっています。同じUIパーツを別の画面でも使い回したいとき、コンポーネントとして切り分けておけばコードの重複を減らすことができるでしょう。

一方、関数コンポーネントで定義するだけでは動的なデータを扱えません。そこで登場するのがReact Hooksで、代表的なものとしてuseStateやuseEffectがよく使われます。これらはコンポーネントに状態管理や副作用の処理を加える手段となります。

Hooksを使ってみる

React useというキーワードを見かけると、React Hooksを思い浮かべる方もいるかもしれません。なかでもuseStateは最初に覚えたいHooksの一つで、コンポーネントの状態を管理するのに役立ちます。具体例を示します。


import React, { useState } from "react";

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

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>現在のカウント: {count}</p>
      <button onClick={handleClick}>カウントを増やす</button>
    </div>
  );
}

export default Counter;

このコンポーネントでは、countという変数とsetCountという更新用の関数を宣言しています。初期値として0をセットしており、ボタンをクリックするたびにcountの値が1増えます。こういった仕組みで動的なUIを手軽に扱うことができるのはReactの魅力と言えそうですね。

また、外部APIからデータを取得するときなどはuseEffectを使います。あるいは画面が最初にレンダリングされたタイミングで処理を行いたい場合など、コンポーネントのライフサイクルに紐づけて動作を加えたいケースで活躍するでしょう。


import React, { useState, useEffect } from "react";

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((response) => response.json())
      .then((data) => setUsers(data));
  }, []);

  return (
    <div>
      <h2>ユーザー一覧</h2>
      {users.map((user) => (
        <p key={user.id}>{user.name}</p>
      ))}
    </div>
  );
}

export default UserList;

上の例ではfetchを使って仮のユーザー情報を取得し、その結果をusersというステートに格納しています。 useEffectの第二引数に空配列を渡しているため、コンポーネントが最初に描画されるときだけAPI呼び出しが行われる仕組みです。ユーザー情報を受け取ったら、map関数で画面に表示しています。

こうしたAPI連携は実務でもよくあるパターンではないでしょうか。リアルタイムに更新する必要がある場合は、別のタイミングでuseEffectを呼び出したり、WebSocketなどの仕組みと組み合わせたりするかもしれません。いずれにせよ、React useの概念を活用することで、コンポーネントに必要な動きを柔軟に取り入れられます。

コンテキストを利用してデータを共有する

アプリが成長してくると、コンポーネント間で共通のデータを管理したい場面が増えてきます。そんなときに役立つのがuseContextです。たとえば、ユーザーのログイン情報などを複数の画面で使い回す場合、コンテキストを通じてデータを一元管理する方法がわかりやすいでしょう。


import React, { createContext, useState, useContext } from "react";

const AuthContext = createContext(null);

function AuthProvider({ children }) {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const login = () => setIsLoggedIn(true);
  const logout = () => setIsLoggedIn(false);

  return (
    <AuthContext.Provider value={{ isLoggedIn, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

function StatusBar() {
  const { isLoggedIn, logout } = useContext(AuthContext);

  return (
    <div>
      {isLoggedIn ? (
        <div>
          <span>ログイン中</span>
          <button onClick={logout}>ログアウト</button>
        </div>
      ) : (
        <span>ログアウト状態</span>
      )}
    </div>
  );
}

function App() {
  const { login } = useContext(AuthContext);

  return (
    <div>
      <h1>コンテキストサンプル</h1>
      <StatusBar />
      <button onClick={login}>ログイン</button>
    </div>
  );
}

export default function Root() {
  return (
    <AuthProvider>
      <App />
    </AuthProvider>
  );
}

AuthContextを作成し、AuthProviderというコンポーネントでログイン状態を管理しています。 Providerのvalueにログイン状態やそれを制御する関数を渡し、子コンポーネントであるStatusBarやAppでuseContextを通じてデータにアクセスする仕組みです。アプリの規模が大きくなるほど、各コンポーネント間で受け渡すpropsの量が増えがちになります。コンテキストを活用すれば、同じデータを複数のコンポーネントから呼び出しやすくなるでしょう。

ただし、コンテキストを多用しすぎるとデータの流れがわかりにくくなる可能性があります。使うタイミングを見極めながら、開発チーム全体でコンポーネント設計の方針を共有しておくことが大事ではないでしょうか。

Reactを実務で活用するシーン

React useに関する情報を調べている方には、実際の現場でどんなふうにReactが使われるのか知りたいというニーズがあるかもしれません。たとえば、社内ツールの管理画面をReactで構築し、APIを通じてデータを表示・更新するといったケースはよく見られます。ユーザーが操作しやすいUIを提供しつつ、データがリアルタイムに変化するようなインタラクティブな仕組みを作るのに向いています。

また、Reactはコンポーネントの分割がしやすいので、チーム開発では画面をパーツ単位に分担しやすいですね。 1人のメンバーがユーザーリスト関連のコンポーネントを作成し、別のメンバーが設定画面のコンポーネントを担当するという形で作業を進められます。コンポーネントが明確に分かれていると、修正時の衝突も起こりにくいかもしれません。

もう一つの例として、広告用のランディングページをReactで作るというパターンが挙げられます。静的なページならHTMLだけでも十分ですが、問い合わせフォームやログイン機能など動的な要素を加えるなら、Reactで作ったほうが再利用しやすくなることがあるでしょう。このように、Reactが得意な領域は多岐にわたります。

パフォーマンス面の意識

コンポーネントの再レンダリングが頻繁に起きると、パフォーマンスが落ちる場合があります。ただ、React 18はレンダリング手法の最適化が進んでおり、通常の使い方では動作が重くなるシーンはそれほど多くないようです。しかし、膨大なデータ量を扱うリストを描画するときは、Keyの設定やメモ化による最適化を検討することがあります。

たとえば、React.memoを使うとコンポーネントが不必要に再描画されることを避けられるかもしれません。リスト表示ではvirtualized listという手法を導入することもあります。大きなテーブルやスクロールが必要なUIを扱うなら、こうした工夫も視野に入れるといいですね。

その他の知っておきたいポイント

React useというキーワードで検索している方は、Hooksの使い方だけでなく、プロジェクト全体をどうまとめるかという視点も意識しているのではないでしょうか。ここでは、初心者の方が戸惑いやすいポイントをいくつかまとめてみます。

イベントの扱い

JSX内ではonClickやonChangeなどをキャメルケースで記述します。 HTMLとは少し違うので慣れるまではやや戸惑うかもしれません。

CSSの導入

CSSファイルを読み込むほか、CSS ModulesやStyled Componentsなど、コンポーネント単位でスタイルを分ける方法がよく利用されます。

ルーティング

画面遷移を実装する場合はReact Routerなどのライブラリを併用するとわかりやすいですね。ルートごとに異なるコンポーネントを表示できます。

デバッグツール

ブラウザ拡張機能のReact Developer Toolsを使うと、コンポーネントツリーやステートの確認がしやすいです。不具合が生じたときの原因追及にも役立ちます。

Reactには多数のエコシステムが存在し、周辺ライブラリも豊富です。ただ、最初のうちは基礎的なHooksとコンポーネント構造をしっかり理解することが優先ではないでしょうか。

まとめと次のステップ

ここまでReact useに関わる様々なポイントを整理してきました。初心者にとってReactは最初こそ習慣の違いに驚くかもしれませんが、コンポーネントという単位に慣れるとUIを作るのが楽しくなるのではないでしょうか。 useStateやuseEffectなどの代表的なHooksを理解すると、画面の動きを動的に制御しやすくなります。さらにuseContextを加えることで、アプリ全体で共有したい情報を一括管理する方法も見えてきます。

実務の視点でいえば、APIからのデータ取得やフォーム入力の管理など、よくある要件をReactでスムーズに実装できるでしょう。チーム開発でもコンポーネント設計を共有しやすく、保守性を保ちながら大規模な画面を作ることが可能です。パフォーマンス面で気をつけるべき点はあるものの、React 18の標準機能を使いこなせば多くのシチュエーションで対処できると考えられます。

読者の皆さんがReactを使う第一歩として、記事で紹介したコードを試しながら理解を深めていただけたら嬉しいですね。実際にボタンをクリックして数字が変化したり、APIから取得したユーザー一覧が画面に並んだりすると、自信を持って学習を続けられるのではないでしょうか。これから先、より複雑な機能を追加するときも、Reactの基本方針を思い出してシンプルな設計を意識してみてください。

最初はコンポーネントとHooksに慣れることを意識し、次にチーム開発やパフォーマンス最適化を考える流れが良いかもしれません。地道にReactを使い続けるうちに、大規模なアプリを扱う自信にもつながるでしょう。