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

適用対象:yesVisual Studio noVisual Studio for Mac noVisual 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 ダウンロード ページを参照してください。

プロジェクトを作成する

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

  1. [スタート ウィンドウ] で、 [新しいプロジェクトの作成] を選択します。

    Visual Studio のスタート画面が表示されているスクリーンショット。[新しいプロジェクトの作成] オプションが強調表示されています。

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

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

    [新しいプロジェクト] ダイアログ ボックスで ASP.NET Core Web アプリ プロジェクト テンプレートが強調表示されているところを示すスクリーンショット。

    注意

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

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

    Visual Studio インストーラーの .NET Core クロスプラットフォーム開発ワークロードを示すスクリーンショット。

    Visual Studio インストーラーで、 [変更] を選択します。 作業内容を保存するよう求められることがあります。 次に、 [続行] を選択してワークロードをインストールします。

  3. [新しいプロジェクトの構成] ウィンドウの "プロジェクト名" フィールドに「MyCoreApp」と入力します。 次に、 [次へ] を選択します。

  4. [追加情報] ウィンドウで、 "ターゲット フレームワーク" フィールドに .NET Core 3.1 が表示されていることを確認します。 このウィンドウから、Docker サポートを有効にし、認証サポートを追加することができます。 [認証の種類] のドロップダウン メニューには、次の 4 つのオプションがあります。

    • なし。 認証なし。
    • 個人アカウント。 これらの認証はローカルまたは Azure ベースのデータベースに格納されます。
    • Microsoft ID プラットフォーム。 このオプションでは、認証用に Active Directory、Azure AD、または Microsoft 365 が使用されます。
    • Windows。 イントラネット アプリケーションに適しています。

    [Enable Docker](Docker を有効にする) チェック ボックスはオフのままにし、[認証の種類] に [なし] を選択します。 次に、 [作成] を選択します。

    [追加情報] ウィンドウの既定の設定を示すスクリーンショット。フレームワークの値は .NET Core 3.1 です。

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

  1. [スタート ウィンドウ] で、 [新しいプロジェクトの作成] を選択します。

    Visual Studio のスタート画面が表示されているスクリーンショット。[新しいプロジェクトの作成] オプションが強調表示されています。

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

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

    [新しいプロジェクトの作成] ページで、ASP.NET Core Web アプリ プロジェクト テンプレートが選択および強調表示されているところを示すスクリーンショット。

    注意

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

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

    Visual Studio インストーラーの ASP.NET と Web 開発ワークロードを示すスクリーンショット。

    Visual Studio インストーラーで、 [変更] を選択します。 作業内容を保存するよう求められることがあります。 次に、 [続行] を選択してワークロードをインストールします。

  3. [新しいプロジェクトの構成] ウィンドウの "プロジェクト名" フィールドに「MyCoreApp」と入力します。 次に、 [次へ] を選択します。

  4. [追加情報] ウィンドウで、 "ターゲット フレームワーク" フィールドに .NET 6.0 が表示されていることを確認します。 このウィンドウから、Docker サポートを有効にし、認証サポートを追加することができます。 [認証の種類] のドロップダウン メニューには、次の 4 つのオプションがあります。

    • なし。 認証なし。
    • 個人アカウント。 これらの認証はローカルまたは Azure ベースのデータベースに格納されます。
    • Microsoft ID プラットフォーム。 このオプションでは、認証用に Active Directory、Azure AD、または Microsoft 365 が使用されます。
    • Windows。 イントラネット アプリケーションに適しています。

    [Enable Docker](Docker を有効にする) チェック ボックスはオフのままにし、[認証の種類] に [なし] を選択します。 次に、 [作成] を選択します。

    [追加情報] ウィンドウの既定の設定を示すスクリーンショット。フレームワークの値は .NET 6.0 です。

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

