HowTo コンポーネント
「ハウツー: コンポーネント」は、一般的な UI パターンを実装するウェブ コンポーネントのコレクションです。これらの実装は、教育用のリソースを提供することを目的としています。さまざまなコンポーネントの実装について詳細にコメントを付けているので、そこから学びましょう。これらは明示的に UI ライブラリではないため、本番環境で使用しないでください。
コンポーネント
<howto-checkbox>: フォーム内のブール値オプションを表します。チェックボックスの最も一般的なタイプはデュアルタイプで、ユーザーはオンとオフの 2 つの選択肢を切り替えることができます。<howto-tabs>: 表示されるコンテンツを複数のパネルに分割して制限します。<howto-tooltip>: 要素がキーボード フォーカスを受け取るか、要素にカーソルを合わせたときに、その要素に関連する情報を表示するポップアップ。
目標
その目的は、アクセス性、パフォーマンス、保守性、スタイル設定が容易な堅牢なコンポーネントを作成するためのベスト プラクティスを示すことです。各コンポーネントは完全に自己完結しているため、リファレンス実装として機能します。
ユーザー補助
コンポーネントは WAI ARIA Authoring Practices に厳密に従っています。WAI ARIA Authoring Practices は、Accessible Rich Internet Application 標準である ARIA の説明と説明のガイドです。ARIA になじみがない場合は、WebFundamentals の概要をご覧ください。各コンポーネントは、作成プラクティスの関連するセクションにリンクしています。厳密には必須ではありませんが、コードを詳しく見ていく前にオーサリング プラクティスのセクションを読むことをおすすめします。
パフォーマンス
ウェブ開発では、「パフォーマンス」という用語はさまざまなものに適用できます。<howto> のコンテキストでは、パフォーマンスとは主に、モバイル デバイスであっても 60 fps で一貫して実行されるアニメーションを指します。
視覚的な柔軟性
可能な限り、コンポーネントはスタイル設定されません（レイアウトを除く、選択状態またはアクティブ状態を示すため）。これは、実装の柔軟性と焦点を絞るためです。装飾に時間を費やさずに、コンポーネントの機能に絶対に必要なコードだけをコードに記述できます。コンポーネントが機能するためにスタイルが必要な場合は、その理由を説明するコメントがそのスタイルに示されます。
保守しやすいコード
HowTo: コンポーネントはリファレンス実装であるため、大量のコメントが入った、読みやすく理解しやすいコードの記述に余分な時間を費やしました。
目標以外
ライブラリ / フレームワーク / ツールキットになる
<howto> コンポーネントは、本番環境で使用することを目的としていないため、npm、bower、その他のプラットフォームでは公開されません。簡潔で読みやすいコードにするために、Google では最新の JavaScript API を使用し、Web Components 標準を実装している最新のブラウザをサポートしています。これらの実装を確認した後、独自のニーズに合わせてコードを変更できます。
下位互換性を確保する
コードを直接使用しないでください。より優れた実装が見つかれば、要素の実装と API を大幅に変更する可能性があります。この資料は、ウェブ UI 作成のベスト プラクティスを共有、調査、議論できる最新のリソースです。
完全であること
現時点では、WAI ARIA Authoring Practices に記載されている *すべての *コンポーネントを実装していません（おそらく実装しません）。ただし、他の <howto> コンポーネントで使用されている原則を再利用することで、欠落しているコンポーネントをリーダーが実装できるようになります。