ASP.NET のWebアプリケーション構築手順｟マニュアルのマニュアル｠

Last updated at 2024-09-24Posted at 2024-08-24

はじめに

　【C#】のWebアプリケーションのフレームワークである 　【ASP.NET Cor MVC】の構築手順を確認。

以下の続き

②VS Codeで、ASP.NET Core MVCを実行する

今回はVS CodeというVS Codeは軽量で柔軟なエディタを使って
ASP.NET Core MVCアプリケーションを開発し、実行します。

これに対して、Visual Studioは統合開発環境（IDE）であり、より多くの機能を提供し、GUI操作でアプリケーションの構築やデバッグを簡単に行えまが、少し不安定です。

②-1 VS Codeインストール方法

「Windows Terminal（コマンドラインツールやシェル実行）」経由

Windowsのインストール手順は以下。
1･･･ Windowsキー + R で「ファイル名を指定して実行」を開く。
　　その中で、以下のコマンドを実行して、Windows Terminalをインストール

winget install --id Microsoft.WindowsTerminal

2･･･ Windowsキー + R で「ファイル名を指定して実行」開く。
　　その中で、以下のコマンドを実行して、Windows Terminalを実行

wt

3･･･ Windows Terminalで以下のコマンドを実行してVS Codeをインストールします。

winget install --id Microsoft.VisualStudioCode

補足
macOSでのVisual Studio Codeのインストール手順を以下に追加します。

Homebrewのインストール（まだインストールしていない場合）

HomebrewはmacOSのパッケージマネージャーで、ソフトウェアのインストールを簡単に行えます。

1･･･ターミナルを開き、以下のコマンドを実行して
Homebrewをインストールします。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

2･･･ VS Codeのインストール
　　ターミナルで以下のコマンドを実行して、
　　Visual Studio Codeをインストールします。

brew install --cask visual-studio-code

②-2 C#の環境構築方法01

Visual Studio Code（コードのエディタ）

インストール手順は以下。

  1･･･ VS Codeを起動。 
       Windowsキー + R で「ファイル名を指定して実行」
       ダイアログを開き、その中で「code」と入力することで、
       Visual Studio Codeを起動

  2･･･ VSCode で サイドバーの「Extensions
       （拡張機能アイコン）」を開くため、
       Ctrlキー + Shiftキー + X をクリックし、
       入力欄に、「Japanese Langeage Pack」を
       入力し表示された一覧から、Japanese 
       Language Pack for Vis　を選択し
       インストール。


  3･･･ Ctrlキー + Shiftキー + P をクリックし、
       入力欄に「Configure Display Language」と
       入力し日本語を選択し、そのまま再起動する。

  4･･･ もう一度、拡張機能アイコンを開き、
       入力欄に「C#」と入力し、一覧から
       「C#」のみのものをインストールします。

  5･･･ エクスプローラーを開き、Cドライブに
        C#の開発用フォルダを作成します
       （例: C:\temp\C#\Program）

  6･･･ VS Codeでフォルダを開きます。
       （「フォルダの選択」ボタンをクリックし、作成したフォルダを選択します）。

  7･･･ 左側に「PROGRAM」という項目が表示されることを確認します。

②-3 C#の環境構築方法02

.NET SDK（ツールキット）インストール手順は以下。

1･･･ .NETの公式サイトを開き、
　　その中で「.NET SDK」ダウンロードを選択し、
　　exeファイルインストール

　　または、Windowsキー + R で「ファイル名を指定して実行」を
　開き、その中で、以下のコマンドを実行して、Windows Terminalを実行

wt

2･･･ Windows Terminalで以下のコマンドを実行して.NET SDK 8をインストールします。（.NET 9.0.0-preview.7 で、2024年8月13日にリリースされました。これはプレビュー版であり、開発中の新機能を早期に試すことができますが、本番環境での使用は推奨されていません。安定した長期サポート（LTS）バージョンとしては、.NET 8.0が2024年8月15日にリリースされ、2026年11月10日までサポートされます。）

winget install --id Microsoft.DotNet.SDK.8

