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

##    はじめに

  __<font color="blue">　【C#】</font>のWebアプリケーションのフレームワークである__ __<font color="blue">　【ASP.NET Cor MVC】</font>の構築手順を確認。__

以下の続き
  
  https://qiita.com/nekoozi/items/3f3d34295fb569548989


# <font color="blueviolet">__②VS Codeで、ASP.NET Core MVCを実行する__</font>
今回はVS CodeというVS Codeは軽量で柔軟なエディタを使って
ASP.NET Core MVCアプリケーションを開発し、実行します。

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


## <font color="green">②-1 VS Codeインストール方法</font>
### 「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
````


## <font color="green">②-2 C#の環境構築方法01</font>
### 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」という項目が表示されることを確認します。

## <font color="green">②-3 C#の環境構築方法02</font>
.NET SDK（ツールキット）インストール手順は以下。

   1･･･ [.NETの公式サイト](https://dotnet.microsoft.com/ja-jp/download)    を開き、
 　　その中で「.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
````


## <font color="green">②-4 C#のサンプルプログラムを実行</font>
   1･･･ エクスプローラーを開き、作成した開発用フォルダ
           （例: C:\temp\C#\Program）
         で新規テキストファイルを作成し、
         名前と拡張子を
         「SumAndAsciiConversion.cs」に変更

   2･･･ VSCodeで「SumAndAsciiConversion.cs」ファイルを       開き、以下のプログラムをコピー＆ペーストする。
```C#
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」に以下の行を追加する
```C#
SumAndAsciiConversion conversion = new SumAndAsciiConversion();
conversion.Execute();
````
　⇒　SumAndAsciiConversionクラスのインスタンスを
      作成してメソッドを呼び出す
      
   8･･･ ターミナルで以下コマンドによりプログラムを実行
````
dotnet run
````


## <font color="green">②-5 新しいASP.NET MVCプロジェクトの作成</font>
- エクスプローラーを開き、Cドライブに
　ASP.NETの開発用フォルダを作成します
    （例: C:\temp\ASP.NET）

- VSCodeで「C:\temp\ASP.NET」フォルダを開きます。

- ターミナルで以下のコマンドを実行すると、「SampleMVCApp」という名前のフォルダがユーザフォルダの直下に作成され、その中にASP.NET Core MVCの基本的なファイル構造が生成されます。
````
dotnet new mvc -n SampleMVCApp
````

 ##### コマンドの説明 
<font color="Magenta">__dotnet__</font>   : .NET Core SDKのコマンドラインツールを呼び出します。

<font color="Magenta">__new__</font>   : 新しいプロジェクトやファイルを作成するコマンドです。

<font color="Magenta">__mvc__</font>   : ASP.NET Core MVCテンプレートを使用して
　　    プロジェクトを作成します。

<font color="Magenta">__-n SampleMVCApp__</font>   : 作成するプロジェクトの名前を指定します。
　　    ここでは「SampleMVCApp」としています。

- 以下のコマンドをターミナルで実行すると、Visual Studio Code（VS Code）が起動し、指定したフォルダがエディタに読み込まれます。これでプロジェクトのファイルを編集する準備が整います。
````
code SampleMVCApp
````
 
 ##### コマンドの説明 
<font color="Magenta">__code__</font>   : VS Codeを起動するためのコマンドです。

<font color="Magenta">__SampleMVCApp__</font>   : 開きたいプロジェクトフォルダの名前です。

補足
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 を以下に修正する。
```C#
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
````

 ##### コマンドの説明 
<font color="Magenta">__dotnet restore__</font>   : コマンドは、プロジェクトで必要なすべてのNuGetパッケージをダウンロードし、依存関係を解決します。

 - アプリケーションをビルドして実行します。
プロジェクトをビルドして、エラーがないか確認します。
````
dotnet build
````
または
````
dotnet build C:\temp\ASP\SampleMVCApp\SampleMVCApp.csproj
````

 ##### コマンドの説明 
<font color="Magenta">__dotnet build__</font>   : コマンドは、ソースコードをコンパイルして、実行可能なアセンブリを生成します。

- アプリケーションの動作を確認します。
以下のコマンドをターミナルで実行すると、アプリケーションがビルド（コンパイル）され、サーバーが起動します。通常、ブラウザで http://localhost:5000 などのURLにアクセスすることで、アプリケーションの動作を確認できます。
````
dotnet run
````
 ##### コマンドの説明 
<font color="Magenta">__dotnet__</font>   : .NET Core SDKのコマンドラインツールを呼び出します。

<font color="Magenta">__run__</font>   : アプリケーションをビルドし、実行します。



- 表示された

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使用手順 ｟マニュアルのマニュアル｠

https://qiita.com/nekoozi/items/31f9ed52b3180b711707

------------------------------------

##### メインアカウントのサイト
https://qiita.com/nano357/items/bf22da5b7f19a4a0981f

------------------------------------

##### ASP.NET公式ドキュメントは以下を参照。
https://learn.microsoft.com/ja-jp/aspnet/core/tutorials/first-mvc-app/start-mvc?view=aspnetcore-8.0&tabs=visual-studio


https://qiita.com/Mimimi-m/items/e9955f6af3b8406eb1b6