Blazor WebAssembly を触ってみる - その③コードを少し書いてみる

[Blazor WebAssembly を触ってみる - その①環境を整える、サンプルを動かす
](https://qiita.com/chyonek/items/e8e482bdc0f9b3cb1e42)

[Blazor WebAssembly を触ってみる - その②デバッグしてみる](https://qiita.com/chyonek/items/ef76e97d18904053fcf6)

の続きです。

# コンポーネント (Razor コンポーネント)
コードを書いて見る前に少し用語を勉強しておく。
今日の参考資料はこれ。

ASP.NET Core Blazor の概要
https://docs.microsoft.com/ja-jp/aspnet/core/blazor/?view=aspnetcore-3.1#blazor-webassembly



- Blazor のアプリはコンポーネント (.razor ファイル) によって構成される。コンポーネントってのは「ページ、ダイアログ、データ エントリ フォームなどの UI の要素」らしい。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320008/2f5b69bc-7012-2e5c-3cfd-90cc48dfb923.png)

- C# コードに HTML マークアップを結合するための [Razor 構文](https://docs.microsoft.com/ja-jp/aspnet/core/mvc/views/razor?view=aspnetcore-3.1)で記述する


# 触ってみる
## Before
一部コメントアウトしましたが、サンプルでは文字を表示するだけのシンプルな HTML のコードでした。

```Pages\Index.razor
@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<!--<SurveyPrompt Title="How is Blazor working for you?" /> -->
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320008/0d3f3b8e-6ee0-c864-1139-840ea44ff656.png)



##After
Dialog.razor という子コンポーネントのファイルを作成します。
ここでは HTML の div 要素とその中の変数 Title や ChildConponent、onclick 時に呼ばれそうな OnYes 関数の定義などを記述しています。


```Pages\Dialog.razor
<div>
    <h1>@Title</h1>

    @ChildContent

    <button @onclick="OnYes">Yes!</button>
</div>

@code {
    [Parameter]
    public string Title { get; set; }

// 親子間のコンポーネントの受け渡しに不可欠で名前変更はできない (これや @ChildContent がないと実行時にエラー)
    [Parameter]
    public RenderFragment ChildContent { get; set; }

    private void OnYes()
    {
        Console.WriteLine("Write to the console in C#! 'Yes' button was selected.");
    }
}
```

この div 要素やボタンを配置してくれそうな子コンポーネント Dialog.razor を親コンポーネント Index.razor で表示します。

```Pages\Index.razor
@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<!--<SurveyPrompt Title="How is Blazor working for you?" />-->

<!-- コンポーネントの名前、変数 Title に渡す値など Dialog.razor に渡す値を記述 (関数の引数みたい) -->
<Dialog Title="Blazor">
    Do you want to <i>learn more</i> about Blazor?
</Dialog>
```

何やら表示されました。これが Dialog.razor で記述した箇所ですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320008/05b88ea3-d5da-33fb-95fb-a860cc2cc712.png)

Yes! ボタンをクリックすると、Dialog.razor で定義した OnYes() 内の Console.WriteLine("Write to the console in C#! 'Yes' button was selected."); が実行され、Console に出力されました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320008/5ef22ebe-645a-d8c2-0c08-2cc5d0bc6b65.png)

HTML 表示は以下ですが、blazor.webassembly.js を指定しているくらいです。
blazor.webassembly.js は .NET ランタイム、アプリ、およびアプリの依存関係のダウンロード、アプリを実行するランタイムの初期化を行うようです。

```
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>blazorApp1</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
</head>

<body>
    <app>Loading...</app>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
</body>

</html>
```

今日はここまで。