PropsとPropTypesをReactでマスターする

小道具とPropTypesはあなたを混乱させますか？ あなたは一人じゃない。 小道具とPropTypesについてのすべてをご案内します。 Reactアプリを開発するとき、彼らはあなたの人生を非常に楽にすることができます。 このチュートリアルでは、小道具、小道具の受け渡しとアクセス、および小道具を使用したコンポーネントへの情報の受け渡しについて詳しく説明します。

Reactアプリケーションの構築には、UIをいくつかのコンポーネントに分割することが含まれます。これは、あるコンポーネントから別のコンポーネントにデータを渡す必要があることを意味します。 小道具はReactコンポーネント間で情報を渡すための重要なメカニズムであり、それらを詳細に調べます。 コンポーネントが正しいデータ型を使用し、正しいデータを渡すことを保証するため、この記事はPropTypesを調べないと不完全になります。

PropTypesを使用して、小道具として取得したデータを検証することは常に良い習慣です。 また、ReactでのPropTypesの統合、PropTypesでのタイプチェック、およびdefaultPropsの使用についても学習します。 このチュートリアルの最後に、propsとPropTypesを効果的に使用する方法を理解します。 Reactがどのように機能するかについての基本的な知識をすでに持っていることが重要です。

小道具を理解する

Reactを使用すると、props（プロパティの略）と呼ばれるものを使用してコンポーネントに情報を渡すことができます。 Reactは複数のコンポーネントで構成されているため、小道具を使用すると、それらを必要とするコンポーネント間で同じデータを共有できます。 これは、一方向のデータフロー（親から子のコンポーネント）を利用します。 ただし、コールバック関数を使用すると、子から親コンポーネントに小道具を戻すことができます。

これらのデータは、数値、文字列、配列、関数、オブジェクトなど、さまざまな形式で提供されます。任意のHTMLタグで属性を宣言できるのと同じように、任意のコンポーネントに小道具を渡すことができます。 以下のコードを見てください。

 <PostList posts={postsList} />

このスニペットでは、 postsという名前の小道具をPostListという名前のコンポーネントに渡します。 この小道具の値は{postsList}です。 データにアクセスして渡す方法を詳しく見ていきましょう。

小道具の受け渡しとアクセス

このチュートリアルを面白くするために、ユーザーの名前と投稿のリストを表示するアプリケーションを作成しましょう。 アプリのデモを以下に示します。

アプリは、 Appコンポーネント、 PostListコンポーネント、 Postコンポーネントのコンポーネントのコレクションで構成されています。

投稿のリストには、 contentやユーザーのnameなどのデータが必要です。 次のようにデータを作成できます。

 const postsList = [ { id: 1, content: "The world will be out of the pandemic soon", user: "Lola Lilly", }, { id: 2, content: "I'm really exited I'm getting married soon", user: "Rebecca Smith", }, { id: 3, content: "What is your take on this pandemic", user: "John Doe", }, { id: 4, content: "Is the world really coming to an end", user: "David Mark", }, ];

この後、データをプルするためのAppコンポーネントが必要です。そのコンポーネントの基本構造は次のとおりです。

 const App = () => { return ( <div> <PostList posts={postsList} /> </div> ); };

ここでは、投稿の配列を小道具としてPostListに渡します（これについては後で作成します）。 親コンポーネントであるPostListは、 postsList内のデータにアクセスします。このデータは、 posts小道具として子コンポーネント（ Post ）に渡されます。 覚えていると思いますが、私たちのアプリは3つのコンポーネントで構成されており、作業を進めていくうちに作成していきます。

PostListを作成しましょう：

 class PostList extends React.Component { render() { return ( <React.Fragment> <h1>Latest Users Posts</h1> <ul> {this.props.posts.map((post) => { return ( <li key={post.id}> <Post {...post} /> </li> ); })} </ul> </React.Fragment> ); } }

PostListコンポーネントは、その小道具としてpostsを受け取ります。 次に、 postsプロップthis.props.postsをループして、投稿された各アイテムをPostコンポーネントとして返します（後でモデル化します）。 また、上記のスニペットのkeyの使用に注意してください。 Reactを初めて使用する場合、キーはリスト内の各アイテムに割り当てられた一意の識別子であり、アイテムを区別できるようにします。 この場合、キーは各投稿のidです。 2つのアイテムが同じidを持つ可能性はないため、この目的に使用するのに適したデータです。

