チュートリアル: Visual Studio での C# および ASP.NET Core の概要

[アーティクル]
03/02/2023

適用対象:Visual Studio Visual Studio for Mac Visual Studio Code

ASP.NET Core を使用した C# 開発用のこのチュートリアルでは、Visual Studio で C# ASP.NET Core の Web アプリを作成します。

ここでは、次の操作方法について説明します。

Visual Studio プロジェクトを作成する
C# ASP.NET Core Web アプリを作成する
スクリプトに変更を加える
IDE の機能を調べる
Web アプリを実行する

前提条件

このチュートリアルを完了するには Visual Studio が必要です。無料バージョンについては、Visual Studio ダウンロードページを参照してください。

最新バージョンのリリースへのアップグレードの詳細については、Visual Studio の更新に関するページを参照してください。
お使いの Visual Studio エクスペリエンスをカスタマイズするには、Visual Studio IDE とエディターのカスタマイズに関するページを参照してください。

プロジェクトを作成する

まず、ASP.NET Core プロジェクトを作成します。プロジェクトタイプには、完全に機能する Web サイトを構築するために必要なすべてのテンプレートファイルが付属しています。

[スタートウィンドウ] で、 [新しいプロジェクトの作成] を選択します。
[新しいプロジェクトの作成] ウィンドウで、言語の一覧から [C#] を選択します。次に、プラットフォームの一覧から [Windows] を選択し、プロジェクトの種類の一覧から [Web] を選択します。

言語、プラットフォーム、プロジェクトの種類のフィルターを適用してから、 [ASP.NET Core Web アプリ] テンプレートを選択して、 [次へ] を選択します。

注意

[ASP.NET Core Web アプリ] テンプレートが表示されない場合は、 [新しいプロジェクトの作成] ウィンドウからそれをインストールすることができます。テンプレートのリストの一番下に表示される "お探しの情報が見つかりませんでしたか? " というメッセージで、 [さらにツールと機能をインストールする] リンクを選択します。

次に、Visual Studio インストーラーで [ASP.NET と Web 開発] を選択します。

Visual Studio インストーラーで、 [変更] を選択します。作業内容を保存するよう求められることがあります。次に、 [続行] を選択してワークロードをインストールします。
[新しいプロジェクトの構成] ウィンドウの "プロジェクト名" フィールドに「MyCoreApp」と入力します。次に、 [次へ] を選択します。
[追加情報] ウィンドウで、 "ターゲットフレームワーク" フィールドに .NET Core 3.1 が表示されていることを確認します。このウィンドウから、Docker サポートを有効にし、認証サポートを追加することができます。 [認証の種類] のドロップダウンメニューには、次の 4 つのオプションがあります。
- なし。認証なし。
- 個人アカウント。これらの認証はローカルまたは Azure ベースのデータベースに格納されます。
- Microsoft ID プラットフォーム。このオプションでは、認証用に Active Directory、Azure AD、または Microsoft 365 が使用されます。
- Windows。イントラネットアプリケーションに適しています。
[Enable Docker](Docker を有効にする) チェックボックスはオフのままにし、[認証の種類] に [なし] を選択します。次に、 [作成] を選択します。

Visual Studio で新しいプロジェクトが開かれます。

[スタートウィンドウ] で、 [新しいプロジェクトの作成] を選択します。
[新しいプロジェクトの作成] ウィンドウで、言語の一覧から [C#] を選択します。次に、プラットフォームの一覧から [Windows] を選択し、プロジェクトの種類の一覧から [Web] を選択します。

言語、プラットフォーム、プロジェクトの種類のフィルターを適用してから、 [ASP.NET Core Web アプリ] テンプレートを選択して、 [次へ] を選択します。

注意

[ASP.NET Core Web アプリ] テンプレートが表示されない場合は、 [新しいプロジェクトの作成] ウィンドウからそれをインストールすることができます。テンプレートのリストの一番下に表示される "お探しの情報が見つかりませんでしたか? " というメッセージで、 [さらにツールと機能をインストールする] リンクを選択します。

次に、Visual Studio インストーラーで、 [ASP.NET と Web 開発] ワークロードを選択します。

Visual Studio インストーラーで、 [変更] を選択します。作業内容を保存するよう求められることがあります。次に、 [続行] を選択してワークロードをインストールします。
[新しいプロジェクトの構成] ウィンドウの "プロジェクト名" フィールドに「MyCoreApp」と入力します。次に、 [次へ] を選択します。
[追加情報] ウィンドウで、 "ターゲットフレームワーク" フィールドに .NET 6.0 が表示されていることを確認します。このウィンドウから、Docker サポートを有効にし、認証サポートを追加することができます。 [認証の種類] のドロップダウンメニューには、次の 4 つのオプションがあります。
- なし。認証なし。
- 個人アカウント。これらの認証はローカルまたは Azure ベースのデータベースに格納されます。
- Microsoft ID プラットフォーム。このオプションでは、認証用に Active Directory、Azure AD、または Microsoft 365 が使用されます。
- Windows。イントラネットアプリケーションに適しています。
[Enable Docker](Docker を有効にする) チェックボックスはオフのままにし、[認証の種類] に [なし] を選択します。次に、 [作成] を選択します。

Visual Studio で新しいプロジェクトが開かれます。

ソリューションについて

このソリューションは Razor ページ デザインパターンに従っています。これは Model-View-Controller (MVC) デザインパターンとは異なり、モデルとコントローラーのコードが Razor ページ自体の中に含まれるよう効率化されています。

ソリューションのツアーを体験する

プロジェクトテンプレートでは、MyCoreApp という名前の単一の ASP.NET Core プロジェクトを使用してソリューションを作成します。 [ソリューションエクスプローラー] タブを選択してそのコンテンツを表示します。
[Pages] フォルダーを展開します。
Index.cshtml ファイルを選択し、コードエディターで表示します。
各 .cshtml ファイルには、関連付けられたコードファイルがあります。エディターでコードファイルを開くには、ソリューションエクスプローラーで Index.cshtml ノードを展開して、Index.cshtml.cs ファイルを選択します。
コードエディターで Index.cshtml.cs ファイルを表示します。
プロジェクトには、Web サイトのルートとなる wwwroot フォルダーが含まれます。その内容を表示するには、フォルダーを展開します。

CSS、イメージ、JavaScript ライブラリなどの静的サイトコンテンツを、任意のパスに直接配置することができます。
プロジェクトには、実行時に Web アプリを管理する構成ファイルも含まれます。既定のアプリケーション構成は appsettings.json に格納されます。しかし、appsettings.Development.json を使用して、これらの設定をオーバーライドすることができます。 appsettings.Development.json ファイルを表示するには、appsettings.json ファイルを展開します。

実行、デバッグ、および変更

ツールバーの [IIS Express] ボタンを選択して、デバッグモードでアプリをビルドして実行します。または、F5 キーを押すか、メニューバーから [デバッグ]>[デバッグの開始] の順に選択します。

注意

"Web サーバー 'IIS Express' に接続できません" というエラーメッセージが表示された場合は、Visual Studio を閉じてから、管理者としてプログラムを再起動してください。これを行うには、[スタート] メニューの [Visual Studio] アイコンを右クリックし、コンテキストメニューの [管理者として実行] オプションを選択します。

IIS SSL Express の証明書を受け入れるかどうかをたずねるメッセージが表示される場合もあります。 Web ブラウザーでコードを表示するには、 [はい] を選択し、フォローアップセキュリティ警告メッセージを受信した場合はさらに [はい] を選択します。
Visual Studio でブラウザーウィンドウが起動します。その後、メニューバーに Home および Privacy ページが表示されます。
メニューバーから [Privacy] を選択します。ブラウザーで見た Privacy ページには、Privacy.cshtml ファイルに設定されているテキストが表示されます。
Visual Studio に戻り、Shift + F5 を押してデバッグを停止します。この操作により、ブラウザーウィンドウ内のプロジェクトが閉じられます。
Visual Studio で Privacy.cshtml を開いて編集します。次に、"このページを使用してサイトのプライバシーポリシーを詳しく説明します。 " の文章を削除して、その場所に "このページは、@ViewData["TimeStamp"] 時点で、作成中です" という文章と置き換えます。
それでは、コードを変更してみましょう。 Privacy.cshtml.cs を選択します。次に、以下のショートカットを使用して、ファイルの上部にある using ディレクティブをクリーンアップします。

淡色表示されている using ディレクティブにマウスオーバーするか、これを選択します。クイックアクションの電球が、キャレットのすぐ下または左余白に表示されます。電球を選択してから、 [不要な using の削除] を選択します。

ここで、 [変更のプレビュー] を選択して、変更される内容を確認します。

[適用] を選択します。 Visual Studio では、ファイルから不要な using ディレクティブが削除されます。

次に、OnGet() メソッドの本体を次のコードに変更します。

public void OnGet()
{
   string dateTime = DateTime.Now.ToShortDateString();
   ViewData["TimeStamp"] = dateTime;
}

DateTime の下の波下線に注目してください。波下線が表示されるのは、この型がスコープに含まれていないためです。

[エラー一覧] ツールバーを開くと、そこに同じエラーが一覧表示されます [エラー一覧] ツールバーが表示されない場合は、上部のメニューバーで [表示]>[エラー一覧] の順に選択します。
このエラーを修復しましょう。コードエディターで、エラーを含む行のいずれかにカーソルを置いた後、左余白にあるクイックアクションの電球を選択します。次に、ドロップダウンメニューから、 [using System;] を選択してファイルの先頭にこのディレクティブを追加し、エラーを解決します。
F5 キーを押して、Web ブラウザーでプロジェクトを開きます。
Web サイトの上部で [Privacy] を選択し、変更を確認します。
Web ブラウザーを閉じ、 Shift+F5キーを押してデバッグを停止します。

Home ページを変更する

ソリューションエクスプローラーで、Pages フォルダーを展開し、Index.cshtml を選択します。

Index. cshtml ファイルは、Web ブラウザーで実行される Web アプリの Home ページに対応しています。

コードエディターには、Home ページに表示されるテキストの HTML コードが表示されます。
Welcome のテキストを Hello World! に置き換えます。
IIS Express を選択するか、Ctrl+F5 キーを押してアプリを実行し、Web ブラウザーで開きます。
Web ブラウザーでは、Home ページに新しい変更が表示されます。
Web ブラウザーを閉じ、Shift+F5キーを押してデバッグを停止し、プロジェクトを保存します。これで、Visual Studio を閉じることができます。

ソリューションのツアーを体験する

プロジェクトテンプレートでは、MyCoreApp という名前の単一の ASP.NET Core プロジェクトを使用してソリューションを作成します。 [ソリューションエクスプローラー] タブを選択してそのコンテンツを表示します。
[Pages] フォルダーを展開します。
Index.cshtml ファイルを選択し、コードエディターで表示します。
各 .cshtml ファイルには、関連付けられたコードファイルがあります。エディターでコードファイルを開くには、ソリューションエクスプローラーで Index.cshtml ノードを展開して、Index.cshtml.cs ファイルを選択します。
コードエディターで Index.cshtml.cs ファイルを表示します。
プロジェクトには、Web サイトのルートとなる wwwroot フォルダーが含まれます。その内容を表示するには、フォルダーを展開します。

CSS、イメージ、JavaScript ライブラリなどの静的サイトコンテンツを、任意のパスに直接配置することができます。
プロジェクトには、実行時に Web アプリを管理する構成ファイルも含まれます。既定のアプリケーション構成は appsettings.json に格納されます。しかし、appsettings.Development.json を使用して、これらの設定をオーバーライドすることができます。 appsettings.Development.json ファイルを表示するには、appsettings.json ファイルを展開します。

実行、デバッグ、および変更

ツールバーの [IIS Express] ボタンを選択して、デバッグモードでアプリをビルドして実行します。または、F5 キーを押すか、メニューバーから [デバッグ]>[デバッグの開始] の順に選択します。

注意

"Web サーバー 'IIS Express' に接続できません" というエラーメッセージが表示された場合は、Visual Studio を閉じてから、管理者としてプログラムを再起動してください。これを行うには、[スタート] メニューの [Visual Studio] アイコンを右クリックし、コンテキストメニューの [管理者として実行] オプションを選択します。

IIS SSL Express の証明書を受け入れるかどうかをたずねるメッセージが表示される場合もあります。 Web ブラウザーでコードを表示するには、 [はい] を選択し、フォローアップセキュリティ警告メッセージを受信した場合はさらに [はい] を選択します。
Visual Studio でブラウザーウィンドウが起動します。その後、メニューバーに Home および Privacy ページが表示されます。
メニューバーから [Privacy] を選択します。ブラウザーで見た Privacy ページには、Privacy.cshtml ファイルに設定されているテキストが表示されます。
Visual Studio に戻り、Shift + F5 を押してデバッグを停止します。この操作により、ブラウザーウィンドウ内のプロジェクトが閉じられます。
Visual Studio で Privacy.cshtml を開いて編集します。次に、"このページを使用してサイトのプライバシーポリシーを詳しく説明します。 " の文章を削除して、その場所に "このページは、@ViewData["TimeStamp"] 時点で、作成中です" という文章と置き換えます。
それでは、コードを変更してみましょう。 Privacy.cshtml.cs を選択します。次に、次のショートカットを選択用して、ファイルの上部にある using ディレクティブをクリーンアップします。

淡色表示されている using ディレクティブにマウスオーバーするか、これを選択します。クイックアクションの電球が、キャレットのすぐ下または左余白に表示されます。電球を選択してから、[不要な using の削除] の横にある展開矢印を選択します。

ここで、 [変更のプレビュー] を選択して、変更される内容を確認します。

[適用] を選択します。 Visual Studio では、ファイルから不要な using ディレクティブが削除されます。
次に、DateTime.ToString メソッドを使用して、自分のカルチャまたは地域用に書式設定した現在の日付の文字列を作成します。
- メソッドの最初の引数では、日付の表示方法を指定します。この例では、短い日付形式を示す書式指定子 (d) を使用します。
- 2 番目の引数は、日付のカルチャまたは地域を指定する CultureInfo オブジェクトです。 2 番目の引数により、特に、日付内の任意の単語の言語と、使用される区切り記号の種類が決定されます。
OnGet() メソッドの本体を次のコードに変更します。
```
public void OnGet()
{
   string dateTime = DateTime.Now.ToString("d", new CultureInfo("en-US"));
   ViewData["TimeStamp"] = dateTime;
}
```
次の using ディレクティブが自動的にファイルの先頭に追加されていることに注目してください。
```
using System.Globalization;
```
System.Globalization には CultureInfo クラスが含まれています。
F5 キーを押して、Web ブラウザーでプロジェクトを開きます。
Web サイトの上部で [Privacy] を選択し、変更を確認します。
Web ブラウザーを閉じ、 Shift+F5キーを押してデバッグを停止します。

Home ページを変更する

ソリューションエクスプローラーで、Pages フォルダーを展開し、Index.cshtml を選択します。

Index. cshtml ファイルは、Web ブラウザーで実行される Web アプリの Home ページに対応しています。

コードエディターには、Home ページに表示されるテキストの HTML コードが表示されます。
Welcome のテキストを Hello World! に置き換えます。
IIS Express を選択するか、Ctrl+F5 キーを押してアプリを実行し、Web ブラウザーで開きます。
Web ブラウザーでは、Home ページに新しい変更が表示されます。
Web ブラウザーを閉じ、Shift+F5キーを押してデバッグを停止し、プロジェクトを保存します。これで、Visual Studio を閉じることができます。