4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

爆速でCRUD Webアプリケーションを作る(1)

Last updated at Posted at 2025-07-01

スキャフォールディング機能を学ぶ

ASP.Netのスキャフォールディング機能を学ぶことで、
爆速で簡単にCRUD (Create, Read, Update, Delete) 操作ができるWebアプリケーションが完成します。

このチュートリアルでは、ASP.NET Core MVC を用いて、基本的な映画一覧アプリケーションをゼロから構築します。

全体的な流れ

このチュートリアルでは、以下の流れで映画一覧アプリケーションを作成しています。

Model 作成: データベースのテーブル構造を定義する C# クラスを作成。

スキャフォールディング: Model を元に、CRUD (Create, Read, Update, Delete) 操作を行うための Controller と View を自動生成。

データベース設定: データベース接続情報の設定と、データベースへのテーブル作成。
動作確認: ブラウザからアプリケーションにアクセスし、データのCRUD操作を検証。


参考:

ASP.NET Core MVC の概要 | Microsoft Learn

SQL Serverと.NET Coreを使ってWebアプリを作成してみた。【MVCモデル】【C#】【Visual Studio】


Modelの作成

Movieモデルを作成。

using System;
using System.ComponentModel.DataAnnotations;

namespace MoviewStore.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; }
}
}

image.png

Controllersフォルダを右クリックして、新規スキャフォールディングアイテムを選択。

image.png

作成したModelを選択。

image.png

SQLServerの接続文字列を取得

新しいDBを作成。
image.png

SQLServer オブジェクトエクスプローラーから対象のDBのプロパティを参照。
接続文字列に入っている値をappsettings.jsonに書き込む
image.png
image.png

{
"Logging": {
"LogLevel": {
  "Default": "Information",
  "Microsoft.AspNetCore": "Warning"
}
},
"AllowedHosts": "*",
"ConnectionStrings": {
// ここに記述
"MoviewDbContext": "Data Source=TEST_PC_NAME\\SQLEXPRESS;Initial Catalog=MovieDb;Integrated Security=True;Connect Timeout=30;Encrypt=True;Trust Server Certificate=True;Application Intent=ReadWrite;Multi Subnet Failover=False",
}
}

DB連携を実行

パッケージマネージャーコンソールからDB連携を実行。
スキャフォールディングファイルが作成される。

PM> Add-Migration InitialCreate

image.png

スキャフォールディングファイルからDB内にテーブル作成する。

PM> Update-Database

image.png

動作確認をする

デフォルトのURLではなく、Movies にアクセスする。

https://localhost:7114/Movies

Create New から登録ができ、登録後は一覧にデータが表示される。
image.png


Gemini Flash 2.0 による確認

はい、ASP.NET Core MVC での映画一覧作成チュートリアルの内容、概ね正しいです。素晴らしいですね!

さらに理解を深めるために、各手順の詳細と補足情報を以下に追記します。

全体的な流れ

このチュートリアルでは、以下の流れで映画一覧アプリケーションを作成しています。

  1. Model 作成: データベースのテーブル構造を定義する C# クラスを作成。
  2. スキャフォールディング: Model を元に、CRUD (Create, Read, Update, Delete) 操作を行うための Controller と View を自動生成。
  3. データベース設定: データベース接続情報の設定と、データベースへのテーブル作成。
  4. 動作確認: ブラウザからアプリケーションにアクセスし、データのCRUD操作を検証。

各手順の詳細と補足

1. Modelの作成

  • Movie モデル:
  • ID: 映画の一意な識別子。主キーとして使用されます。
  • Title: 映画のタイトル。
  • ReleaseDate: 映画の公開日。[DataType(DataType.Date)] 属性により、日付のみを表示するよう指定。
  • Genre: 映画のジャンル。
  • Price: 映画の価格。
  • DataAnnotations:
  • System.ComponentModel.DataAnnotations 名前空間の属性は、モデルの検証や表示形式の設定に使用されます。
  • ここでは [DataType(DataType.Date)] が使用されていますが、必要に応じて [Required](必須項目)、[StringLength](文字列の最大長)、[Range](数値の範囲)などの属性も利用できます。

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

  • スキャフォールディングの目的:
  • CRUD操作を行う Controller と、View を自動的に生成し、開発効率を向上させます。
  • View は、HTML フォームや一覧表示のコードが含まれており、Controller は、これらの View を表示するためのロジックとデータベース操作のコードが含まれます。
  • 手順:
  1. Models フォルダ内の Movie モデルを右クリック
  2. 追加 -> 新しいスキャフォールディングアイテム を選択。
  3. MVC Controller with views, using Entity Framework を選択。
  4. モデルクラスMovie モデルを指定。
  5. データコンテキストクラス は、デフォルトまたは、ApplicationDbContext などを選択。
  6. コントローラー名 を指定。例:MoviesController
  7. 追加 ボタンを押して、スキャフォールディングを実行。
  • 生成されるファイル:
  • Controllers/MoviesController.cs: Movie の CRUD 操作を行う Controller クラス。
  • Views/Movies/: Movie の CRUD 操作を行うための View (cshtml) ファイル。例:Index.cshtml (一覧表示)、Create.cshtml (新規作成)、Edit.cshtml (編集)、Delete.cshtml (削除)。