一方、残りのプロパティは小道具としてPostコンポーネント（ <Post {...post} /> ）に渡されます。

それでは、 Postコンポーネントを作成し、その中で小道具を利用しましょう。

 const Post = (props) => { return ( <div> <h2>{props.content}</h2> <h4>username: {props.user}</h4> </div> ); };

PostListコンポーネントのようにクラスコンポーネントとして定義するのではなく、 Postコンポーネントを機能コンポーネントとして構築しています。 this.propsを使用してクラスコンポーネントで小道具にアクセスする方法と比較して、機能コンポーネントで小道具にアクセスする方法を示すためにこれを行いました。 これは機能コンポーネントであるため、 propsを使用して値にアクセスできます。

これで、小道具を渡したりアクセスしたりする方法と、あるコンポーネントから別のコンポーネントに情報を渡す方法を学びました。 ここで、小道具が関数とどのように連携するかを考えてみましょう。

小道具を介して関数を渡す

前のセクションでは、データの配列を小道具として1つのコンポーネントから別のコンポーネントに渡しました。 しかし、代わりに関数を使用している場合はどうなるでしょうか。 Reactを使用すると、コンポーネント間で関数を渡すことができます。 これは、親コンポーネントの状態変化を子コンポーネントからトリガーする場合に便利です。 小道具は不変であると想定されています。 小道具の値を変更しようとしないでください。 親コンポーネントである、それを渡すコンポーネントでそれを行う必要があります。

クリックイベントをリッスンしてアプリの状態を変更する簡単なデモアプリを作成しましょう。 別のコンポーネントでアプリの状態を変更するには、状態を変更する必要があるコンポーネントに関数を渡す必要があります。 このようにして、状態を変更できる関数が子コンポーネントに含まれます。

少し複雑に聞こえますか？ ボタンをクリックするだけで状態を変更し、ウェルカム情報を表示する単純なReactアプリケーションを作成しました。

上記のデモでは、2つのコンポーネントがあります。 1つはAppコンポーネントです。これは、アプリの状態と状態を設定する関数を含む親コンポーネントです。 このシナリオでは、 ChildComponentになり、そのタスクは、状態が変化したときにウェルカム情報をレンダリングすることです。

これをコードに分解してみましょう：

 class App extends React.Component { constructor(props) { super(props); this.state = { isShow: true, }; } toggleShow = () => { this.setState((state) => ({ isShow: !state.isShow })); }; render() { return ( <div> <ChildComponent isShow={this.state.isShow} clickMe={this.toggleShow} /> </div> ); } }

状態をtrueに設定し、状態を変更するメソッドがAppコンポーネントに作成されていることに注意してください。 render()関数では、アプリの状態をisShowとしてChildComponentコンポーネントに渡します。 また、 toggleShow()関数をclickMeという名前のプロップとして渡します。

これをChildComponentで使用します。これは次のようになります。

 class ChildComponent extends React.Component { clickMe = () => { this.props.clickMe(); }; render() { const greeting = "Welcome to React Props"; return ( <div style={{ textAlign: "center", marginTop: "8rem" }}> {this.props.isShow ? ( <h1 style={{ color: "green", fontSize: "4rem" }}>{greeting}</h1> ) : null} <button onClick={this.clickMe}> <h3>click Me</h3> </button> </div> ); } }

上記で最も重要なことは、 Appコンポーネントが関数を小道具としてChildComponentに渡すことです。 関数clickMe()は、 ChildComponentのクリックハンドラーに使用されますが、 ChildComponentは関数のロジックを認識していません。ボタンがクリックされたときにのみ、関数をトリガーします。 関数が呼び出されると状態が変更され、状態が変更されると、状態は再び小道具として渡されます。 この場合の子のように、影響を受けるすべてのコンポーネントが再びレンダリングされます。

アプリの状態isShowを小道具としてChildComponentに渡す必要があります。これがないと、状態が更新されたときにgreetingを表示する上記のロジックを記述できないためです。

関数について見てきたので、検証に移りましょう。 PropTypesを使用して、小道具から取得したデータを検証することは常に良い習慣です。 それでは、今から詳しく見ていきましょう。

ReactのPropTypesとは何ですか？

PropTypesは、コンポーネントが正しいデータ型を使用して適切なデータを渡し、コンポーネントが適切なタイプの小道具を使用し、受信コンポーネントが適切なタイプの小道具を受け取るようにするメカニズムです。

