ASP.net coreの探索　～1 RazorによるMVCアプリケーション ～

<h1>1.ASP.net core とは？</h1>
Microsoftが出しているWebフレームワーク「ASP.net」が
.net coreに対応したものです。
つまり、MacやLinuxに対応したものです。

・ ASP.netとの比較
https://www.fenet.jp/dotnet/column/environment/1344/
上記サイトによると
Core はVB.net, Webフォームに非対応
　　　様々なOS, 開発環境に対応
とのことで、モダンな開発になったイメージがあります。
(すみませんASP.netをやったことがないため、本当の違いがよくわかりません...)

・なぜASP.net coreを？
業務でC#を使用しているため、C#でWebをやってみたいと思った。
.net frameworkは5.0からcoreと統合されるため
今から始めるなら5.0 (.net core)に対応した
ASP.net coreの方がよいかなと思った。
また、最近はSPA(シングルページアプリケーション)を作成するようになり
ページ読み込み時に大量データを処理するため
バックエンドはコンパイル言語の方が、通信早いかなーと
直感的に思ったため。
(実際はどうかわかりません。詳しい方いましたら教えてください。)

<h1>2.このシリーズの予定</h1>

　・まずはRazorテンプレートを用いて
　　MVC(Model-View-Controller)アプリケーションを作成します。
　　(Razorを使わないMVCもありますが、するかは今のところ未定)　　

　・MVCが出来たら、SPAを作成します。
　使用するフロントエンドのフレームワークは、Reactを予定しております。
　（普段はVueをメインで使っているが、ASP.net coreはなぜかVueに未対応...)

　・最後にBlazorを用いたSPAを予定しております。

<h1>3.Webアプリケーションの作成開始</h1>
　以下のような1行掲示板を作成してみる。
![1行掲示板イメージズ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595683/72074e55-b888-2a9e-e8e2-b039d0d42c65.png)
昔よくあったCGI掲示板（チャット？)を令和のWebアプリケーションで
復元してみようと思う。

<h3>プロジェクトの作成</h3>
早速ASP.net coreのプロジェクトを作成してみます。
Visual Studio(今回は2019 バージョン16.8.3)でプロジェクトを作成します。
![プロジェクト作成1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595683/69ebc0f8-70dc-04db-f35a-3d8456d08d15.png)
新しいプロジェクトを作成

![プロジェクト作成2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595683/deb6ff15-81e5-e5d4-2922-4808f9960f3f.png)
「C#」「Web」を選択して
「ASP.NET Core Webアプリケーション」を選択します。

ちなみに...
![プロジェクト作成_VB.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595683/9febfeb9-0d06-d797-072f-a6449f2a4ea3.png)
「Visual Basic」ではやはり出来なかった！

![Rasorプロジェクト作成.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595683/d0693f8a-900a-12fe-ed93-85ba58fdcb05.png)
プロジェクト名と保存先を指定して、プロジェクトを作成します。

![Rasorプロジェクト作成2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595683/e97aae94-e8c4-a82e-8632-c70b6df0c196.png)
ASP.NET Coreのバージョンを選択して（今回は5.0)
「ASP.NET Core Wepアプリ」を選んで作成します。

これでプロジェクト作成が出来ました。
試しにデバッグボタンを押してみましょう。
![debugボタン.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595683/83501911-879f-1aa0-3c1d-08a8f2e04c00.png)
![debugページ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595683/ae43da5a-9918-3323-2f51-dd97de24db99.png)
ブラウザが自動で立ち上がり
ASP.net coreのサンプルページが表示されました。

<h1>4.実装</h1>
実装はMicrosoftのチュートリアルに沿って作成しています。
また、ここからはWebアプリおよびC#の知識がある前提で書きます。
わかりづらい箇所や、変な書き方があったらコメントお願いします。

<h3>Modelの作成</h3>
はじめに、掲示板のデータを操作するためのModelを作成します。
投稿コメントを表すModelの Writingクラスを作成します。
Writingクラスには4つのプロパティを入れます。
・ID: データベースのキー
・Name: 投稿者名
・Comment: 投稿内容
・PostDate: 投稿日時
![Razor_Modelフォルダ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595683/0850fbc7-8da5-f0fd-4169-9712820c9629.png)
プロジェクトに「Model」フォルダを作成し、「Writing.cs」というクラスを作成しします。
「Writing.cs」に以下プロパティを書きます。

