【ITニュース解説】Coding Challenge Practice - Question 12

Webアプリケーションは、ユーザーの操作に応じて画面の表示を動的に変えることが多い。例えば、ボタンをクリックするとメニューが開いたり閉じたりする、チェックボックスをオンにすると特定の機能が有効になったりする、といった具合だ。このようなアプリケーションの「今どうなっているか」を示す情報が「状態」である。この状態を管理し、切り替えることは、Web開発において非常に基本的ながら重要な要素となる。

今回取り上げるのは、ReactというJavaScriptのライブラリで利用されるuseToggleというカスタムフックの実装例である。Reactは、ウェブページのユーザーインターフェース（UI）を効率的に構築するための強力なツールだ。その中でも「フック」は、Reactの特定の機能、特にコンポーネントというUIの部品が持つ「状態」を、関数コンポーネントで使えるようにする特別な関数を指す。そして、「カスタムフック」は、開発者が自分で特定のロジックをまとめ、複数のコンポーネントで再利用できるようにする仕組みのことだ。これにより、コードの重複を減らし、保守性を高めることができる。useToggleは、「オン」と「オフ」のように二つの状態を簡単に切り替えるためのロジックをまとめたカスタムフックである。

このuseToggleフックは、export function useToggle(on: boolean): [boolean, () => void]という形式で定義されている。これは、「useToggleという名前の関数で、onという真偽値（trueかfalse）の初期値を受け取り、真偽値と、何も引数を受け取らず何も返さない関数の配列を返す」という意味だ。具体的にどのように実装されているかを見ていこう。

まず、フックの内部では、現在の状態を保持するためにReact標準のuseStateフックが使われる。コードではconst [value, setValue] = useState(on)と記述されている。useStateフックは、引数として状態の初期値を受け取り、配列を返す。この配列の最初の要素は現在の状態の値（ここではvalue）、二番目の要素はその状態を更新するための関数（ここではsetValue）である。つまり、useToggleフックが呼び出されたときに渡されるonという真偽値が、このvalueの初期値として設定される。例えば、useToggle(false)と呼び出せば、valueは最初はfalseになる。

次に、このvalueの状態を切り替えるための関数を定義する。それがtoggle関数である。コードではconst toggle = () => { setValue(!value) }と書かれている。このtoggle関数は、引数を何も取らず、現在のvalueを反転させるロジックを含んでいる。!valueという部分は、JavaScriptにおける論理否定演算子であり、もしvalueがtrueであればfalseに、falseであればtrueに変換する。そして、その反転した値をsetValue関数に渡すことで、valueの状態を更新する。setValueが呼ばれると、Reactはコンポーネントを再レンダリングし、画面表示が新しい状態に合わせて更新される。

最後に、useToggleフックはreturn [value, toggle]という形で、現在の状態を表すvalueと、状態を切り替えるためのtoggle関数の二つを配列として返す。この戻り値を受け取る側（フックを利用するコンポーネント）は、このvalueを使って画面に現在の状態を表示したり、toggle関数を呼び出して状態を変化させたりできるようになる。

実際にこのuseToggleフックがどのように使われるかを見てみよう。提供された例では、Appという名前のコンポーネントで利用されている。

export function App() { const [on, toggle] = useToggle(false); return (...) }

ここでは、Appコンポーネントの内部でuseToggle(false)を呼び出している。これは、useToggleフックを初期状態がfalse（オフ）で起動するという意味だ。フックは先ほど説明したように、現在の状態と、状態を切り替える関数を配列で返すため、const [on, toggle]という記述によって、onという変数には現在の状態（真偽値）が、toggleという変数には状態を切り替える関数がそれぞれ格納される。

Appコンポーネントの表示部分（returnの中）では、<p>{on ? "On" : "Off"}</p>という記述がある。これは「三項演算子」というJavaScriptの構文を使っており、「もしonがtrueなら"On"と表示し、falseなら"Off"と表示する」という意味になる。これにより、現在の状態に合わせてテキストが「On」または「Off」に切り替わる。

そして、<button onClick={toggle}>Toggle</button>という部分がポイントだ。ここでは、「Toggle」というテキストのボタンが配置されており、このボタンがクリックされると、onClick属性に指定されたtoggle関数が呼び出される。toggle関数が呼び出されると、useToggleフックの内部で実装されているsetValue(!value)のロジックが実行され、onの状態が反転する。状態が更新されると、Appコンポーネントが再レンダリングされ、<p>タグのテキストも新しいonの状態に合わせて「On」または「Off」に切り替わる。このようにして、ボタンをクリックするたびに状態が切り替わり、画面表示がそれに追随するというインタラクティブな動きが実現される。

このuseToggleフックは、Webアプリケーションで頻繁に登場する「オン/オフ」のような二値の状態管理を、シンプルかつ再利用可能な形で実現する良い例である。useStateのような基本的なReactのフックを組み合わせ、特定の目的を持つカスタムフックを作成することで、開発者はコードをより整理し、機能ごとの責任を明確にすることができる。これはシステムエンジニアとして、効率的で保守しやすいソフトウェアを開発するための重要なアプローチの一つだと言える。このような小さいながらも強力なパターンを理解し、活用していくことが、より複雑なシステムを構築する上での基盤となるだろう。