【ASP.NET】Web未経験者がASPのMSDNチュートリアルやってみる（モデルの追加）

タイトル通り、Web未経験のエンジニアがASP.NETでMSDNのチュートリアルに沿って慣れてみようという内容です。
筆者のステータスはこんな感じ。

• VB.NET経験あり
• C#独学
• Web未経験（何それおいしいの？）

時代はWebだということで、手を出してみます。
手を出すチュートリアルはコチラ。

今回はMSDNのチュートリアル「ASP.NET Core で Razor ページ アプリにモデルを追加する」を進めます。

尚、前回実施したチュートリアルの導入編の続きから始めます。

作成の流れ

まずは今回の作成の流れを確認します。MSDNのチュートリアルに沿って次の様に進めます。

1. データモデルの追加
2. モデルのスキャフォールディング
3. 初期移行
4. 実行

今回のチュートリアルも簡単そうに見えますね。

1. データモデルの追加

まずはデータモデルの追加を実施します。
しかし、初めてASP.NETを触る人にとっては、「データモデルって何？」ってなります。私もなりました。
MSDNのチュートリアルでは、

アプリのモデル クラスでは、Entity Framework Core (EF Core) を使用して、データベースを操作します。

とあります。いまいちピンときません。ちょっと調べてみました。

寄り道①モデルって何？

気になったので調べてみましたが、MSDN特有の言い回しに辟易してしまったので、MSDN以外のサイトも調べてみました。
その中で、【ASP.NET MVC入門その2】ASP.NET MVCでModelクラスの実装のページにモデルの説明があり、そこには、

ASP.NET MVCのModelとは、データのやりとりをするためのクラスです。

と説明してくれています。
なるほど、データベースを操作するためのクラスということですね。
VB.NETで言うところの「OleDbConnection クラス」みたいなものでしょうか。
※間違ってたらすみません。

寄り道②MVCって何？

モデルを調べていて気になったのがもう一つ。MVCという単語です。「ASP.NET モデル」で検索すると、「MVC」という単語が必ずセットでついてきます。
MVCを調べて見ると、MVCについてマイクロソフトが説明しています。

どうやら、MVCというのは、Model-View-Controllerの略で、アーキテクチャのデザインパターンの一つであり、UI作成のために使われるようです。

• Model…データ
• View…ユーザー インターフェイス
• Controller…アプリケーション ロジック

なるほど。
忘れてしまいそうですが、これはチュートリアルです。
チュートリアルで言ってる「データモデルの追加」というのは、「データをやり取りするためのコーディングをしましょう」ということですね。

気を取り直してデータモデルの追加

というわけでチュートリアルの「データモデルの追加」に戻ります。
MSDNの記載から流れを確認すると、

1-1. 「Models」フォルダを追加
1-2. 「Movie」クラスを追加
1-3. 「Movie」クラスにプロパティを作成

となっています。

1-1.「Models」フォルダを追加

まずは、Visual Studio で前回のチュートリアルで作成したプロジェクト「RazorPagesMovie」を開きます。

RazorPagesMovie プロジェクトを右クリックして、コンテキストメニューから「追加」→「新しいフォルダー」を選択し、プロジェクト内にフォルダを追加します。

すると、「新しいフォルダー」がソリューションエクスプローラー上に作成されます。

このフォルダの名前を、「Models」に変更します。

1-2.「Movie」クラスを追加

「Models」フォルダを追加したら、「Movie」クラスを追加します。
「Models」フォルダを右クリックしてコンテキストメニューを開き、「追加」→「クラス」を選択します。

「新しい項目の追加」画面がポップアップされるので、「クラス」を選んで、名前を「Movie」にして、追加をクリックします。

すると、ソリューションエクスプローラーの「Models」フォルダの中に「Movie.cs」が作成されます。

1-3.「Movie」クラスにプロパティを作成

「Movie」クラスを作成したら、今度は「Movie」クラスにプロパティを作成します。
ひとまず、MSDNのソースコードをそのままコピペ。

using System;
using System.ComponentModel.DataAnnotations;

namespace RazorPagesMovie.Models
{
    public class Movie
    {
        public int ID { get; set; }
        public string Title { get; set; }

