課題とスコープ
ヘルプパネルやアコーディオンカードは、デフォルトでは見出しのみを表示し、展開時にコンテンツに応じた高さまで広がります。プロダクト側は、キーボード操作、スクリーンリーダー、古いブラウザの挙動を維持しつつ、auto、max-content、または fit-content へのスムーズなトランジションを求めています。interpolate-size または calc-size() をどのように使用し、その結果をどのように検証するかを説明してください。
これはフロントエンド、デザインシステム、パフォーマンスの面接に適したテーマです。MDN では interpolate-size は限定的な利用可能性（limited-availability）かつ非 Baseline とマークされています。固有サイズの補間には明示的なオプトインが必要であり、あらゆる環境で安全な万能のアニメーション手法ではありません。
面接官が評価するポイント
- 長さの値（length values）と固有サイズキーワードの境界を理解しているか。
interpolate-sizeが継承され、グローバルなオプトインが子孫要素に影響を与えることを把握しているか。interpolate-sizeとcalc-size()を区別できているか。- 非対応ブラウザでも実用的な静的状態と視覚効果の抑制（reduced-motion）動作が維持されているか。
- 見た目の滑らかさだけでなく、コンテンツの変更、レイアウトシフト、フォーカス順序、パフォーマンスをテストしているか。
最初に確認すべき明確化の質問
以下の点を確認します。
- 対象となるブラウザと最小バージョンは何か。また、プログレッシブエンハンスメントは許容されるか。
- これはセマンティックなディスクロージャーコントロールであり、コンテンツはドキュメントおよびアクセシビリティツリー内に残り続ける必要があるか。
- アニメーションするのは高さ、幅、またはその両方か。また、トランジション中にコンテンツが非同期で変化する可能性はあるか。
- コンポーネントは reduced motion、キーボード操作、フォーカスの復元、アニメーション途中の反転をサポートする必要があるか。
指定がない場合は、サポートレベルの異なるモダンな Chromium、Firefox、Safari を想定し、古いブラウザでも固有サイズのスムーズなアニメーションなしで利用可能な状態を維持するものとします。
30秒の回答フレームワーク
まずセマンティックなボタンとコンテンツ領域を構築し、アニメーションはプログレッシブエンハンスメントとして扱います。対応ブラウザでは、ローカルコンテナで interpolate-size: allow-keywords を有効にし、明示的に折りたたまれた長さから max-content または auto へとトランジションさせます。calc-size() の検討は、固有サイズにさらなる計算が必要な場合にのみ行います。非対応ブラウザでは、静的な展開、制限付きの最大高さ、または即時の切り替えを使用します。ビジネス状態がアニメーションの完了に依存してはなりません。最後に、キーボード、スクリーンリーダー、reduced motion、長いコンテンツ、反転動作、および実際のパフォーマンスをテストします。
ステップごとの詳細解説
1. セマンティックな状態の確立
コンテンツ領域を指す aria-expanded を持つボタンを使用し、プロダクトのセマンティクスに合った非表示戦略を選択します。アニメーションは視覚的およびレイアウトのトランジションのみを変更し、コンテンツが操作可能かどうかを決定するものではありません。折りたたまれた領域にフォーカスを取り残してはなりません。非表示のコンテンツ内にフォーカスが残る場合は、トリガーまたは明確に視認できるコントロールへフォーカスを戻します。
2. 補間メカニズムの選択
interpolate-size: allow-keywords は、長さまたはパーセンテージと固有サイズ値の間の補間を有効にしますが、2つの固有キーワード間を直接アニメーションさせるものではありません。固有サイズを計算に組み込む必要がある場合は calc-size() を使用します。通常の calc() では auto や max-content を計算できません。ルートで有効にして無関係なコンポーネントに予期せぬ影響を与えるのではなく、ローカルスコープから開始します。
3. コンテンツとレイアウトの境界の定義
アニメーションするコンテナには、明示的な overflow、最大サイズ、配置の境界を設定します。非同期コンテンツによって目標サイズが変化するため、コンテンツの安定を待つか、再計算するか、最終状態にジャンプするかを選択します。ネストされたグリッド、絶対配置、スクロールコンテナによって、固有サイズが直感と異なる場合があります。実際のコンポーネント構成を測定してください。
4. 互換性とフォールバック
エンハンスメントはサポート検出の配下に配置します。古いブラウザでは、静的な高さ、制限付きの max-height による近似、または即座の切り替えを使用すべきです。フォールバック時でも、読み取り可能なコンテンツ、操作可能なコントロール、フォーカス可能なリンク、わかりやすい閉じた状態を維持する必要があります。CSSサポートの欠如を隠すためだけにJavaScriptで毎アニメーションフレームごとにレイアウトを測定することは避けてください。強制レイアウト（forced layout）や状態パスの増加を招きます。
5. モーション設定とインタラクション
prefers-reduced-motion: reduce の下では、状態とフォーカスのロジックを維持しつつ、トランジションを短縮または削除します。Enter、Space、Tab、Escape の挙動はコンポーネントのコントラクトに従う必要があります。ユーザーがトランジションの途中で再度クリックした場合は、自然に反転させるか新しい目標値へジャンプさせます。並行するアニメーションがレイアウトや aria-expanded をめぐって競合しないようにしてください。
6. 検証指標
短いテキストと長いテキスト、非同期エラー、ローカライズによる折り返しを用いて検証します。レイアウトシフト、ドロップフレーム、スタイルおよびレイアウト時間、インタラクションレイテンシ、フォーカスの視認性、支援技術の出力を測定します。プロパティが無視されるケースを含め、対応環境と非対応環境のパスを比較します。ブラウザ互換性テーブルは製品パフォーマンスを保証するものではありません。メリットは計測によって実証する必要があります。
質の高い模範回答
状態のソースとして aria-expanded を備えたセマンティックなボタンとコンテンツ領域を実装します。CSSアニメーションは単なるエンハンスメントです。対応ブラウザでは、パネルコンテナに interpolate-size: allow-keywords を設定し、明示的な折りたたみ長さから max-content または auto へとトランジションさせます。固有サイズに対する計算が必要な場合は calc-size() を使用します。このプロパティは継承されるため、ルートレベルでの無差別なオプトインは避けます。
非対応環境では、パネルは即座に開くか、制限付きの max-height を使用します。コンテンツとフォーカスはアニメーションの完了に依存しません。reduced motion ではトランジションのみが削除され、状態の変更は維持されます。トランジション中に非同期コンテンツが変化した場合は、文書化されたポリシーに従って安定を待つか、再計算するか、最終状態にジャンプし、aria-expanded の更新は1回にとどめます。
検証では、短いコンテンツと長いコンテンツ、ローカライゼーション、キーボード、スクリーンリーダー、フォーカス復元、反転動作、古いブラウザ、reduced motion を網羅します。パフォーマンスについては、スタイル、レイアウト、フレームレート、レイアウトシフト、インタラクションレイテンシを比較します。エンハンスメントを適用したパスでジッターや互換性の不具合が生じる場合は、セレクタを限定するか無効化します。CSSの実験的機能によってベースラインのユーザビリティを損なってはなりません。
よくある間違い
- 固有サイズキーワードを、すべて相互に補間可能な通常の数値エンドポイントとして扱うこと。
- ルートに
interpolate-sizeを設定し、無関係な子孫要素を意図せず変更してしまうこと。 calc-size()をその境界を説明せずにcalc()の完全な代替品として扱うこと。- 対応ブラウザのみをテストし、プロパティが無視されたときのコンテンツやフォーカスを軽視すること。
- 実際の高さを極端に大きな
max-heightの背後に隠し、アニメーション速度やレイアウトを歪めること。 - JavaScriptのフレームごとにレイアウトの読み取りとスタイルの書き込みを行い、同期的レイアウトを強制すること。
- reduced motion、キーボードによる反転、非同期のコンテンツ変化を無視すること。
- CLS、インタラクションレイテンシ、スクリーンリーダーの状態を測定せずに滑らかなデモを見せること。
フォローアップ質問と回答
なぜ 0 から auto へ直接トランジションできないのですか？
従来の補間には数値のエンドポイントが必要ですが、auto と max-content は固有サイズであるためです。interpolate-size はブラウザのサポート状況に応じて、指定された長さから固有サイズへの補間を可能にします。
calc-size はどのような場合に使用しますか？
余白の追加や制限の適用など、目標値が固有サイズに基づいた計算を必要とする場合に使用します。単に長さから固有サイズへの補間が必要なだけであれば、ローカルな interpolate-size の方が明瞭です。
アニメーション中にコンテンツが増加した場合はどうなりますか？
安定したデータを待つ、目標値を再計算する、または最終状態にジャンプするというポリシーを定義します。スクロール、フォーカス、aria-expanded の一貫性を保ち、素早い連続操作をテストします。
非対応ブラウザではどのように動作しますか？
即時または制限付きの静的展開を維持し、コンテンツ、リンク、キーボード操作の経路が完全な状態を保つようにします。プログレッシブエンハンスメントが機能しない場合でも、視覚的な装飾が失われるだけで、ビジネス上の使いやすさは損なわれないようにすべきです。
アクセシビリティはどのように検証しますか？
キーボードを使用して開く、閉じる、再度開く、フォーカスを移動する操作を行い、支援技術が同じ状態とコンテンツを読み上げることを確認します。reduced motion でも同様に検証し、非表示のコンテンツにアクセス不能なフォーカスが取り残されないようにします。