ソリューションについて

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

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

  1. プロジェクト テンプレートでは、MyCoreApp という名前の単一の ASP.NET Core プロジェクトを使用してソリューションを作成します。 [ソリューション エクスプローラー] タブを選択してそのコンテンツを表示します。

    Visual Studio のソリューション エクスプローラーで MyCoreApp プロジェクトが選択されているところを示すスクリーンショット。

  2. [Pages] フォルダーを展開します。

    Visual Studio のソリューション エクスプローラーに Pages フォルダーの内容が表示されているスクリーンショット。

  3. Index.cshtml ファイルを選択し、コード エディターで表示します。

    Visual Studio のコード エディターに Index.cshtml ファイルが開かれているところを示すスクリーンショット。

  4. 各 .cshtml ファイルには、関連付けられたコード ファイルがあります。 エディターでコード ファイルを開くには、ソリューション エクスプローラーで Index.cshtml ノードを展開して、Index.cshtml.cs ファイルを選択します。

    Visual Studio のソリューション エクスプローラーで、Index.cshtml ファイルが選択されているところを示すスクリーンショット。

  5. コード エディターで Index.cshtml.cs ファイルを表示します。

    Visual Studio のコード エディターで Index.cshtml.cs ファイルが開かれているところを示すスクリーンショット。

  6. プロジェクトには、Web サイトのルートとなる wwwroot フォルダーが含まれます。 その内容を表示するには、フォルダーを展開します。

    Visual Studio のソリューション エクスプローラーで www ルート フォルダーが選択されているところを示すスクリーンショット。

    CSS、イメージ、JavaScript ライブラリなどの静的サイト コンテンツを、任意のパスに直接配置することができます。

  7. プロジェクトには、実行時に Web アプリを管理する構成ファイルも含まれます。 既定のアプリケーション構成appsettings.json に格納されます。 しかし、appsettings.Development.json を使用して、これらの設定をオーバーライドすることができます。 appsettings.Development.json ファイルを表示するには、appsettings.json ファイルを展開します。

    Visual Studio のソリューション エクスプローラーで、appsettings.json が選択および展開されているところを示すスクリーンショット。

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

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

    Visual Studio のツールバーで [IIS Express] ボタンが強調表示されているところを示すスクリーンショット。

    注意

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

    IIS SSL Express の証明書を受け入れるかどうかをたずねるメッセージが表示される場合もあります。 Web ブラウザーでコードを表示するには、 [はい] を選択し、フォロー アップ セキュリティ警告メッセージを受信した場合はさらに [はい] を選択します。

  2. Visual Studio でブラウザー ウィンドウが起動します。 その後、メニュー バーに Home および Privacy ページが表示されます。

  3. メニュー バーから [Privacy] を選択します。 ブラウザーで見た Privacy ページには、Privacy.cshtml ファイルに設定されているテキストが表示されます。

  4. Visual Studio に戻り、Shift + F5 を押してデバッグを停止します。 この操作により、ブラウザー ウィンドウ内のプロジェクトが閉じられます。

  5. Visual Studio で Privacy.cshtml を開いて編集します。 次に、"このページを使用してサイトのプライバシー ポリシーを詳しく説明します。 " の文章を削除して、その場所に "このページは、@ViewData["TimeStamp"] 時点で、作成中です" という文章と置き換えます。

    Visual Studio のコード エディターで、更新されたテキストが表示されている Privacy.cshtml ファイルが開かれているところを示すスクリーンショット。

  6. それでは、コードを変更してみましょう。 Privacy.cshtml.cs を選択します。 次に、以下のショートカットを使用して、ファイルの上部にある using ディレクティブをクリーン アップします。

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

    Visual Studio のコード エディターで、淡色表示の Using ディレクティブを表示するクイック アクション ヒントを含む Privacy.cshtml ファイルを示すスクリーンショット。

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

    [変更のプレビュー] ダイアログ ボックスを示すスクリーンショット。ダイアログ ボックスには、削除されるディレクティブが表示され、削除後のコード変更がプレビューされているところが表示されています。

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

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

    public void OnGet()
    {
       string dateTime = DateTime.Now.ToShortDateString();
       ViewData["TimeStamp"] = dateTime;
    }
    
  8. DateTime の下の波下線に注目してください。 波下線が表示されるのは、この型がスコープに含まれていないためです。

    Visual Studio のコード エディターで、DateTime に波下線の形式でエラー マークが表示されていることを示すスクリーンショット。

    [エラー一覧] ツール バーを開くと、そこに同じエラーが一覧表示されます [エラー一覧] ツール バーが表示されない場合は、上部のメニュー バーで [表示]>[エラー一覧] の順に選択します。

    Visual Studio で DateTime を含むエラー一覧ツール バーが表示されているところを示すスクリーンショット。

  9. このエラーを修復しましょう。 コード エディターで、エラーを含む行のいずれかにカーソルを置いた後、左余白にあるクイック アクションの電球を選択します。 次に、ドロップダウン メニューから、 [using System;] を選択してファイルの先頭にこのディレクティブを追加し、エラーを解決します。

    using System にマウスオーバーしたときにドロップダウン リストから [クイック アクション] オプションが表示されているスクリーンショット。

  10. F5 キーを押して、Web ブラウザーでプロジェクトを開きます。

  11. Web サイトの上部で [Privacy] を選択し、変更を確認します。

    行った変更が含まれる、更新後の Privacy ページを示すスクリーンショット。

  12. Web ブラウザーを閉じ、 Shift+F5キーを押してデバッグを停止します。

