命令型APIと宣言型APIの使い分け

Reactは宣言型のスタイルを推奨します。ある状態に対してUIがどう見えるべきかを記述すると、ReactがDOMを一致するように調整します。ほとんどの動作は、DOMを直接操作するのではなく、propsと状態を通じて流れます。

このモデルでは、レンダリング結果が手動操作の連続によるものではなく、状態の純粋な関数になるため、UIを予測しやすくなります。

一部のインタラクションは、純粋な宣言型の表現にはなじみません。要素に命令型でフォーカスを移す、正確なタイミングでアニメーションを開始する、サードパーティ製のDOMウィジェットを操作するといった処理は、状態の関数としてきれいに表現できないことがあります。

このような場合に備えて、Reactはrefや命令型ハンドルなどのエスケープハッチを提供しています。ただし、宣言型のpropsでは対応しきれない場合に限って慎重に使用します。

命令型APIにはトレードオフがあります。メソッドを実行して副作用を観測する必要があるためテストが難しく、Reactアプリを追いやすくしている一方向データフローを壊す可能性もあります。

また、命令型の呼び出しは、明確な状態からUIへの対応関係に動作を集約するのではなく、イベントハンドラー全体に動作を分散させがちです。その結果、保守のコストが増加します。

宣言型APIを優先し、命令型APIはインタラクションや計測のためにだけ使います。対象となるのは、フォーカス、スクロール、アニメーション、メディア再生、サイズや位置の読み取りなどです。

状態からレンダリング結果への対応としてモデル化できるものは、そうしてください。適切な状態として表現しにくい一時的なアクションであれば、命令型ハンドルが適しています。

宣言型モーダルは親コンポーネントが管理するisOpen propに基づいてレンダリングされるため、表示状態は状態によって決まります。命令型モーダルはopenとcloseメソッドを公開し、自身の状態をハンドルの背後に隠します。

宣言型の実装はReactのデータフローに適しているため通常はこちらが推奨されます。一方、命令型の実装は、分散したイベント駆動コードから表示を開始する場合に便利です。

フォームのkey propを変更すると、Reactがフォームをデフォルト状態で新しく再マウントするため、宣言型にリセットできます。命令型の呼び出しは必要ありません。

命令型の方法では、ハンドルにresetメソッドを公開します。key propを使う方法は、手動で状態を消去するのではなくReactの再調整に任せるため、よりすっきりすることが多いです。

Next.jsのrouterは、push、replace、prefetchなどの命令型メソッドを公開します。遷移しそうなルートを先にプリフェッチするのは、レンダリング状態の一部ではなくアクションなので、命令型の呼び出しが自然に適しています。

これは、処理が本質的に特定の時点で発生するアクションである場合、慣用的なReactツールでさえ命令型APIを使うことを示しています。

公式のガイダンスでは、refと命令型ハンドルをエスケープハッチ、つまり本当に必要な場合に宣言型モデルの外へ出るためのツールとして位置付けています。機能を構築する際のデフォルトの方法ではありません。

この考え方を保つことで、エスケープハッチの使い過ぎを防げます。propsと状態では動作をきれいに表現できないことを確認してから、エスケープハッチを使います。

命令型ハンドルを追加する前に、次のように考えます。これはUIに対応付けられた状態として表現できるか。できるなら宣言型にします。フォーカス、スクロール、計測、アニメーション、サードパーティ製ライブラリのアクションか。そうであれば、命令型が適切かもしれません。

さらに、公開するAPIが小さくドキュメント化されていること、propで渡せるデータを単に渡すためだけにrefを使っていないことも確認します。

実際のアプリケーションでは、両方のアプローチを組み合わせます。ロジックの大部分は宣言型のままにし、必要な一部のインタラクションにだけ薄い命令型ハンドルの層を設けます。

このバランスを取ることで、コードの予測しやすさとテストのしやすさを保ちながら、宣言型コードだけでは対応できないフォーカス管理、メディア制御、ライブラリ統合にも対応できます。

命令型APIが適切な手段となる場面を選びます。

Reactは、propsと状態によって駆動される宣言型UIをデフォルトとしています。これは予測しやすく、テストもしやすい設計です。命令型ハンドルは、フォーカス、スクロール、アニメーション、計測、サードパーティ製DOMの制御に対応するためのエスケープハッチです。

宣言型モーダルと命令型モーダルを比較し、フォームのリセットにはkey propを優先します。また、Next.jsのrouterでさえアクションに命令型メソッドを使うことを覚えておきましょう。命令型の層は小さく、ドキュメント化し、必要性を明確にしてください。