女性向けエンジニアスクール
React状態管理：カスタムフック・Context・Reducer - なぜカスタムフックか
同じ12行が2つ並ぶ
トップスの一覧を、くつの一覧とまったく同じ書き方で足すとどうなるか見てください。
変わるのは category のところ1か所だけです。
| 部品 | 取得コード |
|---|---|
| ShoesList | category=shoes を fetch する12行 |
| TopsList | category=tops に変えただけの同じ12行 |
1 / 5
カスタムフック、フックのルール、Context、useContext、useReducer、Actionのunion型を扱う全21レッスンの状態管理コースです。fleamaの商品・フォーム・テーマ・ユーザー・カート状態を、再利用可能なロジックと予測可能な状態遷移へ整理します。
レッスン
21件
所要時間
約5.5時間
ランク
中級
学習環境
ブラウザ完結
fleamaのロジックと共有状態を、カスタムフック・Context・Reducerへ整理する
カスタムフック、フックのルール、Context、useContext、useReducer、Actionのunion型を扱う全21レッスンの状態管理コースです。fleamaの商品・フォーム・テーマ・ユーザー・カート状態を、再利用可能なロジックと予測可能な状態遷移へ整理します。
画面ロジックをカスタムフックへ抽出し再利用できる
Contextでテーマやユーザー情報を必要な部品へ共有できる
useReducerとActionのunion型で複雑な状態遷移を設計できる
ブラウザ完結（インストール不要）
テキストでの解説
0
レッスン
コーディングの問題
18
レッスン
クイズ問題
3
レッスン
ゆめさくコード編集部
プログラミング学習をもっと身近に。初心者から実務レベルまで、わかりやすいコンテンツをお届けします。
ゆめさくエンジニア / 現役ソフトウェアエンジニア。Ruby on Rails・Nuxt.js・Next.js・CakePHPなどの実務の開発をベースに、学習コンテンツを作成しています。
レッスンの最初に、図と短い言葉で学ぶ内容をつかみます。
React状態管理：カスタムフック・Context・Reducer - なぜカスタムフックか
トップスの一覧を、くつの一覧とまったく同じ書き方で足すとどうなるか見てください。
変わるのは category のところ1か所だけです。
| 部品 | 取得コード |
|---|---|
| ShoesList | category=shoes を fetch する12行 |
| TopsList | category=tops に変えただけの同じ12行 |
1 / 5
取得のコードを直接書いた場合と、useItems を呼ぶだけにした場合を比べてください。
ShoesList に直接書く
useEffect(() => {
fetch("/api/items?category=shoes")
.then((r) => r.json())
.then((d) => setItems(d));
}, []);useItemsを呼ぶだけ
const { items, loading } =
useItems("shoes");12行あった取得の手続きが、呼び出し1行に変わります。
1 / 5
入力欄ごとに state を分けると、欄が増えるたびにハンドラも増えます。
欄ごとにstateを分ける
const [title, setTitle] =
useState("");
const [price, setPrice] =
useState("");1つのオブジェクトにまとめる
const [values, setValues] =
useState({ title: "", price: "" });欄がいくつ増えても、まとめる state は1つのままです。
1 / 5
React状態管理：カスタムフック・Context・Reducer - フックのルール
自分でフックを作れるようになると、置き場所を自分で決めることになります。
この2つを守れば、置き場所で困りません。
| ルール | 内容 |
|---|---|
| 呼ぶ場所 | いちばん上の階層で呼ぶ。if や for の中では呼ばない |
| 呼ぶ相手 | コンポーネントか、use で始まる名前の関数の中だけ |
1 / 5
動かしながら、仕組みや変化を目で確かめられます。
陽葵「注文ウィジェット、今風にできる?」
1問目は無料で解けます。
教材を見ないで、依頼と完成条件だけを読んで書いてみてください。
React道場 ハレノヒ珈琲をモダン化する10問
このコースを終えたあとに進むと、無理なく続けられます
