React初心者必見！コンポーネント・状態管理・Hooksをわかりやすく解説するまとめ記事

はじめに

フロントエンド初学者のみなさん、Reactの学習は順調ですか？Reactは難しく、学習中につまずくことも多いかと思います。「何から勉強すれば良いの？」「たくさんの技術があって、どこまで学べばOKなの？」など、さまざまな疑問を持っていませんか。

学習がスムーズに進まない原因のひとつは、学習の目標や範囲が明確でないことにあります。学習の目標がしっかり決まってないままでは、気持ちに迷いが生まれ、結果としてつまづきやすくなります。

Reactに限らず、学習をはじめる最初の段階で、全体を知り目標をしっかり決めることが大切です。目標と学習の全体像がはっきりすれば、必要なステップや具体的な学習方法が見えてきて、学習プランを立てやすくなります。目標が決まり、それに必要な手段がわかれば、あとはコツコツと積み上げていくだけで、途中でつまずくことなく学習を続けられます。

この記事では、エンベーダーで紹介してきたReactの3つの基本について、要点をまとめて紹介します。また、各技術に関する詳細な解説記事のリンクも掲載しています。この記事を読むことで、Reactの基本的な学習範囲の全体が分かり、各技術の要点を簡単に把握し、リンク先で詳細を学べるため、効率よく学習を進められます。そして、次に何を学ぶべきかが見えてくるでしょう。

まずは、Reactの基本技術とその学習範囲をこの記事で確認してみてください。そして、自分の目標とそのための手段や、それに向けた学習プランを決めましょう。この記事が、初学者のみなさんがフロントエンドエンジニアへの第一歩を踏み出す手助けとなったら幸いです。

記事の目的

• Reactの基本技術と学習範囲を把握する
• React学習における目標と手段を明確にする

記事の対象者

• Reactをこれから学び始める初学者
• Reactが難しいと感じている方

Reactとは

まずは、Reactの概要と学ぶメリットについて知りましょう。特にメリットを理解することで、自分の学習目標を明確にしやすくなります。

Reactは、UI（ユーザーインターフェース）を構築するためのJavaScriptライブラリで、「React.js」と呼ばれることもあります。現在のフロントエンド開発では、Reactの技術が求められることが多く、学んでおくことでキャリアやスキルの向上にもつながるでしょう。

Reactを学ぶメリットとして、以下の点が挙げられます。

• 多くの企業で採用されている
• 使いやすいWebアプリを開発するのに適している
• 開発効率が向上する
• 見た目が整ったUIを構築しやすい

Reactは、Facebookを運営するMeta社が開発したもので、SNSやさまざまなWebサービスで採用されています。たとえば、FacebookやInstagram、Netflixといった有名なサービスでもReactが使われています。Reactを習得すれば、「自分もこんなサービスを作れるかもしれない」と期待が膨らみますよね。Reactは世界中の開発者に広く支持されており、今後も成長が期待されているのもうなずけます。

Reactの基礎についてさらに詳しく知りたい方は、以下の記事を参考にしてみてください。30分でインストール方法から基本的なコンポーネントの作成まで学べます。

• 【超入門】Reactの基礎を30分で学べる！インストールから基本コンポーネントまで

  https://envader.plus/article/341

学んでおきたい3つの基本

Reactを学ぶ際に、まず押さえておきたい3つの基本があります。この記事では、これらの項目についてそれぞれセクションに分けて概要を説明し、各技術の詳細が学べる記事も紹介します。この3つの基本を知ることで、Reactの学習範囲を把握しやすくなるでしょう。

• コンポーネント
• 状態管理
• React Hooks

コンポーネント

コンポーネントはReactのUIを構築する基本です。まずはこのコンポーネントから学び始めましょう。

Reactにおけるコンポーネントとは、アプリのUIを構成する小さなパーツのようなものです。コンポーネントを使うことで、UIの一部を再利用したり、他のコンポーネントと組み合わせて複雑な画面を作成することができます。

例えば、「Hello, エンベーダー！」と表示するシンプルなコンポーネントを作ってみましょう。

// コンポーネントの作成
export default function Greeting() {
  return <h1>Hello, エンベーダー！</h1>;
}

