【初心者向け】はじめての ASP.NET Core 作りながら学習（5）- MVC

オウルです。

前回の NLog 編の続きです。今回はコントローラーとビューを作成してブラウザに表示することを目標とします。

【初心者向け】はじめての ASP.NET Core 作りながら学習（4）- NLog

https://book2525stack.com/2019/05/09/beginner-aspnetcore-nlog

オウルです。前回のIntelliCode編の続きです。今回はアプリケーション開発において重要なログです。ASP.NET Core では、組み込みやサードパーティ製のさまざまなログプロバイダーと連携するログ API がサポートされています。公式ページにはログプロバイダーの一覧がありますよ。「はじめての ASP.NET Core 作りながら学習」では、その中で便利な NLog を使用します。公式：サードパーティ製のログプロバイダーの一覧NLogNLogとはNLog is a flexible and free logging platform for various .NET platforms, including .NET standard...

通常だとログインから実装するのが自然かと思いますが、ログイン機能のメンバーシップシステムである ASP.NET Core Identity は、カスタマイズなしでも個人的にハードルが高いと思うので、まずは ASP.NET Core MVC に慣れてから実装したいと思います。

では、MVC （モデル、ビュー、コントローラー）のうち、V（ビュー）と C（コントローラー）を作成します。とその前に、MVC について公式サイトから少し知識を得ておきます。

MVC

The Model-View-Controller (MVC) architectural pattern separates an application into three main groups of components: Models, Views, and Controllers. This pattern helps to achieve separation of concerns. Using this pattern, user requests are routed to a Controller which is responsible for working with the Model to perform user actions and/or retrieve results of queries. The Controller chooses the View to display to the user, and provides it with any Model data it requires.

引用: ASP.NET Core MVC の概要

翻訳

MVCアーキテクチャパターンでは、アプリケーションを 3 つの主要なコンポーネントモデル・ビュー・コントローラーのグループに分けます。このパターンは、分離を実現するのに役立ちます。このパターンを使用すると、ユーザーの要求が、ユーザーの操作を実行したり、クエリの結果を取得したりするためにモデルを操作する役割がある、コントローラーにルーティングされます。コントローラーでは、ユーザーに表示するビューを選び、必要なモデルデータと共に提供します。

少し翻訳が分かりにくいですが、超簡単に言うと ”責任（役割）を分離” しましょうってことです。「はじめての ASP.NET Core 作りながら学習」ではテストは範囲外ですが、一般的に ”分離” することによりテストがしやすくなると言われています。

テストがしやすくなるとどうなるのかというと、ユニットテストの自動化 ⇒ CI/CD（Continous Integration/Contiious Delivery）の実現性が高まります。因みに僕は、CI/CDの経験はなしです（なのでやってみたい。Azure Dev Ops を使って CI/CD も組み込みたいと密かに思っています）

初心者の方に勘違いされないようにテストの自動化を少し補足すると、テストの自動化させるために今のところテストコードはコーディングする必要があります。つまりテストの自動化とは、何かの処理（例えばビルドやGit push など）するときにコーディングしたテストコードが実行されるように自動化するということです。

少し脱線しましたが、MVCについてもう少し勉強したいと思った方は、ASP.NET Core MVC の概要を読むと理解が深まると思います。

コントローラーを作成

では早速、コントローラーを作成します。

ソリューションエクスプローラーから Mvc プロジェクトの Controllers を選択して右クリックメニューより [追加] / [コントローラー] を選びます。

任意のコントローラー名で作成します。命名規則として〇〇Controller とする必要があります。

Scaffolding（スキャフォールディング）によって生成されたコードが次です。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace BlueOwl.DrawingMemory.WebMvc.Controllers
{
    public class DrawingController : Controller
    {
        // HttpGetAttribute で HTTP リクエストメソッドを定義します
        [HttpGet]
        public IActionResult Index()
        {
            // このアクションはアクション名（Index）と対応するビューを返します
            // 既定の動作は、呼び出し元のアクション メソッドと同じ名前を持つビューを返します
            return View();
        }
    }
}

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

using Microsoft.AspNetCore.Mvc;

namespace BlueOwl.DrawingMemory.WebMvc.Controllers

