クイック スタート: 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 2017 を更新するUpdate Visual Studio

Visual Studio を既にインストールしている場合は、最新のリリースを実行していることを確認します。If you've already installed Visual Studio, make sure that you are running the most recent release. インストールを更新する方法の詳細については、「Visual Studio 2017 を最新リリースに更新する」ページを参照してください。For more information about how to update your installation, see the Update Visual Studio 2017 to the most recent release page.

テーマを選択する (省略可能)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 アプリケーション プロジェクトを作成する

    Note

    .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.0] 以降を選択します。In the New ASP.NET Core Web Application dialog box, select ASP.NET Core 2.0 or later from the top drop-down menu.

    Note

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

  5. 次に、[Web アプリケーション] を選択し、[OK] を選択します。Next, choose Web Application, and then choose OK.

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

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

アプリを作成するCreate the app

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

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

    このファイルは、Web アプリの About という名前のページに対応します。This file corresponds to a page that's named About in the web app.

    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 your web app.)

    ソリューション エクスプローラーから 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 エディターでアプリケーション説明領域の既定のメッセージ テキストを変更する

アプリを実行するRun the app

  1. Ctrl + F5 キーを押してアプリを実行し、Web ブラウザーで開きます。Press Ctrl+F5 to run the app and open it in a web browser.

    Note

    "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 or context menu. その後、アプリケーションをもう一度実行します。Then, run the application again.

  2. Web ページの上部で [About] を選択します。At the top of the web page, choose About.

    Web ページで [About] を選択する

  3. [About] ページに追加した更新後のテキストが表示されます。View the updated text that you added to the About page.

    追加したテキストを含む更新後の [About] ページが表示される

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

このクイック スタートは完了しました。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).

次の手順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