3･･･インストール結果の確認
　　Windowsキー + R で　「cmd」を入力
　　その中で、以下のコマンドを実行して、バージョンが表示されることを確認

dotnet --version

実行結果の例（インストールされている.NET SDKのバージョンが表示されれば成功）

8.0.401

補足
macOSでの.NET SDKのインストール手順を以下に追加します。

.NET SDKのインストール（macOS）
Homebrewを使用してインストール

Homebrewを使って簡単にインストールできます。まず、ターミナルを開き、以下のコマンドを実行して、.NET SDKをインストールします。

brew install --cask dotnet-sdk

②-4 C#のサンプルプログラムを実行

1･･･エクスプローラーを開き、作成した開発用フォルダ
（例: C:\temp\C#\Program）
で新規テキストファイルを作成し、
名前と拡張子を
「SumAndAsciiConversion.cs」に変更

2･･･ VSCodeで「SumAndAsciiConversion.cs」ファイルを開き、以下のプログラムをコピー＆ペーストする。

using System;

public class SumAndAsciiConversion
{
    public void Execute()
    {
        // プリミティブ型intの変数を宣言
        int num = 5;
        int sum = 0;

        /* 
           forループを使って1からnumまでの合計を計算
           for (int i = 1; i <= num; i++) で1からnumまでの数をループし、sumに加算します。 
        */
        for (int i = 1; i <= num; i++)
        {
            sum += i;
        }

        // 結果を表示
        Console.WriteLine("1から" + num + "までの合計は " 
            + sum + " です。");

        /* 
           キャスト演算子を使ってintをcharに変換
           int asciiValue = 65; で整数型の変数
           asciiValueを宣言し、値を65に設定します。
           (char)asciiValue で整数を文字に変換します。
           C#ではキャスト演算子 (type) を使って
           型変換を行います。
           ここでは、整数型をchar型に変換しています。
        */
        int asciiValue = 65; // ASCIIコード65は'A'
        char character = (char)asciiValue;

        // 結果を表示
        Console.WriteLine("ASCIIコード " + asciiValue + " は文字 '" 
            + character + "' です。");
    }
}

3･･･ VSCodeで「C:\temp\C#\Program」フォルダを開きます。
　　　※こちらを忘れた場合は、以下の手順で
　　C:\Users\ユーザ名　の直下に作成されます。
　
4･･･ VSCodeの左上の、メニューに「ターミナル」が
　　あるのでその中の、「新しいターミナル」を選択

5･･･ターミナルに以下のコマンドを入力

dotnet new console

6･･･上記コマンドにより、
　　新しいC#プロジェクト「Program.csproj」と
　　 C#プログラム「Program.cs」が作成されます。

7･･･ C#プログラム「Program.cs」に以下の行を追加する

SumAndAsciiConversion conversion = new SumAndAsciiConversion();
conversion.Execute();

　⇒　SumAndAsciiConversionクラスのインスタンスを
作成してメソッドを呼び出す

8･･･ターミナルで以下コマンドによりプログラムを実行

dotnet run

②-5 新しいASP.NET MVCプロジェクトの作成

エクスプローラーを開き、Cドライブに
　ASP.NETの開発用フォルダを作成します
（例: C:\temp\ASP.NET）
VSCodeで「C:\temp\ASP.NET」フォルダを開きます。
ターミナルで以下のコマンドを実行すると、「SampleMVCApp」という名前のフォルダがユーザフォルダの直下に作成され、その中にASP.NET Core MVCの基本的なファイル構造が生成されます。

dotnet new mvc -n SampleMVCApp

コマンドの説明

dotnet : .NET Core SDKのコマンドラインツールを呼び出します。

new : 新しいプロジェクトやファイルを作成するコマンドです。

mvc : ASP.NET Core MVCテンプレートを使用して
　　プロジェクトを作成します。

-n SampleMVCApp : 作成するプロジェクトの名前を指定します。
　　ここでは「SampleMVCApp」としています。