ここでは、Greetingという関数がReactのコンポーネントになります。このコンポーネントは<h1>Hello, エンベーダー！</h1>を表示し、他のコンポーネント内で<Greeting />と記述するだけで簡単に使用できます。

たとえば、次のように別のAppコンポーネント内にGreetingコンポーネントをインポートして使ってみましょう。

import Greeting from "./Greeting";

// Greetingコンポーネントをインポート
export default function App() {
  return <Greeting />;
}

次に、コンポーネント間でデータを受け渡す方法について見てみましょう。ここで使うのが「props（プロップス）」です。

// Greetingコンポーネントにメッセージデータを渡す
export default function App() {
  return <Greeting message="Hello, エンベーダー！" />;
}

// propsでメッセージデータを受け取る
function Greeting(props) {
  return <h1>{props.message}</h1>;
}

この例では、AppコンポーネントがGreetingコンポーネントにmessageというデータを渡し、その内容を<h1>タグ内に表示しています。これが「props」と呼ばれる仕組みです。propsを使うと、コンポーネントの再利用性がさらに高まります。

最初のうちは、コンポーネントとpropsの仕組みが少し難しく感じるかもしれませんが、この2つの概念はReactの基礎です。以下の記事を活用して、しっかりと理解を深めましょう。

• Reactの基本、コンポーネントを理解する

  https://envader.plus/article/421

• Reactの基本、propsを理解する

  https://envader.plus/article/423

状態管理

Reactにおける状態管理は、コンポーネントの中で動的に変わる状態（state）を管理する仕組みです。コンポーネントの状態とは、ユーザーの操作やアプリの動作に応じて変わる情報のことを指します。たとえば、以下のようなデータが状態として管理されます。

• ボタンのクリック数やカウント
• フォームに入力されたテキスト内容
• チェックボックスのオン・オフの状態

こうしたデータをコンポーネントの状態として管理することで、ユーザーの操作に応じてUIを動的に変化させることが可能になります。

もう少し簡単に言うと、状態管理は「今どんな状況か」をコンポーネントが覚えておくための仕組みで、アプリの動きや見た目を操作に合わせて変えていく手助けをしてくれるのです。

状態管理の具体例

操作に応じてUIが変化する具体的な例として、次のようなものがあります。

• ボタンを押すとカウントが増加する
• フォームに入力した文字がそのまま画面に表示される

Reactを使いこなすためには、この状態管理の理解がとても大切です。状態はアプリの「今の状態」を表し、それによってUIの見た目や動きが変化します。ユーザーの操作に応じてリアルタイムで画面が変わるインタラクティブなアプリを作るには、状態管理の考え方が欠かせません。この考え方をしっかり身につけておくと、Reactでできることがさらに広がりますよ。状態管理の具体的な方法については、次のReact Hooksセクションで詳しく紹介します。

React Hooks

React Hooksは、関数コンポーネントで「状態を持つこと」や「副作用（データ取得やログ出力など）を扱うこと」を可能にするReactの機能です。Reactのバージョン16.8から導入され、関数コンポーネントで状態管理やライフサイクル（コンポーネントが生成・更新・削除される流れ）を実現するために使われています。

フックを使うと、シンプルで理解しやすいコードを書けるようになります。フックが登場する以前は、クラスコンポーネントで機能を作成していましたが、コードが複雑化しやすく扱いにくいものでした。この問題を解決するためにフックは登場し、Reactのコードはシンプルになり、管理しやすくなったのです。

現在のReactでの開発は、関数コンポーネントとフックを使用することが主流です。フックを理解することは大切になりますので、ここでしっかりと学習範囲を把握しておきましょう。この記事では、Reactに組み込まれている使用頻度の高い8種類のフックを紹介します。

1.useState

useStateは、Reactの関数コンポーネントで状態（state）を管理するための基本的なフックです。たとえば、ボタンをクリックしたときにカウントを増やしたり、ユーザーの入力内容を保持したりと、コンポーネント内で動的に変わるデータを管理するのに使います。

useStateの基本的な書き方は次の通りです。

const [状態変数, セッター関数] = useState(状態変数の初期値);

ここで、「状態変数」は現在の状態を表し、「セッター関数」（set関数）は状態変数の値を更新する役割を持っています。セッター関数を使って状態を更新すると、Reactが自動的にUIを再描画してくれます。

