🏁 はじめに
前回(第3章:フォーム入力からデータを受け取ってみる)では、
フォームから送信されたデータを Controller で受け取り、
View に表示する流れを学びました。
今回は、受け取ったデータを データベース(DB)に保存 してみます。
使用するのは、.NET標準のORMライブラリ Entity Framework Core(EF Core) です。
🎯 今回のゴール
ユーザーがフォームで入力したデータをSQLiteに保存し、一覧表示する。
最終的にはこうなります👇
[ 新規登録フォーム ]
タイトル:勉強する
登録ボタンを押すと一覧に追加される
[ Todo一覧 ]
1. 勉強する
🧩 Step 1:Entity Framework Coreとは?
EF Coreは、C#のクラス(Model)とDBテーブルを自動でマッピングしてくれる仕組みです。
| 項目 | 内容 |
|---|---|
| ORM(Object Relational Mapper) | オブジェクトとリレーショナルDBをつなぐ技術 |
| 利点 | SQLを直接書かずにデータ操作ができる |
| 対応DB | SQLite / SQL Server / PostgreSQL / MySQLなど |
⚙️ Step 2:EF Coreをインストール
NuGetパッケージを追加
Visual Studio の「ツール」→「NuGet パッケージ マネージャー」→「ソリューションの NuGet パッケージの管理」から、以下をインストールします。
Microsoft.EntityFrameworkCoreMicrosoft.EntityFrameworkCore.SqliteMicrosoft.EntityFrameworkCore.Tools
SQLiteを使う理由:軽量で設定が簡単だから。ローカル練習には最適!
🧱 Step 3:Modelを作成
Models/Todo.cs を追加します。
using System.ComponentModel.DataAnnotations;
namespace MyFirstAspNetApp.Models
{
public class Todo
{
public int Id { get; set; }
[Required]
[StringLength(50)]
public string Title { get; set; } = string.Empty;
}
}
-
Id:主キー(自動採番) -
Title:タスク名 -
[Required]で空入力を防止
🧰 Step 4:DbContextを作成
DB操作の中心となるクラスです。
Models/AppDbContext.cs を追加します👇
using Microsoft.EntityFrameworkCore;
namespace MyFirstAspNetApp.Models
{
public class AppDbContext : DbContext
{
public DbSet<Todo> Todos { get; set; }
public AppDbContext(DbContextOptions<AppDbContext> options) : base(options)
{
}
}
}
DbSet<T> がテーブルを表します。
ここでは Todos テーブルを扱います。
⚙️ Step 5:Program.csに設定を追加
SQLiteを使うために、DB接続設定を追加します。
using Microsoft.EntityFrameworkCore;
using MyFirstAspNetApp.Models;
var builder = WebApplication.CreateBuilder(args);
// DbContextを登録
builder.Services.AddDbContext<AppDbContext>(options =>
options.UseSqlite("Data Source=app.db"));
builder.Services.AddControllersWithViews();
var app = builder.Build();
app.MapControllerRoute(
name: "default",
pattern: "{controller=Todos}/{action=Index}/{id?}");
app.Run();
💡 options.UseSqlite("Data Source=app.db");
で「プロジェクト直下にSQLiteファイルを作る」設定になります。
🧩 Step 6:TodosControllerを作成
Controllers/TodosController.cs を追加します。
using Microsoft.AspNetCore.Mvc;
using MyFirstAspNetApp.Models;
namespace MyFirstAspNetApp.Controllers
{
public class TodosController : Controller
{
private readonly AppDbContext _context;
public TodosController(AppDbContext context)
{
_context = context;
}
public IActionResult Index()
{
var todos = _context.Todos.ToList();
return View(todos);
}
[HttpGet]
public IActionResult Create()
{
return View();
}
[HttpPost]
public IActionResult Create(Todo todo)
{
if (ModelState.IsValid)
{
_context.Todos.Add(todo);
_context.SaveChanges();
return RedirectToAction("Index");
}
return View(todo);
}
}
}
ポイント
-
AppDbContextはDI(依存性注入)で自動生成される -
_context.TodosでDB操作が可能 -
_context.SaveChanges()で変更を反映
🧾 Step 7:Viewを作成
Views/Todos/Index.cshtml
@model IEnumerable<MyFirstAspNetApp.Models.Todo>
<h2>Todo一覧</h2>
<p><a href="/Todos/Create">新規作成</a></p>
<ul>
@foreach (var item in Model)
{
<li>@item.Title</li>
}
</ul>
Views/Todos/Create.cshtml
@model MyFirstAspNetApp.Models.Todo
<h2>新規作成</h2>
<form asp-action="Create" method="post">
<div>
<label asp-for="Title"></label><br />
<input asp-for="Title" />
<span asp-validation-for="Title" class="text-danger"></span>
</div>
<button type="submit">登録</button>
</form>
🧩 Step 8:DBを作成(マイグレーション)
1. パッケージマネージャーコンソールを開く
Visual Studio の「ツール」→「NuGet パッケージ マネージャー」→「パッケージ マネージャー コンソール」
2. 以下を実行
Add-Migration InitialCreate
Update-Database
これで app.db がプロジェクトフォルダに生成されます。
▶ Step 9:実行してみる!
-
/Todosにアクセス - 「新規作成」をクリック
- タイトルを入力 → 登録
一覧に新しいTodoが表示されれば成功です🎉
✅ まとめ
| 学び | 内容 |
|---|---|
| EF Core | ORM(オブジェクトとDBの橋渡し) |
| DbContext | DB操作の中心クラス |
| DbSet | テーブルを表す |
| Migrations | コードからDBを自動生成 |
| SQLite | 簡単・軽量で学習用に最適 |
💬 学んでみて感じたこと
- SQLを書かなくてもDBが作られるので超簡単
- Modelの修正→Migration→Updateの流れが便利
- C#のクラスとDBテーブルが1対1で対応していて分かりやすい
「ModelとDBがシームレスに繋がる」とはこういうことか!と実感しました。