VS Code で ASP.NET MVC (Part 1) - MVC プロジェクトの作成と Hello World

8976 ワード
ASP.NET_MVC 備忘録 初心者 VSCode C# C# テキストリンク

はじめに

前提

  • とりあえず ASP.NET MVC で Hello World してみたい人向け？
  • MVC の概念をざっくり知っている
  • VS Code で C# の環境構築を終えている
  • 投稿者は ASP.NET や MVC 自体触るのが初めて & 理解が追いついていない部分が多々ある
    • ルーティングとかの細かい設定や説明は省いてます
    • とりあえず備忘録も兼ねてます

実施環境

Mac を使っています（が、Windows でも大抵操作は同じかと思われます）
今後Windowsに切り替える可能性も出てきます
Mac の場合は環境構築に加えて「Command + Shift + P」→「Shell」と入力し「PATH 内に 'code' コマンドをインストール」しておくと、ターミナルから VS Code を起動できるようになります

この記事でやること

  1. ASP.NET MVC プロジェクトの作成
  2. Hello World

1. ASP.NET MVC プロジェクトの作成

ターミナルから任意のディレクトリに移動して以下のコマンドを入力します。

$ dotnet new mvc -n SampleMVCApp    // dotnet new mvc -n <任意のプロジェクト名>
$ code SampleMVCApp                 // VS Code で <任意のプロジェクト名> を開く

VS Code が起動し、SampleMVCApp を開くことができました。
SampleMVCApp フォルダの中身は以下の通りになっています。

プログラムを起動するには、ターミナルから以下のコマンドを入力します。

$ dotnet run

localhost 上で立ち上がったので https://localhost:(ポート番号) に接続して動作確認してみます
https://localhost:(ポート番号) にアクセスし、以下のようになっていれば成功です

ターミナルで「Ctrl + C」を押すとプログラムを停止できます。

2. Hello World

2-1. Controller を作る

Controller で View や Model を制御していきます（今回は Model は出てきません）。

Controllers フォルダ内に HelloController.cs を作成します。
Controllers フォルダ内に元からある HomeController.cs の中身をコピペして以下のように書き換えます。

Controllers/HelloController.cs
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;
using SampleMVCApp.Models;

namespace SampleMVCApp.Controllers
{
    public class HelloController : Controller
    {
        // https://localhost:<ポート番号>/<コントローラ名>/<アクション名> で発火
        // https://localhost:<ポート番号>/Hello で発火
        public IActionResult Index()
        {
            // cshtml ファイル (View) に向けて値を受け渡す
            // ViewBag や ViewData を使ってデータをやり取りする
            ViewBag.Message = "Here is 'Hello/Index.cshtml'";

            return View();
        }

        // https://localhost:<ポート番号>/Hello/sayHello で発火
        public IActionResult sayHello()
        {
            ViewBag.Message = "Hello World!";

            // Views/Hello/Index.cshtml に処理を反映させる
            return View("Index");
        }
    }
}

2-2. View を用意する

View は画面上に処理結果を出力するために必要です。

まずは Views フォルダ内に Hello フォルダを作成します。
さらに Hello フォルダの中に Index.cshtml を作成します。
階層的にはこんな感じになっているかと思われます。

SampleMVCApp/
    ├ bin/
    ├ Controllers/
    │   ├ HelloController.cs    // "Controller を作る"で追加した分
    │   └ HomeController.cs
    ├ Models/
    ├ obj/
    ├ Properties/
    ├ Views/
    │   ├ Hello/                // "View を用意する"で追加した分
    │   │   └ Index.cshtml      // "View を用意する"で追加した分
    │   ├ Home/
    │   ├ Shared/
    │   ├ _ViewImports.cshtml
    ├   └ _ViewStart.cshtml
    ├ appsettings.Development.json
    ├ appsettings.json
    ├ Program.cs
    ├ SampleMVCApp.csProj
    └ StartUp.cs

Views/Hello/Index.cshtml の中身を編集します。
Controllerから値を受け取るには "@" を使ってバインドしてあげます。

Views/Hello/Index.cshtml
@{
    ViewData["Title"] = "Home Page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>

    @* HelloController.cs から受け取った値を表示 *@
    <h2>@ViewBag.Message</h2>
</div>

2-3. プログラムの実行

ターミナルから dotnet run で実行し、localhost 上で動作確認をします。
ルーティングの設定がデフォルトの状態（Views/Home/Index.cshtmlを参照するようになっている）なので、単純に localhost にアクセスした場合は何も変化がありません。

アクションを発火させるには URL を以下のように設定します。

https://localhost:<ポート番号>/<コントローラ名>/<アクション名>

例に倣って URL を https://localhost:<ポート番号>/Hello にすると以下のようになります。
Hello/Index.cshtml に向けて HelloController の Index( ) アクションが実行されています。

さらに、URL の末尾に /sayHello を追加すると Hello World が成功しているはずです。
Hello/Index.cshtml に向けて HelloController の sayHello( ) アクションが実行されています。

おわりに

今回は非常にざっくりでしたが、VS Code で ASP.NET MVC プロジェクト (Hello World) を実行する手順を書きました。
今後、理解が深まってきたら説明できていない部分の追記および Model を使った続編を書きたいと思っています。