※この記事は、Blazorを学習中の「ががん」とChatGPTとの質疑応答をもとに、ChatGPTこと「ドイ」が構成・執筆しています。
—
Blazor Web Appでダッシュボードの外枠を作りました。
ただ、プロジェクトの中には多くのファイルがあり、最初からすべてを理解しようとすると少し大変です。
そこで今回は、現時点でどうしても覚えておきたいファイルだけに絞って整理します。
現在のプロジェクト構成
現在の構成は、次のようになっています。
まず覚えておきたいのは次の構成です。
GaganLog.Web
├─ wwwroot
├─ Components
│ ├─ Layout
│ │ ├─ MainLayout.razor
│ │ └─ NavMenu.razor
│ ├─ Pages
│ │ └─ Home.razor
│ ├─ GadgetCard.razor
│ ├─ App.razor
│ └─ Routes.razor
└─ Program.csすべてのファイルを覚える必要はありません。
まずは、画面がどのような順番で組み立てられているかをつかめれば十分です。
画面が表示されるまでの流れ
現在のダッシュボードは、大まかに次の流れで表示されます。
Program.cs
↓
App.razor
↓
Routes.razor
↓
MainLayout.razor
↓
Home.razor
↓
GadgetCard.razorそれぞれの役割を簡単に整理します。
Program.cs
Program.cs は、アプリケーションを起動するための設定を行うファイルです。
現在のプロジェクトでは、Blazor Web AppをInteractive Serverとして動かすための設定が書かれています。
細かい内容は、今の段階ですべて覚えなくても問題ありません。
まずは、アプリを起動するための入口だと考えておきます。
App.razor
App.razor は、アプリ全体の土台になるファイルです。
Bootstrapや共通CSS、Blazorを動かすためのスクリプトなどを読み込んでいます。
通常のHTMLでいうと、ページ全体を囲む部分に近い役割です。
Routes.razor
Routes.razor は、アクセスされたURLに応じて、表示するページを決めます。
たとえば、トップページへアクセスした場合は Home.razor が表示されます。
URLとページを結び付ける役割だと考えると分かりやすいです。
MainLayout.razor
MainLayout.razor は、複数のページで共通して使う画面の外枠です。
現在のダッシュボードでは、左側のメニューと、右側のメイン表示領域をまとめています。
ページの内容は、MainLayout.razor の @Body に表示されます。
つまり、左メニューなどの共通部分はそのままで、中央のページだけが切り替わります。
NavMenu.razor
NavMenu.razor は、左側のメニューを担当します。
初期テンプレートにあったCounterとWeatherへのリンクは、現在メニューから消しています。
ただし、Counter.razor と Weather.razor のページファイル自体は残っています。
メニューからリンクを消すことと、ページを削除することは別です。
Home.razor
Home.razor は、現在のダッシュボード画面です。
この中から GadgetCard を6回呼び出し、6枚のダミーカードを並べています。
<GadgetCard Title="Gadget 1" />
<GadgetCard Title="Gadget 2" />
<GadgetCard Title="Gadget 3" />
<GadgetCard Title="Gadget 4" />
<GadgetCard Title="Gadget 5" />
<GadgetCard Title="Gadget 6" />トップページの中に、同じカード部品を複数並べている構成です。
GadgetCard.razor
GadgetCard.razor は、ダッシュボードに表示するカード1枚分の部品です。
呼び出すときに Title を渡すことで、カードごとに異なるタイトルを表示できます。
<GadgetCard Title="Gadget 1" />同じ画面を何度も直接書くのではなく、共通部分を部品として切り出して再利用しています。
Blazorでは、このような画面部品をコンポーネントと呼びます。
.razor.css
.razor.css は、それぞれのRazorコンポーネント専用の見た目を定義するファイルです。
現在は、主に次のように役割を分けています。
MainLayout.razor.css：画面全体の外枠
NavMenu.razor.css：左メニュー
Home.razor.css：カード全体の並び方
GadgetCard.razor.css：カード1枚の見た目
画面の内容は .razor、見た目は .razor.css と考えておけば、今の段階では十分です。
wwwroot
wwwroot は、画像や共通CSSなど、ブラウザから直接使うファイルを置く場所です。
現在は、アプリ全体に適用する app.css やBootstrapなどが入っています。
今回覚えておくこと
今回、最低限覚えておきたいのは次の関係です。
MainLayout.razorが画面の共通外枠を作り、その中にHome.razorが表示される。
Home.razorは、画面部品であるGadgetCard.razorを複数並べている。
プロジェクト内にはほかにも多くのファイルがありますが、必要になったときに調べれば問題ありません。
まずは、ページ、レイアウト、画面部品が分かれていることを覚えておきます。
コメント