演習 - Blazor コンポーネントを使用してユーザーインターフェイスを作成する - Training

5 分

この演習では、あなたは宅配ピザの会社で、新しい Blazing Pizza アプリの作成を始めます。会社からは古いサイトの現在の CSS、画像、HTML が提供されており、それを使って作業します。

Note

このモジュールでは、ローカル開発に .NET CLI と Visual Studio Code を使用します。このモジュールを終えたら、Windows の場合は Visual Studio を使用して、また macOS の場合は Visual Studio for Mac を使用して、概念を適用できます。開発を続ける場合は、Windows、Linux、macOS 用の Visual Studio Code を使用できます。

まだ Blazor アプリを作成したことがない場合は、Blazor のセットアップ手順に従って正しいバージョンの .NET をインストールし、マシンが正しく設定されていることを確認してください。 アプリの作成の手順で停止します。

新しい Blazor アプリを作成する

このモジュールでは、.NET 6.0 SDK を使用します。適切なターミナルで次のコマンドを実行して、.NET 6.0 がインストールされていることを確実にします。

dotnet --list-sdks

次のような出力が表示されます。

3.1.100 [C:\program files\dotnet\sdk]
5.0.100 [C:\program files\dotnet\sdk]
6.0.100 [C:\program files\dotnet\sdk]

6 で始まるバージョンが一覧に表示されていることを確実にします。何も表示されない場合、またはコマンドが見つからない場合は、最新の .NET 6.0 SDK をインストールしてください。

.NET では、任意のバージョンの Visual Studio またはターミナルコマンドを使用して新しいプロジェクトを作成できます。以下の演習では、ターミナルと Visual Studio Code を使用した手順を示します。

Visual Studio Code を開きます。
Visual Studio Code で、[表示] を選択して統合ターミナルを開きます。次に、メインメニューで [ターミナル] を選択します。
ターミナルで、プロジェクトを作成する場所に移動します。
dotnet ターミナルコマンドを実行します。
```
dotnet new blazorserver -o BlazingPizza --no-https true -f net6.0
```
このコマンドを実行すると、BlazingPizza という名前のフォルダーに新しい Blazor Server プロジェクトが作成されます。また、HTTPS を無効にすることがプロジェクトに指示されます。
[ファイル]>[フォルダーを開く] を選択します。
[開く] ダイアログで、BlazingPizza フォルダーに移動し、[フォルダーの選択] を選びます。
Visual Studio Code で、プロジェクトをビルドおよびデバッグするために必要なアセットを追加するように求めるメッセージが表示されます。 [はい] を選択します。
Visual Studio Code により、プロジェクトの .vscode フォルダーに launch.json と tasks.json が追加されます。

これらのファイルを使用して、Visual Studio Code のデバッグツールで Blazor アプリを実行してデバッグできます。

セットアップをテストする

アプリの実行にターミナルと Visual Studio Code のどちらを使うかを選ぶことができます。

ターミナルウィンドウで、次のようにして Blazor アプリを開始します。
```
dotnet watch
```
このコマンドを実行すると、アプリがビルドされて開始されます。 watch コマンドは、dotnet にすべてのプロジェクトファイルを監視するように指示します。プロジェクトファイルを変更すると、自動的にリビルドがトリガーされてから、アプリが再起動されます。

コンピューターの既定のブラウザーで、http://localhost:5000 の新しいページが開かれるはずです。
アプリを停止するには、ターミナルウィンドウで Ctrl + C キーを押します。

Visual Studio Code で、プロジェクトを実行してデバッグすることもできます。

Visual Studio Code で F5 を選択します。または [実行] メニューから [デバッグの開始] を選択します。

アプリがビルドされ、新しいブラウザーページが開くはずです。
Visual Studio Code も、アプリを再起動または停止できる [実行とデバッグ] ウィンドウに切り替わります。
Shift + F5 キーを選択して、アプリを停止します。

Blazing Pizza のアセットとスターターファイルをダウンロードする

ここで、GitHub リポジトリからチームの既存の Blazor アプリプロジェクトファイルをクローンします。

エクスプローラーまたは Visual Studio Code を使って BlazingPizza フォルダーを削除します。
ターミナルで、現在の作業ファイルを新しい [BlazingPizza] フォルダーに複製します。
```
git clone https://github.com/MicrosoftDocs/mslearn-interact-with-data-blazor-web-apps.git BlazingPizza
```
アプリの現在のバージョンを実行します。 F5 キーを選択します。

いくつかのピザを作成する

