初めてのReact
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を使います。これらの方法を理解することで、より複雑なアプリケーションを作る際のデータ管理がしやすくなります。
Discussion