        [DataType(DataType.Date)]
        public DateTime ReleaseDate { get; set; }
        public string Genre { get; set; }
        public decimal Price { get; set; }
    }
}

プロパティは、

• ID…ID
• Titel…タイトル
• ReleaseDate…発売日
• Genre…ジャンル
• Price…価格

と言うところでしょうか。気になるのはこの1行。

[DataType(DataType.Date)]

これはプロパティに対して型を指定しているのですが、対象となるプロパティは、

public DateTime ReleaseDate { get; set; }

だけです。1行にまとめてもエラーが出ないので、こんな感じに書くと分かりやすいですね。

[DataType(DataType.Date)]public DateTime ReleaseDate { get; set; }

2.モデルのスキャフォールディング

データモデルのプロパティを作成したら、モデルのスキャフォールディングを行います。
…スキャフォールディングという、見たことも聞いたこともない単語が登場しました。

スキャフォールディングって何？

というわけで調べてみましょうスキャフォールディング。
CodeZineで分かりやすくまとめられています。

Scaffolding（スキャフォールディング）とは、データモデルとなる型を元に、いわゆるCRUD（Create/Read/Upadate/Delete)と呼ばれる追加、読込、変更、削除を行う画面とそのコードを自動で生成する機能のことです。
Scaffoldingを和訳すると「足場」という言葉であり、その名のとおり少ない手間でアプリケーションの「足場」となる大枠の構造を作ることを目的としています。従って、Scaffoldingは完全なアプリケーションを作るための機能ではない、ということは認識しておく必要があります。

なるほど。
作成したモデルを元にして、データ操作に必要な機能を自動で作ってくれるみたいですね。
ただし、大枠の構造を作るだけで、他の機能については自分で実装する必要があるようです。

スキャフォールディングしてみる

ではスキャフォールディングを実行してみます。
まず、ソリューションエクスプローラーの「Pages」フォルダを右クリックしてコンテキストメニューを開き、「追加」→「新しいフォルダー」を選択して、「Movies」フォルダを作成します。

こんな感じに「Pages」「Movies」フォルダを作ります。

「Pages」フォルダの中に「Movies」フォルダを作成したら、「Movies」フォルダを右クリックしてコンテキストメニューを開き、「追加」→「新規スキャフォールディングアイテム」をクリックします。

すると、「新規スキャフォールディング アイテムの追加」のポップアップが出て来るので、**「Entity Framework を使用する Razor ページ (CRUD)」**を選択して追加ボタンをクリック。

またまた少し寄り道を。
CRUDというまたまた新しい単語が出てきていますが、これは、

• Create（作成）
• Read（参照）
• Update（更新）
• Delete（削除）

の頭文字を取ったもので、データベース操作の基本的な機能です。DBMSにおけるDML（データ操作言語）に相当するものです。

話を戻して、「新規スキャフォールディング アイテムの追加」画面で、**「Entity Framework を使用する Razor ページ (CRUD)」を選択して追加ボタンをクリックしたところです。
すると、「Entity Framework を使用する Razor ページ (CRUD)の追加」というポップアップが出てきます。

初期状態だと上図の様に空っぽなので、「モデル クラス」と「データ コンテキスト クラス」**を設定します。
**「モデル クラス」は、リストからMovie (RazorPagesMovie.Models)**を選択します。
**「データ コンテキスト クラス」**は、右にある「+」ボタンをクリックすると「データコンテキストの追加」のポップアップ画面が出て来るので、「新しいデータコンテキスト型」に「RazorPagesMovie.Data.RazorPagesMovieContext」を設定します。

MSDNのチュートリアルでは、

RazorPagesMovie.Models.RazorPagesMovieContext を RazorPagesMovie.Data.RazorPagesMovieContext に変更します。

とありますが、チュートリアル通りに進めると、「RazorPagesMovie.Data.RazorPagesMovieContext」がデフォルトで入っているはずです（私はそうでした）。
下の画像の様に設定したら追加ボタンをクリックします（チェックボックスは何も触らない）。

すると、「スキャフォールディングしています…」という画面が出て来るので、しばらく待ちます。

スキャフォールディングが完了すると、ファイルとフォルダが作成されます。
まず、「Movies」フォルダ内には次のcshtmlファイルが作成されています。

