[ASP.NET Core][入門] 第5回：ビューの追加方法を覚えよう

はじめに

前回の記事では、コントローラーの作り方について学習しました。

今回は、コントローラーの Indexメソッドの理解を深めるとともに、ビューの作り方について学習していきます。

前回作成した HelloWorldControllerクラスには、以下のコードがあります。

public IActionResult Index()
{
    return View();
}

このコードは何をしているのか理解を深めていきましょう。

このコードは、ASP.NET Core MVCというWebアプリケーションフレームワークにおいて、最も基本的なアクションメソッドです。

アクションメソッドとは、Webブラウザからリクエストを受け取った際に、サーバー側で実行される処理をまとめたメソッドのことです。このメソッドが実行されることで、Webページが生成され、クライアント（ブラウザ）に返されます。

このコードをもう少し詳しく見ていきましょう。

public: このメソッドは、他のクラスからも呼び出せることを意味します。
IActionResult: このメソッドが返す値の型です。IActionResultは、様々な種類の結果を返すことができるインターフェースで、ここでは、View（ビュー）を返すことを示しています。
Index(): メソッドの名前です。通常、このメソッド名が、表示されるページのURLの一部になります。

この行で、Indexという名前のView（ビュー）を返すように指示しています。Viewは、HTMLなどのテンプレートで、表示する内容を記述するファイルです。

ユーザーがブラウザで、このアクションに対応するURL（例えば https://localhost:{ポート番号}/HelloWorld）にアクセスします。

サーバーは、このリクエストを受け取り、Indexアクションメソッドを実行します。
Indexアクションメソッドは、Indexという名前のViewを探し、その内容をHTMLに変換します。
変換されたHTMLがブラウザに送信され、ユーザーの画面に表示されます。

つまり、このコードは、「ユーザーがIndexというページにアクセスしたときに、Indexという名前のViewの内容を表示する」という処理を行っています。

ここでは、HelloWorldController に対するビューを追加してみましょう。

はじめに、ソリューションエクスプローラーで Viewsフォルダーを右クリックして、[追加]-[新しいフォルダー]を選択して、「HelloWorld」というフォルダーを作成します。

HelloWorldフォルダーの作成

ASP.NET MVC Coreで使用するビューとは、正確には Razorビューのことを指します。

Razorビューは、ASP.NET MVCというWebアプリケーションフレームワークで、Webページの表示を担当するテンプレートエンジンの一種です。HTMLの中にC#のコードを直接埋め込むことができ、動的なWebページを効率的に作成することができます。

なぜRazorビューを使うのか？

それでは、HelloWorldControllerに対応する Razorビューを追加してみましょう。

ソリューションエクスプローラーで、Viewsフォルダーの中にある HelloWorld フォルダーを右クリックして、[追加]-[新しい項目]を選択します。

Razorビューの追加

「Razorビュー -空-」を選択して、名前を入力し、[追加]ボタンをクリックします。

ここではファイル名を Index.cshtml としました。

Razorビュー -空- の追加

Views/HelloWorld/Index.cshtml を以下のように編集してみましょう。

@{
    ViewData["Title"] = "ハローワールド";
}
<h2>ごあいさつ</h2>

<p>これは、HelloWorldのページです</p>

このコードは、ASP.NET MVCのRazorビュー（.cshtmlファイル）のシンプルな例です。Webページの構造を記述するHTMLと、C#のコードを組み合わせて、動的なWebページを作成するためのテンプレートとなっています。

@{ }: C#のコードを記述するブロックです。
ViewData[“Title”] = “ハローワールド”; : この行では、ViewDataという辞書型のオブジェクトに、”Title”というキーで”ハローワールド”という値をセットしています。この値は、ページのタイトルとして利用されます。
<h2>ごあいさつ</h2>: HTMLの見出しタグです。ブラウザ上で”ごあいさつ”という見出しを表示します。
<p>これは、HelloWorldのページです</p>: HTMLの段落タグです。ブラウザ上で”これは、HelloWorldのページです”という文章を表示します。

ViewData: コントローラーからビューにデータを渡すための仕組みです。辞書のようにキーと値のペアでデータを格納し、ビュー内でその値を参照することができます。
Title: ページのタイトルを表すプロパティです。ブラウザのタブなどに表示されます。

コントローラーからビューへ:
　コントローラーのアクションメソッドで、ViewData[“Title”]に値を設定します。その後、このビュー（Index.cshtml）を返します。
ビューのレンダリング:
ブラウザからリクエストを受け、サーバー側でこのビューがレンダリングされます。
C#のコードが実行され、ViewDataから値を取得して、HTMLに埋め込みます。
ブラウザへの出力:
生成されたHTMLがブラウザに送信され、ユーザーの画面に表示されます。