Visual Studioでは.Net(C#)を用いたMVCプログラミングのフレームワークが用意されています。ただでさえMVCのベースとなるコードは生成してくれるわけですが、スキャフォールディング機能を用いることでさらに開発をスムーズに進めることができます。
今回はVisual StudioでMVCプログラミング開発を実施する際のスキャフォールディングの手順を紹介します。
スキャフォールディングとは
スキャフォールディングとは、データベースに対するCRUD処理を実行できる画面のコードを対象のデータモデルを基に自動で生成してくれる機能です。
WebアプリケーションにおいてDBのCRUD操作はほぼ必須なので、ここの処理を自動生成してくれることで開発をサポートしてくれます。
実践
今回は簡単な家計簿アプリを作るという前提でDBにテーブルを作成し、スキャフォールディングを実践したいと思います。
※本記事で家計簿アプリを完成させるわけではありません。前段の前段までなので悪しからず。
前提
今回はVisual Studio2022を使用します。
また、DBはPostgreSQLで、以下2テーブルを作成しておきます。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_628,h_343/https://www.learning-nao.com/wp-content/uploads/2023/10/image.png)
Visual Studioでの操作
ここからはVisual Studioでの操作を順を追って見ていきます。まずは、Visual Studioを起動します。インストールされていない方は、以下URLからインストーラをダウンロードし、インストールを実施してください。個人利用や学生の方は無料で使用することができます。
https://visualstudio.microsoft.com/ja/downloads/
プロジェクト作成
Visual Studioを開いたら、新規プロジェクトを作成します。作成するのはASP.NET Core Webアプリ(Model-View-Controller)です。
(Model-View-Controller)がついていないWebアプリが先に出てくるので、間違えないように注意してください。
![ASP.NET Core Webアプリ(Model-View-Controller)を選択](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_640,h_423/https://www.learning-nao.com/wp-content/uploads/2023/10/image-1.png)
選択すると次はプロジェクト名を指定します。任意ですが、今回は家計簿アプリを前提にしているのでAccountManagementという名前にしておきます。プロジェクトの保存場所はC:/Project/家計簿管理の配下です。
![プロジェクト名を指定](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_640,h_428/https://www.learning-nao.com/wp-content/uploads/2023/10/image-2.png)
次にフレームワークを選択します。特に指定がなければ、現時点では.NET 7.0を選択しておくと無難です。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_640,h_423/https://www.learning-nao.com/wp-content/uploads/2023/10/image-3.png)
上記で作成ボタンを押すと、新規プロジェクトが作成されます。
NuGetパッケージインストール
続いてNuGetで必要なパッケージをインストールします。上部のメニューバーから[ツール] > [NuGetパッケージマネージャー] > [パッケージマネージャー コンソール]を選択します。
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_800,h_481/https://www.learning-nao.com/wp-content/uploads/2023/10/image-4-800x481.png)
すると下部にパッケージマネージャーコンソールが出てくるので、以下のコマンドを実行してパッケージをインストールします。
- Install-Package Microsoft.EntityFrameworkCore
- Install-Package Microsoft.EntityFrameworkCore.Design
- Install-Package Microsoft.EntityFrameworkCore.Tools
- Install-Package Npgsql
- Install-Package Npgsql.EntityFrameworkCore.PostgreSQL
パッケージの管理はパッケージマネージャーコンソールだけでなく、[ツール] > [NuGetパッケージマネージャー] > [ソリューションのNuGetパッケージの管理]からも可能です。
appsettings.jsonの編集
次はappsettings.jsonを編集し、接続先のDB情報を記載していきます。以下部分を追記してください。DB情報は各自のものに書き換えてください。
![appsettings.jsonの設定追記](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_640,h_179/https://www.learning-nao.com/wp-content/uploads/2023/10/image-5.jpg)
"ConnectionStrings": {
"AccountBook": "Server=localhost;Port=5432;Database=accounts_book;Username=postgres;Password=xxxxxx"
}
スキャフォールディング実行(モデル&コンテクスト作成)
先ほど開いたNuGetパッケージマネージャーコンソールにて以下コマンドを実行します。
ConnectionStringsに対応する値は、appsettings.jsonで設定したキー値を指定してください。下記の場合は「AccountBook」としています。
Scaffold-DbContext 'Name=ConnectionStrings:AccountBook' Npgsql.EntityFrameworkCore.PostgreSQL -OutputDir Models -ContextDir Context
実行が完了すると、ContextとModelsが作成されるはずです。
![ContextとModelsが作成される](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_640,h_297/https://www.learning-nao.com/wp-content/uploads/2023/10/image-5.png)
ModelsではDBのテーブル定義に合わせたデータモデルのエンティティができているはずです。
![Balance.cs](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_678,h_901/https://www.learning-nao.com/wp-content/uploads/2023/10/image-6.png)
Program.csの編集
現状ではContextとModelsが作成されただけで、参照されていない状態です。なので、Program.csからContextを参照するように編集します。
/*ここから ~ ここまで*/の部分を追記します。
/*ここから
AccountManagement.ContextはAccountBookContextのnamespace*/
using Microsoft.EntityFrameworkCore;
using AccountManagement.Context;
/*ここまで*/
var builder = WebApplication.CreateBuilder(args);
/*ここから*/
builder.Services.AddDbContext<AccountsBookContext>(options =>
options.UseNpgsql(builder.Configuration.GetConnectionString("AccountBook") ?? throw new InvalidOperationException("Connection string ' AccountsBookContext' not found.")));
/*ここまで*/
// Add services to the container.
builder.Services.AddControllersWithViews();
var app = builder.Build();
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Home/Error");
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
app.Run();
スキャフォールディング実行(ビュー&コントローラー作成)
続いてビューとコントローラーを作成していきます。
ソリューションエクスプローラー上でControllerフォルダを右クリックし、[追加]>[新規スキャフォールディングアイテム]を選択します。
![Controllerフォルダを右クリックし、[追加]>[新規スキャフォールディングアイテム]を選択](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_640,h_512/https://www.learning-nao.com/wp-content/uploads/2023/10/image-7.jpg)
“Entitiy Frameworkを使用したビューがあるMVCコントローラー”を選択します。
!["Entitiy Frameworkを使用したビューがあるMVCコントローラー"を選択](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_640,h_445/https://www.learning-nao.com/wp-content/uploads/2023/10/image-7.png)
今回モデルクラスにはBalanceを、データコンテクストクラスにはAccountBookContextを指定します。
![例)モデルクラスにはBalanceを、データコンテクストクラスにはAccountBookContextを指定](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_640,h_398/https://www.learning-nao.com/wp-content/uploads/2023/10/image-8.png)
追加を押すと、ModelsとControllerが作成されます。
![ModelsとControllerが作成される](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_640,h_545/https://www.learning-nao.com/wp-content/uploads/2023/10/image-9.png)
Program.csの編集
ここでProgram.csをもう一度編集します。ここの編集は任意ですが、編集することで動作確認時のURL指定が楽になります。
編集対象はapp.MapControllerRoute()です。controller=Homeとなっているところを、上記モデルクラスで指定したクラス名に変更します。今回の場合はBalanceです。
~~~(一部抜粋)
app.MapControllerRoute(
name: "default",
pattern: "{controller=Balances}/{action=Index}/{id?}");
~~~
ここまでで基本的な設定は完了です。
動作確認
実際にDBのCRUD操作ができるか確認してみます。
アプリケーションを起動し、https://localhost:(ポート)にアクセスします。すると、以下のような画面が表示されるはずです。
![https://localhost:(ポート)](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_640,h_229/https://www.learning-nao.com/wp-content/uploads/2023/10/image-10.png)
DBのテーブルのレコードが表示されます。Create Newで新規レコードの登録ができます。また、Edit|Details|Deleteでレコード編集、削除といった操作も可能です。
試しにレコードを登録してみます。Create Newを押すと登録画面に遷移します。
![Create New](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_534,h_611/https://www.learning-nao.com/wp-content/uploads/2023/10/image-11.png)
値を入力しCreateを押すと、新規レコードが作成されます。
![値を入力しCreateを押すと、新規レコードが作成される](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_640,h_202/https://www.learning-nao.com/wp-content/uploads/2023/10/image-12.png)
まとめ
.NetでスキャフォールディングでデータモデルからMVCプログラムコードを生成する方法を紹介しました。
スキャフォールディングを実行すると簡単なCRUD用画面が用意されますが、DBのCRUD操作はもちろん、画面での値の授受等実践的に流用できる処理も多く、アプリケーション作成時に大いに役立つと思います。
開発時の手間を省くべく、是非実践してみてください。
ではでは👋