以下のコマンドをターミナルで実行すると、Visual Studio Code（VS Code）が起動し、指定したフォルダがエディタに読み込まれます。これでプロジェクトのファイルを編集する準備が整います。

code SampleMVCApp

コマンドの説明

code : VS Codeを起動するためのコマンドです。

SampleMVCApp : 開きたいプロジェクトフォルダの名前です。

補足
macOSの場合、Visual Studio Codeで以下の作成されたフォルダを開きます。
　例　　Users\ユーザ名\SampleMVCApp

プロジェクト構成

SampleMVCApp/
     ├ bin/                          // コンパイル後のバイナリが格納されるディレクトリ
     ├ Controllers/                  // コントローラーを格納するディレクトリ
     │   ├ SumController.cs          // "新規追加する" 足し算用コントローラー
     │   └ HomeController.cs         // 既存のホームコントローラー
     ├ Models/                       // モデルクラスを格納するディレクトリ
     ├ obj/                          // ビルドプロセスで使用される中間ファイルを格納するディレクトリ
     ├ Properties/                   // プロジェクトのプロパティや設定ファイルを格納するディレクトリ
     ├ Views/                        // ビューを格納するディレクトリ
     │   ├ Sum/                      // "新規追加する" 足し算用ビューを格納するディレクトリ
     │   │   └ Index.cshtml          // "新規追加する" 足し算用のインデックスビュー
     │   ├ Home/                     // ホームコントローラーに対応するビューを格納するディレクトリ
     │   ├ Shared/                   // 複数のビューで共有される部分ビューやレイアウトを格納するディレクトリ
     │   ├ _ViewImports.cshtml       // ビューにインポートする名前空間などの設定ファイル
     │   └ _ViewStart.cshtml         // ビューの初期設定ファイル
     ├ appsettings.Development.json  // 開発環境用の設定ファイル
     ├ appsettings.json              // アプリケーションの設定ファイル
     ├ Program.cs                    // Main関数が含まれるエントリーポイント
     ├ MVCbbsWebApplication.csproj   // プロジェクトファイル
     └ Startup.cs                    // 初期設定ファイル

コントローラーを作成します。

1･･･まず、エクスプローラーで以下に作成された、
C:\Users\ユーザフォルダ\SampleMVCApp\Controllers
HomeController.cs ファイル　を　コピーし、
コピーしたファイルを　SumController.cs にリネームする。

2･･･ SumController.cs を以下に修正する。

using System.Diagnostics;
using Microsoft.AspNetCore.Mvc;
using SampleMVCApp.Models;

namespace SampleMVCApp.Controllers
{
    public class SumController : Controller
    {
        /* Index アクションメソッド
           このメソッドは、"Sum/Index" ビューを返します。
           具体的には、ブラウザで "Sum/Index" にアクセスすると、このメソッドが実行されます。 */
        public IActionResult Index()
        {
            /* ViewBagを使ってビューにメッセージを渡します。
               ここでは "Here is 'Sum/Index.cshtml'" というメッセージを渡しています。 */
            ViewBag.Message = "Here is 'Sum/Index.cshtml'";

            /* View() メソッドで "Sum/Index" ビューを返します。 */
            return View();
        }

        /* sayHello アクションメソッド
           URLパラメータを取得して、それに基づいた処理を行います。 */
        public IActionResult sayHello()
        {
            /* Request.Query で URL のクエリパラメータを取得します。 */
            var qur = Request.Query;

            /* ここで "param1" という名前のパラメータを取得し、数値に変換しようとしています。 */
            string str = (string)qur["param1"];
            var result_1 = int.TryParse(str, out var number);

            if (result_1)
            {
                /* もし "param1" が数値に変換できる場合は、その数値を使って計算を行います。 */
                int bnum = Calc(number);
                ViewBag.Message = "計算結果 : " + bnum;
            }
            else
            {
                /* 数値に変換できない場合は、その旨をメッセージとして表示します。 */
                string bstr = Check(str);
                ViewBag.Message = "計算結果 : " + bstr + " は計算不可";
            }

            /* "Index" ビューを返し、結果を表示します。 */
            return View("Index");
        }

