React開発の基礎！コンポーネントからフックまでの基礎知識の解説

Reactでのアプリケーション開発には、コンポーネント、props、state、そしてフックといった概念が不可欠です。本記事では、これらの基本的な要素を解説し、React開発の基礎を固める内容を紹介します。

Z-A-K-I

Reactの開発を始めたばかりで実際に開発を進める上で基礎知識を習得したい！

と、思ってる方におすすめです。

この記事では、以下のことを紹介してます。

コンポーネントとは
propsとは
Stateとは
フックとは

Reactの開発環境の構築方法はこちらの記事で紹介しています。Reactの開発環境の構築方法を知りたい方は以下を参照ください。

コンポーネントとは
- コンポーネントの種類
propsとは
Stateとは
フックとは
まとめ
- コンポーネントからフックまでの基礎知識のまとめ
参考サイト

コンポーネントとは

コンポーネントとは、部品や構成要素にことです。Reactはコンポーネント単位で開発することが特徴のライブラリです。そのため最初にコンポーネントについて解説します。

コンポーネントの種類

Reactではコンポーネントは２種類あります。クラスコンポーネントと関数コンポーネントです。

Reactで開発するにあたって、どちらかを選択しなければならないわけではなく、併用して利用することができます。ただし、開発していくうえでどちらをベースとするかを選択する必要があります。

どちらを選択すべきか。結論から言いますと、2023年12月の現時点で新規開発する場合は、関数コンポーネントを利用しておけばよいです。

少し前まではクラスコンポーネントがメジャーでした。理由としては、昔はクラスコンポーネントではできることが関数コンポーネントではできないことがあったためです。しかし、現在は関数コンポーネントでもクラスコンポーネントと同じことができるようになったため、使い勝手のよい関数コンポーネントが推奨されています。

上記背景から、古い書籍などでは本記事とは反対に「クラスコンポーネントを利用する」という記述がされており、クラスコンポーネントでのコードの記述例が多いです。現在は、関数コンポーネントがメジャーですので、学習する際にはご注意ください。

propsとは

コンポーネント間でデータや関数を受け渡すための属性で、Reactのコンポーネント指向の開発において重要な役割を果たします。propsを通じて、親子関係にあるコンポーネント間で値を共有することができます。
以下のように利用します。引数で渡すようなイメージとなります。

const [userName, setUserName] = useState("");

<Child userName={userName} setUserName={setUserName}>

注意点として、子コンポーネントからは、引き渡されたpropsの値を変更することはできません。

変更したい場合は、親コンポーネントから属性として属性変更用の関数をpropsで受け渡してもらい、それを呼び出す必要があります。

下記は、Childコンポーネントにユーザ名の値を受け渡す例です。

Childコンポーネントでは、以下のようにprops.属性名で受け渡された値を利用する事ができます。

export default function Child(props) {

    // 子コンポーネントから受け渡された属性の値は変更できない。 
    // 受け渡された属性の値を変更したい場合は変更するメソッドも属性で受け渡してもらい、
    // 以下のようにその関数を利用する必要がある。
    props.setUserName("")

    return (
        <div>{props.userName}</div>
    );

}

Stateとは

Stateはコンポーネント内で管理される変数のようなもので、Reactによってその変更が追跡されます。これにより、Stateの値が変更されると関連するコンポーネントが再レンダリングされます。

以前はStateを取り扱えるのがクラスコンポーネントのみでしたが、後述するフックの登場により関数コンポーネントでもstateを取り扱うことができるようになりました。

フックとは

フックは関数コンポーネントでクラスコンポーネントの機能を利用するための仕組みです。useStateやuseEffectなど、様々なフックが提供されており、関数コンポーネントの可能性を広げています。

フックには以下の種類があります。

useState

stateを取り扱うことができるフックです。

値を格納する変数と、その値を変更する関数を同時に定義して利用します。

値を変更する時にはここで定義した関数を利用してください。この関数以外で値を変更するとReactは値が変更されたことを検知できません。

以下はnameという変数をstateで管理する場合の例です。

値を変更する関数の名前はなんでもよいのですが、慣例的に「set」+変数名と名付けます。

// [変数名, 変数を更新するメソッド]= useState(初期値);
const [name, setName] = useState("");

useEffect

副作用を利用するためのフックです。副作用とは「引数以外の要因で関数の外に影響を与えてしまう関数」のことです。

Reactでは、DOM更新やAPI通信、stateの更新などが副作用に該当します。上記のようなことをuseEffectで記述します。なお、useEffectは一つのコンポーネント内でいくつ記述してもよいです。

コードは以下のように記述します。

useEffect(() => {

  console.log('test')

},[実行のトリガーとなる変数])

useRef

useStateのレンダリングを実行しないときに利用するフックです。値の保持が必要だけど、DOMは更新したくない場合などに利用します。

コードは以下となります。

// 宣言
const ref = useRef(初期値);

// 利用時
const value = ref.current;

useContext

propsと同じくコンポーネント間の値の受け渡しに利用します。

コンポーネント間ではpropsを利用して値を受け渡しするとpropsのバケツリレーとなり、コードの記述が煩雑になります。一方useContextを利用すると、どのコンポーネントからでもContextの値にアクセスする事ができます。

useContextは以下のようにContextで利用範囲のコンポーネントを囲み、囲まれた範囲内のコンポーネントからであればどこからでもContextの値にアクセスする事ができます。

Contextを提供するコンポーネントをProvider、提供される側をConsumerと呼びます。

// Contextの宣言
export const TextContext = createContext();

// Contextを利用できるコンポーネントを囲む。
// 以下の例では、TestContextをComponentAとComponentBで利用できる。
export const TestComponent = () => {
  return (
    <div>
      <TextContext.Provider name={test}>
        <ComponentA />
        <ComponentB />
      </TestContext.Provider>
    </div>
  );
}

子コンポーネントでの利用方法

import React, { useContext } from 'react';
import { TestContext } from './TestComponent';

export const ComponentA = () => {
  const name = useContext(TestContext);

  return (
    <div>名前:{name}</div>
  )

useMemo

関数の結果の値を保持しておくフックです。このことをメモ化と呼びます。

つまり、useMemoは値をメモ化しておくためのフックです。

以下では、valueの値が変更された場合のみ、関数が実行されるようにメモ化した例となります。

const [value, setValue] = useState("");

function test(value){
    console.log("useMemo!");
}

// useMemo(() => 結果を算出する関数, 依存配列)
const testAAA = useMemo(() => test(value), [
    value,
    ]);