クイック スタート: Visual Studio を使用して初めての ASP.NET Core Web アプリを作成する

Visual Studio の使用方法を紹介する、この 5 - 10 分のクイック スタートでは、ASP.NET プロジェクト テンプレートと C# プログラミング言語を使って、シンプルな "Hello World" Web アプリを作成します。

始める前に

Visual Studio のインストール

Visual Studio をまだインストールしていない場合は、Visual Studio のダウンロード ページに移動し、無料試用版をインストールしてください。

Visual Studio をまだインストールしていない場合は、Visual Studio のダウンロード ページに移動し、無料試用版をインストールしてください。

テーマを選択する (省略可能)

このクイック スタート チュートリアルには、ダーク テーマを使用しているスクリーン ショットが含まれます。 ダーク テーマを使用していないが、使用方法を学習したい場合は、「方法: Visual Studio IDE とエディターのカスタマイズ」を参照してください。

プロジェクトを作成する

最初に、ASP.NET Core Web アプリケーション プロジェクトを作成します。 このプロジェクト タイプには、Web アプリを作成するためのすべてのテンプレート ファイルが付属しているので、何も追加する必要はありません。

  1. Visual Studio 2017 を開きます。

  2. 上部のメニュー バーから、 [ファイル][新規][プロジェクト] の順に選択します。

  3. [新しいプロジェクト] ダイアログ ボックスの左側のウィンドウで [Visual C#] を展開し、 [.NET Core] を選択します。 中央のウィンドウで、 [ASP.NET Core Web アプリケーション] を選択ます。

    次に、ファイル名を「HelloWorld」にして、 [OK] を選択します。

    C# 用の新しい ASP.NET Core Web アプリケーション プロジェクトを作成する

    注意

    .NET Core プロジェクト テンプレートのカテゴリが表示されない場合は、左側のウィンドウで [Visual Studio インストーラーを開く] リンクを選択します。 (ディスプレイの設定によっては、表示するためにスクロールする必要があります。)

    [新しいプロジェクト] ダイアログ ボックスから Visual Studio インストーラーを開く

    Visual Studio インストーラーが起動します。 [ASP.NET と Web 開発] ワークロードを選択してから [変更] を選択します。

    VS インストーラーの ASP.NET ワークロード

    (新しいワークロードのインストールを続ける前に、Visual Studio を終了することが必要な場合があります。)

  4. [新しい ASP.NET Core Web アプリケーション] ダイアログ ボックスで、上部のドロップダウン メニューから [ASP.NET Core 2.1] を選択します。 次に、 [Web アプリケーション] を選択し、 [OK] を選択します。

    [新しい ASP.NET Core Web アプリケーション] ダイアログ ボックス

    注意

    [ASP.NET Core 2.1] が表示されない場合は、最新リリースの Visual Studio を実行していることを確認します。 インストールを更新する方法の詳細については、「Visual Studio を最新リリースに更新する」ページを参照してください。

すぐに、Visual Studio でプロジェクト ファイルが開きます。

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

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

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

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

    [C#]、[Windows]、[Web] でフィルター処理された [新しいプロジェクトの作成] ウィンドウを示すスクリーンショット。[ASP.NET Core Web アプリ] プロジェクト テンプレートが強調表示されています。

    注意

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

    [お探しの情報が見つかりませんでしたか?] メッセージの [さらにツールと機能をインストールする] リンクが強調表示されているスクリーンショット。

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

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

    その後、Visual Studio インストーラー内の [変更] ボタンをクリックします。 作業内容を保存するよう求められたら、そのようにします。 次に、 [続行] を選択してワークロードをインストールします。 その後、この「プロジェクトを作成する」プロシージャの手順 2 に戻ります。

  3. [新しいプロジェクトの構成] ウィンドウの [プロジェクト名] ボックスに「HelloWorld」とタイプまたは入力します。 その後、 [次へ] を選択します。

    [プロジェクト名] フィールドに「HelloWorld」と入力された [新しいプロジェクトの構成] ウィンドウを示すスクリーンショット。

  4. [追加情報] ウィンドウで、上部のドロップダウン メニューに [.NET Core 3.1] が表示されていることを確認します。 チェック ボックスをオンにすると、Docker サポートを有効にすることができます。 [認証の変更] ボタンをクリックして、認証サポートを追加することもできます。 ここでは、以下のオプションから選択できます。

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

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

    [フレームワーク] フィールドで [.NET Core 3.1] が選択されている [追加情報] ウィンドウを示すスクリーンショット。

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

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

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

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

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

    [C#]、[Windows]、[Web] でフィルター処理された [新しいプロジェクトの作成] ウィンドウを示すスクリーンショット。[ASP.NET Core Web アプリ] プロジェクト テンプレートが強調表示されています。

    注意

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

    [お探しの情報が見つかりませんでしたか?] メッセージの [さらにツールと機能をインストールする] リンクが強調表示されているスクリーンショット。

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

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

    その後、Visual Studio インストーラー内の [変更] ボタンをクリックします。 作業内容を保存するよう求められたら、そのようにします。 次に、 [続行] を選択してワークロードをインストールします。 その後、この「プロジェクトを作成する」プロシージャの手順 2 に戻ります。

  3. [新しいプロジェクトの構成] ウィンドウの [プロジェクト名] ボックスに「HelloWorld」とタイプまたは入力します。 その後、 [次へ] を選択します。

    [プロジェクト名] フィールドに「HelloWorld」と入力された [新しいプロジェクトの構成] ウィンドウを示すスクリーンショット。

  4. [追加情報] ウィンドウで、 [フレームワーク] フィールドに [.NET 6.0] が表示されていることを確認します。 チェック ボックスをオンにすると、Docker サポートを有効にすることができます。 また、 [認証の種類] ドロップダウン リストから値を選択して、認証サポートを追加することもできます。 ここでは、以下のオプションから選択できます。

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

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

    [フレームワーク] フィールドで [.NET 6.0] が選択されている [追加情報] ウィンドウを示すスクリーンショット。

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

アプリの作成と実行

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

    Visual Studio ソリューション エクスプローラーのスクリーンショット。HelloWorld プロジェクトのファイルが表示されています。 Pages フォルダーが展開され、About.cshtml が選択されています。

    このファイルは、Web アプリの About という名前のページに対応します。これは Web ブラウザーで実行されます。

    Web アプリの About ページ

    エディターに、About ページの "additional information" 領域の HTML コードが表示されます。

    Visual Studio エディターに表示された "additional information" 領域の HTML コード

  2. "additional information" というテキストを「Hello World!」に変更します。

    Visual Studio エディターに表示される既定の "additional information" 領域の HTML コードを変更する

  3. ソリューション エクスプローラー で、About.cshtml を展開し、About.cshtml.cs を選択します。 (このファイルも、Web ブラウザーの About ページに対応しています。)

    Visual Studio ソリューション エクスプローラーのスクリーンショット。HelloWorld プロジェクトのファイルが表示されています。 About.cshtml が展開され、About.cshtml.cs が選択されています。

    エディターに、About ページの "application description" 領域のテキストを含む C# コードが表示されます。

    Visual Studio エディターに表示されたアプリケーション説明領域の C# コード

  4. "application description" というメッセージ テキストを「What's my message?」に変更します。

    Visual Studio エディターでアプリケーション説明領域の既定のメッセージ テキストを変更する

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

    Visual Studio の [IIS Express] ボタンを選択する

    注意

    "Web サーバー 'IIS Express' に接続できませんでした" というエラー メッセージ、または SSL 証明書に関するエラー メッセージが表示された場合は、Visual Studio を閉じます。 次に、右クリック コンテキスト メニューから [管理者として実行] オプションを使用して Visual Studio を開きます。 その後、アプリケーションをもう一度実行します。

  6. Web ブラウザーで、About ページに更新されたテキストが含まれていることを確認します。

    加えた変更が含まれる更新後の About ページを表示する

  7. Web ブラウザーを閉じます。

作業内容の確認

次のアニメーションを見て、前のセクションで完了した作業を確認します。

Visual Studio で単純な C# ASP.NET Core Web アプリを作成して実行する方法を示すアニメーション .gif ファイルを表示

このクイック スタートは完了しました。 C#、ASP.NET Core、Visual Studio IDE (統合開発環境) について多少はご理解いただけたかと思います。

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

    ソリューション エクスプローラーで展開された Pages フォルダー内で 'Index.cshtml' が選択されているスクリーンショット。

    このファイルは、Web アプリの Home という名前のページに対応します。これは Web ブラウザーで実行されます。

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

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

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

  2. "ようこそ" のテキストを "Hello World!" に変更します。

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

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

    Visual Studio で [IIS Express] ボタンが強調表示されているスクリーンショット。

    注意

    "Web サーバー 'IIS Express' に接続できませんでした" というエラー メッセージ、または SSL 証明書に関するエラー メッセージが表示された場合は、Visual Studio を閉じます。 次に、右クリック コンテキスト メニューから [管理者として実行] オプションを使用して Visual Studio を開きます。 その後、アプリケーションをもう一度実行します。

  4. Web ブラウザーで、Home ページに更新されたテキストが含まれていることを確認します。

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

  5. Web ブラウザーを閉じます。

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

    ソリューション エクスプローラーで展開された Pages フォルダー内で 'Index.cshtml' が選択されているスクリーンショット。

    このファイルは、Web アプリの Home という名前のページに対応します。これは Web ブラウザーで実行されます。

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

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

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

  2. "ようこそ" のテキストを "Hello World!" に変更します。

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

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

    Visual Studio で [IIS Express] ボタンが強調表示されているスクリーンショット。

    注意

    "Web サーバー 'IIS Express' に接続できませんでした" というエラー メッセージ、または SSL 証明書に関するエラー メッセージが表示された場合は、Visual Studio を閉じます。 次に、右クリック コンテキスト メニューから [管理者として実行] オプションを使用して Visual Studio を開きます。 その後、アプリケーションをもう一度実行します。

  4. Web ブラウザーで、Home ページに更新されたテキストが含まれていることを確認します。

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

  5. Web ブラウザーを閉じます。

次の手順

ASP.NET Web アプリの作成方法の詳細については、次のチュートリアルに進んでください。

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

関連項目

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