你的浏览器还没开启 Javascript 功能!

ASP.NET Core 入門2 ASP.NET Core MVCフレームワークを使ったプロジェクト構築

前回に引き続きASP.NET Coreを学習メモを残していきたいと思います。

前提

1. このコンテンツを扱うこと

  • dotnet cli を用いてソリューションとプロジェクトの作成
  • .NET Core Web に基づくAPS.NET Core MVC プロジェクトの構築
  • ASP.NET Core MVCの基礎内容

2. 環境情報

環境/ソフトウェア内容
オペレーティングシステムWindows 10 1903
.NET Core SDK2.1.801
IDEVisual Studio Code 1.37.1
BrowserGoogle Chrome 76.0.3809.132

3. 前提知識

準備作業

1. ソリューションの作成

.NETフレームワークのプロジェクト構築には二つの概念があって、ソリューション(Solution)&プロジェクト(Project)。どんなシステムの開発にしろ、すべてプロジェクトを作成しなければいけない。ソリューションはプロジェクトを組み合わせたものを指しています。

開発するシステムが小規模であれば、1つのプロジェクトだけで事が足りますが、レイヤー分けや疎結合を求めたときに、プロジェクトでフォルダ分けでは不十分です。同じプロジェクト内のクラスは参照できてしまうからです。そのときにレイヤーごとにプロジェクトを作成し、プロジェクトの参照を用いることで、よりコードが再利用しやすくなり、移行も楽になります。

  • ソリューション

    • 全体のビルドに関する構成情報を保持している。
    • 複数のプロジェクトをソリューションでまとめる
    • *.slnの拡張子を持つ
  • プロジェクト

    • プロジェクトのビルドに関する構成情報を保持している。
    • 1つの基本的なプロジェクトは1つのアセンブリを出力する(exe, dll)
    • *.csproj(C#)の拡張子を持つ。

Javaで例えると、Mavenの親プロジェクトと子モジュールの関係ですかね。

では実際にソリューションを作成していきます。

  1. ソリューションフォルダの作成

    ## ソリューションフォルダ作成
    mkdir ds.Tutorial
    
    ## フォルダに入る
    mkdir ds.Tutorial
  2. ソリューションファイルの作成

    dotnet new sln -n ds.Tutorial
  3. Webプロジェクトの作成

    dotnet new web -n ds.Tutorial.web
  4. プロジェクトをソリューションに追加する

    dotnet sln add ds.Tutorial.web

2. VSCode拡張機能

拡張機能説明
vscode-solution-explorerソリューション管理用

VSCodeでソリューションの表示

VSCodeでソリューションフォルダを開きます。

code .

Ctrl + Shift + Pでコマンドパレットを開き[View:Show Solution]を入力

するとサイドバーがソリューションとプロジェクトのツリー表示され、Visual Studioに似たUIになります。

ASP.NET Core MVCでHelloWorld

1. ASP.NET Core MVCを追加

Startup.csを下記のように修正し、MVCのモジュール導入とデフォルトルートを設定します。

public class Startup {
    public void ConfigureServices (IServiceCollection services) {
        // MVCモジュールの導入
        services.AddMvc ();
    }

    public void Configure (IApplicationBuilder app, IHostingEnvironment env) {

        if (env.IsDevelopment ()) {
            app.UseDeveloperExceptionPage ();
        }

        app.UseMvc (routes => {
            // デフォルトルートの設定
            routes.MapRoute (
                name: "Default",
                template: "{controller}/{action}",
                defaults : new { controller = "Home", action = "Index" }
            );
        });
    }
}

2. ControllerとActionメソッドを作成する

ds.Tutorial.webのフォルダ配下にControllersのフォルダを新規作成し、そのフォルダ内にHomeControllerのクラスを作成します。
クラスの中身は下記です。

using System;
// 1.MVC名前空間を追加
using Microsoft.AspNetCore.Mvc;

namespace ds.Tutorial.web.Controllers {

    // 2. Controllerを継承
    public class HomeController : Controller {

        // 3. Action Methodの定義
        public IActionResult Index () {
            return Content ("Hello World!");
        }
    }
}

3. プロジェクトの起動とデバッグ

恒例のF5でデバッグすると、下記と同じようにWebページが表示されます。

Startup.csで設定したルートは{controller}/{action}に従いリクエストを処理します。
そして、初期値がcontroller = "Home", action = "Index" であるため、HelloWorldが最初に表示されます。

routes.MapRoute (
    name: "Default",
    template: "{controller}/{action}",
    defaults : new { controller = "Home", action = "Index" }
);

もちろん、http://localhost:5001/home/index でも同じ結果が得られます。

ASP.NET Core MVCでビューエンジンを作成する

1. Viewを返すActionを作成

HomeControllerでTimeのAction methodを追加します。

public IActionResult Time(){
    ViewBag.ServerTime = DateTime.Now;
    return View("Time");
}

2. Viewエンジンの追加

Viewsという名前のフォルダを作成し、その配下にHomeというフォルダも作成します。
ASP.NET Core MVC はデフォルトでは次のような順番にViewエンジンを探しに行きます。Viewエンジンが見つからない時点でエラーが発生します。

  • /Views/{ControllerName}
  • /Views/Shared
  • /Pages/Shared

/Views/Home/Time.cshtmlのファイルを作成して、中身を下記のように作ります。

@ViewBag.ServerTime -dongsu.dev

3. 起動&デバッグ

F5でデバッグ起動し、http://localhost:50001/home/time にアクセスすると下記のように表示されるはずです。

備考

今回作成したソースコードです。

GitHubリポジトリ

では!!( `ー´)ノ