SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

ReactのカスタムフックuseToggle：開閉状態を再利用するの解説動画

再生時間 7:46動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

  1. 0:00こんにちは。
  2. 0:01リアクト入門の第九回です。
  3. 0:03今回は、カスタムフック、ユーストグルで、開閉状態を再利用する方法を学びます。
  4. 0:09題材は、開いているか閉じているかという、とても単純な真偽値の状態です。
  5. 0:15メニューの開閉、説明欄の展開、フィルターの表示切り替えなど、画面のあちこちで同じ形の処理が現れます。
  6. 0:23そのたびに同じコードを書く代わりに、ユースステートを使った処理を、独自のフックとして一つにまとめます。
  7. 0:32前回は状態を持たない通常の関数を部品化しましたが、今回は状態を持つ処理の再利用です。
  8. 0:39その違いも意識しながら進めましょう。
  9. 0:42完成形のイメージは、ボタン一つで説明欄が開いたり閉じたりする、小さな画面です。
  10. 0:49まず、カスタムフックの位置づけです。
  11. 0:51ユーストグルは、リアクトに用意された組み込みのエーピーアイではありません。
  12. 0:56自分で作る、独自のフックです。
  13. 0:58カスタムフックの名前は、ユースという言葉と大文字で始めます。
  14. 1:02この名前が目印になって、内部でフックを呼んでいる関数だと読み手に伝わります。
  15. 1:07呼び出す場所にも決まりがあります。
  16. 1:09コンポーネント、または別のフックのトップレベルで呼びます。
  17. 1:13条件分岐の中、繰り返しの中、クリック用の関数の中からは呼び出しません。
  18. 1:18呼び出しの順番が毎回同じになるよう保つためです。
  19. 1:21この決まりは、基本のフックと同じです。
  20. 1:23実装を見ます。
  21. 1:24ファイルは、エスアールシー配下のフックスフォルダーに、ユーストグル・ティーエスとして置きます。
  22. 1:31中ではユースステートで、イズオープンのという真偽値を持ちます。
  23. 1:36初期値は引数のイニシャルバリューで、省略するとフォルス、つまり閉じた状態から始まります。
  24. 1:42返すのは、現在の状態であるイズオープンのほかに、トグル、オープン、クローズという三つの関数です。
  25. 1:49呼び出し側は、この四つを受け取って使うだけです。
  26. 1:53開閉の細かい処理は、フックの中に閉じ込められています。
  27. 1:57わずか数行ですが、再利用の単位として十分な形です。
  28. 2:00三つの関数の違いを押さえます。
  29. 2:03トグルは、直前の状態を引数に取る更新関数を使い、真偽値を反転します。
  30. 2:08直前の値をもとにする書き方なので、一つの操作で更新が続けて予約されても、
  31. 2:14古い値だけを基準に反転してしまう事故を避けられます。
  32. 2:19一方、オープンは何度呼んでも開いた状態にし、クローズは何度呼んでも閉じた状態にします。
  33. 2:26今の状態が分からないときの反転と、結果が決まっている明示的な変更とで、使い分けてください。
  34. 2:33なお、引数の初期値は初回だけの値です。
  35. 2:36後から引数が変わっても、状態は自動ではリセットされません。
  36. 2:41常に親から制御したい場合は、親で状態を持つ設計にします。
  37. 2:46迷ったら、結果がどちらかに決まっている操作にはオープンとクローズ、単に切り替えたい操作にはトグル、
  38. 2:51と覚えてください。
  39. 2:55次に、アプリ・ティーエスエックスで、このフックを画面から使います。
  40. 3:01ユーストグルを呼び、分割代入でイズオープン、トグル、クローズを受け取ります。
  41. 3:07ボタンにはオンクリックとしてトグルを渡し、文言は状態に応じて、説明を開く、
  42. 3:11説明を閉じる、と切り替えます。
  43. 3:15説明のパネルは、イズオープンがフォルスのときにヒドゥンで隠れます。
  44. 3:20パネルの中にも閉じるボタンを置き、こちらはクローズを呼びます。
  45. 3:25コンポーネント側には、状態をどう反転させるかという細部は一切出てきません。
  46. 3:31受け取った値と関数を、表示と操作につなぐだけです。
  47. 3:35この例では、支援技術への配慮も状態と連動させています。
  48. 3:39パネルのアイディーは、第四回で学んだユースアイディーで作り、部品ごとに重ならない値にします。
  49. 3:46ボタンにはアリアコントロールズでそのアイディーを指定し、どのパネルを開閉するボタンなのかを結びつけます。
  50. 3:54さらに、アリアエクスパンデッドにはイズオープンをそのまま渡すので、開閉のたびに、
  51. 3:59展開されているかどうかが自動で追従します。
  52. 4:03見た目の表示だけでなく、こうした属性も同じ状態から決めることで、画面の見え方と読み上げの内容が食い違わなくなります。
  53. 4:12状態が一か所にある利点が、ここにも表れています。
  54. 4:16大切な性質を確認します。
  55. 4:18同じユーストグルを二つの場所で呼び出しても、状態はそれぞれ独立します。
  56. 4:25共通になるのは処理の手順、つまりロジックだけで、状態そのものではありません。
  57. 4:32たとえば説明欄を二つ並べ、片方だけを開いても、もう片方は閉じたままです。
  58. 4:38画面に書いた例のように、片方を引数なしで、もう片方をトゥルーの初期値で呼べば、
  59. 4:44開始状態も別々に決められます。
  60. 4:49フックを再利用すると状態まで共有されると思い込みがちですが、そうではありません。
  61. 4:56呼び出しごとに、ユースステートが新しく作られるからです。
  62. 5:01実際に二つ並べて試す確認方法は、最後の動作確認でもう一度取り上げます。
  63. 5:08では、複数の部品で同じ開閉状態を共有したいときは、どうするのでしょうか。
  64. 5:14答えは、共通の親でユーストグルを一回だけ呼び、その値と関数をプロップスで子へ渡すことです。
  65. 5:21これは、状態の置き場所を共通の親へ引き上げる、というこれまでの考え方とまったく同じです。
  66. 5:28フックはあくまで、状態と操作をまとめる道具であり、置き場所を決めるのはコンポーネントの構成のほうです。
  67. 5:36共有したい範囲が広がったら親へ、狭い範囲で閉じるならその部品の中へ、と役割で決めてください。
  68. 5:43コンテキストで渡す方法も、第二回で扱った通りです。
  69. 5:47補足として、関数の参照について触れます。
  70. 5:50この実装で返すトグルなどの関数は、レンダーのたびに新しく作られます。
  71. 5:55通常のボタンへ渡すだけなら、これで問題ありません。
  72. 5:59もし、関数の参照が変わらないことを前提にする仕組みへ渡すなど、安定性が必要な場面では、
  73. 6:03ユースコールバックで包むことを検討します。
  74. 6:08ただし、付ければ常に速くなるというものではありません。
  75. 6:12第五回で学んだメモ化と同じく、必要性が見えてから追加するのが原則です。
  76. 6:18まずはシンプルな実装を保ち、困る場面が来たら、その理由と一緒に見直してください。
  77. 6:24動作確認の手順を整理します。
  78. 6:26まず初期状態では閉じていること、ボタンを一回押すと開くこと、もう一回押すと閉じることを順に確かめます。
  79. 6:33次に、ユーストグルにトゥルーを渡した場合は、最初から開いていることを確認します。
  80. 6:39さらに、同じフックを使う説明欄を二つ用意し、片方だけを操作しても、もう片方の状態が変わらないことを確かめてください。
  81. 6:48今回、この開閉の遷移や初期値、独立性といった考え方をノード・ジェーエスで実行し、
  82. 6:53二十二件すべてが記事の期待と一致することを確認しました。
  83. 6:58型チェックでもエラーはありませんでした。
  84. 7:01ボタンの文言や属性が状態に追従しているかも、あわせて見るポイントです。
  85. 7:06まとめです。
  86. 7:07開閉のような、状態と操作の組になる処理は、カスタムフックにまとめると、どの画面でも同じ形で再利用できます。
  87. 7:15状態は呼び出しごとに独立し、共有したいときは親で一回呼んで渡す、という置き場所の判断もあわせて押さえてください。
  88. 7:24一方、ブラウザー上でボタンを押して表示の切り替えを目で確認する作業は、実行環境の制約で未実施です。
  89. 7:31気になる方は、手元のバイト環境で記事の二つのファイルを保存して試してみてください。
  90. 7:38次回は、エーピーアイのゲット処理を共通化する、フェッチジェイソンを学びます。
  91. 7:44お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

useStateを独自Hookにまとめ、開閉・明示的な開く／閉じる操作と、呼び出しごとの状態の独立性を学びます。

解説記事・サンプルコードを読む：ReactのカスタムフックuseToggle：開閉状態を再利用する →