【ASP.NET Core MVC入門】②ASP.NET Core MVCでプロジェクトを作り、Webページを表示させる方法

◆ Live配信スケジュール ◆
サイオステクノロジーでは、Microsoft MVPの武井による「わかりみの深いシリーズ」など、定期的なLive配信を行っています。
⇒ 詳細スケジュールはこちらから
⇒ 見逃してしまった方はYoutubeチャンネルをご覧ください

【4/18開催】VSCode Dev Containersで楽々開発環境構築祭り〜Python/Reactなどなど〜
Visual Studio Codeの拡張機能であるDev Containersを使ってReactとかPythonとかSpring Bootとかの開発環境をラクチンで構築する方法を紹介するイベントです。
https://tech-lab.connpass.com/event/311864/

こんにちは。サイオステクノロジーにてインターンシップに参加させていただいております、日本工学院八王子専門学校 ITカレッジの大賀です。

前回の記事、【ASP.NET Core MVC入門】①ASP.NET Core MVCとは？初心者向けに特徴とできることを解説！　では、ASP.NET Core MVCについて、非常に簡単にですが、概要をご紹介させて頂きました。これからASP.NET Coreを始めたい！という方は、是非前回の記事から読み進めて頂けるとより触れやすくなるかと思います。

今回は、早速ですが、ASP.NET Core MVCのプロジェクトを作成し、内包されているHello,Worldのページを表示させる所まで手順をご紹介します。

1 環境構築
- 1.1 バージョン関連
- 1.2 必要なソフトウェアとセットアップ
  - 1.2.1 Visual Studio Code
    - 1.2.1.1 インストール
    - 1.2.1.2 C# For Visual Studio Code (拡張機能)
  - 1.2.2 .NET SDK
    - 1.2.2.1 インストール
2 プロジェクトの作成

環境構築

開発において必要なソフトウェア、機能をインストールしています。特段標準の操作から変更はありませんので、入れるものさえ分かれば自分で…という方は読み飛ばしながら進めていただいて構いません。記事内のスクリーンショットはクリックすると拡大版を閲覧できます。

バージョン関連

私が開発に利用したPCはWindows10（21H2、19044.1889）です。利用したソフトウェア類はこの後セットアップ方法の説明と一緒にお伝えします。

Mac/Linuxでも概ね類似した方法で開発作業に移れますので、ぜひご参考にしてください。

必要なソフトウェアとセットアップ

Visual Studio Code

Microsoftがリリースしている無料の機能拡張対応のソースコードエディタです。非常に軽量で、開発系エンジニアなら誰でも知っていると言っても良いほどメジャーなテキストエディタです。

類似したソフトに統合開発環境(IDE)のVisual Studio 2022があり、こちらも正式対応していて高機能ですが、今回は私が利用したVSCodeで進めていきます。

インストール

こちらから、VSCodeのインストールページに入り、[User Installer]の欄の [64 bit] をクリックし、ダウンロードした.exeファイルを実行します。

管理者権限を求められたら許可し、手順に従ってインストールを進めましょう。

(特に指定/変更すべき内容はありません。)

インストールが終了したら、続いて必要な拡張機能をインストールしていきます。

C# For Visual Studio Code (拡張機能)

VSCodeで.NET Core開発を行うにあたって必要な、C# For Visual Studio Codeという拡張機能をインストールします。

まず、↓画像の〇で囲ってある部分をクリックします。

次に、展開されたメニューのテキストボックスにC#と入力し、こちらの拡張機能をインストールしてください。

(私の環境では既にインストールされているため、一部表示が異なります)。

この段階で一緒に日本語言語パックをインストールすると、よりVSCodeが利用しやすくなります。Japaneseと検索して、インストールしておきましょう。

VSCodeのセットアップは以上です。あと一つ、.NET SDKのインストールが必要ですので、こちらもインストールしていきましょう。

.NET SDK

ローカル環境での開発検証、パッケージ追加等、ASP.NET Core MVCで開発を行う上で必ず必要な.NET SDK(ランタイム)をインストールします。

今回はLTS(長期サポート)の.NET 6.0をベースに開発を進めていきます。

インストール

とはいえ、先ほどと同様、操作は非常に簡単です。

こちらから.NET SDK 6.0のダウンロードページにアクセスし、インストーラ/Windows/x64を選択します。(お使いのOSに合わせて選択してください。)

ダウンロードされた.exeファイルを実行し、こちらも手順通り進めます。

(こちらのスクリーンショットはWindows11にて実行した物ですが、手順はWindows10でも同じです。)

これで開発環境のセットアップは以上になります。続いては、プロジェクトと、ハロワページの作成に移りましょう。

プロジェクトの作成

ASP.NET Core(MVC)では、ページ数を問わず、1つのWebアプリケーションをプロジェクトと呼びます。

まずはプロジェクトを作成し、ディレクトリ構造やファイルの意味を理解していきましょう。

プロジェクトフォルダの作成

適当な場所に好きな名前でフォルダを作成します。

今回はUsers\Desktop配下にMVC-Testというフォルダを作成していきます。今後の説明ではこちらを利用していきます。

次に、VSCodeでフォルダ読み込み、ここから.NET SDKを用いてプロジェクトを作成(基本的なファイルを自動で用意してくれます。)

VSCodeを起動し、左上のメニューの[ファイル]→[フォルダを開く]からプロジェクトを入れたいフォルダを選択します。

続いては、VSCode上で.NETに関するコマンドを実行できるようにするため、ターミナルを表示させます。

先ほどのメニューバーの右から2番目、[ターミナル]→[新しいターミナル]をクリックします。すると、画像下部のような形でCLIが表示されます。

次の手順に移る前に、.NET CLIについて軽く説明します。

.NET CLI

.NET CLIとは、.NET 6.0を利用するプロジェクト(Webアプリケーションに関わらず)を、開発、実行、検証、ビルドするために必要なツールで、.NET SDKをインストールすると環境変数(PATH)に追加され、コマンドプロンプトからdotnetで呼び出すことが出来ます。基本的には実行/ビルドに利用します。

この.NET CLIから、ASP.NET Core MVCのプロジェクトのテンプレートを作成します。それでは、続きの作業に戻りましょう。