コンポーネントの概要を学ぶ

Blazor WebAssembly アプリケーションで 画面の表示を行う部分は、 コンポーネントを利用して作成します。 コンポーネントは 各ページに対応したコンテンツや HTML の一部分となる パーツを作成することができます。 また、画面全体のレイアウトを決定する レイアウトファイルとしても 利用することができます。 コンポーネントの中で 更にコンポーネントを 表示することができるので、 パーツを使い廻しすることができます。 ウェブサイトのヘッダーやフッター ナビゲーションなどの共通パーツを 再利用することができます。 コンポーネントごとに HTML ファイルと CSS を分離することができます。 そのため CSS の可読性を 上げることができます。 データバインディングの 機能が利用できるので、 値の変更などのコードを シンプルに記述することができます。 イベントの仕組みも利用できるので ユーザーの操作や特定の状態の変更に対して プログラムコードを シンプルに記述することができます。 画面は Index.razor という コンポーネントファイルです。 @page などの @ から始まる razor 構文を利用することができます。 razor 構文を利用することで HTML にシンプルに 値を埋め込むことができます。 そして、 Hello などの自作のコンポーネントを 読み込むことができます。 この部分は HTML には Hello というタグはありません。 これは自作のコンポーネントです。 Hello.razor を 確認してみましょう。 このように p タグで Helloと書かれており、 ここにさらに Component という 別のコンポーネントを 読み込むということもできます。 このようにコンポーネントでは コンポーネントの中で 別のコンポーネントを読み込むという 仕組みを利用して再利用性を高めています。