Reactフックを使って制御されたコンポーネントを作成する方法|初心者向けガイド

Reactフックを使って制御されたコンポーネントを作成する方法|初心者向けガイド

2022年の新年、React.jsの初心者向けの講座を始めます。

まずはじめに、明けましておめでとうございます!皆さんはお正月をどのようにお過ごしでしょうか?自宅でのんびり過ごす方もいれば、勉強に励む方もいるかもしれませんね。

React.jsを学習している初心者の方々に、私は応援の気持ちを込めて、今日もReact.jsの学習方法をブログで提供していきたいと思います。

React開発者として、制御可能なコンポーネントを作成することは、非常に重要なスキルの1つです。

このブログでは、Reactフックを使って、制御されたコンポーネントを作成する方法を初心者向けにご紹介します。

ぜひ、参考にしてください。

制御されたコンポーネントとは?

Reactにおける「制御可能」とは、コンポーネント内のPropsやユーザーインタラクションから発生する変更に対応できるコンポーネントのことを指します。

Reactにおいて、フォームデータを扱うコンポーネントには、「制御されたコンポーネント」と「制御されていないコンポーネント」の2つのアプローチがあります。

制御されたコンポーネントでは、Reactの状態を使ってフォームの値を管理するため、値の変更やフォームの送信をコントロールしやすくなります。

また、制御されたコンポーネントでは、データの処理を親コンポーネントで行うことで、データの整合性を確保することができます。

したがって、制御されたコンポーネントを使用することで、フォーム要素やデータを適切に制御することが容易になります。

Reactのドキュメントでは、制御されたコンポーネントが推奨されています。

制御されたコンポーネントを使用することで、コンポーネントの状態を介して入力の値を読み取り、設定することができます。

つまり、制御されたコンポーネントは外部から制御されることで、コンポーネント自身の状態を変更することができます。

コンポーネントの状態を介して入力の値を読み取って設定するため、制御されたコンポーネントを好んで扱います。

制御されていないコンポーネントとは?

Reactにおける、制御されていないコンポーネントでは、従来のHTMLフォーム入力要素に似た振る舞いをします。

このタイプのコンポーネントでは、Reactの状態ではなく、DOMの状態に基づいてフォーム要素の値が管理されます。

フォーム要素とデータの制御は制限され、内部の状態を維持しながら、データはDOM自体によって制御されます。

したがって、制御されていないコンポーネントを使用する場合、フォーム要素やデータを適切に制御することが困難になる場合があります。

フォーム要素とデータの制御が制限され、内部の状態が維持されるため、フォームの制御が必要ない単純なフォームの場合に使用されることがあります。

なぜ制御されたコンポーネントを使用する?

それら理由の主な利点は次の通りです

「制御されていないコンポーネント」を使用する場合、フォームを送信するときにのみ入力の値にアクセスが可能です。

ただし、「制御されたコンポーネント」を使用する場合は常に値にアクセスでき、すべてのキーストロークに検証チェックを実装するのが容易になる為です。

つまり、制御されたコンポーネントは、入力フィールドの値に常にアクセスできるため、すべてのキーストロークに検証チェックを実装することが簡単です。

これは、通常のテキスト入力、テキストエリア、選択フィールドなど、あらゆる入力タイプの値にアクセスする場合に特に役立ちます。

即時性のある検証チェックの役割を果たします。

制御されたコンポーネントの作成

Reactにおいて、テキスト入力フィールドを制御するための基本的なコンポーネントを紹介します。

まず、入力値を保持するための状態変数を定義します。

この状態変数には入力フィールドに入力された値が含まれます。

import { useState } from 'react';

const App = () => {

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

  const onChange = (e) => {
    e.preventDefault()
    console.log(value);
  };

  return (

   <div className='App-header'>
     <div>test Input: {value}</div>

      <input value={value} onChange={(e) => setValue(e.target.value)} />

      <button onClick={onChange} disabled = {value.length < 4}>送信</button>
   </div>
    );
  }

制御されたコンポーネント