顧客は、Pages/Index.razor コンポーネントで注文したいピザを選んでアレンジできます。このコンポーネントは、アプリのルート URL に応答します。

さらにチームは、アプリ内にモデルを表すクラスも作成しました。現在の PizzaSpecial モデルを確認します。

Visual Studio Code のエクスプローラーで、[モデル] フォルダーを展開します。次に、PizzaSpecial を選びます。

namespace BlazingPizza;

/// <summary>
/// Represents a pre-configured template for a pizza a user can order
/// </summary>
public class PizzaSpecial
{
    public int Id { get; set; }

    public string Name { get; set; }

    public decimal BasePrice { get; set; }

    public string Description { get; set; }

    public string ImageUrl { get; set; }

    public string GetFormattedBasePrice() => BasePrice.ToString("0.00");
}

ピザの注文に Name、BasePrice、Description、ImageUrl があることにご注目ください。

エクスプローラーで [ページ] を展開し、Index.razor を選びます。
```
@page "/"

<h1>Blazing Pizzas</h1>
```
現時点では、タイトル用の 1 つの H1 タグしかありません。スペシャルピザを作成するためのコードを追加します。

<h1> タグの下に次の C# コードを追加します。

@code {
    List<PizzaSpecial> specials = new();

    protected override void OnInitialized()
    {
        specials.AddRange(new List<PizzaSpecial>
        {
            new PizzaSpecial { Name = "The Baconatorizor", BasePrice =  11.99M, Description = "It has EVERY kind of bacon", ImageUrl="img/pizzas/bacon.jpg"},
            new PizzaSpecial { Name = "Buffalo chicken", BasePrice =  12.75M, Description = "Spicy chicken, hot sauce, and blue cheese, guaranteed to warm you up", ImageUrl="img/pizzas/meaty.jpg"},
            new PizzaSpecial { Name = "Veggie Delight", BasePrice =  11.5M, Description = "It's like salad, but on a pizza", ImageUrl="img/pizzas/salad.jpg"},
            new PizzaSpecial { Name = "Margherita", BasePrice =  9.99M, Description = "Traditional Italian pizza with tomatoes and basil", ImageUrl="img/pizzas/margherita.jpg"},
            new PizzaSpecial { Name = "Basic Cheese Pizza", BasePrice =  11.99M, Description = "It's cheesy and delicious. Why wouldn't you want one?", ImageUrl="img/pizzas/cheese.jpg"},
            new PizzaSpecial { Name = "Classic pepperoni", BasePrice =  10.5M, Description = "It's the pizza you grew up with, but Blazing hot!", ImageUrl="img/pizzas/pepperoni.jpg" }               
        });
    }
}

@code ブロックでは、おすすめピザを保持するための配列を作成します。ページが初期化されると、6 つのピザが配列に追加されます。

F5 キーを押すか、[実行] を選びます。 [デバッグの開始] を選びます。

アプリがコンパイルされて実行されると、何も変わっていないことがわかります。このコードは、クライアント側 HTML の何によっても使われていません。これを修正してみましょう。
Shift + F5 キーを押すか、[デバッグの停止] を選びます。

Index.razor で、<h1>Blazing Pizzas</h1> を次のコードに置き換えます。

<div class="main">
  <h1>Blazing Pizzas</h1>
  <ul class="pizza-cards">
    @if (specials != null)
    {
      @foreach (var special in specials)
      {
        <li style="background-image: url('@special.ImageUrl')">
          <div class="pizza-info">
              <span class="title">@special.Name</span>
                  @special.Description
                <span class="price">@special.GetFormattedBasePrice()</span>
          </div>
        </li>
      }
    }
  </ul>
</div>

このコードは、ループおよびメンバーアクセスディレクティブと共にプレーン HTML を組み合わせています。 @foreach ループでは、specials 配列内の各ピザに <li> タグを作成します。

ループの内側で、各おすすめピザの名前、説明、価格、および画像が、メンバーディレクティブによって表示されます。

F5 キーを押すか、[実行] を選びます。 [デバッグの開始] を選びます。

これで、お客様がピザを注文できるようにするピザ基本コンポーネントを用意できました。このコンポーネントを以下の演習で改善します。

続行

演習 - Blazor コンポーネントを使用してユーザー インターフェイスを作成する

新しい Blazor アプリを作成する

セットアップをテストする

Blazing Pizza のアセットとスターター ファイルをダウンロードする

いくつかのピザを作成する

フィードバック

演習 - Blazor コンポーネントを使用してユーザーインターフェイスを作成する

Blazing Pizza のアセットとスターターファイルをダウンロードする