Zenn
🔰

初めてのReact

2024/07/26に公開
React
tech

React初心者が学んだことまとめ

こんにちは。Reactはウェブサイトやアプリの見た目を作るためのツールです。ここでは、私がReactを学んだことを簡単にまとめました。

1. Reactって何？

ReactはFacebookが作った、ウェブサイトの見た目を作るためのツールです。例えば、ボタンやメニュー、写真のギャラリーなどを作るのに使います。

特徴

  • 簡単に再利用できる: 作った部品を他の場所でも使える
  • 速い: 必要なところだけ更新するので速い
  • シンプル: 見た目をどう作るかをわかりやすく書ける

2. コンポーネントって何？

コンポーネントは、ウェブページの部品のことです。例えば、ボタンや入力フォーム、見出しなどです。Reactでは、コンポーネントを使ってウェブページを作ります。

簡単なコンポーネントの例

import React from 'react';

function HelloWorld() {
  return <h1>Hello, World!</h1>;
}

export default HelloWorld;

3. Propsって何？

Propsは、Reactのコンポーネントに情報を渡すための方法です。コンポーネントは、アプリの中で使う「部品」みたいなものです。Propsを使うことで、部品に必要なデータや設定を渡すことができます。

例)挨拶をするコンポーネント

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// 使用例
<Greeting name="Alice" />

例の解説

  • Greetingコンポーネント: propsという特別な引数を受け取ります。このpropsには、コンポーネントに渡されたデータが入っています。
  • props.name: Greetingコンポーネントにnameというデータが渡され、そのデータを使って挨拶を表示します。

Propsの特徴

  • 読み取り専用: Propsはコンポーネントの内部で変更できません。受け取ったデータは、そのまま使うだけです。
  • 再利用可能: 同じコンポーネントを使って、違うデータを表示することができます。例えば、<Greeting name="Alice" />と<Greeting name="Bob" />で異なる名前を表示できます。

4. Stateって何？

Stateは、コンポーネントが持つ内部のデータで、時間と共に変化する可能性があります。例えば、カウンターの値やフォームの入力内容などが状態になります。

例)カウンターコンポーネント

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // 状態を初期化

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

例の解説

  • useStateフック: 状態を管理するために使います。useState(0)は、状態の初期値として0を設定します。
  • [count, setCount]: countは現在の状態の値で、setCountは状態を更新するための関数です。
  • ボタンのクリック: ボタンをクリックすると、setCount(count + 1)が呼ばれ、カウンターの値が1増えます。

Stateの特徴

  • 動的: 状態は時間と共に変わる可能性があるデータです。例えば、カウンターの値がボタンをクリックするたびに増えます。
  • 更新できる: setCountのように、状態を更新するための関数を使って状態を変更できます。

5. Effectsって何？

Effectsは、コンポーネントが表示された時や更新された時に実行する追加の処理です。例えば、データをサーバーから取ってくる処理や、タイマーの設定などがエフェクトです。

タイマーコンポーネント

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

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

  useEffect(() => {
    const timer = setInterval(() => setCount(count + 1), 1000);
    return () => clearInterval(timer); // クリーンアップ
  }, [count]); // `count`が変わるたびに実行

  return <p>Timer: {count}</p>;
}

例の解説

  • useEffectフック: コンポーネントのライフサイクルに合わせて処理を実行します。useEffect内の処理は、コンポーネントが初めて表示された時や、countが変わるたびに実行されます。
  • タイマーの設定: setIntervalを使って1秒ごとにcountを増やします。
  • クリーンアップ: returnで返した関数（クリーンアップ関数）は、コンポーネントが消える時やcountが変わる前に実行され、タイマーを止めます。

Effectsの特徴

  • 副作用: 状態の更新やデータの取得など、直接的なUIの更新以外の処理を行います。
  • 依存関係: useEffectの第2引数に依存関係の配列を渡すことで、特定の状態が変わった時だけ処理を実行できます。例えば、[count]とすることでcountが変わった時だけタイマーが再設定されます。

6. コンポーネント間の通信

Reactでは、複数のコンポーネントが協力してウェブページを作成します。コンポーネント同士でデータをやり取りすることはよくあります。ここでは、主に2つの方法について説明します。

1. Propsを使った親子間の通信

Propsは、親コンポーネントから子コンポーネントにデータを渡すための方法です。これは、親が子に情報を送るための標準的な方法です。

例)親から子へのデータの渡し方

// 親コンポーネント
function Parent() {
  const [message, setMessage] = useState('Hello from Parent');

  return <Child message={message} />;
}

// 子コンポーネント
function Child(props) {
  return <p>{props.message}</p>;
}

例の解説

  • 親コンポーネント (Parent): messageというデータを持ち、そのデータをChildコンポーネントに渡しています。<Child message={message} />と書くことで、messageがChildコンポーネントに渡されます。
  • 子コンポーネント (Child): propsという引数を受け取り、props.messageを使って親から渡されたメッセージを表示します。
  • 一方向のデータフロー: データは親から子へ、一方向に流れます。子コンポーネントから親コンポーネントへのデータの流れはありません。

2. Contextを使ったグローバルな状態管理

Contextは、複数のコンポーネント間でデータを共有するための方法です。特に、多くのコンポーネントで同じデータを使いたい場合に便利です。

例)Contextを使ったデータの共有

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

// Contextを作成
const MyContext = createContext();

function Parent() {
  const [message, setMessage] = useState('Hello from Context');

  return (
    <MyContext.Provider value={message}>
      <Child />
    </MyContext.Provider>
  );
}

function Child() {
  // Contextからデータを取得
  const message = useContext(MyContext);
  return <p>{message}</p>;
}

詳しく説明すると：

  • Contextの作成: createContext()を使って新しいContextを作ります。MyContextという名前のContextが作られます。
  • 親コンポーネント (Parent): MyContext.Providerを使って、valueとしてデータ（ここではmessage）を提供します。これにより、Parentコンポーネント内のすべての子コンポーネントは、このデータにアクセスできます。
  • 子コンポーネント (Child): useContext(MyContext)を使って、Contextからデータを取得します。これにより、Parentコンポーネントで提供されたデータを表示できます。

Contextの特徴

  • 複数のコンポーネントで共有: 一度Contextを作成し、データを提供すると、そのContextを使ってどこからでもデータにアクセスできます。
  • グローバルな状態管理: Contextは、アプリ全体で使う共通のデータ（例えば、現在のユーザー情報やテーマ設定など）を管理するのに適しています。

まとめ:コンポーネント間の通信

このように、Reactでは親子コンポーネント間の通信にはPropsを使い、複数のコンポーネントでデータを共有するにはContextを使います。これらの方法を理解することで、より複雑なアプリケーションを作る際のデータ管理がしやすくなります。

参考

React公式サイト
React(v18)完全入門ガイド｜Hooks、Next14、Redux、TypeScript

Discussion