        /* Calc メソッド
           数値を受け取り、その数値までの合計を計算して返します。 */
        public static int Calc(int aNum)
        {
            int sum = 0;
            for (int i = 1; i <= aNum; i++)
            {
                sum += i;
            }

            /* 計算結果を返します。 */
            return sum;
        }

        /* Check メソッド
           文字列を受け取り、その内容に応じてメッセージを返します。 */
        public static string Check(string bstr)
        {
            string rTmp;
            if (string.IsNullOrWhiteSpace(bstr))
            {
                rTmp = " null または 空文字 または 空白 は ";
            }
            else
            {
                rTmp = bstr;
            }

            /* メッセージを返します。 */
            return rTmp;
        }
    }
}

ビューを用意します。

3･･･まず、エクスプローラーで以下のようにフォルダを作成します
C:\Users\ユーザフォルダ\SampleMVCApp\Views
に「Sum」フォルダを追加し
C:\Users\ユーザフォルダ\SampleMVCApp\Views\Sum
を作成します

4･･･ Index.cshtml を以下に新規作成する。

@{
    ViewData["Title"] = "Hello Home Page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://learn.microsoft.com/ja-jp/aspnet/core/tutorials/first-mvc-app/start-mvc?view=aspnetcore-8.0&tabs=visual-studio">ASP.NET Core MVC</a>.</p>

    <!-- SumController.cs から受け取ったメッセージを表示します。 -->
    <h2>@ViewBag.Message</h2>
</div>

依存関係のインストール
プロジェクトの依存関係をインストールするために、以下のコマンドをターミナルで実行します。（自動的に実行されますが、手動で実行する倍）

dotnet restore

または

dotnet restore C:\temp\ASP\SampleMVCApp\SampleMVCApp.csproj

コマンドの説明

dotnet restore : コマンドは、プロジェクトで必要なすべてのNuGetパッケージをダウンロードし、依存関係を解決します。

アプリケーションをビルドして実行します。
プロジェクトをビルドして、エラーがないか確認します。

dotnet build

または

dotnet build C:\temp\ASP\SampleMVCApp\SampleMVCApp.csproj

コマンドの説明

dotnet build : コマンドは、ソースコードをコンパイルして、実行可能なアセンブリを生成します。

アプリケーションの動作を確認します。
以下のコマンドをターミナルで実行すると、アプリケーションがビルド（コンパイル）され、サーバーが起動します。通常、ブラウザで http://localhost:5000 などのURLにアクセスすることで、アプリケーションの動作を確認できます。

dotnet run

コマンドの説明

dotnet : .NET Core SDKのコマンドラインツールを呼び出します。

run : アプリケーションをビルドし、実行します。

表示された

info: Microsoft.Hosting.Lifetime[14]
Now listening on: http://localhost:5125

の

http://localhost:5125
の部をコピーして
以下のようにしてブラウザに貼り付け

http://localhost:xxxx/sum/sayHello?param1=5

xxxx は、変化するの注意。

次回：ASP.NET のWebアプリケーションDB使用手順｟マニュアルのマニュアル｠

メインアカウントのサイト

ASP.NET公式ドキュメントは以下を参照。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

ASP.NET のWebアプリケーション構築手順 ｟マニュアルのマニュアル｠

はじめに

②VS Codeで、ASP.NET Core MVCを実行する

②-1 VS Codeインストール方法

「Windows Terminal（コマンドラインツールやシェル実行）」経由

②-2 C#の環境構築方法01

Visual Studio Code（コードのエディタ）

インストール手順は以下。

②-3 C#の環境構築方法02

②-4 C#のサンプルプログラムを実行

②-5 新しいASP.NET MVCプロジェクトの作成

コマンドの説明

コマンドの説明

プロジェクト構成

コマンドの説明

コマンドの説明

コマンドの説明

メインアカウントのサイト

ASP.NET公式ドキュメントは以下を参照。

ASP.NET のWebアプリケーション構築手順｟マニュアルのマニュアル｠