IT PORT

Season 1

© 2025 IT PORT

【第一回】タスク管理アプリを作ろう

By
約 71 分
【第一回】タスク管理アプリを作ろう

目次

目次
はじめに
プロジェクト作成
DB接続準備
DB設計
PostgreSQL接続文字列の設定
Modelクラス追加
DbContext作成
マイグレーション実行
コントローラーの作成
ビューの作成
仕上げ
実行

はじめに

今回も引き続きプログラミング学習の一環としてC#でアプリ作成をしていきたいと思います。
今回作成するのは「タスク管理アプリ」です。
私自身、タスク管理が苦手でGoogleカレンダーに予定を入れたり、ToDoリストに書いたり
メモアプリを使用したり、紙に記載したりと色々試しましたがどれも続かずしっくりこないので折角だから
勉強がてら自分で作ってみようと思い今回作成を決意しました。

プロジェクト作成

それではこれから毎度のようにVisual studioを立ち上げてプロジェクトを作成するところから始めます。
Visual studioを立ち上げて「新しいプロジェクトの作成」をクリック
「ASP.NET Core Web アプリ (Model-View-Controller)」を選択
プロジェクト名は「TaskManager」、保存先は任意の場所を選択し次へ
追加情報部分は、今回のタスク管理アプリは少し難易度を上げてデータベース連携やユーザー認証を付けたいので、
認証の種類は「個別のアカウント」を選択して作成をクリック

DB接続準備

DBには「PostgreSQL」を使用するので事前準備としてNuGetパッケージをインストールしておきます
Visual Studioのパッケージマネージャーコンソールを開いて下記のコマンドを実行します

<code>Install-Package Microsoft.AspNetCore.Identity.EntityFrameworkCore -Version 8.0.10
Install-Package Npgsql.EntityFrameworkCore.PostgreSQL -Version 8.0.10
Install-Package Microsoft.EntityFrameworkCore.Tools -Version 8.0.10</code>

今回は.NET8.0を使用しているので各パッケージもバージョンを合わせるためにバージョン指定をしてインストールをしています
バージョンを合わせないと互換性がないとエラーが出てしまいます。

DB設計

テーブル構成は以下の通りとします

Tasks（タスクテーブル）
Id主キー
Titleタイトル
Description説明
DueDate期限
Priority優先度: 高/中/低
Statusステータス: 未着手/進行中/完了
CreatedAt作成日時
UpdatedAt更新日時
UserIdユーザーID – 外部キー
ProjectIdプロジェクトID – 外部キー、nullable
Projects（プロジェクトテーブル）
Id 主キー
Nameプロジェクト名
Description説明
UserIdユーザーID – 外部キー
CreatedAt作成日時
Tags（タグテーブル）
Id主キー
Nameタグ名
UserIdユーザーID – 外部キー
TaskTags（中間テーブル – 多対多の関係）
TaskId外部キー
TagId外部キー

PostgreSQL接続文字列の設定

appsettings.jsonに下記のコードを記載します
コードを書く際には以下のことに注意してください

Host=localhost → PostgreSQLが動いているサーバー（ローカルの場合はそのまま）
Database=TaskManagerDb → 作成するデータベース名
Username=postgres → PostgreSQLのユーザー名
Password=PostgreSQLにログインする際のパスワードを入力

<code>{
  "ConnectionStrings": {
    "DefaultConnection": "Host=localhost;Database=TaskManagerDb;Username=postgres;Password=あなたのパスワード"
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*"
}</code>

Modelクラス追加

次にModelフォルダに新しいクラスを追加していきます
クラスの追加方法は追加したいフォルダを選択して右クリック→追加→クラスより追加できます
まずはTaskPriority.csという名前のクラスを追加し以下のコードを記載します

<code>namespace TaskManager.Models
{
    public enum TaskPriority
    {
        Low = 0,      // 低
        Medium = 1,   // 中
        High = 2      // 高
    }
}</code>

続けてTaskStatus.csという名前のクラスを追加し以下のコードを記載します

<code>namespace TaskManager.Models
{
    public enum TaskStatus
    {
        NotStarted = 0,  // 未着手
        InProgress = 1,  // 進行中
        Completed = 2    // 完了
    }
}</code>

続けてProject.csを追加します

<code>using System.ComponentModel.DataAnnotations;

namespace TaskManager.Models
{
    public class Project
    {
        public int Id { get; set; }

        &#91;Required(ErrorMessage = "プロジェクト名は必須です")]
        &#91;StringLength(100)]
        public string Name { get; set; } = string.Empty;

        &#91;StringLength(500)]
        public string? Description { get; set; }

        public DateTime CreatedAt { get; set; } = DateTime.UtcNow;

        &#91;Required]
        public string UserId { get; set; } = string.Empty;

        public ICollection&lt;TaskItem&gt; Tasks { get; set; } = new List&lt;TaskItem&gt;();
    }
}</code>

続けてTag.csを追加します

<code>using System.ComponentModel.DataAnnotations;

namespace TaskManager.Models
{
    public class Tag
    {
        public int Id { get; set; }

        &#91;Required(ErrorMessage = "タグ名は必須です")]
        &#91;StringLength(50)]
        public string Name { get; set; } = string.Empty;

        &#91;Required]
        public string UserId { get; set; } = string.Empty;

        public ICollection&lt;TaskItem&gt; Tasks { get; set; } = new List&lt;TaskItem&gt;();
    }
}</code>

最後にメインのTaskItem.csを追加します。

<code>using System.ComponentModel.DataAnnotations;

namespace TaskManager.Models
{
    public class TaskItem
    {
        public int Id { get; set; }

        &#91;Required(ErrorMessage = "タイトルは必須です")]
        &#91;StringLength(200, ErrorMessage = "タイトルは200文字以内で入力してください")]
        public string Title { get; set; } = string.Empty;

        &#91;StringLength(1000, ErrorMessage = "説明は1000文字以内で入力してください")]
        public string? Description { get; set; }

        &#91;DataType(DataType.Date)]
        public DateTime? DueDate { get; set; }

        public TaskPriority Priority { get; set; } = TaskPriority.Medium;

        public TaskStatus Status { get; set; } = TaskStatus.NotStarted;

        public DateTime CreatedAt { get; set; } = DateTime.UtcNow;

        public DateTime UpdatedAt { get; set; } = DateTime.UtcNow;

        // ユーザーとのリレーション
        &#91;Required]
        public string UserId { get; set; } = string.Empty;

        // プロジェクトとのリレーション
        public int? ProjectId { get; set; }
        public Project? Project { get; set; }

        // タグとのリレーション
        public ICollection&lt;Tag&gt; Tags { get; set; } = new List&lt;Tag&gt;();
    }
}</code>

DbContext作成

DataフォルダにApplicationDbContext.csを追加します
※既にある場合はそちらの中身を以下のコードに書き換えます

<code>using Microsoft.AspNetCore.Identity.EntityFrameworkCore;
using Microsoft.EntityFrameworkCore;
using TaskManager.Models;

namespace TaskManager.Data
{
    public class ApplicationDbContext : IdentityDbContext
    {
        public ApplicationDbContext(DbContextOptions&lt;ApplicationDbContext&gt; options)
            : base(options)
        {
        }

        // DbSetを追加、完全修飾名
        public DbSet&lt;TaskItem&gt; TaskItems { get; set; } = null!;
        public DbSet&lt;Project&gt; Projects { get; set; } = null!;
        public DbSet&lt;Tag&gt; Tags { get; set; } = null!;

        protected override void OnModelCreating(ModelBuilder modelBuilder)
        {
            base.OnModelCreating(modelBuilder);

            // TaskItems
            modelBuilder.Entity&lt;TaskItem&gt;().ToTable("TaskItems");

            // TaskとTagの多対多リレーションシップ設定
            modelBuilder.Entity&lt;TaskItem&gt;()
                .HasMany(t =&gt; t.Tags)
                .WithMany(tag =&gt; tag.Tasks)
                .UsingEntity(j =&gt; j.ToTable("TaskTags"));

            // TaskとProjectのリレーションシップ設定
            modelBuilder.Entity&lt;TaskItem&gt;()
                .HasOne(t =&gt; t.Project)
                .WithMany(p =&gt; p.Tasks)
                .HasForeignKey(t =&gt; t.ProjectId)
                .OnDelete(DeleteBehavior.SetNull);

            // インデックス追加
            modelBuilder.Entity&lt;TaskItem&gt;()
                .HasIndex(t =&gt; t.Status);

            modelBuilder.Entity&lt;TaskItem&gt;()
                .HasIndex(t =&gt; t.DueDate);

            modelBuilder.Entity&lt;TaskItem&gt;()
                .HasIndex(t =&gt; t.UserId);
        }
    }
}</code>

Program.csを以下のように修正します

<code>using Microsoft.AspNetCore.Identity;
using Microsoft.EntityFrameworkCore;
using TaskManager.Data;

var builder = WebApplication.CreateBuilder(args);

var connectionString = builder.Configuration.GetConnectionString("DefaultConnection") ?? throw new InvalidOperationException("Connection string 'DefaultConnection' not found.");

builder.Services.AddDbContext&lt;ApplicationDbContext&gt;(options =&gt;
    options.UseNpgsql(connectionString));

builder.Services.AddDatabaseDeveloperPageExceptionFilter();

builder.Services.AddDefaultIdentity&lt;IdentityUser&gt;(options =&gt;
{
    options.SignIn.RequireConfirmedAccount = false;
    options.Password.RequireDigit = true;
    options.Password.RequireLowercase = true;
    options.Password.RequireUppercase = false;
    options.Password.RequireNonAlphanumeric = false;
    options.Password.RequiredLength = 6;
})
.AddEntityFrameworkStores&lt;ApplicationDbContext&gt;();

builder.Services.AddControllersWithViews();

var app = builder.Build();

if (app.Environment.IsDevelopment())
{
    app.UseMigrationsEndPoint();
}
else
{
    app.UseExceptionHandler("/Home/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapControllerRoute(
    name: "areas",
    pattern: "{area:exists}/{controller=Home}/{action=Index}/{id?}");

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.MapRazorPages();  // ← これ重要！

app.Run();</code>

マイグレーション実行

ここまでコードが書けたらマイグレーションを実行します
パッケージマネージャーコンソールに下記のコマンドを入力します
実行に成功するとPostgreSQLにテーブルが自動で生成されます

<code>Add-Migration InitialCreate
Update-Database</code>

成功したのでPostgreSQLを開いてテーブルが出来ているか確認します
無事にテーブルが作成されています！！

コントローラーの作成

DBの構築が成功したので続けてコントローラーを作成していきます。
Controllersフォルダで右クリック → 追加 → コントローラー
「MVCコントローラー – 空」を選択し、名前を 「TaskItemsController」にして作成
以下のコードを記載

<code>using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using TaskManager.Data;
using TaskManager.Models;
using System.Security.Claims;

namespace TaskManager.Controllers
{
    &#91;Authorize]
    public class TaskItemsController : Controller
    {
        private readonly ApplicationDbContext _context;

        public TaskItemsController(ApplicationDbContext context)
        {
            _context = context;
        }

        // 一覧表示（GET: TaskItems）
        public async Task&lt;IActionResult&gt; Index()
        {
            var userId = User.FindFirstValue(ClaimTypes.NameIdentifier);

            var tasks = await _context.TaskItems
                .Include(t =&gt; t.Project)
                .Include(t =&gt; t.Tags)
                .Where(t =&gt; t.UserId == userId)
                .OrderByDescending(t =&gt; t.CreatedAt)
                .ToListAsync();

            return View(tasks);
        }

        // 詳細表示（GET: TaskItems/Details/5）
        public async Task&lt;IActionResult&gt; Details(int? id)
        {
            if (id == null)
            {
                return NotFound();
            }

            var userId = User.FindFirstValue(ClaimTypes.NameIdentifier);

            var taskItem = await _context.TaskItems
                .Include(t =&gt; t.Project)
                .Include(t =&gt; t.Tags)
                .FirstOrDefaultAsync(m =&gt; m.Id == id &amp;&amp; m.UserId == userId);

            if (taskItem == null)
            {
                return NotFound();
            }

            return View(taskItem);
        }

        // 作成画面表示（GET: TaskItems/Create）
        public IActionResult Create()
        {
            var userId = User.FindFirstValue(ClaimTypes.NameIdentifier);

            ViewBag.Projects = _context.Projects
                .Where(p =&gt; p.UserId == userId)
                .ToList();

            return View();
        }

        // 作成処理（POST: TaskItems/Create）
        &#91;HttpPost]
        &#91;ValidateAntiForgeryToken]
        public async Task&lt;IActionResult&gt; Create(&#91;Bind("Title,Description,DueDate,Priority,Status,ProjectId")] TaskItem taskItem)
        {
            var userId = User.FindFirstValue(ClaimTypes.NameIdentifier);

            // バリデーションエラーをスキップして強制的に保存
            ModelState.Clear();

            taskItem.UserId = userId;
            taskItem.CreatedAt = DateTime.UtcNow;
            taskItem.UpdatedAt = DateTime.UtcNow;

            _context.Add(taskItem);
            await _context.SaveChangesAsync();

            return RedirectToAction(nameof(Index));
        }

        // 編集画面表示（GET: TaskItems/Edit/5）
        public async Task&lt;IActionResult&gt; Edit(int? id)
        {
            if (id == null)
            {
                return NotFound();
            }

            var userId = User.FindFirstValue(ClaimTypes.NameIdentifier);

            var taskItem = await _context.TaskItems
                .FirstOrDefaultAsync(t =&gt; t.Id == id &amp;&amp; t.UserId == userId);

            if (taskItem == null)
            {
                return NotFound();
            }

            ViewBag.Projects = _context.Projects
                .Where(p =&gt; p.UserId == userId)
                .ToList();

            return View(taskItem);
        }

        // 編集処理（POST: TaskItems/Edit/5）
        &#91;HttpPost]
        &#91;ValidateAntiForgeryToken]
        public async Task&lt;IActionResult&gt; Edit(int id, &#91;Bind("Id,Title,Description,DueDate,Priority,Status,ProjectId,CreatedAt")] TaskItem taskItem)
        {
            if (id != taskItem.Id)
            {
                return NotFound();
            }

            var userId = User.FindFirstValue(ClaimTypes.NameIdentifier);

            // バリデーションエラーをスキップ
            ModelState.Clear();

            try
            {
                taskItem.UserId = userId;
                taskItem.UpdatedAt = DateTime.UtcNow;

                _context.Update(taskItem);
                await _context.SaveChangesAsync();
            }
            catch (DbUpdateConcurrencyException)
            {
                if (!TaskItemExists(taskItem.Id))
                {
                    return NotFound();
                }
                else
                {
                    throw;
                }
            }
            return RedirectToAction(nameof(Index));
        }

        // 削除確認画面（GET: TaskItems/Delete/5）
        public async Task&lt;IActionResult&gt; Delete(int? id)
        {
            if (id == null)
            {
                return NotFound();
            }

            var userId = User.FindFirstValue(ClaimTypes.NameIdentifier);

            var taskItem = await _context.TaskItems
                .Include(t =&gt; t.Project)
                .FirstOrDefaultAsync(m =&gt; m.Id == id &amp;&amp; m.UserId == userId);

            if (taskItem == null)
            {
                return NotFound();
            }

            return View(taskItem);
        }

        // 削除処理（POST: TaskItems/Delete/5）
        &#91;HttpPost, ActionName("Delete")]
        &#91;ValidateAntiForgeryToken]
        public async Task&lt;IActionResult&gt; DeleteConfirmed(int id)
        {
            var userId = User.FindFirstValue(ClaimTypes.NameIdentifier);

            var taskItem = await _context.TaskItems
                .FirstOrDefaultAsync(t =&gt; t.Id == id &amp;&amp; t.UserId == userId);

            if (taskItem != null)
            {
                _context.TaskItems.Remove(taskItem);
                await _context.SaveChangesAsync();
            }

            return RedirectToAction(nameof(Index));
        }

        private bool TaskItemExists(int id)
        {
            var userId = User.FindFirstValue(ClaimTypes.NameIdentifier);
            return _context.TaskItems.Any(e =&gt; e.Id == id &amp;&amp; e.UserId == userId);
        }
    }
}</code>

ビューの作成

Views/TaskItems フォルダを作成
Viewsフォルダで右クリック→追加 → 新しいフォルダー
フォルダ名を「TaskItems」にして作成

1つ目: Index.cshtml（一覧画面）を作成
Views/TaskItems フォルダで右クリック → 追加 → ビュー → Razorビュー
名前はを「Index」 にして作成
以下のコードを記載 

<code>@model IEnumerable&lt;TaskManager.Models.TaskItem&gt;

@{
    ViewData&#91;"Title"] = "タスク一覧";
}

&lt;div class="container mt-4"&gt;
    &lt;div class="d-flex justify-content-between align-items-center mb-4"&gt;
        &lt;h1&gt;@ViewData&#91;"Title"]&lt;/h1&gt;
        &lt;a asp-action="Create" class="btn btn-primary"&gt;
            &lt;i class="bi bi-plus-circle"&gt;&lt;/i&gt; 新しいタスク
        &lt;/a&gt;
    &lt;/div&gt;

    @if (!Model.Any())
    {
        &lt;div class="alert alert-info"&gt;
            &lt;i class="bi bi-info-circle"&gt;&lt;/i&gt; タスクがまだありません。新しいタスクを作成しましょう！
        &lt;/div&gt;
    }
    else
    {
        &lt;div class="row"&gt;
            @foreach (var item in Model)
            {
                &lt;div class="col-md-6 col-lg-4 mb-3"&gt;
                    &lt;div class="card h-100 shadow-sm"&gt;
                        &lt;div class="card-body"&gt;
                            &lt;h5 class="card-title"&gt;
                                @Html.DisplayFor(modelItem =&gt; item.Title)
                            &lt;/h5&gt;

                            @if (!string.IsNullOrEmpty(item.Description))
                            {
                                &lt;p class="card-text text-muted"&gt;
                                    @(item.Description.Length &gt; 100 ? item.Description.Substring(0, 100) + "..." : item.Description)
                                &lt;/p&gt;
                            }

                            &lt;div class="mb-2"&gt;
                                @switch (item.Priority)
                                {
                                    case TaskManager.Models.TaskPriority.High:
                                        &lt;span class="badge bg-danger"&gt;高優先度&lt;/span&gt;
                                        break;
                                    case TaskManager.Models.TaskPriority.Medium:
                                        &lt;span class="badge bg-warning text-dark"&gt;中優先度&lt;/span&gt;
                                        break;
                                    case TaskManager.Models.TaskPriority.Low:
                                        &lt;span class="badge bg-secondary"&gt;低優先度&lt;/span&gt;
                                        break;
                                }

                                @switch (item.Status)
                                {
                                    case TaskManager.Models.TaskStatus.NotStarted:
                                        &lt;span class="badge bg-light text-dark"&gt;未着手&lt;/span&gt;
                                        break;
                                    case TaskManager.Models.TaskStatus.InProgress:
                                        &lt;span class="badge bg-info"&gt;進行中&lt;/span&gt;
                                        break;
                                    case TaskManager.Models.TaskStatus.Completed:
                                        &lt;span class="badge bg-success"&gt;完了&lt;/span&gt;
                                        break;
                                }
                            &lt;/div&gt;

                            @if (item.DueDate.HasValue)
                            {
                                &lt;p class="card-text"&gt;
                                    &lt;small class="text-muted"&gt;
                                        &lt;i class="bi bi-calendar"&gt;&lt;/i&gt;
                                        期限: @item.DueDate.Value.ToLocalTime().ToString("yyyy/MM/dd")
                                    &lt;/small&gt;
                                &lt;/p&gt;
                            }

                            @if (item.Project != null)
                            {
                                &lt;p class="card-text"&gt;
                                    &lt;small class="text-muted"&gt;
                                        &lt;i class="bi bi-folder"&gt;&lt;/i&gt; @item.Project.Name
                                    &lt;/small&gt;
                                &lt;/p&gt;
                            }
                        &lt;/div&gt;
                        &lt;div class="card-footer bg-transparent"&gt;
                            &lt;a asp-action="Details" asp-route-id="@item.Id" class="btn btn-sm btn-outline-primary"&gt;詳細&lt;/a&gt;
                            &lt;a asp-action="Edit" asp-route-id="@item.Id" class="btn btn-sm btn-outline-secondary"&gt;編集&lt;/a&gt;
                            &lt;a asp-action="Delete" asp-route-id="@item.Id" class="btn btn-sm btn-outline-danger"&gt;削除&lt;/a&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            }
        &lt;/div&gt;
    }
&lt;/div&gt;</code>

2つ目: Create.cshtml を作成
Views/TaskItems フォルダを右クリック → 追加 → ビュー → Razorビュー
名前を「Create」 にして作成
以下のコードを記載

<code>@model TaskManager.Models.TaskItem
@{
    ViewData&#91;"Title"] = "新しいタスクを作成";
}

&lt;div class="container mt-4"&gt;
    &lt;div class="row justify-content-center"&gt;
        &lt;div class="col-md-8"&gt;
            &lt;h1&gt;@ViewData&#91;"Title"]&lt;/h1&gt;
            &lt;hr /&gt;

            &lt;form action="/TaskItems/Create" method="post"&gt;
                @Html.AntiForgeryToken()

                &lt;div class="mb-3"&gt;
                    &lt;label for="Title" class="form-label"&gt;タイトル &lt;span class="text-danger"&gt;*&lt;/span&gt;&lt;/label&gt;
                    &lt;input type="text" id="Title" name="Title" class="form-control" placeholder="タスクのタイトルを入力" required /&gt;
                &lt;/div&gt;

                &lt;div class="mb-3"&gt;
                    &lt;label for="Description" class="form-label"&gt;説明&lt;/label&gt;
                    &lt;textarea id="Description" name="Description" class="form-control" rows="4" placeholder="タスクの詳細を入力"&gt;&lt;/textarea&gt;
                &lt;/div&gt;

                &lt;div class="row"&gt;
                    &lt;div class="col-md-6 mb-3"&gt;
                        &lt;label for="Priority" class="form-label"&gt;優先度&lt;/label&gt;
                        &lt;select id="Priority" name="Priority" class="form-select"&gt;
                            &lt;option value="0"&gt;低&lt;/option&gt;
                            &lt;option value="1" selected&gt;中&lt;/option&gt;
                            &lt;option value="2"&gt;高&lt;/option&gt;
                        &lt;/select&gt;
                    &lt;/div&gt;

                    &lt;div class="col-md-6 mb-3"&gt;
                        &lt;label for="Status" class="form-label"&gt;ステータス&lt;/label&gt;
                        &lt;select id="Status" name="Status" class="form-select"&gt;
                            &lt;option value="0" selected&gt;未着手&lt;/option&gt;
                            &lt;option value="1"&gt;進行中&lt;/option&gt;
                            &lt;option value="2"&gt;完了&lt;/option&gt;
                        &lt;/select&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;div class="row"&gt;
                    &lt;div class="col-md-6 mb-3"&gt;
                        &lt;label for="DueDate" class="form-label"&gt;期限&lt;/label&gt;
                        &lt;input type="date" id="DueDate" name="DueDate" class="form-control" /&gt;
                    &lt;/div&gt;

                    &lt;div class="col-md-6 mb-3"&gt;
                        &lt;label for="ProjectId" class="form-label"&gt;プロジェクト&lt;/label&gt;
                        &lt;select id="ProjectId" name="ProjectId" class="form-select"&gt;
                            &lt;option value=""&gt;プロジェクトなし&lt;/option&gt;
                            @if (ViewBag.Projects != null)
                            {
                                @foreach (var project in ViewBag.Projects as List&lt;TaskManager.Models.Project&gt;)
                                {
                                    &lt;option value="@project.Id"&gt;@project.Name&lt;/option&gt;
                                }
                            }
                        &lt;/select&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;div class="mb-3"&gt;
                    &lt;button type="submit" class="btn btn-primary"&gt;
                        作成
                    &lt;/button&gt;
                    &lt;a href="/TaskItems/Index" class="btn btn-secondary"&gt;
                        キャンセル
                    &lt;/a&gt;
                &lt;/div&gt;
            &lt;/form&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

@*
@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
*@</code>

3つ目: Details.cshtml（詳細画面）を作成
Views/TaskItems フォルダを右クリック → 追加 → ビュー → Razorビュー
名前を「Details」 にして作成
以下のコードを記載

<code>@model TaskManager.Models.TaskItem

@{
    ViewData&#91;"Title"] = "タスク詳細";
}

&lt;div class="container mt-4"&gt;
    &lt;div class="row justify-content-center"&gt;
        &lt;div class="col-md-8"&gt;
            &lt;div class="d-flex justify-content-between align-items-center mb-3"&gt;
                &lt;h1&gt;@ViewData&#91;"Title"]&lt;/h1&gt;
                &lt;div&gt;
                    &lt;a asp-action="Edit" asp-route-id="@Model.Id" class="btn btn-warning"&gt;
                        &lt;i class="bi bi-pencil"&gt;&lt;/i&gt; 編集
                    &lt;/a&gt;
                    &lt;a asp-action="Index" class="btn btn-secondary"&gt;
                        &lt;i class="bi bi-arrow-left"&gt;&lt;/i&gt; 一覧に戻る
                    &lt;/a&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;div class="card shadow-sm"&gt;
                &lt;div class="card-body"&gt;
                    &lt;h2 class="card-title mb-4"&gt;@Html.DisplayFor(model =&gt; model.Title)&lt;/h2&gt;

                    &lt;dl class="row"&gt;
                        &lt;dt class="col-sm-3"&gt;説明&lt;/dt&gt;
                        &lt;dd class="col-sm-9"&gt;
                            @if (!string.IsNullOrEmpty(Model.Description))
                            {
                                &lt;p style="white-space: pre-wrap;"&gt;@Model.Description&lt;/p&gt;
                            }
                            else
                            {
                                &lt;span class="text-muted"&gt;説明なし&lt;/span&gt;
                            }
                        &lt;/dd&gt;

                        &lt;dt class="col-sm-3"&gt;優先度&lt;/dt&gt;
                        &lt;dd class="col-sm-9"&gt;
                            @switch (Model.Priority)
                            {
                                case TaskManager.Models.TaskPriority.High:
                                    &lt;span class="badge bg-danger"&gt;高優先度&lt;/span&gt;
                                    break;
                                case TaskManager.Models.TaskPriority.Medium:
                                    &lt;span class="badge bg-warning text-dark"&gt;中優先度&lt;/span&gt;
                                    break;
                                case TaskManager.Models.TaskPriority.Low:
                                    &lt;span class="badge bg-secondary"&gt;低優先度&lt;/span&gt;
                                    break;
                            }
                        &lt;/dd&gt;

                        &lt;dt class="col-sm-3"&gt;ステータス&lt;/dt&gt;
                        &lt;dd class="col-sm-9"&gt;
                            @switch (Model.Status)
                            {
                                case TaskManager.Models.TaskStatus.NotStarted:
                                    &lt;span class="badge bg-light text-dark"&gt;未着手&lt;/span&gt;
                                    break;
                                case TaskManager.Models.TaskStatus.InProgress:
                                    &lt;span class="badge bg-info"&gt;進行中&lt;/span&gt;
                                    break;
                                case TaskManager.Models.TaskStatus.Completed:
                                    &lt;span class="badge bg-success"&gt;完了&lt;/span&gt;
                                    break;
                            }
                        &lt;/dd&gt;

                        &lt;dt class="col-sm-3"&gt;期限&lt;/dt&gt;
                        &lt;dd class="col-sm-9"&gt;
                            @if (Model.DueDate.HasValue)
                            {
                                &lt;i class="bi bi-calendar"&gt;&lt;/i&gt; 
                                @Model.DueDate.Value.ToLocalTime().ToString("yyyy年MM月dd日")
                            }
                            else
                            {
                                &lt;span class="text-muted"&gt;期限なし&lt;/span&gt;
                            }
                        &lt;/dd&gt;

                        &lt;dt class="col-sm-3"&gt;プロジェクト&lt;/dt&gt;
                        &lt;dd class="col-sm-9"&gt;
                            @if (Model.Project != null)
                            {
                                &lt;i class="bi bi-folder"&gt;&lt;/i&gt; 
                                @Model.Project.Name
                            }
                            else
                            {
                                &lt;span class="text-muted"&gt;プロジェクトなし&lt;/span&gt;
                            }
                        &lt;/dd&gt;

                        &lt;dt class="col-sm-3"&gt;作成日時&lt;/dt&gt;
                        &lt;dd class="col-sm-9"&gt;
                            @Model.CreatedAt.ToLocalTime().ToString("yyyy年MM月dd日 HH:mm")
                        &lt;/dd&gt;

                        &lt;dt class="col-sm-3"&gt;更新日時&lt;/dt&gt;
                        &lt;dd class="col-sm-9"&gt;
                            @Model.UpdatedAt.ToLocalTime().ToString("yyyy年MM月dd日 HH:mm")
                        &lt;/dd&gt;
                    &lt;/dl&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;div class="mt-3"&gt;
                &lt;a asp-action="Delete" asp-route-id="@Model.Id" class="btn btn-danger"&gt;
                    &lt;i class="bi bi-trash"&gt;&lt;/i&gt; 削除
                &lt;/a&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code>

4つ目: Edit.cshtml（編集画面）を作成
Views/TaskItems フォルダを右クリック → 追加 → ビュー → Razorビュー
名前を「Edit」 にして作成
以下のコードを記載

<code>@model TaskManager.Models.TaskItem

@{
    ViewData&#91;"Title"] = "タスクを編集";
}

&lt;div class="container mt-4"&gt;
    &lt;div class="row justify-content-center"&gt;
        &lt;div class="col-md-8"&gt;
            &lt;h1&gt;@ViewData&#91;"Title"]&lt;/h1&gt;
            &lt;hr /&gt;

            &lt;form asp-action="Edit" method="post"&gt;
                &lt;div asp-validation-summary="ModelOnly" class="text-danger"&gt;&lt;/div&gt;

                &lt;input type="hidden" asp-for="Id" /&gt;
                &lt;input type="hidden" asp-for="CreatedAt" /&gt;

                &lt;div class="mb-3"&gt;
                    &lt;label asp-for="Title" class="form-label"&gt;タイトル &lt;span class="text-danger"&gt;*&lt;/span&gt;&lt;/label&gt;
                    &lt;input asp-for="Title" class="form-control" placeholder="タスクのタイトルを入力" /&gt;
                    &lt;span asp-validation-for="Title" class="text-danger"&gt;&lt;/span&gt;
                &lt;/div&gt;

                &lt;div class="mb-3"&gt;
                    &lt;label asp-for="Description" class="form-label"&gt;説明&lt;/label&gt;
                    &lt;textarea asp-for="Description" class="form-control" rows="4" placeholder="タスクの詳細を入力"&gt;&lt;/textarea&gt;
                    &lt;span asp-validation-for="Description" class="text-danger"&gt;&lt;/span&gt;
                &lt;/div&gt;

                &lt;div class="row"&gt;
                    &lt;div class="col-md-6 mb-3"&gt;
                        &lt;label asp-for="Priority" class="form-label"&gt;優先度&lt;/label&gt;
                        &lt;select asp-for="Priority" class="form-select"&gt;
                            &lt;option value="0"&gt;低&lt;/option&gt;
                            &lt;option value="1"&gt;中&lt;/option&gt;
                            &lt;option value="2"&gt;高&lt;/option&gt;
                        &lt;/select&gt;
                        &lt;span asp-validation-for="Priority" class="text-danger"&gt;&lt;/span&gt;
                    &lt;/div&gt;

                    &lt;div class="col-md-6 mb-3"&gt;
                        &lt;label asp-for="Status" class="form-label"&gt;ステータス&lt;/label&gt;
                        &lt;select asp-for="Status" class="form-select"&gt;
                            &lt;option value="0"&gt;未着手&lt;/option&gt;
                            &lt;option value="1"&gt;進行中&lt;/option&gt;
                            &lt;option value="2"&gt;完了&lt;/option&gt;
                        &lt;/select&gt;
                        &lt;span asp-validation-for="Status" class="text-danger"&gt;&lt;/span&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;div class="row"&gt;
                    &lt;div class="col-md-6 mb-3"&gt;
                        &lt;label asp-for="DueDate" class="form-label"&gt;期限&lt;/label&gt;
                        &lt;input asp-for="DueDate" type="date" class="form-control" /&gt;
                        &lt;span asp-validation-for="DueDate" class="text-danger"&gt;&lt;/span&gt;
                    &lt;/div&gt;

                    &lt;div class="col-md-6 mb-3"&gt;
                        &lt;label asp-for="ProjectId" class="form-label"&gt;プロジェクト&lt;/label&gt;
                        &lt;select asp-for="ProjectId" class="form-select"&gt;
                            &lt;option value=""&gt;プロジェクトなし&lt;/option&gt;
                            @foreach (var project in ViewBag.Projects as List&lt;TaskManager.Models.Project&gt;)
                            {
                                &lt;option value="@project.Id"&gt;@project.Name&lt;/option&gt;
                            }
                        &lt;/select&gt;
                        &lt;span asp-validation-for="ProjectId" class="text-danger"&gt;&lt;/span&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;div class="mb-3"&gt;
                    &lt;button type="submit" class="btn btn-primary"&gt;
                        &lt;i class="bi bi-check-circle"&gt;&lt;/i&gt; 保存
                    &lt;/button&gt;
                    &lt;a asp-action="Details" asp-route-id="@Model.Id" class="btn btn-secondary"&gt;
                        &lt;i class="bi bi-x-circle"&gt;&lt;/i&gt; キャンセル
                    &lt;/a&gt;
                &lt;/div&gt;
            &lt;/form&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

@section Scripts {
    @{
        await Html.RenderPartialAsync("_ValidationScriptsPartial");
    }
}</code>

5つ目（最後！）: Delete.cshtml（削除確認画面）を作成
Views/TaskItems フォルダを右クリック → 追加 → ビュー → Razorビュー
名前を「Delete」 にして作成
以下のコードを記載

<code>@model TaskManager.Models.TaskItem

@{
    ViewData&#91;"Title"] = "タスクを削除";
}

&lt;div class="container mt-4"&gt;
    &lt;div class="row justify-content-center"&gt;
        &lt;div class="col-md-8"&gt;
            &lt;h1 class="text-danger"&gt;@ViewData&#91;"Title"]&lt;/h1&gt;
            &lt;hr /&gt;

            &lt;div class="alert alert-warning"&gt;
                &lt;i class="bi bi-exclamation-triangle"&gt;&lt;/i&gt;
                &lt;strong&gt;警告:&lt;/strong&gt; このタスクを削除してもよろしいですか？この操作は取り消せません。
            &lt;/div&gt;

            &lt;div class="card shadow-sm"&gt;
                &lt;div class="card-body"&gt;
                    &lt;h3 class="card-title mb-4"&gt;@Html.DisplayFor(model =&gt; model.Title)&lt;/h3&gt;

                    &lt;dl class="row"&gt;
                        &lt;dt class="col-sm-3"&gt;説明&lt;/dt&gt;
                        &lt;dd class="col-sm-9"&gt;
                            @if (!string.IsNullOrEmpty(Model.Description))
                            {
                                &lt;p style="white-space: pre-wrap;"&gt;@Model.Description&lt;/p&gt;
                            }
                            else
                            {
                                &lt;span class="text-muted"&gt;説明なし&lt;/span&gt;
                            }
                        &lt;/dd&gt;

                        &lt;dt class="col-sm-3"&gt;優先度&lt;/dt&gt;
                        &lt;dd class="col-sm-9"&gt;
                            @switch (Model.Priority)
                            {
                                case TaskManager.Models.TaskPriority.High:
                                    &lt;span class="badge bg-danger"&gt;高優先度&lt;/span&gt;
                                    break;
                                case TaskManager.Models.TaskPriority.Medium:
                                    &lt;span class="badge bg-warning text-dark"&gt;中優先度&lt;/span&gt;
                                    break;
                                case TaskManager.Models.TaskPriority.Low:
                                    &lt;span class="badge bg-secondary"&gt;低優先度&lt;/span&gt;
                                    break;
                            }
                        &lt;/dd&gt;

                        &lt;dt class="col-sm-3"&gt;ステータス&lt;/dt&gt;
                        &lt;dd class="col-sm-9"&gt;
                            @switch (Model.Status)
                            {
                                case TaskManager.Models.TaskStatus.NotStarted:
                                    &lt;span class="badge bg-light text-dark"&gt;未着手&lt;/span&gt;
                                    break;
                                case TaskManager.Models.TaskStatus.InProgress:
                                    &lt;span class="badge bg-info"&gt;進行中&lt;/span&gt;
                                    break;
                                case TaskManager.Models.TaskStatus.Completed:
                                    &lt;span class="badge bg-success"&gt;完了&lt;/span&gt;
                                    break;
                            }
                        &lt;/dd&gt;

                        &lt;dt class="col-sm-3"&gt;期限&lt;/dt&gt;
                        &lt;dd class="col-sm-9"&gt;
                            @if (Model.DueDate.HasValue)
                            {
                                &lt;i class="bi bi-calendar"&gt;&lt;/i&gt; 
                                @Model.DueDate.Value.ToLocalTime().ToString("yyyy年MM月dd日")
                            }
                            else
                            {
                                &lt;span class="text-muted"&gt;期限なし&lt;/span&gt;
                            }
                        &lt;/dd&gt;

                        &lt;dt class="col-sm-3"&gt;プロジェクト&lt;/dt&gt;
                        &lt;dd class="col-sm-9"&gt;
                            @if (Model.Project != null)
                            {
                                &lt;i class="bi bi-folder"&gt;&lt;/i&gt; 
                                @Model.Project.Name
                            }
                            else
                            {
                                &lt;span class="text-muted"&gt;プロジェクトなし&lt;/span&gt;
                            }
                        &lt;/dd&gt;

                        &lt;dt class="col-sm-3"&gt;作成日時&lt;/dt&gt;
                        &lt;dd class="col-sm-9"&gt;
                            @Model.CreatedAt.ToLocalTime().ToString("yyyy年MM月dd日 HH:mm")
                        &lt;/dd&gt;
                    &lt;/dl&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;form asp-action="Delete" method="post" class="mt-3"&gt;
                &lt;input type="hidden" asp-for="Id" /&gt;
                &lt;button type="submit" class="btn btn-danger"&gt;
                    &lt;i class="bi bi-trash"&gt;&lt;/i&gt; 削除する
                &lt;/button&gt;
                &lt;a asp-action="Index" class="btn btn-secondary"&gt;
                    &lt;i class="bi bi-x-circle"&gt;&lt;/i&gt; キャンセル
                &lt;/a&gt;
            &lt;/form&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code>

仕上げ

最後にナビゲーションメニューを追加します
Views/Shared/_Layout.cshtmlのナビゲーションバーの部分にタスク管理へのリンクを追加します
_Layout.cshtml の全コードは以下の通りです

<code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
    &lt;title&gt;@ViewData&#91;"Title"] - TaskManager&lt;/title&gt;
    &lt;link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" /&gt;
    &lt;link rel="stylesheet" href="~/css/site.css" asp-append-version="true" /&gt;
    &lt;link rel="stylesheet" href="~/TaskManager.styles.css" asp-append-version="true" /&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;header&gt;
        &lt;nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3"&gt;
            &lt;div class="container-fluid"&gt;
                &lt;a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index"&gt;TaskManager&lt;/a&gt;
                &lt;button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation"&gt;
                    &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
                &lt;/button&gt;
                &lt;div class="navbar-collapse collapse d-sm-inline-flex justify-content-between"&gt;
                    &lt;ul class="navbar-nav flex-grow-1"&gt;
                        &lt;li class="nav-item"&gt;
                            &lt;a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index"&gt;ホーム&lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li class="nav-item"&gt;
                            &lt;a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy"&gt;プライバシー&lt;/a&gt;
                        &lt;/li&gt;
                        &lt;li class="nav-item"&gt;
                            &lt;a class="nav-link text-dark" asp-controller="TaskItems" asp-action="Index"&gt;📋 タスク管理&lt;/a&gt;
                        &lt;/li&gt;
                    &lt;/ul&gt;
                    &lt;partial name="_LoginPartial" /&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/nav&gt;
    &lt;/header&gt;
    &lt;div class="container"&gt;
        &lt;main role="main" class="pb-3"&gt;
            @RenderBody()
        &lt;/main&gt;
    &lt;/div&gt;

    &lt;footer class="border-top footer text-muted"&gt;
        &lt;div class="container"&gt;
            &amp;copy; 2025 - TaskManager - &lt;a asp-area="" asp-controller="Home" asp-action="Privacy"&gt;Privacy&lt;/a&gt;
        &lt;/div&gt;
    &lt;/footer&gt;
    &lt;script src="~/lib/jquery/dist/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"&gt;&lt;/script&gt;
    &lt;script src="~/js/site.js" asp-append-version="true"&gt;&lt;/script&gt;
    @await RenderSectionAsync("Scripts", required: false)
&lt;/body&gt;
&lt;/html&gt;
</code>

実行

これで一通りプログラムが完成したので実行してみます
結果は…画面自体は表示されましたが英語表記でぱっと見でわかりづらかったり
一部ボタンが反応しなかったりしたので修正を加えていきます
今回はここまでにして修正編は次回執筆していきますのでお楽しみに！！