Hooksの一つのuseContext()について詳細に解説いたします。皆さんの理解につながれば嬉しいです。Hooksの一つで、Reactコンポーネント内のContextオブジェクトから簡単にデータを受け取るためのフックです。Contextの概念を理解する必要があります。Contextの概念の中で使うものだからです。ContextとはReactコンポーネントツリー内で扱われるデータをグローバルに共有・管理するため概念です。通常のデータの受け渡しは下図のようにpropsを使って親コンポーネントから子コンポーネントに渡されます。App.jsにあるデータをLeftSub.jsとRightSub.jsで必要とすると一気にデータを渡すことができず、一度LeftSub.jsとRightSub.jsの各親コンポーネントを経由しなければなりません。Contextの概念では下図のようにデータを扱います。データをグローバルなものにして、データが必要なコンポーネントに直接共有できるようになります。ReactContextはReactが持っている概念で、useContext()を使ってグローバルに共有されたデータに簡単にアクセスできるようになります。何が嬉しいのかというと、規模の大きいアプリだとデータ管理が楽になります。Contextを解説します。完成図は下図で、「左の要素です」「右の要素です」というテキストデータをグローバルに扱えるようにして、App.jsの孫コンポーネントのLeftSub.js、RightSub.jsからそれぞれのテキストデータを取得できるように実装します。実装上の注目ポイントはLeftSub.js、RightSub.jsの親コンポーネントであるLeft.js、Right.jsにはノータッチという点です。重要なのはstoreフォルダのdata-context.jsです。DataContext;createContext()でContextオブジェクトを生成します。このContextオブジェクトがグローバルに共有されるようになります。ここに設定するオブジェクトのデータはデフォルト値になります。Contextオブジェクトを作ったあとは、他のコンポーネントがアクセスできるようにデータを供給します。データを供給するにはProviderを使います。App.jsに移動します。本実装ではここにグローバルに扱いたいデータ元を準備します。下記のソースのようにdata-context.jsに記載したDataContextをインポートし、JSXでDataContext.Providerでまるっと囲みます。App;こうすることによって、App.jsから見た子要素であるLeft.jsとRight.js、さらにLeft.jsとRight.jsの子要素であるLeftSub.jsとRightSub.jsのどこからでもグローバルのデータにアクセスできるようになります。グローバルに扱いたいデータを「value={〇〇}」という記述でこのようにProviderの中に追加します。value={data}>と名前は必ず「value」でなければなりません。};これをグローバルで扱うことにしています。value={data}>という記述になります。これでどのコンポーネントからでもデータにアクセスできるようになりました。次からようやくuseContext()が出てきます。useContext()でデータを取得する冒頭に記述したように、useContext()を使うことでContextオブジェクトの値を簡単に取得できます。データを読み取らせたいコンポーネントで下記の実装をします。今回はLeftSub.jsを使います。LeftSub;一行目でuseContext()をインポートします。二行目でContextオブジェクトをインポートします。useContext(DataContext);この記述でctxにグローバルデータであるContextオブジェクトを格納しています。JSXでテキストデータを取得させています。<p>{ctx.textLeft}</p>;一応RightSub.jsのソースもお見せします。RightSub;これで完成です。何も触らなかったLeft.jsとRight.jsの記述も残しておきます。Right;それぞれのコンポーネントでpropsを使っていないのと子コンポーネントにデータを渡していないのがポイントですね。'',});今回の実装ではApp.jsにグローバルにあつかうデータを用意したので、デフォルトのデータは正直あまり意味のない部分でした。実際に下記のようにオブジェクト部分を消しても問題なく動きます。React.createContext();ではこのデフォルト値は何のために必要なのでしょう?実はProviderを設定しなかったときにこのデフォルトの値を読み取ることになります。Providerを設定しない実装は現実的にあまりないです。一つは些細なことですが、デフォルト値を設定していることでエディターが推測してくれます。(エディターの機能にもよります)このようにデフォルト値(右)のtextLeftをコメントアウトするとコンポーネントで「ctx.」と打つと候補としてtextRightだけしか出てこなくなります。Contextを使なかった時の実装を見てみましょう。Contextを使わなかった場合の実装はこちら。→LeftSub.jsという流れになり、データを使わないLeft.jsにただデータをパスしなければなりませんでした。App.js以降のコンポーネントでpropsでのデータの受け渡しが発生しています。ContextとuseContext()を理解していればより綺麗に記述することができます。最後に今回はuseContext()の解説をしました。Contextの理解があって初めて使えます。Contetの理解から進めましょう。これからプログラミングを学ぼうと考えている方の為になる発信をできれば思います。私がReactを学んでいるUdemyの講座が下記です。この私のReactの全記事も下記の講座をより理解しやすく解説したものです。講座を受けつつ、不明点をこのブログで解消できるような構成になっています。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。Hooks基礎】useStateを理解するReact.jsのHooksの一つであるuseStateについて解説します。Toolkitについて実装を交えながら解説します。React学習ログ【React学習ログ4】Reduxをどう理解したかを解説|図解あり私がReduxをどう理解したかを解説します。Hooks基礎】useReducerを理解する【React学習ログ3】メモ化で子コンポーネントが無駄に実行されるのを防ぐフロントエンドエンジニアYamato(やまと)7年目のフロントエンドです。サンフランシスコ留学の際にITの素晴らしさに触れエンジニアになると決心。独学で未経験からアルバイトで採用され入社。経験し2022年8月に独立しました。HTML/CSS・JS・WordPress・Shopifyを触っています。YAMATOdevlog。