```C#:Writing.cs
using System;
using System.ComponentModel.DataAnnotations;

namespace RasorSample.Model
{
    public class Writing
    {
        //データベース上のキー
        public int ID { get; set; }

        //投稿者名
        public string Name { get; set; }

        //投稿内容
        public string Comment { get; set; }

        //投稿日時
        [DataType(DataType.Date)]
        public DateTime ReleaseDate { get; set; }
    }
}
```
ちなみにintのプロパティを最初に定義しないと
「HasNoKey」というエラーが出て、後述のスキャフォールディングが出来ません...

作成したら、Webアプリのスキャフォールディング(Scaffolding)作成します。
スキャフォールディングは「足場」という意味だそうで、
この場合はWebサイトの骨組み・ひな型みたいなものが出来ます。

Pagesフォルダに「BBS」というフォルダを作成します。
（フォルダ名は、Modelで作成したクラスと別の名前にしてください。)
「BBS」を右クリックして
「追加」->「新しいスキャフォールディングアイテム」を選択します。
![2021-02-15 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595683/0a002c45-e917-6094-1c82-625019b00c01.png)
![Rasor_Model作成1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595683/706bd7ca-09a4-9e15-6f86-274708241818.png)
「Entity Frameworkを使用するRazorページ(CRUD)」を選択して追加します。
![Rasor_Model作成2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595683/3faf45b9-53e9-2020-e034-70dc8934e70b.png)
「モデルクラス」をプルダウンして、先ほど作成したWritingクラスを選択します。
「データコンテキストクラス」の「+」をクリックして、データコンテキストクラスを作成します。
（このクラスがよくわからないのですが、恐らくデータを扱うためのクラスなのだと思います。)
![Rasor_Model作成3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595683/50215899-88b5-7b37-2fd5-d822bd5ae3cb.png)


(エラーが出た場合)
プロジェクトのプロパティを開き、
パッケージで「Nugetパッケージを作成」にチェックします。

スキャフォールディングが出来たら、Modelに合うデータベースを
マイグレーションします。
Nuget パッケージマネージャーを開き
![Model_マイグレーション.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595683/d41c1f92-b609-f433-186c-35cfecb413a3.png)

```
Add-Migration InitialCreate
Update-Database
```
と入力します。
(1行ずつしか処理されないため、1行ずつ入力します。)

これでWebアプリケーションの骨組みはできました。

<h1>5.動かしてみた</h1>
プロジェクトをビルドして、Webアプリを見てみましょう。
ブラウザが立ち上がり、localhostメインページが出るので
アドレスに「/BBS」を追加して移動します。
![Model_indexページ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595683/078c3f0d-0fc4-d7af-66e0-8fb69549dbe3.png)
何かテーブルが表示されました。

アドレスを「/BBS/create」にしてみます。(もしくは画面のCreate Newをクリック)
![Model_createページ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595683/9397bd78-bea2-72a0-575f-b83faecb99d9.png)
掲示板の投稿？画面ですね。
データベースにデータを"Create"する画面です。

適当に何か書き込むと
![Model_indexページ_投降後.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595683/27e81714-6327-e0db-7c04-afb23ac0161d.png)
掲示板に書き込みが出来た！

余談ですが、マイグレーションをしないとエラーが出て表示されません。
（何度かやり忘れてエラーが出ました。）

さらに余談ですが、ASP.net coreのデフォルトDBは
SQL Server Express LocalDBという
SQL Serverの簡易版みたいです。
SQLiteのような組み込み形式なんですかね？
（VSCodeやMacでやるとDBがSQLiteになるそうです。)

<h1>6.まとめと次回予告</h1>
RazorでASP.net coreアプリを作る場合
Model -> スキャフォールディング -> DBのマイグレーション
だけでWebアプリが出来てしまった！

...ですが、さすがにこれでは掲示板とはいいがたいので
次回はこのWebアプリを編集して
もっと掲示板らしい掲示板にしていきたいと思います。
あとデータベースをMySQLにしてみたいとおもいます。

<h1>参考文献</h1>
https://docs.microsoft.com/ja-jp/aspnet/core/tutorials/razor-pages/razor-pages-start?view=aspnetcore-5.0&tabs=visual-studio
Microsoftの公式ドキュメント

https://qiita.com/gushwell/items/6d8b801923b639d9ea2e
Microsoftのチュートリアルをわかりやすく整理されています。
ちなみにこの記事の著者・出井先生が出している
『実戦で役立つ C#プログラミングのイディオム/定石&パターン』
はC#をとてもわかりやすく説明しております。
C#プログラマで、特にC#ステップアップしたいけどどうしよう？
と行き詰ってる方にはとてもおすすめの1冊です。

https://www.udemy.com/user/anderson-355/
どうしてもC#がわからないという方
ピーコックアンダーソン先生のC#講座がわかりやすいです。