[ASP.NET6.0][ASP.NET_MVC]MVC・スキャフォールディングを丁寧に解説

# ASP.NET6.0でスキャフォールディングする方法

## この記事では
##### ・MVC、スキャフォールディングの概念について理解する。
##### ・ASP.NET_MVCプロジェクトを作成し、スキャフォールディングを行う。

## はじめに
初めて記事を書きます。
記事を書く経緯と致しまして、理由は3つほどあります。

・ASP.NET_MVCの初心者用の記事が少ないように感じたため。
・私自身の復習のため。
・Qiitaで記事を書いてみたいと思っていたため。

まだ私自身初心者SEというところもありますので、間違っているところがある可能性が高いです。
適当に見て頂けると助かります。
まずは、なんとなく理解しようというそこのあなたに必見です。
私は文章をかなり適当に読んでしまうので、大切な部分は太くしておきます。

前置きはこのくらいにして、タイトル通り、スキャフォールディングを丁寧に解説したいと思います。

## 開発環境
|  開発環境  | 使用するもの   |
| ---- | ---- |
|  IDE   | VisualStudio2022   |
|DB|SQLserver|
|  フレームワーク |  ASP.NET6.0  |
|  |  ASP.NET Core  |
|   |  Entity Framework Core  |
|  言語  |  C# CSHTML JavaScript   |

## 目次


### ・MVC（Model-View-Controller)って何？
### ・ASP.NET_MVCプロジェクトの作成
### ・ASP.NET_MVCプロジェクトの実行
### ・Modelの作成
### ・スキャフォールディングって何？
### ・スキャフォールディングを行う
### ・SQLserverと接続させる
### ・解説
### ・まとめ


## MVC（Model-View-Controller)って何？
「みんなで何かアプリケーションを作るときに、どこにどんなプログラムを書けば、わかりやすいかなあ。」

そうだ
##### 「どのプログラムが何をするのか、役割を決めておこう。」みたいな考え方です。

下表がそれぞれの役割です。

|  MVC  |  役割  |
| ---- | ---- |
|   Model   |  情報の集まり  |
|  View  |  画面(今あなたが見ているこの画面です)  |
|  Controller  |  裏でデータを渡したり、もらったり、取ってきたりする |


### 詳細

#### Model
基本にエンティティクラスが書かれていることが多いです。
Controllerでどんな名前でどんな値を格納して、Viewに渡すのか。
そんな定義を書くところです。

例えば、ECサイトで、本の情報を載せる際に、こんな情報が最低でも必要なはずです。

・本の製造番号
・タイトル
・著作者
・価格
・発行者

画面にこういう情報を持っていきたいんだ。。。そんな時に定義します。



```c#:book.cs
namespace WEBAPP.Models
{
    public class Book
    {
        public int Id { get; set; }
        public string? Title { get; set; }
        public string? Author { get; set; }
        public int Price { get; set; }
        public string? Publisher { get; set; }
    }
}
```

#### View
Viewは画面です。
視覚情報です。
ユーザーが見ることができるものは、すべてViewだと思ってください。
HTML・CSS・JavaScriptで書かれていることが多いです。

※今回の実装ではASP.NET_MVCのWEBアプリケーションでは、CShtmlというものを用います。

![キャプチ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3296700/b0d57691-30e4-e97e-ad58-fd83bcd960e1.png)



#### Controller
画面に必要な情報を持ってきたりします。

多分わかりづらいと思うので、また解説する機会があればします！！


## ASP.NET_MVCプロジェクトの作成
まず、はじめにこっから作業を始めていくわけですが、

#### 「プロジェクトを間違えない」

これが大切です。

ここを間違えてしまうと、構成されているファイルなど外見から中身まで、すべて異なってしまいます。

検索窓にMVCと入力し、上から二番目の**ASP.NET Core Web アプリ(Model-View-Conttroller)** を選択し、

右下の「次へ」ボタンを押しましょう。

![sss.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3296700/e6d946ba-5773-2f65-49c6-890149ac5150.png)


プロジェクト名に自分で決めたWEBアプリ名を入力してください。

※今回、私は「WEBAPP」というプロジェクト名で進めていきたいと思います。

右下の「次へ」を押しましょう。

![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3296700/0c02920e-44be-6d5b-9dd2-9aeae83cb428.png)

今回は、HTTPS用の構成が必要ありません。

#### HTTPS用の構成のチェックを外し、「作成」を押しましょう。

フレームワークなど他設定は基本的にいじらなくてOKです。

#### 念のためフレームワークが.NET6.0になっていることを確認してください。

![キャプチャ1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3296700/f79bd3bb-f2b4-0d5d-e2d3-14ee572c8ed1.png)

そしたら、なんか出てきましたね。これでプロジェクトの作成は完了です。