{

public class DrawingController : Controller

{

// HttpGetAttribute で HTTP リクエストメソッドを定義します

[HttpGet]

public IActionResult Index()

{

// このアクションはアクション名（Index）と対応するビューを返します

// 既定の動作は、呼び出し元のアクションメソッドと同じ名前を持つビューを返します

return View();

}

ビューの検出

アクションがビューを返すときに、ビューの検出と呼ばれるプロセスが実行されます。ビュー名に基づいて、使用するビューファイルを決定します。次の順序で一致するビューファイルを検索します。

1. Views/[ControllerName]/[ViewName].cshtml
2. Views/Shared/[ViewName].cshtml

MDN：HTTP リクエストメソッド

ビューを作成

続いて、ビューを作成します。

ソリューションエクスプローラーから Mvc プロジェクトの Views を選択して右クリックメニューより [追加] / [新しいフォルダ] を選び、Drawing フォルダを作成します。次に Drawing フォルダを選択して右クリックメニューから [追加] / [新しい項目] を選びます。

コントローラー名のフォルダを作成したのは、通常ビューファイルはコントローラーの名前が付いたフォルダーにグループ化されます。

ビューは Razor を使用して作成していきます。Razor とは、Web ページにサーバーベースのコードを埋め込むための Razor マークアップ、C#、HTML で構成されたマークアップ構文です。先ほど作成したビューを見ると分かりますが、拡張子は .cshtml です。

作成した Index.cshtml に少しコードを足します。

@*
	For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
}
<h2>DrawingController.Index</h2>
<h3>hello world.</h3>

For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860

}

<h2>DrawingController.Index</h2>

<h3>hello world.</h3>

ビューを表示

作成したビューをデバックでブラウザに初期表示しますが、このままでは表示できません。ASP.NET Core MVC にはルーティングという機能があります。このルーティング機能はURL マッピングです。もう少し簡単にいうと、ブラウザに入力されたURLを解析してコントローラーのアクションメソッドを実行します。

初期表示のルート設定

ASP.NET Core MVC にはデフォルトでルートテンプレートが用意されているので、これを使用します。

Startup.cs

Startup.cs の Configureメソッドの app.UseMvc を下記のように変更します。

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
	if (env.IsDevelopment())
	{
		app.UseDeveloperExceptionPage();
		app.UseDatabaseErrorPage();
	}
	else
	{
		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.UseCookiePolicy();

	app.UseAuthentication();

	app.UseMvc(routes =>
	{
           // デフォルトのルートテンプレート
           // 次のように変更します
           routes.MapRoute(
             name: "default",
             template: "{controller=Drawing}/{action=Index}/{id?}");
	});
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env)

{

if (env.IsDevelopment())

{

app.UseDeveloperExceptionPage();

app.UseDatabaseErrorPage();

}

else

{

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.UseCookiePolicy();

app.UseAuthentication();

app.UseMvc(routes =>

{

// デフォルトのルートテンプレート

// 次のように変更します

routes.MapRoute(

name: "default",

template: "{controller=Drawing}/{action=Index}/{id?}");

});

}

Startup.cs には他にもデフォルトでコードがありますが、これから変更したり追加していくようになると思います。

デバッグ実行

では、デバッグ実行して作成したコントローラーとビューが動作するか確認してみます。

おぉ、表示されました！

しかし、気になることが１つあります。ビューには、ビュー名と hello world. のみ追加しましたが、ナビやフッターが表示されています。ナビやフッターを追加した覚えはありません。どういうことでしょ？！この仕組みは次回にしたいと思います。

レンダリングされた Web ページの HTML

Chrome のデベロッパーツールでレンダリングされた Web ページの HTML を確認することができます。デベロッパーツールで確認してみると今回ビューで作成した内容は下のタグの中にありました。

<!-- main タグは作成したビューには追加していない -->
<main role="main" class="pb-3">
  <!-- 作成したビューに追加 -->       
  <h2>DrawingController.Index</h2>
  <h3>hello world.</h3>
</main>

<h2>DrawingController.Index</h2>

<h3>hello world.</h3>

</main>

Chrome DevTools

まとめ

- MVC の目的は、責任（役割）の分離
- ビューの検出は、Views/[ControllerName] ⇒ Views/Shared で検索
- ルーティング機能は URL マッピング
- ビューは Razor を使用して作成

「はじめての ASP.NET Core」シリーズ

「【初心者向け】ASP.NET Core Identity」シリーズ

TechAcademyの無料体験

【初心者向け】はじめての ASP.NET Core 作りながら学習（5）- MVC 1

MVC

コントローラーを作成

ビューの検出

ビューを作成

ビューを表示

初期表示のルート設定

Startup.cs

デバッグ実行

レンダリングされた Web ページの HTML

まとめ

関連記事:

コメントを残すコメントをキャンセル

MVC

コントローラーを作成

ビューの検出

ビューを作成

ビューを表示

初期表示のルート設定

Startup.cs

デバッグ実行

レンダリングされた Web ページの HTML

まとめ

関連記事:

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル