クイック スタート: Visual Studio を使用して初めての ASP.NET Core Web アプリを作成するQuickstart: Use Visual Studio to create your first ASP.NET Core web app

Visual Studio の使用方法を紹介する、この 5 - 10 分のクイック スタートでは、ASP.NET プロジェクト テンプレートと C# プログラミング言語を使って、シンプルな "Hello World" Web アプリを作成します。In this 5-10 minute introduction to how to use Visual Studio, you'll create a simple "Hello World" web app by using an ASP.NET project template and the C# programming language.

始める前にBefore you begin

Visual Studio のインストールInstall Visual Studio

Visual Studio をまだインストールしていない場合は、Visual Studio のダウンロード ページに移動し、無料試用版をインストールしてください。If you haven't already installed Visual Studio, go to the Visual Studio downloads page to install it for free.

Visual Studio をまだインストールしていない場合は、Visual Studio のダウンロード ページに移動し、無料試用版をインストールしてください。If you haven't already installed Visual Studio, go to the Visual Studio downloads page to install it for free.

テーマを選択する (省略可能)Choose your theme (optional)

このクイック スタート チュートリアルには、ダーク テーマを使用しているスクリーン ショットが含まれます。This quickstart tutorial includes screenshots that use the dark theme. ダーク テーマを使用していないが、使用したい場合は、その方法について「Visual Studio IDE とエディターのカスタマイズ」ページを参照してください。If you aren't using the dark theme but would like to, see the Personalize the Visual Studio IDE and Editor page to learn how.

プロジェクトを作成するCreate a project

最初に、ASP.NET Core Web アプリケーション プロジェクトを作成します。To start, you'll create an ASP.NET Core web application project. このプロジェクト タイプには、Web アプリを作成するためのすべてのテンプレート ファイルが付属しているので、何も追加する必要はありません。The project type comes with all template files to create a web app, before you've even added anything!

  1. Visual Studio 2017 を開きます。Open Visual Studio 2017.

  2. 上部のメニュー バーから、 [ファイル][新規][プロジェクト] の順に選択します。From the top menu bar, choose File > New > Project.

  3. [新しいプロジェクト] ダイアログ ボックスの左側のウィンドウで [Visual C#] を展開し、 [.NET Core] を選択します。In the left pane of the New Project dialog box, expand Visual C#, and then choose .NET Core. 中央のウィンドウで、 [ASP.NET Core Web アプリケーション] を選択ます。In the middle pane, choose ASP.NET Core Web Application.

    次に、ファイル名を「HelloWorld」にして、 [OK] を選択します。Then, name your file HelloWorld and choose OK.

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

    注意

    .NET Core プロジェクト テンプレートのカテゴリが表示されない場合は、左側のウィンドウで [Visual Studio インストーラーを開く] リンクを選択します。If you don't see the .NET Core project template category, choose the Open Visual Studio Installer link in the left pane. (ディスプレイの設定によっては、表示するためにスクロールする必要があります。)(Depending on your display settings, you might have to scroll to see it.)

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

    Visual Studio インストーラーが起動します。The Visual Studio Installer launches. [ASP.NET と Web 開発] ワークロードを選択してから [変更] を選択します。Choose the ASP.NET and web development workload, and then choose Modify.

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

    (新しいワークロードのインストールを続ける前に、Visual Studio を終了することが必要な場合があります。)(You might have to close Visual Studio before you can continue installing the new workload.)

  4. [新しい ASP.NET Core Web アプリケーション] ダイアログ ボックスで、上部のドロップダウン メニューから [ASP.NET Core 2.1] を選択します。In the New ASP.NET Core Web Application dialog box, select ASP.NET Core 2.1 from the top drop-down menu. 次に、 [Web アプリケーション] を選択し、 [OK] を選択します。Next, choose Web Application, and then choose OK.

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

    注意

    [ASP.NET Core 2.1] が表示されない場合は、最新リリースの Visual Studio を実行していることを確認します。If you don't see ASP.NET Core 2.1, make sure that you are running the most recent release of Visual Studio. インストールを更新する方法の詳細については、「Visual Studio を最新リリースに更新する」ページを参照してください。For more information about how to update your installation, see the Update Visual Studio to the most recent release page.

すぐに、Visual Studio でプロジェクト ファイルが開きます。Soon after, Visual Studio opens your project file.

  1. Visual Studio を開きます。Open Visual Studio.

  2. スタート ウィンドウで、 [新しいプロジェクトの作成] を選択します。On the start window, choose Create a new project.

    [新しいプロジェクトの作成] ウィンドウを表示する

  3. [新しいプロジェクトの作成] ウィンドウで、検索ボックスに「ASP.NET」と入力またはタイプします。On the Create a new project window, enter or type ASP.NET in the search box. 次に、言語のリストから [C#] を選択して、プラットフォームのリストから [Windows] を選択します。Next, choose C# from the Language list, and then choose Windows from the Platform list.

    言語およびプラットフォームのフィルターを適用してから、 [ASP.NET Core Web アプリケーション] テンプレートを選択して、 [次へ] を選択します。After you apply the language and platform filters, choose the ASP.NET Core Web Application template, and then choose Next.

    ASP.NET Core Web アプリケーション用の C# テンプレートを選択する

    注意

    [ASP.NET Core Web アプリケーション] テンプレートが表示されない場合は、 [新しいプロジェクトの作成] ウィンドウからそれをインストールすることができます。If you do not see the ASP.NET Core Web Application template, you can install it from the Create a new project window. [お探しの情報が見つかりませんでしたか?] メッセージで、 [さらにツールと機能をインストールする] リンクを選択します。In the Not finding what you're looking for? message, choose the Install more tools and features link.

    [新しいプロジェクトの作成] ウィンドウに表示された [お探しの情報が見つかりませんでしたか?] での [さらにツールと機能をインストールする] リンク

    次に、Visual Studio インストーラーで、 [ASP.NET と Web 開発] ワークロードを選択します。Then, in the Visual Studio Installer, choose the ASP.NET and web development workload.

    Visual Studio インストーラーの ASP.NET Core Web アプリケーション ワークロード

    その後、Visual Studio インストーラー内の [変更] ボタンをクリックします。After that, choose the Modify button in the Visual Studio Installer. 作業内容を保存するよう求められることがあります。その場合は、そのようにします。You might be prompted to save your work; if so, do so. 次に、 [続行] を選択してワークロードをインストールします。Next, choose Continue to install the workload. その後、この「プロジェクトを作成する」プロシージャの手順 2 に戻ります。Then, return to step 2 in this "Create a project" procedure.

  4. [新しいプロジェクトの構成] ウィンドウの [プロジェクト名] ボックスに「HelloWorld」とタイプまたは入力します。In the Configure your new project window, type or enter HelloWorld in the Project name box. 次に、 [作成] を選択します。Then, choose Create.

    [新しいプロジェクトの構成] ウィンドウで、ご自分のプロジェクトに 'HelloWorld' という名前を付けます。

  5. [新しい ASP.NET Core Web アプリケーションの作成] ウィンドウで、上部のドロップダウン メニューに ASP.NET Core 3.0 が表示されていることを確認します。In the Create a new ASP.NET Core Web Application window, verify that ASP.NET Core 3.0 appears in the top drop-down menu. 次に、Razor Pages の例が含まれている Web アプリケーション を選択します。Then, choose Web Application, which includes example Razor Pages. 次に、 [作成] を選択します。Next, choose Create.

    [新しい ASP.NET Core Web アプリケーションの作成] ウィンドウ

    Visual Studio によってその新しいプロジェクトが開かれます。Visual Studio opens your new project.

アプリの作成と実行Create and run the app

  1. ソリューション エクスプローラーで、Pages フォルダーを展開し、About.cshtml を選択します。In the Solution Explorer, expand the Pages folder, and then choose About.cshtml.

    ソリューション エクスプローラーから About.cshtml ファイルを選択する

    このファイルは、Web アプリの About という名前のページに対応します。これは Web ブラウザーで実行されます。This file corresponds to a page that's named About in the web app, which runs in a web browser.

    Web アプリの About ページ

    エディターに、About ページの "additional information" 領域の HTML コードが表示されます。In the editor, you'll see HTML code for the "additional information" area of the About page.

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

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

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

  3. ソリューション エクスプローラーで、About.cshtml を展開し、About.cshtml.cs を選択します。In the Solution Explorer, expand About.cshtml, and then choose About.cshtml.cs. (このファイルも、Web ブラウザーの About ページに対応しています。)(This file also corresponds with the About page in a web browser.)

    ソリューション エクスプローラーから About.cshtml ファイルを選択する

    エディターに、About ページの "application description" 領域のテキストを含む C# コードが表示されます。In the editor, you'll see C# code that includes text for the "application description" area of the About page.

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

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

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

  5. IIS Express を選択するか、Ctrl+F5 キーを押してアプリを実行し、Web ブラウザーで開きます。Choose IIS Express or press Ctrl+F5 to run the app and open it in a web browser.

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

    注意

    "Web サーバー 'IIS Express' に接続できませんでした" というエラー メッセージ、または SSL 証明書に関するエラー メッセージが表示された場合は、Visual Studio を閉じます。If you get an error message that says, Unable to connect to web server 'IIS Express', or an error message that mentions an SSL certificate, close Visual Studio. 次に、右クリック コンテキスト メニューから [管理者として実行] オプションを使用して Visual Studio を開きます。Next, open Visual Studio by using the Run as administrator option from the right-click context menu. その後、アプリケーションをもう一度実行します。Then, run the application again.

  6. Web ブラウザーで、About ページに更新されたテキストが含まれていることを確認します。In the web browser, verify that the About page includes your updated text.

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

  7. Web ブラウザーを閉じます。Close the web browser.

作業内容の確認Review your work

次のアニメーションを見て、前のセクションで完了した作業を確認します。View the following animation to check the work that you completed in the previous section.

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

このクイック スタートは完了しました。Congratulations on completing this Quickstart! C#、ASP.NET Core、Visual Studio IDE (統合開発環境) について少しはご理解いただけたかと思います。We hope you learned a little bit about C#, ASP.NET Core, and the Visual Studio IDE (integrated development environment).

  1. ソリューション エクスプローラーで、Pages フォルダーを展開し、Index.cshtml を選択します。In the Solution Explorer, expand the Pages folder, and then choose Index.cshtml.

    ソリューション エクスプローラーから Index.cshtml ファイルを選択する

    このファイルは、Web アプリの Home という名前のページに対応します。これは Web ブラウザーで実行されます。This file corresponds to a page that's named Home in the web app, which runs in a web browser.

    Web アプリの About ページ

    エディターには、Home ページに表示されるテキストの HTML コードが表示されます。In the editor, you'll see HTML code for the text that appears on the Home page.

    Visual Studio エディターの Home ページの Index.cshtml ファイル内の HTML コード

  2. "ようこそ" のテキストを "Hello World! " に変更します。Change the "Welcome" text to read "Hello World!".

    Visual Studio エディターで、"ようこそ" という既定の HTML コードが "Hello World" になるように変更します

  3. IIS Express を選択するか、Ctrl+F5 キーを押してアプリを実行し、Web ブラウザーで開きます。Choose IIS Express or press Ctrl+F5 to run the app and open it in a web browser.

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

    注意

    "Web サーバー 'IIS Express' に接続できませんでした" というエラー メッセージ、または SSL 証明書に関するエラー メッセージが表示された場合は、Visual Studio を閉じます。If you get an error message that says, Unable to connect to web server 'IIS Express', or an error message that mentions an SSL certificate, close Visual Studio. 次に、右クリック コンテキスト メニューから [管理者として実行] オプションを使用して Visual Studio を開きます。Next, open Visual Studio by using the Run as administrator option from the right-click context menu. その後、アプリケーションをもう一度実行します。Then, run the application again.

  4. Web ブラウザーで、Home ページに更新されたテキストが含まれていることを確認します。In the web browser, verify that the Home page includes your updated text.

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

  5. Web ブラウザーを閉じます。Close the web browser.

次の手順Next steps

詳細については、引き続き以下のチュートリアルをご覧ください。To learn more, continue with the following tutorial:

関連項目See also

Visual Studio を使用して Azure App Service に Web アプリを発行するPublish your web app to Azure App Service by using Visual Studio