また、useStateには「状態変数の初期値」を設定することができます。これは、状態が最初にどの値から始まるかを決めるためのものです。たとえば、useState(0)とすると、状態変数は初めに「0」からスタートします。

以下は、ボタンをクリックするたびにカウントが増加するシンプルな例です。

import React, { useState } from "react";

// カウントアップ数の状態を管理するコンポーネント
export default function App() {
  // countは現在の状態、setCountは状態を更新するセッター関数です
  const [count, setCount] = useState(0);

  // ボタンがクリックされたときにカウントを増やす関数
  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>現在のカウント: {count}</p>
      {/* ボタンをクリックした時にincrement関数を呼び出す */}
      <button onClick={increment}>カウントを増やす</button>
    </div>
  );
}

この例では、useState(0)で初期値「0」を設定しています。increment関数内でsetCountを呼び出すと、countの値が更新され、Reactが自動的にUIを再描画します。

useStateはReact Hooksの中でも、特に使用頻度の高いフックです。Reactを使ううえで欠かせない基本的な技術のため、以下の記事でしっかり学んでおきましょう。

• Reactの基本、useStateを理解しよう

  https://envader.plus/article/443

2.useEffect

useEffectは、Reactの関数コンポーネントで「副作用（side effect）」と呼ばれる処理を実行するためのフックです。副作用とは、コンポーネントのレンダリングとは別に行う処理のことで、たとえば次のようなものがあります。

• データの取得（APIからのデータ取得など）
• データをサーバーに送信
• タイマーの設定（カウントを増やすなど）

Reactでは、レンダリングが完了した後に何か処理を行いたい場合にuseEffectを使います。

useEffectの基本は以下のように記述します。

useEffect(() => {
  // 副作用の処理を記述するセットアップ関数
  return () => {
    // クリーンアップ処理を記述するクリーンアップ関数
  };
}, [依存関係配列]);

useEffectは2つの引数を受け取ります。

• セットアップ関数とクリーンアップ関数

  コンポーネントがレンダリングされたときに実行される処理と、コンポーネントがアンマウントされるときに実行されるクリーンアップ処理を設定します。

• 依存関係配列

  useEffectが再実行されるタイミングを制御します。状態変数を渡したり空の配列を指定できます。状態変数を渡した場合は、状態が変わるたびに再実行されます。空の配列を指定すると、初回レンダリング時にのみ処理が実行されます。

useEffectはデータの取得やタイマーの設定、依存関係に応じた再処理など、Reactアプリの動的な挙動を実現するために欠かせないフックです。以下の記事を参考にして、さらに理解を深めましょう。

• Reactの基本、useEffectを理解しよう

  https://envader.plus/article/444

3.useContext

useContextは、Reactで「コンテキスト」と呼ばれるデータを簡単に共有するためのフックです。通常、データを親から子へ渡すときには「props」を使いますが、コンポーネントが増えると、深い階層までデータを渡すのが複雑になることがあります。このときにuseContextを使うと、どのコンポーネントでも直接データにアクセスでき、効率よくデータを共有できます。

useContextの基本は以下のように記述します。

// 新規コンテキストの作成
const NewContext = createContext(初期値);

// 新規コンテキストのエクスポート
export default function ContextComponent() {
  return (
    <NewContext.Provider value={value}>
	    <SomeComponent />
    </NewContext.Provider>
  );
}

ContextはReactのcreateContextを使用して作成します。

• コンテキストの作成

  このコード例では、NewContextという名前のContextを作成しています。作成したContextは複数のコンポーネントで共有できます。

• Providerでデータを提供

  NewContext.Providerを使って、子コンポーネント（この例ではSomeComponent）にデータを提供しています。このProviderのvalue属性に渡したvalueが、子コンポーネントからアクセスできるデータとなります。

useContextは、データを複数のコンポーネントに渡す際のコードをシンプルにし、管理を楽にするフックです。useContextを使うことで、深い階層のコンポーネントでも簡単に必要なデータにアクセスできるようになり、Reactのアプリ開発をスムーズに進められます。

• Reactの基本、useContextを理解しよう

  https://envader.plus/article/449

4.useRef