子犬がペットショップに配達されているようなものと考えることができます。 ペットショップでは、豚、ライオン、カエル、ヤモリは必要ありません。子犬が必要です。 PropTypesは、正しいデータ型（子犬）がペットショップに配信され、他の種類の動物には配信されないようにします。

上記のセクションでは、小道具を使用してコンポーネントに情報を渡す方法を説明しました。 小道具を属性としてコンポーネントに直接渡し、コンポーネントの外部から小道具を渡して、そのコンポーネントで使用しました。 しかし、小道具を介してコンポーネントで取得している値のタイプや、すべてがまだ機能していることは確認していません。

小道具を介してコンポーネントで取得したデータを検証するかどうかは、完全に私たちにかかっています。 ただし、複雑なアプリケーションでは、そのデータを検証することをお勧めします。

PropTypesの使用

PropTypesを利用するには、コマンドラインで次のコードを実行して、npmまたはYarnを介してアプリケーションへの依存関係としてパッケージを追加する必要があります。 npmの場合：

 npm install --save prop-types

そして糸の場合：

 yarn add prop-types

PropTypesを使用するには、最初にprop-typesパッケージからPropTypesをインポートする必要があります。

 import PropTypes from 'prop-types';

ユーザーの投稿を一覧表示するアプリでProTypesを使用してみましょう。 Postコンポーネントでの使用方法は次のとおりです。

 Post.proptypes = { id: PropTypes.number, content: PropTypes.string, user: PropTypes.string }

ここで、 PropTypes.stringとPropTypes.numberは、受け取った小道具が正しいタイプであることを確認するために使用できる小道具バリデーターです。 上記のコードでは、 idを数値として宣言し、 contentとuserを文字列として宣言しています。

また、PropTypesはバグを見つけるのに役立ちます。 そして、 isRequiredを使用して小道具の受け渡しを強制できます：

 Post.proptypes = { id: PropTypes.number.isRequired, content: PropTypes.string.isRequired, user: PropTypes.string.isRequired }

PropTypesには多くのバリデーターがあります。 最も一般的なもののいくつかを次に示します。

 Component.proptypes = { stringProp: PropTypes.string, // The prop should be a string numberProp: PropTypes.number, // The prop should be a number anyProp: PropTypes.any, // The prop can be of any data type booleanProp: PropTypes.bool, // The prop should be a function functionProp: PropTypes.func // The prop should be a function arrayProp: PropTypes.array // The prop should be an array }

より多くのタイプが利用可能であり、Reactのドキュメントで確認できます]。

デフォルトの小道具

小道具を使用してコンポーネントにデフォルト情報を渡したい場合、ReactではdefaultPropsと呼ばれるものを使用してこれを行うことができます。 PropTypesがオプションの場合（つまり、 isRequired defaultProps設定できます。 デフォルトの小道具は、何も渡されない場合に備えて、小道具に値があることを保証します。 次に例を示します。

 Class Profile extends React.Component{ // Specifies the default values for props static defaultProps = { name: 'Stranger' }; // Renders "Welcome, Stranger": render() { return <h2> Welcome, {this.props.name}<h2> } }

ここで、 defaultPropsは、親コンポーネントによって指定されていない場合に、 this.props.nameに値があることを確認するために使用されます。 クラスProfileに名前が渡されない場合、フォールバックするデフォルトのプロパティStrangerがあります。 これにより、propが渡されなかった場合のエラーが防止されます。 オプションのPropTypeごとにdefaultPropsを常に使用することをお勧めします。

結論

このチュートリアルを楽しんでいただけたでしょうか。 うまくいけば、Reactアプリケーションを構築する上でpropsとpropTypesがいかに重要であるかが示されます。これらがないと、相互作用が発生したときにコンポーネント間でデータを渡すことができないからです。 これらは、Reactが設計されているコンポーネント駆動型および状態管理アーキテクチャのコア部分です。

PropTypesは、コンポーネントが正しいデータタイプを使用して正しいデータを渡すこと、コンポーネントが正しいタイプのプロップを使用すること、および受信コンポーネントが正しいタイプのプロップを受け取ることを保証するためのボーナスです。

ご不明な点がございましたら、下のコメント欄にご記入ください。すべての質問にお答えし、問題を解決させていただきます。

参考文献

• 「ThinkinginReact」、React Docs
• 「リストとキー」、React Docs
• 「PropTypesによるタイプチェック」、React Docs
• 「Reactで小道具をコンポーネントに渡す方法」、Robin Wieruch