チュートリアル: Visual Studio で C# と ASP.NET Core の使用を開始する

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

このチュートリアルでは、次の方法について説明します。

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

前提 条件

このチュートリアルを完了するには、次のものが必要です。

• Visual Studio がインストールされています。 無料版については、Visual Studio のダウンロード ページ を参照してください。 最新の Visual Studio リリースへのアップグレードの詳細については、Visual Studio の更新プログラム 参照してください。
• ASP.NET と Web 開発 ワークロードがインストールされています。 Visual Studio でこのワークロードを確認またはインストールするには、[ツール] >[ツールと機能の取得]を選択します。 詳細については、「ワークロードまたは個々のコンポーネント変更する」を参照してください。

プロジェクトを作成する

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

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

   

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

   言語、プラットフォーム、プロジェクトの種類のフィルターを適用した後、ASP.NET Core Web App (Razor Pages) テンプレートを選択し、[次へ] 選択します。

   

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

   

4. の [追加情報] ウィンドウで、.NET 8.0 が [ターゲット フレームワークの] フィールドに表示されることを確認します。

   このウィンドウから、コンテナーのサポートを有効にし、認証のサポートを追加できます。 認証の種類 のドロップダウン メニューには、次の 4 つのオプションがあります。

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

   [コンテナーのサポートを有効にする ] ボックスはオフのままにし、[認証の種類] に [なし] 選択します。

   

5. [作成] を選択します。

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

ソリューションについて

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

ソリューションを見学する

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

   

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

   

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

   

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

   

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

   

6. プロジェクトには、web サイトのルートである wwwroot フォルダーが含まれています。 フォルダーを展開して内容を表示します。

   

   CSS、画像、JavaScript ライブラリなどの静的サイト コンテンツは、必要なパスに直接配置できます。

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

   

実行、デバッグ、変更

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

   

   手記

   ASP.NET Core SSL 証明書を受け入れるかどうかを確認するメッセージが表示される場合もあります。 Web ブラウザーでコードを表示するには、[はい] 選択し、フォローアップ セキュリティ警告メッセージが表示された場合 [はい] を選択します。 ASP.NET Core で SSL を適用するの詳細について説明します。

2. Visual Studio がブラウザー ウィンドウを起動します。 その後、メニューバーに ホーム と プライバシー ページが表示されます。

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

   

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

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

   

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

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

   

   次に、[変更のプレビュー] を選択して、変更内容を確認します。

   

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

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

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

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

   public void OnGet()
   {
      string dateTime = DateTime.Now.ToString("d", new CultureInfo("en-US"));
      ViewData["TimeStamp"] = dateTime;
   }
   

8. 次の using ディレクティブがファイルの先頭に自動的に追加されます。

   using System.Globalization;
   

   System.Globalization には、CultureInfo クラスが含まれています。

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

10. Web サイトの上部にある [プライバシー] 選択して、変更を表示します。

    

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

ホーム ページを変更する

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

   

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

   

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

   

2. ウェルカム テキストを hello World に置き換えます。

   

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

   

4. Web ブラウザーの [ホーム] ページに新しい変更が表示されます。

   

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

次の手順

このチュートリアルを完了しておめでとうございます。 C#、ASP.NET Core、および Visual Studio IDE について学習できることを願っています。 C# と ASP.NET を使用して Web アプリまたは Web サイトを作成する方法の詳細については、次のチュートリアルに進んでください。

ASP.NET Core を使用して Razor Pages Web アプリを作成する

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

Visual Studio でのコンテナー ツール

関連リンク

• Visual Studio を使用して Web アプリを Azure App Service に発行する
• Visual Studio IDE とエディターの をカスタマイズする