【ASP.NET】Web未経験者がASPのMSDNチュートリアルやってみる（導入編）

タイトル通り、Web未経験のエンジニアがASP.NETでMSDNのチュートリアルに沿って慣れてみようという内容です。
筆者のステータスはこんな感じ。

- VB.NET経験あり
- C#独学
- Web未経験（何それおいしいの？）

時代はWebだということで、手を出してみます。
手を出すチュートリアルはコチラ。

https://docs.microsoft.com/ja-jp/aspnet/core/tutorials/razor-pages/?view=aspnetcore-2.1&preserve-view=true

で、今回は一番最初のチュートリアルである、「チュートリアル: ASP.NET Core の Razor Pages の概要」を進めてみます。

https://docs.microsoft.com/ja-jp/aspnet/core/tutorials/razor-pages/razor-pages-start?view=aspnetcore-2.1&tabs=visual-studio

ざっと読んだ感じ、本当の最初の一歩ですね。
必須コンポーネントに該当する、Visual Studio 2019 で試してみます。Visual Studio 2019 のインストールと同時に、.NET Core 3.1 SDK もインストールしています。

#作成の流れ
まずはアプリ作成の流れを確認。MSDNのチュートリアルに沿って次の様に進めます。

1. Visual Studio 起動し、「ASP.NET CoreWeb アプリケーション」を選択
2. プロジェクト名を指定
3. フレームワークと作成するアプリの種類を選択して、プロジェクト作成
4. アプリ実行

こうしてみると、凄い簡単な感じに思えます（チュートリアルなので当たり前ですが）。
では、1つずつ進めてみます。

##1. Visual Studio 起動し、「ASP.NET CoreWeb アプリケーション」を選択
まずは Visual Studio 起動し、「新しいプロジェクトを作成」を選択します。

![20220221_001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2162017/b0673108-17c6-1e2d-1f20-ad8efe287c40.png)


その後、上部にある検索ボックスに「ASP.NET CoreWeb アプリケーション」と入力します。

![20220221_002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2162017/88eba0be-823a-a164-24dc-c13d5ac26445.png)


フィルタリングされますが、いくつか候補が出てきます（困る）。
ここでは、画像の赤枠で囲った「ASP.NET CoreWeb アプリケーション」を選択します。
※似たような名称の候補が表示されますが、今回はC#で作成するので、キーワードに「C#」が入っているプラットフォームを選択しています。

![20220221_003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2162017/3b1a284c-abd5-8f97-2e2b-fd3ac57220ef.png)


「次へ」をクリックします。

![20220221_004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2162017/8b7883ec-d18c-f76e-74e1-eeb462a42b46.png)


##2. プロジェクト名を指定
アプリケーションの選択後に、プロジェクト名を決める画面に移ります。
デフォルトだとこんな画面です。

![20220221_005.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2162017/62bc0dbf-8874-96ee-f422-07a3c18d2bbb.png)

プロジェクト名のテキストボックスに、プロジェクト名を入力します。
この時、プロジェクト名は任意…ではなく、「**RazorPagesMovie**」を指定します。
チュートリアルのページに、

> コードのコピーおよび貼り付けを行う際に名前空間が一致するように、プロジェクトに**RazorPagesMovie という名前を付けることが重要**です。

と記載されています。安易に「何でもいいかな」と任意のプロジェクト名を命名すると、<font color="Red">**チュートリアルを進めて行く中で困ります</font>**（困りました）。
なので、素直に「RazorPagesMovie」というプロジェクト名にしましょう。

![20220221_006.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2162017/c4881064-3ad2-06bb-5df7-e7c866f497e7.png)

尚、プロジェクトの作成場所は任意です。
「ソリューションとプロジェクトを同じディレクトリに配置する」はとりあえずチェックを付けておきます。
※デフォルトでチェックが入っているはず。

ここまで出来たら作成をクリックします。

![20220221_007.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2162017/cdad498b-0fa2-7c44-85b1-68f3ae4be2a0.png)

##3.フレームワークと作成するアプリの種類を選択して、プロジェクト作成
今、この画面まで到達しました。
![20220221_008.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2162017/21cf982f-60e4-0546-65f9-d63245982038.png)

ここまで来たら、もう一息です。
フレームワークと作成するアプリの種類を選択します。

まずはフレームワークから。
「新しい ASP.NET Core Web アプリケーションの作成」という大きく書かれているすぐ下に、プルダウンリストがあります。

![20220221_009.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2162017/37b7688f-5592-bdc8-04e0-8090b591ef7e.png)


ここでは、

- .NET Core
- ASP.NET Core 3.1

を選択します。

私の場合は幸運にもデフォルトで「.NET Core」「ASP.NET Core 3.1」が選択されていました。なのでそのまま。

次にアプリケーションの種類を選択します。
先ほどのプルダウンリストの下に、大きいリストがあり、アプリケーションの種類が並んでいます。

![20220221_010.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2162017/cb46e6b6-2ff6-3976-397f-3097c25c5252.png)

この中から何を選べばいいのか迷いますが、MSDNのチュートリアル通り、「Web アプリケーション」を選択します。

![20220221_011.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2162017/1d43249f-9737-2e99-3ec4-cbe1e8d63b39.png)

右側のチェックボックスが気になると思いますが、何も触らずに作成に進みます。

![20220221_012.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2162017/696e986f-8433-5f6b-355e-ba1994cea8a4.png)

すると、Visual Studio の画面が立ち上がります。

![20220221_013.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2162017/b97c7743-d1d7-c631-0a60-cf7e526c9170.png)

ここまで来たらOKです。

##4.アプリ実行
MSDNのチュートリアルに沿って、アプリを実行します。
…が、MSDNに「Ctrl + F5 キーを押して、デバッガーなしで実行します。」とありますが、ショートカットキーで反応しない場合があります。
なので、Visual Studio のメニューバーにある、デバッグメニューから「デバッグなしで開始」をクリックします。

![20220221_014.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2162017/15bac704-ad1e-87ba-3044-51f30b84b84c.png)

これで実行すると、ブラウザ上に「Welcome」と表示されます。

![20220221_015.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2162017/69595176-b8c5-7974-8903-767c371aeaee.png)

これで初めの一歩を踏み出すことが出来ました。

#参考
https://docs.microsoft.com/ja-jp/aspnet/core/tutorials/razor-pages/razor-pages-start?view=aspnetcore-2.1&tabs=visual-studio