【第１回】C#でWEBアプリ【ASP.NET Core】

## はじめに
最近気になるとあるSaaS企業の製品がC#で出来ているとのことだったのでチュートリアルを参考に触ってみる。C#はWindows Formアプリを作った経験はありますが、WEBアプリについては未知の領域です。（そもそもC#でWEBアプリを作れると思っていなかった・・・）

以下を参照して進めていきます。
[チュートリアル: ASP.NET Core で Razor ページ Web アプリを作成する](https://docs.microsoft.com/ja-jp/aspnet/core/tutorials/razor-pages/?view=aspnetcore-3.1)

## インストール
まずはVisual Studioをインストールします。
以下のサイトからお使いのOSに合わせてダウンロード・インストールします。


[・Visual Studio](https://visualstudio.microsoft.com/ja/vs/mac/?rr=https%3A%2F%2Fdocs.microsoft.com%2Fja-jp%2Fvisualstudio%2Fmac%2Finstallation%3Fview%3Dvsmac-2019)

## プロジェクトの作成
[新規]→[.NET Core]→[アプリ]→[Webアプリケーション]

<img width="895" alt="スクリーンショット 2020-03-16 21.51.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557038/26012cf5-f22b-5af0-2ec2-592ea843bafb.png">

任意のプロジェクト名を入力します。
今回は「todo」とします。

<img width="944" alt="スクリーンショット 2020-03-16 21.53.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557038/2a303bac-ea34-eef9-534a-20b2bbb8d425.png">

※キャプチャは「ToDo」になってますが以下は「todo」で行っていきます。

作成が完了したらとりあえずアプリの実行をしてみます。
[▶︎]ボタンを押して実行します。
初回は開発証明書のインストールを求められることがあります。その場合は画面にしたがってインストールします。
[開発証明書について](https://docs.microsoft.com/ja-jp/aspnet/core/security/enforcing-ssl?view=aspnetcore-3.1&tabs=visual-studio#trust-the-aspnet-core-https-development-certificate-on-windows-and-macos)

<img width="474" alt="スクリーンショット 2020-03-16 22.07.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557038/ca2a8270-8489-33ae-3553-2867f4da6628.png">

ビルドに成功するとlocalhost:5001でアプリが実行されます。

<img width="970" alt="スクリーンショット 2020-03-16 22.09.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557038/b1ecab77-f746-1fcc-0340-e920491bcc5a.png">

簡単にアプリが立ち上がりました。

## 各フォルダの説明

ひとまずアプリが実行出来たところでフォルダがどのように構成されているか見てみます。

### Pages
>PagesフォルダにはRazorページとそのサポートファイルが格納されます。Razor（レイザー）とはASP.NET の枠組みで提供している、 ビューエンジンのことみたいです。ビューエンジンというのは、MVC (モデル・ビュー・コントローラ) でいうところの、 ビューの部分を担当する仕組みなわけですが、要は HTML をどう表示するか、というところを受け持つエンジンということです。

参考
[・Razorビューエンジン](https://aspnet.keicode.com/basic/razor-index.php)

### wwwroot
>HTMLファイル、JavaScriptファイル、CSSファイルなどの静的ファイルが格納されます。

### appSettings.json
>接続文字列などの構成データが保存されます。 

### Program.cs
>プログラムのエントリ ポイントが保存されます。

### Startup.cs
>アプリの動作を構成するコードが含まれています。 

## データモデルの追加

続いてデータモデルを追加していきます。このアプリのモデルクラスは、データベースを操作する際、Entity Framework Core(EF Core) (SQLite EF Core データベースプロバイダー)が使用されます。EF Coreは、データアクセスを簡略化するORマッパーのことです。


それではtodoフォルダの配下にModelsフォルダを作成します。

<img width="684" alt="スクリーンショット 2020-03-16 22.34.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557038/062ec6a0-9827-1e16-262f-fd4f7f0c561e.png">

<img width="630" alt="スクリーンショット 2020-03-16 22.34.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557038/25186254-bae6-8bde-a2d4-b65166e812f8.png">

次のModelsフォルダにItemというクラスを作成します。

<img width="659" alt="スクリーンショット 2020-03-16 22.36.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557038/8fe987c0-3000-e497-1904-b8515add2625.png">

<img width="713" alt="スクリーンショット 2020-03-16 22.37.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557038/47185cbd-1922-0acb-1a6f-8b75dc031df2.png">

```Item.cs
using System;
namespace todo.Models
{
    public class Item
    {
        public int ID { get; set; }
        public string Title { get; set; }
        public string Description { get; set; }
    }
}
```

IDフィールドはデータベースの主キーとして必要です。
今回はタイトルと説明というフィールドを用意しました。
ここまできたら一度プロジェクトをビルドしてコンパイルエラーがないことを確認します。

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

APS.NETではモデルクラスを定義し、スキャフォールディングを行うことで、CRUDに対応する画面とコードを自動生成してくれます。

[ASP.NET 4.5の「Scaffolding（スキャフォールディング）」機能を試す（前編）](https://codezine.jp/article/detail/7491)


Pagesフォルダ配下にItemのCRUDに対応する画面定義などを作成する用のItemsというフォルダを作成します。

<img width="765" alt="スクリーンショット 2020-03-16 22.45.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557038/0cc0c9cc-59eb-f6d8-2cc8-6bc1ad566be1.png">

<img width="500" alt="スクリーンショット 2020-03-16 22.48.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557038/f5ac57f7-7127-0a40-fa89-5b34227b730d.png">

[Items]→[追加]→[新しいスキャフォールディング]

<img width="619" alt="スクリーンショット 2020-03-16 22.49.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557038/af9aa607-9d30-716c-cc93-6d5f0cd656f9.png">

[Entity Frameworkを使用するRazorページ（CRUD)]を選択

<img width="728" alt="スクリーンショット 2020-03-16 22.50.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557038/c9a1e498-bf62-ee70-5782-1f45e455da2c.png">

使用するモデルクラスは「Item」を選択します。
使用するDbContextクラスには「ItemContext」と入力します。

<img width="825" alt="スクリーンショット 2020-03-16 22.59.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557038/d72c1f68-faf1-1989-67f3-7e9f3af0486c.png">

処理が完了するとappsettings.jsonファイルにローカルデータベースへの接続に使用される接続文字列が記載されます。

またtodoフォルダ配下でターミナルを開き以下のコマンドを実行し、.NET Core CLIのEntity Framework Coreツールをインストールします。

```
dotnet tool install --global dotnet-ef
```

スキャフォールディングを行ったことで、Itemsフォルダ配下にCRUDに対応する.cshtmlファイルとDataフォルダにコンテキストファイルが作成されています。

<img width="299" alt="スクリーンショット 2020-03-16 23.08.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557038/cdf178c8-13e4-0380-8e55-0803cf89214a.png">

## データベースの作成

todoフォルダ配下でターミナルを開いて、以下のコマンドを実行しデータベースの作成を行います。

```
dotnet ef migrations add InitialCreate
```

コマンドはアプリを停止した状態で行いましょう。実行中だとエラーになります。
変更時は以下のコマンドです。

```
dotnet ef database update
```

## 確認

データベースの作成が完了したらアプリを実行し、localhost:5001/Itemsにアクセスします。
<img width="437" alt="スクリーンショット 2020-03-16 23.17.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557038/7ff6318f-dc13-ea11-9581-07e850039a14.png">

上記のような画面が表示されれば成功です。この画面はItemsフォルダのindex.cshtmlが表示されています。

次に「Create New」を押下してデータを登録してみます。

<img width="301" alt="スクリーンショット 2020-03-16 23.20.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557038/d7941b04-f5fa-36c0-845e-bfcb1da3a6f3.png">


<img width="452" alt="スクリーンショット 2020-03-16 23.23.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557038/ca3efdaa-0ae6-d271-3120-52b117355895.png">

簡単にデータの登録が出来ました。その他、編集や削除も行うことが出来ます。

## さいごに
初めてC#でWEBアプリを触ってみましたが、難しいですね。。。.NETはガチガチのフレームワーク感があるので、慣れるまで難しそうです。どこまで柔軟に開発できるかも気になりますね。次回はスキャフォールディングで作成されたファイルの中身をみていきます。（気力あったら更新）