ContextはReduxのようにグローバルなデータの定義と参照ができるReactのAPIです。drillingと呼ばれる、いわゆるpropsのバケツリレー問題を解決できる」などのメリットがあります。Contextを作成し、useContextで値を参照するための手順は以下の通りです。Providerコンポーネントを作成するProviderコンポーネントでContext利用対象のコンポーネントを囲むContextをコンポーネントから呼び出す以下では具体例を交えながら各手順について紹介します。参考記事Providerコンポーネントを作成するProviderコンポーネントでやることは以下の通りです。createContextでContextを作成するcreateContextで作成されたContextをexportし、他のコンポーネントから参照できるようにするProviderコンポーネントのvalueプロパティに他のコンポーネントから参照したい値をセットする具体例は以下の通りです。);};createContext<string>の<string>はジェネリックメソッド(ジェネリック関数)と呼ばれるものです。今回の場合はジェネリックメソッドを利用してContextの型をString型に指定しています。ジェネリクスの詳細解説は【TypeScript】ジェネリクス(Generics)入門。ジェネリクスの種類と利用例で紹介しています。ProviderコンポーネントでContext利用対象のコンポーネントを囲む今回の場合ですと<ExampleProvider>でコンポーネントを囲みます。任意のコンポーネントでContextを利用したい場合は_app.tsxにProviderコンポーネントを追記します。MyApp;Contextをコンポーネントから呼び出すContextの呼び出し方法は以下の通りです。Providerコンポーネントで作成されたContextをimportするimportしたContextをuseContextの引数にするuseContextの戻り値がProviderコンポーネントのvalueプロパティの値になります。Home;さいごにTwitter(@nishina555)やってます。Hooksに書き換えてみたRECOMMENDJavaScriptReactツイートシェアはてブ送るPocketプロフィールnishina大企業、ベンチャーと色々なところでWebエンジニアやっています。退職手続きから案件参画まで。人気の記事iPhoneの連絡先の保存がうまくできない!?原因は同期設定かも。