Home ページを変更する

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

    ソリューション エクスプローラーの Pages ノードの下で、Index.cshtml が選択されているところを示すスクリーンショット。

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

     ブラウザー ウィンドウに Web アプリの Home ページが表示さてれいるスクリーンショット。

    コード エディターには、Home ページに表示されるテキストの HTML コードが表示されます。

    Visual Studio のコード エディターに Home ページの Index.cshtml ファイルが表示されているスクリーンショット。

  2. Welcome のテキストを Hello World! に置き換えます。

    Visual Studio のコード エディターで、Index.cshtml の Welcome のテキストが Hello World! に変更されたことを示すスクリーンショット。

  3. IIS Express を選択するか、Ctrl+F5 キーを押してアプリを実行し、Web ブラウザーで開きます。

    Visual Studio のツール バーで [IIS Express] ボタンが強調表示されているところを示すスクリーンショット。

  4. Web ブラウザーでは、Home ページに新しい変更が表示されます。

    ブラウザー ウィンドウに、更新されたテキスト Hello World! を含む Web アプリの Home ページが表示されているスクリーンショット。

  5. Web ブラウザーを閉じ、Shift+F5キーを押してデバッグを停止し、プロジェクトを保存します。 これで、Visual Studio を閉じることができます。

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

  1. プロジェクト テンプレートでは、MyCoreApp という名前の単一の ASP.NET Core プロジェクトを使用してソリューションを作成します。 [ソリューション エクスプローラー] タブを選択してそのコンテンツを表示します。

    Visual Studio のソリューション エクスプローラーで、MyCoreApp プロジェクトが選択されているところとその内容を示すスクリーンショット。

  2. [Pages] フォルダーを展開します。

    ソリューション エクスプローラーに Pages フォルダーの内容が表示されているスクリーンショット。

  3. Index.cshtml ファイルを選択し、コード エディターで表示します。

    Visual Studio のコード エディターで、Index.cshtml ファイルが開かれているところを示すスクリーンショット。

  4. 各 .cshtml ファイルには、関連付けられたコード ファイルがあります。 エディターでコード ファイルを開くには、ソリューション エクスプローラーで Index.cshtml ノードを展開して、Index.cshtml.cs ファイルを選択します。

    Visual Studio のソリューション エクスプローラーで、Index.cshtml ファイルが選択されているところを示すスクリーンショット。

  5. コード エディターで Index.cshtml.cs ファイルを表示します。

    Visual Studio のコード エディターで Index.cshtml.cs ファイルが開かれているところを示すスクリーンショット。

  6. プロジェクトには、Web サイトのルートとなる wwwroot フォルダーが含まれます。 その内容を表示するには、フォルダーを展開します。

    Visual Studio のソリューション エクスプローラーで www ルート フォルダーが選択されているところを示すスクリーンショット。

    CSS、イメージ、JavaScript ライブラリなどの静的サイト コンテンツを、任意のパスに直接配置することができます。

  7. プロジェクトには、実行時に Web アプリを管理する構成ファイルも含まれます。 既定のアプリケーション構成appsettings.json に格納されます。 しかし、appsettings.Development.json を使用して、これらの設定をオーバーライドすることができます。 appsettings.Development.json ファイルを表示するには、appsettings.json ファイルを展開します。

    Visual Studio のソリューション エクスプローラーで、appsettings.Development.json を公開する appsettings.json が選択および展開されているところを示すスクリーンショット。

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

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

    Visual Studio のツールバーで [IIS Express] ボタンが強調表示されているところを示すスクリーンショット。

    注意

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

    IIS SSL Express の証明書を受け入れるかどうかをたずねるメッセージが表示される場合もあります。 Web ブラウザーでコードを表示するには、 [はい] を選択し、フォロー アップ セキュリティ警告メッセージを受信した場合はさらに [はい] を選択します。

  2. Visual Studio でブラウザー ウィンドウが起動します。 その後、メニュー バーに Home および Privacy ページが表示されます。

  3. メニュー バーから [Privacy] を選択します。 ブラウザーで見た Privacy ページには、Privacy.cshtml ファイルに設定されているテキストが表示されます。

  4. Visual Studio に戻り、Shift + F5 を押してデバッグを停止します。 この操作により、ブラウザー ウィンドウ内のプロジェクトが閉じられます。

  5. Visual Studio で Privacy.cshtml を開いて編集します。 次に、"このページを使用してサイトのプライバシー ポリシーを詳しく説明します。 " の文章を削除して、その場所に "このページは、@ViewData["TimeStamp"] 時点で、作成中です" という文章と置き換えます。

    Visual Studio のコード エディターで、更新されたテキストが表示されている Privacy.cshtml ファイルが開かれているところを示すスクリーンショット。

  6. それでは、コードを変更してみましょう。 Privacy.cshtml.cs を選択します。 次に、次のショートカットを選択用して、ファイルの上部にある using ディレクティブをクリーンアップします。

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

    Visual Studio のコード エディターで、Privacy.cshtml ファイルのクイック アクションのヒントが開き、[変更のプレビュー] が強調表示されているところを示すスクリーンショット。

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

    [変更のプレビュー] ダイアログ ボックスを示すスクリーンショット。ダイアログ ボックスには、削除されるディレクティブが表示され、削除後のコード変更がプレビューされているところが表示されています。

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

  7. 次に、DateTime.ToString メソッドを使用して、自分のカルチャまたは地域用に書式設定した現在の日付の文字列を作成します。

    • メソッドの最初の引数では、日付の表示方法を指定します。 この例では、短い日付形式を示す書式指定子 (d) を使用します。
    • 2 番目の引数は、日付のカルチャまたは地域を指定する CultureInfo オブジェクトです。 2 番目の引数により、特に、日付内の任意の単語の言語と、使用される区切り記号の種類が決定されます。

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

