コース: Blazor 基本講座

今すぐコースを受講しましょう

今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。

プロジェクトテンプレートの構成を知る

プロジェクトテンプレートの構成を知る

コース: Blazor 基本講座

プロジェクトテンプレートの構成を知る

Blazor WebAssembly の プロジェクトの構成を 作成した直後のプロジェクトから 確認します。 画面は Visual Studio で Blazor WebAssembly のプロジェクトを 作成した直後の状態です。 ソリューションエクスプローラーに 複数のファイルが生成されています。 プログラムのエントリーポイントとなる Program.cs を確認しましょう。 ここでは WebAssembly ホストビルダーを 作成し、 その設定を行なっています。 プログラムコードの記述を見ると、 クラス名などが ないことに気がつくと思います。 これは .NET6 から利用できる C#10 の機能を利用したものです。 .NET5 版のプロジェクトを作成した場合は このような記述にはなっていません。 プログラムは起動後に www ルート以下にある index.html を表示します。 開くとシンプルな HTML の 記述が行われています。 スタイルシートを読み込み、 _framework/blazor.webassembly.js という js ファイルを読み込んでいます。 この js ファイルが Blazor WebAssembly の動作を 制御しています。 続いて初期ページにアクセスした際に 表示されるページ用のファイルを 確認しましょう。 ソリューションエクスプローラーの Pages の下、 index.razor が そのファイルです。 このように@ページから始まる記述で このファイルが / という URL に 対応していることを示しています。 PageTitle タグに 指定された内容が ページタイトルとなり、 その下に HTML の記述が続きます。 ServeyPrompt というタブは 共通ファイルになっており、 Shared の下にある SurveyPrompt.razor ファイルを 読み込んでいます。 このファイルが / でアクセスした場合の ページのファイルと説明しましたが、 実際にアプリケーションを 実行してみると、 このように画面の左側に ナビゲーションが表示されていることが わかります。 先ほどのファイルには、 このナビゲーションの記述に関する 文字がありませんでした。 こちらの Survey へのリンクは…

目次