• Create.cshtml
• Delete.cshtml
• Details.cshtml
• Edit.cshtml
• Index.cshtml

ソリューションエクスプローラーで見るとファイルが作成されていることが分かります。

また、RazorPagesMovieプロジェクトの直下に「Data」フォルダが作成され、その中に RazorPagesMovieContext.cs ファイルが作成されます。

これでスキャフォールディングは完了し、DB操作に必要がhtmlファイルが生成されました。

3. 初期移行

スキャフォールディングが完了したら、「パッケージ マネージャー コンソール」から初期移行を実施します。
といっても、MSDNのチュートリアルではコンソール画面にコマンドを入力して実行しているだけなので簡単です。

コマンドの実行

Visual Studio のメニュー画面の「ツール」を開き、「NuGetパッケージマネージャー」→「パッケージ マネージャー コンソール」を選択します。

すると、Visual Studio の画面の下に「パッケージ マネージャー コンソール」が出現します。

上の画像の赤枠で囲った部分が「パッケージ マネージャー コンソール」です。
ここに、コマンドを入力します。
まずは、
　Add-Migration InitialCreate
と入力して、Enterキーを押下。

「Build succeeded.」と出ていれば完了です。

次に、
　Update-Database
と入力して、Enterキーを押下。

こちらも「Build succeeded.」と出ていれば完了です。

そして上記のコマンドを実行すると、ソリューションエクスプローラーに「Migrations」フォルダが作成されます。

…何か気が付いたら作成されていたので、MSDNのチュートリアルに書かれていることを忖度しながら解読してみます。
まず、Add-Migration InitialCreate コマンドの実行で、「Migrations」フォルダが作成され、その中に「yyyymmddhhmiss_InitialCreate.cs」と「RazorPagesMovieContextModelSnapshot.cs」の2ファイルが作成されます。
その次の、Update-Database コマンドの実行で、「yyyymmddhhmiss_InitialCreate.cs」のUpメソッドが実行されます。

protected override void Up(MigrationBuilder migrationBuilder)
{
    migrationBuilder.CreateTable(
        name: "Movie",
        columns: table => new
        {
            ID = table.Column<int>(nullable: false)
                .Annotation("SqlServer:Identity", "1, 1"),
            Title = table.Column<string>(nullable: true),
            ReleaseDate = table.Column<DateTime>(nullable: false),
            Genre = table.Column<string>(nullable: true),
            Price = table.Column<decimal>(nullable: false)
        },
        constraints: table =>
        {
            table.PrimaryKey("PK_Movie", x => x.ID);
        });
}

なるほど、このUpメソッドでテーブルを作成しているんですね。

依存関係挿入に登録されるコンテキスト

MSDNのチュートリアルの順番に進めると、唐突に「依存関係挿入に登録されるコンテキストを調べる」が出てきます。
何だこれはという感じですが、

スキャフォールディング ツールによってデータベース コンテキスト context が自動的に作成され、依存関係挿入コンテナーに登録されました。

ということらしい。
長々と書かれていますが、スキャフォールディングではStartup.ConfigureServices メソッドに、モデルとして作成した「Movie」の情報を調整するように追記してくれているみたいです。
そしてもう一つは「Data」フォルダにある RazorPagesMovieContext.cs の話で、RazorPagesMovieContextクラス内で、プロパティが設定されている Movie クラスをデータセットとして扱うことが可能になっているようです。

4.実行

というわけで実行してみます。F5キーでもIIS Expressボタンでもどちらでも大丈夫です。

とりあえず立ち上がりました。
で、ここから、URLの末尾に「/movies」を加えてページ遷移します。

もし、https://localhost:xxxxx/movies （xxxxxはポート番号）にジャンプしない場合は、一度終了して、ビルドしてから再実行してみて下さい。
※私はジャンプしなかったのでビルドして再実行したら出来ました。

データを登録してみます。
チュートリアルの通りにポチポチと入力。

※コピペ用にテキスト貼っておきます。

• Title：The Good, the bad, and the ugly
• Genre：Western
• Price：1.19

Createボタンをクリックし、登録されていることを確認。

大丈夫そうですね。

参考