こんにちは。サイオステクノロジーにてインターンシップに参加させていただいております、日本工学院八王子専門学校 ITカレッジの大賀です。
前回の記事、【ASP.NET Core MVC入門】①ASP.NET Core MVCとは？初心者向けに特徴とできることを解説！ では、ASP.NET Core MVCについて、非常に簡単にですが、概要をご紹介させて頂きました。これからASP.NET Coreを始めたい！という方は、是非前回の記事から読み進めて頂けるとより触れやすくなるかと思います。
今回は、早速ですが、ASP.NET Core MVCのプロジェクトを作成し、内包されているHello,Worldのページを表示させる所まで手順をご紹介します。
環境構築
開発において必要なソフトウェア、機能をインストールしています。特段標準の操作から変更はありませんので、入れるものさえ分かれば自分で…という方は読み飛ばしながら進めていただいて構いません。記事内のスクリーンショットはクリックすると拡大版を閲覧できます。
バージョン関連
私が開発に利用した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のプロジェクトのテンプレートを作成します。それでは、続きの作業に戻りましょう。
.NET CLIでテンプレートを作成する
先ほどのVSCodeのターミナルで、以下のコマンドを入力してください。
> dotnet new mvc |
そうすると、CLIにいくつかメッセージが出力されると共に、こんなファイル構造のファイルが自動作成されたかと思います。
こちらの内容を特に重要な物について、ざっくり説明してから、最後にテストページを実行したいと思います。
プロジェクトディレクトリの説明
| /Controllers Controllerとして利用するファイルの格納場所です。〇〇Controller.csという形式でC#ファイルをとして保存します。 |
| /Models Modelとして利用するファイルの格納場所です。〇〇Model.csとして保存します。 |
| /Views Viewとして利用するファイルの格納場所です。〇〇.cshtmlという拡張子で、C#とHTML共存のRazor Pagesの形式です。 |
| /Views/Home Program.csにデフォルトルートとして定義されている、基本的に実行中にアドレス/localhost:××××にアクセスすると最初に表示されるページです。Index.cshtmlが最初に表示されます。 |
| /Views/Shared 全てのViewに共通で反映させたい内容を定義します。ここで編集された内容は全てのビューでこちらが反映された後、それぞれのビューの内容のレンダリングが始まります。ナビゲーションバーやCDNの定義で私は利用しました。 |
| /wwwroot ビューで~/js or css or libでパスを指定した内容はこちらのフォルダから読み取られます。CSS/JavaScriptを利用した場合は基本的にこちらでファイルを作成します。 |
| Program.cs プロジェクトを実行したら、まずこちらが読み取られます。Webアプリで必要なサービスが構成されたり、基本的な設定に用いられます。 |
実行してみる
最後に、こちらのサンプルページを実行してみましょう。
VSCodeのターミナルで、以下のコマンドを実行します。
> dotnet watch |
すると、いくつかメッセージが流れた後、自動でブラウザが起動してこちらのページが表示されます。
これで、プロジェクトの作成からテストページの作成まで完了しました。
ちなみに、実行するだけであれば、
> dotnet run |
でも可能なのですが、dotnet watchは継続的にコードの変更を検出して、変更内容を自動でリビルドしてページの再レンダリングまで行ってくれる優れものです。
.NET 6の新機能ですので、是非.NET SDKは6.0を利用することをおすすめします。
こちらのナビゲーションバーとフッター、スタイル用のCSS(Bootstrap)とJQueryが規定で読み込まれているのですが、それも/Views/Sharedで行われています。
ここからは、この内容を変えて、開発を進めていくと初心者にとっては習得の近道になるかと思います。
次回の記事では、私たちインターンシップ生3人でのチームで開発したWebアプリケーションを用いて、ViewとControllerのちょっとした応用法をご紹介します。
まだまだ続きますが、是非ご覧ください。
【ASP.NET Core MVC入門】①ASP.NET Core MVCとは？特徴とできることを解説！
【ASP.NET Core MVC入門】③Controller、Viewの使い方と外部APIからHTTP(GET)する方法を解説！
【ASP.NET Core MVC入門】④Modelを使わずにサイト間でデータを受け渡す方法を解説！
アイキャッチ画像ロゴのCC-BY-SAに基づく表記
