プログラミング初心者のための入門ブログエンジニアが未来を切り開く。基礎この広告は、90日以上更新していないブログに表示しています。ライブラリ本日はReactフックでよく用いられる、useContextでのデータ共有になります。useContextフックは、React16.8以降のバージョンで使用可能です。最後にuseContextとは本来Reactでの親コンポーネントから子のコンポーネントへデータを渡す際はPropsでおこなわれますですが、複数の複雑化したコンポーネントがあった場合、Propsを経由してバケツリレー状態のデータを渡していくのは最善の方法とは言えません。下の階層にあるコンポーネントとシンプルにデータの受け渡しが容易になります。APIはデータの数値、関数、オブジェクトこれらを渡す時に非常に便利です。簡単な使用例で学びましょう。使い方create-react-app(CRA)での解説となります。最上位である親コンポーネントのApp.jsファイルから、子のコンポーネントに渡されたデータを取得します。当記事ではContextRoot.Providerというタグでラップして処理が必要となります。/></ContextRoot.Provider>それをせずに使用する方法もあります。App;オブジェクトのdataにはそれぞれ値を持たせます。}}ContextRoot.Providerのタグ内のvalueはPropsの役割でありオブジェクトのdateを渡します。この値は、そのすべての子とその子孫が利用できるようになります。サブツリー全体でuseContextフックを使用して値を読み取ることができます。App.jsファイルが存在する同じ階層に、ContextRoot.jsというファイルを作成します。このファイルは、ルートのファイルとなりContextの作成はcreateContextで行います。ContextRoot;createContextはコンテキストインスタンスを作成する為のものとなります。そのため、コンテキストを作成し初期化をします。createContextの引数は元々初期値はありません。createContextの引数にデフォルトの値を渡した場合ではReactのドキュメントによると、デフォルト値を指定すると『コンポーネントをラップせずに個別にテストするのに役立つ可能性がある』と明記してあります。デフォルト値が役立つ状況がありますが、ほとんどの場合はデフォルト値は不要または有用ではありません。それでは、App.jsのdataを渡して取得していきましょう。新しくComponentsというフォルダを作成して下さい。その中に、Child.jsとGrandChild.jsの2つの新しいファイルを作成して下さい。これは、子のコンポーネントと孫のコンポーネントファイルとなります。GrandChild;子コンポーネントでコンテキストを使用するには、useContextフックを使用してコンテキストにアクセスする必要があります。useContext(ContextRoot);ContextRootは、コンテキストオブジェクト(React.createContextから返される値)となります。このメソッドは、そのコンテキストの現在の値を返します。引数としてuseContextフックに渡される必要があるものとなります。propsによって決定されます。ContextRootのデータを取得し、それをdataという変数に再割り当てします。それを使用していくだけです。それでは取得したのを表示していきましょう。CodePen.子であるChild.jsにはPropsを使用せず、グローバルとして子孫コンポーネントにデータを渡している事が分かるかと思います。これは、データを取得してるのは子孫コンポーネントであるGrandChild.jsファイルとなります。最後にReactのコンテキストは、コンポーネントツリーの深さに関係なく、子コンポーネントにグローバルデータを提供できるようにする概念となっています。コンテキストをアプリケーションに統合するときは、かなり複雑になることを考慮してください。アプリケーションがシンプルで小規模なアプリケーションの場合では、useContextフックはReduxの実行可能な代替手段になる可能性があります。どのように書いていくかではなく、まずはデータの受け渡しの流れを理解する事が重要です。本日は以上となります。この記事が気に入ったら、ブックマークし他の方に共有して下さい👏この記事で解説したuseContextフックの流れの理解に役立つことを私は願っています。17:56ご訪問いただきありがとうございます。私はdeve.Kと申します。現役のReact.jsプログラマーでありWebアプリ開発に携わっています。当ブログでは、ITやプログラミングの学習を目的としたブログを運営しています。専門分野はJS/TS/Node.js/React/Next.jsです。質問や相談、または学びたい分野のリクエストなどがありましたら、お気軽にお問い合わせください。このブログでは、ITやプログラミングに関する情報を分かりやすく、かつ実践的な内容でお届けしています。皆様にとって有益な情報を提供し、より良い学習体験を得ていただけるよう、精一杯の努力をしてまいります。今後ともどうぞよろしくお願いいたします。[deve.K].はてなブログをはじめよう!dev04Kさんは、はてなブログを使っています。ブログを報告する引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。