まず、入力値が変更されたときに状態を更新するイベントハンドラーを作成します。

const onChange = (e) => {
  e.preventDefault()
  console.log(value);
};

そして、入力フィールドに値を設定するためにReact状態を使用します。

これにより、入力フィールドは制御されたコンポーネントとして扱われ、新しい値が入力されるたびにReact状態が更新され、ユーザーに表示される値も更新されます。

<input value={value} onChange={(e) => setValue(e.target.value)} />

さらに、ボタンを押せないようにするために、disabledを使用し、値の長さに応じて条件を設定してレンダリングします。

<button onClick={onChange} disabled = {value.length < 4}>送信</button>

ユーザーが入力フィールドに入力すると、入力された値を状態の値に割り当て、onChangeハンドラーはイベントオブジェクトからアクセスして、入力の値で状態を更新します。

したがって、入力した値にアクセスする必要がある場合は、単にvalue状態変数を読み取ればよいです。

以上が、Reactにおける基本的なテキスト入力フィールドの制御についての説明となります。

制御されていないコンポーネントの作成

Reactでは、DOM要素にアクセスするために、useRefフックが提供されています。

useRefフックを使用すると、DOM要素への参照を作成することができます。

この参照は、Reactコンポーネント内で変数として扱われ、その値にはcurrentプロパティを持ちます。

この参照を、input要素に渡すことで、その要素の値にアクセスすることができます。

useRefフックは以下でも詳しく解説していますので参照ください。

dev-k.hatenablog.com

以下が、 制御されていないコンポーネントのコード例です。

import React, { useRef } from "react";

// コンポーネントの定義
const App = () => {
  // input要素への参照を作成する
  const inputRef = useRef(null);

  // input要素の値をコンソールに出力する関数
  const handleChange = (e) => {
    e.preventDefault();
    console.log(inputRef.current.value);
  };

  return (
    <div>
      {/* input要素に参照を渡す */}
      <input type="text" ref={inputRef} />
      {/* ボタンをクリックしたら、handleChange関数が呼ばれる */}
      <button onClick={handleChange}>送信</button>
    </div>
  );
};

input要素には、ref属性を指定することで参照を渡します。

この参照を通じて、フォーカスやテキスト選択、メディア再生などの操作を制御することができます。

Reactでは、フォームの送信時にデータがDOMに保存されることはありません。

代わりに、制御されたコンポーネントとしてフォームを実装することが推奨されます。

つまり、上記のコードは制御されていないコンポーネントであり、フォームの値をReactコンポーネントの状態として管理することができません。

制御されたコンポーネントとしてフォームを実装するためには、useStateフックを使用して状態変数を定義し、onChangeイベントを使用して状態変数を更新する必要があります。

また、フォームの値を状態変数にバインドするために、value属性を状態変数に指定する必要があります。

制御されたコンポーネントでは、フォームの状態をReactコンポーネントの状態として管理し、それに基づいてUIを更新します。

最後に

両方のアプローチには支持者と反対者がおり賛否両論となっております、同じように役立ちますが、個人的には、制御されたコンポーネントを使用することを強くお勧めします。

この方法は、フォームの入力値を簡単に管理できるため、開発者にとって非常に便利です。

一方、制御されていないコンポーネントを使用する場合は、状態が自動的に管理されるため、開発者は柔軟性を犠牲にしなければなりません。

したがって、制御されたコンポーネントを使用することをお勧めします。

以上が今日の内容です。

最後まで読んでいただき、ありがとうございます。今年もよろしくお願いいたします。

プライバシーポリシー

© 2023 Icons8 LLC. All rights reserved.

© [deve.K], 2023. React logo is a trademark of Facebook, Inc. JavaScript is a trademark of Oracle Corporation and/or its affiliates. jQuery and the jQuery logo are trademarks of the JS Foundation. TypeScript and the TypeScript logo are trademarks of the Microsoft Corporation. Next.js and the Next.js logo are trademarks of Vercel, Inc. Firebase and the Firebase logo are trademarks of Google LLC. All logos edited by [deve.K].