public void OnGet()
{
   string dateTime = DateTime.Now.ToString("d", new CultureInfo("en-US"));
   ViewData["TimeStamp"] = dateTime;
}
  1. CultureInfo の下に波線が表示されることに注目してください。 波下線が表示されるのは、この型がスコープに含まれていないためです。

    Visual Studio のコード エディターで、CultureInfo に波下線の形式でエラー マークが表示されていることを示すスクリーンショット。

    [エラー一覧] ツール バーを開き、そこに同じエラーが一覧表示されていることを確認します。 [エラー一覧] ツール バーが表示されない場合は、上部のメニュー バーで [表示]>[エラー一覧] の順に選択します。

    CultureInfo が一覧表示されている Visual Studio の [エラー一覧] ツール バーを示すスクリーンショット。using ディレクティブがありません。

  2. このエラーを修復しましょう。 コード エディターで、エラーを含む行のいずれかにカーソルを置いた後、左余白にあるクイック アクションの電球を選択します。 次に、ドロップダウン メニューから using System.Globalization; を選択してファイルの先頭にディレクティブを追加して、エラーを解決します。

    System.Globalization にマウスオーバーしたときにドロップダウン リストから [クイック アクション] オプションが表示されているところを示すスクリーンショット。

  3. F5 キーを押して、Web ブラウザーでプロジェクトを開きます。

  4. Web サイトの上部で [Privacy] を選択し、変更を確認します。

    日付を追加するために行われた変更が含まれる MyCoreApp の Privacy ページを示すスクリーンショット。

  5. Web ブラウザーを閉じ、 Shift+F5キーを押してデバッグを停止します。

Home ページを変更する

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

    ソリューション エクスプローラーの Pages ノードの下で、Index.cshtml が選択されているところを示すスクリーンショット。

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

    ブラウザー ウィンドウに Web アプリの Home ページが表示さてれいるスクリーンショット。

    コード エディターには、Home ページに表示されるテキストの HTML コードが表示されます。

    Visual Studio のコード エディターでの Home ページの Index.cshtml ファイルを示すスクリーンショット。

  2. Welcome のテキストを Hello World! に置き換えます。

    Visual Studio のコード エディターでの 'Index.cshtml' ファイルを示すスクリーンショット。'Welcome' というテキストが 'Hello World!' に変更されています。

  3. IIS Express を選択するか、Ctrl+F5 キーを押してアプリを実行し、Web ブラウザーで開きます。

    Visual Studio のツール バーで [IIS Express] ボタンが強調表示されているところを示すスクリーンショット。

  4. Web ブラウザーでは、Home ページに新しい変更が表示されます。

    ブラウザー ウィンドウに、更新されたテキスト 'Hello World!' を含む Web アプリの Home ページが表示されているスクリーンショット。

  5. Web ブラウザーを閉じ、Shift+F5キーを押してデバッグを停止し、プロジェクトを保存します。 これで、Visual Studio を閉じることができます。

次の手順

これでこのチュートリアルは完了です。 C#、ASP.NET Core、Visual Studio IDE を楽しく学んでいただけましたでしょうか。 C# と ASP.NET を使用する Web アプリまたは Web サイトの作成方法の詳細については、以下のチュートリアルに進んで確認してください。

または、Docker を使用して Web アプリをコンテナー化する方法について説明します。

関連項目

Visual Studio を使用して Azure App Service に Web アプリを発行する