useRefはコンポーネント内でref（参照）を保持するために使用されます。ref（参照）を用いると、コンポーネントから特定のDOM要素やデータに紐づけられ、要素にアクセスできます。

useRefを使用すると以下のようなことが行えます。

• レンダリングに影響しない値の保持

  ボタンのクリック数やタイマーのカウントなど、再レンダリングが不要なデータを保持できます。

• フォーカスやスクロール位置の操作

  入力フォームに自動でフォーカスを当てる、特定の位置までスクロールさせるなど、特定の要素に対して動的な操作を行えます。

useRefの基本は以下のように記述します。

const ref（参照）名 = useRef(初期値);

useRefは、DOM要素への動的な操作や再レンダリングの影響を受けない値の保持など、様々な場面で活用できます。useRefを理解して使えるようになると、ReactのUI操作がより柔軟になり、ユーザーにとって使いやすいアプリケーションを作成しやすくなります。

• Reactの基本、useRefを理解しよう

  https://envader.plus/article/459

5.useReducer

useReducerは、Reactコンポーネントの状態（state）を管理するためのフックです。複雑な状態管理や、アプリ内の状態（state）をまとめて管理したい場合に利用します。

主に「現在の状態」と「アクション（どう変化させたいか）」を使って、以下の4つの要素を用いて状態を管理します。

• 状態（state）

  コンポーネント内で管理するデータや情報です。

• アクション（action）

  状態をどのように更新するかを指定するためのオブジェクトや値です。アクションは通常、typeというプロパティを持ち、どの種類の状態更新を行うかを指定します。

• dispatch関数（ディスパッチ）

  状態を更新するために使用する関数です。アクションを引数として渡します。

• reducer関数（リデューサー）

  この関数は、現在の状態とアクションを受け取り、新しい状態を返します。状態の更新ロジックはこの関数に集約されます。

これらの4つの要素を以下のように記述して状態（state）を管理します。

// reducer関数
function reducer(state, action) {
	//状態を操作する記述
  }
}

function Component() {
	// useReducerフックの呼び出し
	const [state, dispatch] = useReducer(reducer, 初期値);
	
	return (
		{/* dispatch関数の定義 */}
	);
}

useReducerは、複雑な状態管理が必要な場合に、コードをわかりやすくし、管理を楽にします。たとえば、複数のボタンでカウントを増減するカウンターや、フォームの入力データをまとめて管理する場面で役立ちます。useReducerを理解すると、Reactでの状態管理がさらに柔軟になり、機能的なアプリを作りやすくなります。

• Reactの基本、useReducerを理解しよう

  https://envader.plus/article/454

6.useMemo

useMemoは、Reactコンポーネントで計算結果を保存（メモ化）しておくためのフックです。計算に時間がかかる処理や、頻繁に再計算する必要がないデータを効率的に管理するために使います。アプリのパフォーマンスを向上させたい際に役立つフックです。

useMemoの基本は以下のように記述します。

useMemo(() => メモ化したい値を計算する関数, [依存配列]);

このように、useMemo内にメモ化したい値を計算する関数を記述し、依存配列を指定します。それぞれの役割は以下の通りです。

• メモ化したい値を計算する関数

  この関数は初回レンダー時に実行され、結果をメモ化します。その後、依存配列の値が変わったときにだけ再実行されます。

• 依存配列

  関数の結果を再計算するかどうかを判断するための「基準となる値の配列」を指定します。依存配列には、状態（state）や関数の引数として渡す変数などが指定できます。

useMemoを使うことで、不要な計算を減らし、Reactアプリの動作がスムーズになります。使い方を理解しておくと、Reactで効率的なアプリケーションを作成するのに役立つでしょう。

• Reactの基本、useMemoを理解しよう

  https://envader.plus/article/492

7.useCallback

useCallbackは、関数をメモ化し、不要な関数の再生成を防ぐためのフックです。通常、コンポーネントが再レンダリングされると、その中で定義した関数も再生成されてしまいます。useCallbackで関数をメモ化すると、特定の依存関係が変更されたときだけ関数が再生成され、アプリのパフォーマンスを向上することができます。

useCallbackの基本は以下のように記述します。

const memoFunction = useCallback(メモ化したい関数, [依存配列]);

このように、useCallback内にメモ化したい関数を記述し、依存配列を指定します。それぞれの役割は以下の通りです。