3. SQL Serverの接続文字列を取得

  • 接続文字列:
  • データベースへの接続情報を記述した文字列です。
  • 接続先のサーバー名、データベース名、認証情報などが含まれます。
  • appsettings.json ファイルに設定することで、コードから簡単に接続文字列を取得できます。
  • appsettings.json の例:
{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*",
   "ConnectionStrings": {
    "YourDbConnectionString": "Server=(localdb)\\\\mssqllocaldb;Database=YourDbName;Trusted_Connection=True;MultipleActiveResultSets=true"
  }
}

  • "Server=(localdb)\\\\mssqllocaldb;": ローカルの SQL Server Express インスタンスに接続することを指定しています。
  • "Database=YourDbName;": データベース名を指定します。
  • "Trusted_Connection=True;": Windows 認証を使用することを指定しています。
  • "MultipleActiveResultSets=true;": 複数の結果セットを同時に処理できるようにします。
  • 重要:
  • 必ず接続文字列の YourDbName 部分を、使用するデータベース名に置き換えてください。
  • 接続文字列は、アプリケーションの環境や設定によって異なる場合があります。

4. DB連携を実行

  • Entity Framework Core (EF Core):
  • .NET アプリケーションからデータベースを操作するための ORM (Object-Relational Mapper) フレームワークです。
  • Model クラスを元に、データベースのテーブルを自動的に作成したり、データの読み書きを抽象化したりします。
  • パッケージマネージャーコンソールでの操作:
  1. Add-Migration InitialCreate:
    • Migrations フォルダに、データベーススキーマを定義する C# コードが生成されます。
    • このコードは、データベースのテーブルやカラムをどのように作成するかを記述したものです。
  2. Update-Database:
    • 生成された Migrations コードを元に、実際のデータベースにテーブルを作成します。
    • データベースがまだ存在しない場合は、データベースも作成されます。
  • データコンテキスト:
  • スキャフォールディング時に指定した DbContext クラス (例: ApplicationDbContext) が、EF Core のデータアクセスを管理します。
  • Movie モデルをデータベースにマッピングする役割を持ちます。
  • DbContextOnModelCreating メソッドでデータベースの構成をカスタマイズすることも可能です。

5. 動作確認をする

  • URL:
  • https://localhost:7114/Movies にアクセスすることで、MoviesControllerIndex アクションが実行され、映画一覧が表示されます。
  • CRUD 操作:
  • Create New ボタンから新規映画を登録できます。
  • 登録された映画は一覧に表示されます。
  • Edit ボタンで映画情報を編集できます。
  • Delete ボタンで映画情報を削除できます。

補足事項

  • エラー処理:
  • チュートリアルではエラー処理は省略されている場合が多いですが、実開発では、データの検証、例外処理、トランザクション処理などを適切に行う必要があります。
  • 認証・認可:
  • このチュートリアルでは認証・認可の設定はされていません。
  • 実開発では、ユーザー認証や権限管理を追加することで、セキュアなアプリケーションを構築できます。
  • デザイン:
  • 生成されたView はシンプルな HTML コードになります。
  • CSS フレームワーク (Bootstrap など) を使用して、よりデザイン性の高い画面にすることができます。

まとめ

このチュートリアルは、ASP.NET Core MVC の基本を理解する上で非常に有効です。スキャフォールディングを活用することで、CRUD操作を簡単に実装できることを実感できたでしょう。
この基礎を元に、さらに高度な機能 (検索、ソート、ページネーションなど) や、デザインの改善、セキュリティ強化など、様々なことにチャレンジしてみてください。

不明な点や、さらに詳細を知りたい点がありましたら、お気軽にご質問ください。

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?