![aaa.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3296700/f04c6e03-519f-cd08-fb30-4262de12b691.png)


## ASP.NET_MVCプロジェクトの実行
今の作業を行って頂くと、自動的に簡易的な(Model-View-Conttroller)が生成されます。

もうページができています。

これが**フレームワーク**を用いる素晴らしさですね。
プログラムを自動で生成してくれます。

時代に感謝ですね。
では、一度確認してみましょう。

**「右側のちっちゃい緑の矢印ボタン」**を押してください。

![sdf.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3296700/50da56e3-7097-882f-3ffd-1fda46766971.png)

すると、こんな画面が出てくるはずです。
これで成功です。
これから画面を更新する際には、**「右側のちっちゃい緑の矢印ボタン」** を押します。

![キャプチ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3296700/cbf6fce7-2907-51a2-cdcb-35486569f852.png)

## Modelの作成
とりあえず、今回はBook.csクラスをModelに作成します。

Modelのファイルにドラッグを合わせ、**右クリック、追加、新しい項目** を選択してください。

![asdff.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3296700/d4088e3b-a9e6-512a-740c-7f046771f58c.png)

下の画面が出てくるはずです。

**クラスを選択し、一番下の名前をBook.csに変更**

追加を押下してください。

**ミスってしまって消せるので、大丈夫です。**

作成してしまったBook.csにドラッグを合わせ、**右クリック、削除** を選択してください。


![キャsプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3296700/ceedd016-3fe2-d43d-3a05-4d944c3851ae.png)

上手く実行すれば以下のような画面が出てくるはずです。

![fffff.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3296700/b0f7b92f-e2ac-dbe5-6a88-eded99b95a87.png)

以下コードを入れてみてください。


```c#:book.cs
namespace WEBAPP.Models
{
    public class Book
    {
        public int Id { get; set; }
        public string? Title { get; set; }
        public string? Author { get; set; }
        public int Price { get; set; }
        public string? Publisher { get; set; }
    }
}

```

以下のようになれば、OKです。

![sdfsdfsdf.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3296700/44b614d1-b102-f2d3-32cd-d2b00d6b1c3b.png)


#### Modelの作成については完了です。

#### ここまでが下準備です。
### ここからスキャフォールディングをおこなっていきます。

そのまえに・・・・


## スキャフォールディングって何？
そもそも、「スキャフォールディングって何？」っていう話だと思います。

私もASP.NET_MVCを始めるときに、なんぞこれってなりました。

簡単に申し上げますと、

### Modelに対応したコントローラやDBとの接続などのプログラムの自動生成機能です。

今回、私と同じように実装を行うと

#### ・自動的にDBとのやり取りを行うことができるViewを作成することができる。

#### ・Modelに即したデータの「CRUD」コントローラを作成することができる。




## スキャフォールディングを行う

Controllerのファイルにドラッグを合わせ、**右クリック、追加、新規スキャフォールディングアイテム** を選択してください。

![s.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3296700/963edc87-85e4-38db-d81b-4eb20951a815.png)


#### 以下画面が出てきたら成功です。

ここからはASP.NET Core にある Entity Framework Core　というフレームワークを使用していくことになります。
(インストールしましょう。)

#### Entity Framework を使用したビューがあるMVCコントローラーを選択し、追加を押してください。


![adsfasdfasdfadsffffda.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3296700/5535bd1b-4ad9-fb06-3ddf-d0c5c48b001e.png)

行うと以下のような画面が出てくると思います。

![123.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3296700/4c2a5952-c27e-bcde-4000-886d391de05f.png)



### ここ、ミスりやすいので注意です。ミスったらやり直しです。

##### モデルクラス：Book(←先ほど作成したお手製のclassです)

##### データコンテキスト　クラス：始めはここに何もありません。

#### そのため、右の＋ボタンを押してください。

すると以下画面が出てくると思うので、追加を押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3296700/80027996-b05d-f09f-400c-7f08977e4def.png)

以下画面と一致しているを確認し、追加を押してください。


![345.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3296700/a932f3d8-c7f1-40c8-cd9e-e484b6c3d440.png)

#### もしやり直し等をしてミスってしまい、ビルドエラーが出た場合、初心者のあなたは、もう一度一から手順を始めましょう。
（そちらの方が早いです。）


#### 無事成功すると、以下のような画面が出てきます。
#### コントローラファイルにbookControllerが生成されています。

あれ？なんか先ほどまでなかったものまで入ってる。
Dataファイルなんてあったっけ？？
なんだーこれ？（ロバート山本)

#### 後に解説させて頂きますが、作業を続けたいと思います。

![456.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3296700/c1089c0b-cac6-53c8-6c9b-7f83f7fbc97f.png)

以下画面のSharedファイルにある**_Layout.cshtmlをダブルクリックしてください。** 


![5555.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3296700/3f0e8d1b-9070-df6c-008e-9660712f0e85.png)

この画面が開けるはずです。
下の<li>タグの部分に少し開業を加えてスペースを空けて

![6666.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3296700/4a9b1191-bab3-3136-f747-40aa4e4ae420.png)

以下のhtmlをコピーして貼り付ける。

```html:_layout.cshtmlの一部
 <li class="nav-item">
 <a class="nav-link text-dark" asp-area="" asp-controller="Books" asp-action="Index">Books</a>
 </li>
```

以下のようになるはずです。
画面を更新してみましょう。
さっきやりましたよね？？？
**「右側のちっちゃい緑の矢印ボタン」** を押します。

![7777.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3296700/b7f860ab-bb90-558a-e987-6a39dc7efc39.png)

こんな感じで、BOOKsが追加されました。やったね。

![88888.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3296700/91b257fc-4a70-74d3-6405-73bafe85aab0.png)




## SQLserverと接続させる

今からの作業はSQLserverとの接続に必要な部分についての解説・作業を行います。

appsettings.jsonをダブルクリックし、中のコードをいじります。

![sql2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3296700/ab6ff8c3-0125-60a4-8ae9-88aeb86f221e.png)



##### 以下画面のWEBAPPContextを変更します。
##### ここは、自分のSQLserverの認証方式、データベースによって、変わってくる部分です。

![sql1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3296700/2eddcdc8-e5ed-9580-bf6b-0d3b3d777e26.png)

以下サイトが接続文字列としてわかりやすかったので、載せておきます。

https://access-skill.com/ado-connectionstring/

こんな感じで記載します。
認証方法も結構DBにより変わりますので、そこは調べましょう。


```json:appsettingsの一部
"ConnectionStrings": {
    "WEBAPPContext": "Server=[サーバ名]\\SQLEXPRESS01;Database=[テーブル名];Trusted_Connection=True;MultipleActiveResultSets=true"
  }
```
#### 自分の指定したサーバ・データベース上にBookクラスと同じテーブルを作成します。

```sql:Bookのテーブル
CREATE TABLE Book (
	Id INT NOT NULL PRIMARY KEY IDENTITY(1,1)
	,Title NVARCHAR(50)
	,Author NVARCHAR(50)
	,Price INT 
	,Publisher NVARCHAR(50)
);
```

さあ画面を開いてみよう。
![88888.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3296700/84b9acaa-72c1-a73a-cff6-39bed517551a.png)


そうして、以下画面のBooksを押下してみると。。。
こんな画面がでてきたぞ！！
これで**CRUD**の画面を生成することができました。

![9999.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3296700/9028f05a-95a2-35bf-d64f-446be51ce951.png)

#### これで何ができるようになったの？？？？
まあ見てなさい。
下の画面みたいに入力すると、

![100000.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3296700/9994d366-e630-ab8d-3eb1-4eb9c2f6bc75.png)

### HTML上でも以下のように更新される！！

![1010101010.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3296700/a5b6b7f3-9e7b-e3a4-8a4f-580d3b01202c.png)

#### まさか、DBにもと思ったあなた。。。
#### 正解。

#### DBも更新されます。

![1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3296700/96886eb5-b97a-20d1-9bc4-02ea6b55b48f.png)


#### 本来であれば、DB接続には、以下のようなコードを書かないといけなかったはず。。。
#### このようなめんどくさい作業をスキャフォールディングで自動生成することができます。
#### しかも、詳しく見ればわかるのですが、非同期処理が施されていたり、かなり便利です。

```C#:SQL接続の為の文
using System.Configuration;
using System.Data.SqlClient;
 
public void Connect1()
{
    // 接続文字列の取得
    var connectionString = ConfigurationManager.ConnectionStrings["sqlsvr"].ConnectionString;
 
    // データベース接続の準備
    var connection = new SqlConnection(connectionString);
 
    // データベースの接続開始
    connection.Open();
 
    // 実行するSQLの準備
    var command = new SqlCommand();
    command.Connection = connection;
    command.CommandText = @"SELECT count(*) FROM T_USER";
 
    // SQLの実行
    command.ExecuteNonQuery();
 
    // データベースの接続終了
    connection.Close();
}
```

## 解説
疲れたので、のちに更新

## まとめ
ASP.NETのフレームワークやスキャフォールディングを行うことのメリット

 ・Modelを作成することで、DBとの接続を自動生成することができる。

・コーディングミスによる遅延減少を見込める

・非同期処理を行っているので、データの独立性も高くなる。

こんなもんでしょうか。また、何か気づいたら足していきたいと思います。