• メモ化したい関数

  メモ化した関数は、指定された依存配列内の値が変わらない限り、再利用され続けます。

• 依存配列

  関数を再生成するタイミングを決める配列です。依存配列には、状態（state）、関数の引数として渡す変数、または空の配列を指定できます。

useCallbackは、React.memoと組み合わせることで、その効果をより発揮します。React.memoは、親コンポーネントが再レンダリングされても、渡されたpropsが変わらない限り子コンポーネントのレンダリングをスキップする仕組みです。useCallbackとReact.memoはパフォーマンス向上に役立つので、理解しておきましょう。

• Reactの基本、useCallbackを理解しよう

  https://envader.plus/article/497

• Reactの基本、React.memoを理解しよう

  https://envader.plus/article/486

8.カスタムフック

カスタムフックは、Reactに搭載されている標準フックの機能を組み合わせて、オリジナルの処理を持つフックを作成することができます。アプリケーション内で共通する機能を1つにまとめたり、新たな独自の機能を追加することができる、とても便利な仕組みです。

カスタムフックを作成するには、以下の2つのルールがあります。

• Reactのフックを含む関数であること

  カスタムフックは、その内部でuseStateやuseEffectなど、Reactの組み込みフックを呼び出します。

• フック名は「use」で始める

  カスタムフックの名前は必ず「use」で始めます。これは、Reactがその関数をフックと認識し、フックの使い方に誤りがある場合に警告してくれるようにするためです。

カスタムフックは以下のように作成します。

// カスタムフック内で使用する組み込みフックをインポートする
import { useState, useEffect } from 'react';

// カスタムフックの作成
function useCustomHook(初期値) {
  const [state, setState] = useState(初期値);

  useEffect(() => {
    // 必要な処理を実行する
  }, [state]);

  return [state, setState];
}

export default useCustomHook;

このコードでは、Reactの組み込みフックuseStateとuseEffectを組み合わせてカスタムフックを作成しています。この2つの機能を持つオリジナルのフックを、複数のコンポーネント内でインポートして使用します。こうすることで、コードの記述量を減らしたり、コンポーネントの役割を分けられたりと、便利に利用することができます。自分の作成したい機能に合わせてオリジナルのフックを作れることで、開発の幅が広がりそうですよね。

• Reactの基本、カスタムフックを理解しよう

  https://envader.plus/article/502

まとめ

ここまでReactの学んでおきたい3つの基本について解説してきました。最後に大切なポイントを振り返りましょう。

• コンポーネント

  コンポーネントは、アプリのUIを構成する小さなパーツのようなものです。コンポーネントを使うことで、UIの一部を再利用したり、他のコンポーネントと組み合わせて複雑な画面を作成することができます。また、コンポーネント間でデータのやり取りができるpropsと一緒に使うことで、コンポーネントの再利用性がさらに高まります。

• 状態管理

  状態管理は、コンポーネントの中で動的に変わる状態（state）を管理する仕組みです。コンポーネントの状態とは、ユーザーの操作やアプリの動作に応じて変わる情報のことを指します。Reactはこの状態によって、UIの見た目や動きを変化させます。ユーザーの操作に応じてリアルタイムで画面が変わるインタラクティブなアプリを作るには、状態管理の考え方が欠かせません。

• React Hooks

  React Hooksは、関数コンポーネントで「状態を持つこと」や「副作用（データ取得やログ出力など）を扱うこと」を可能にするReactの機能です。フックを使うと、シンプルで理解しやすいコードを書けるようになります。現在のReact開発では関数コンポーネントとフックが主流のため、特にuseStateやuseEffectといった基本フックは、まず押さえておくと良いでしょう。

この記事でReactの学習範囲全体を知り、自分の目標とそれに向けた学習プランを決めてみてください。全体を把握して目標を明確にすることで、React学習が進めやすくなるかと思います。記事で紹介したさまざまな技術を試してアウトプットを増やしながら、フロントエンドの世界を楽しみましょう！

参考資料

以下のリンクは、この記事で説明した手順や概念に関連する参考資料です。より詳しく学びたい方は、ぜひご覧ください。

• React公式

  https://ja.react.dev/learn

  https://ja.legacy.reactjs.org/docs/hooks-intro.html