ASP.NET Core MVC の概要Get started with ASP.NET Core MVC

作成者: Rick AndersonBy Rick Anderson

このチュートリアルでは、コントローラーとビューを使用した ASP.NET Core MVC の Web 開発について説明します。This tutorial teaches ASP.NET Core MVC web development with controllers and views. ASP.NET Core の Web 開発の経験がない場合は、入門者向けであるこのチュートリアルの Razor Pages バージョンを検討してください。If you're new to ASP.NET Core web development, consider the Razor Pages version of this tutorial, which provides an easier starting point.

このチュートリアルでは、ASP.NET Core の MVC Web アプリの構築の基礎について説明します。This tutorial teaches the basics of building an ASP.NET Core MVC web app.

このアプリでは、映画タイトルのデータベースを管理します。The app manages a database of movie titles. 以下の方法について説明します。You learn how to:

  • Web アプリを作成する。Create a web app.
  • モデルを追加してスキャフォールディングする。Add and scaffold a model.
  • データベースを使用する。Work with a database.
  • 検索と検証を追加する。Add search and validation.

最後には、映画データを管理および表示できるアプリが完成します。At the end, you have an app that can manage and display movie data.

サンプル コードを表示またはダウンロードします (ダウンロード方法)。View or download sample code (how to download).

必須コンポーネントPrerequisites

Web アプリの作成Create a web app

  • Visual Studio から [新しいプロジェクトの作成] を選択します。From the Visual Studio select Create a new project.

  • [ASP.NET Core Web アプリケーション] を選択し、 [次へ] を選択します。Select ASP.NET Core Web Application and then select Next.

新しい ASP.NET Core Web アプリケーション

  • プロジェクトに MvcMovie という名前を付けて、 [作成] を選択します。Name the project MvcMovie and select Create. コードをコピーするときに名前空間が一致するように、プロジェクトに MvcMovie と名前を付けることが重要です。It's important to name the project MvcMovie so when you copy code, the namespace will match.

    新しい ASP.NET Core Web アプリケーション

  • [Web Application(Model-View-Controller)](Web アプリケーション (Model-View-Controller)) を選択し、 [作成] を選択します。Select Web Application(Model-View-Controller), and then select Create.

[新しいプロジェクト] ダイアログ、左ウィンドウの .NET Core、ASP.NET Core WebNew project dialog, .NET Core in left pane, ASP.NET Core web

Visual Studio では、作成した MVC プロジェクトに既定のテンプレートが使用されました。Visual Studio used the default template for the MVC project you just created. プロジェクト名を入力し、いくつかのオプションを選択すると、すぐに作業アプリができあがります。You have a working app right now by entering a project name and selecting a few options. これは基本的なスターター プロジェクトです。This is a basic starter project.

アプリを実行するRun the app

Ctrl + F5 キーを押して、デバッグ以外のモードでアプリを実行します。Select Ctrl-F5 to run the app in non-debug mode.

Visual Studio に次のダイアログが表示されます。Visual Studio displays the following dialog:

このプロジェクトは SSL を使用するように構成されています。

IIS Express SSL 証明書を信頼する場合、 [はい] を選択します。Select Yes if you trust the IIS Express SSL certificate.

次のダイアログが表示されます。The following dialog is displayed:

セキュリティ警告のダイアログ

開発証明書を信頼することに同意する場合は、 [はい] を選択します。Select Yes if you agree to trust the development certificate.

詳細については、ASP.NET Core HTTPS 開発証明書の信頼に関する記事をご覧くださいSee Trust the ASP.NET Core HTTPS development certificate for more information.

  • Visual Studio で IIS Express が開始され、アプリが実行されます。Visual Studio starts IIS Express and runs the app. アドレス バーには、example.com などではなく、localhost:port# が表示されます。Notice that the address bar shows localhost:port# and not something like example.com. これは、localhost がローカル コンピューターの標準のホスト名であるためです。That's because localhost is the standard hostname for your local computer. Visual Studio が Web プロジェクトを作成する場合は、Web サーバーにランダム ポートが使用されます。When Visual Studio creates a web project, a random port is used for the web server.

  • Ctrl + F5 キー (非デバッグ モード) でアプリを起動することで、コードの変更、ファイルの保存、ブラウザーの更新、コード変更の確認を行うことができます。Launching the app with Ctrl+F5 (non-debug mode) allows you to make code changes, save the file, refresh the browser, and see the code changes. 多くの開発者は、すばやくアプリを起動し、変更を確認できる非デバッグ モードの使用を好みます。Many developers prefer to use non-debug mode to quickly launch the app and view changes.

  • [デバッグ] メニュー項目から、デバッグ モードまたは非デバッグ モードでアプリを起動できます。You can launch the app in debug or non-debug mode from the Debug menu item:

    [デバッグ] メニュー

  • [IIS Express] ボタンを選択することで、アプリをデバッグできます。You can debug the app by selecting the IIS Express button

    IIS Express

    次の図はアプリを示しています。The following image shows the app:

    ホームまたはインデックス ページ

このチュートリアルの次のパートでは、MVC について説明し、コードの作成を開始します。In the next part of this tutorial, you learn about MVC and start writing some code.

このチュートリアルでは、コントローラーとビューを使用した ASP.NET Core MVC の Web 開発について説明します。This tutorial teaches ASP.NET Core MVC web development with controllers and views. ASP.NET Core の Web 開発の経験がない場合は、入門者向けであるこのチュートリアルの Razor Pages バージョンを検討してください。If you're new to ASP.NET Core web development, consider the Razor Pages version of this tutorial, which provides an easier starting point.

このチュートリアルでは、ASP.NET Core の MVC Web アプリの構築の基礎について説明します。This tutorial teaches the basics of building an ASP.NET Core MVC web app.

このアプリでは、映画タイトルのデータベースを管理します。The app manages a database of movie titles. 以下の方法について説明します。You learn how to:

  • Web アプリを作成する。Create a web app.
  • モデルを追加してスキャフォールディングする。Add and scaffold a model.
  • データベースを使用する。Work with a database.
  • 検索と検証を追加する。Add search and validation.

最後には、映画データを管理および表示できるアプリが完成します。At the end, you have an app that can manage and display movie data.

サンプル コードを表示またはダウンロードします (ダウンロード方法)。View or download sample code (how to download).

必須コンポーネントPrerequisites

警告

Visual Studio 2017 を使用している場合、Visual Studio で動作しない .NET Core SDK のバージョンについては、dotnet/sdk issue #3124 を参照してください。If you use Visual Studio 2017, see dotnet/sdk issue #3124 for information about .NET Core SDK versions that don't work with Visual Studio.

Web アプリの作成Create a web app

  • Visual Studio から [新しいプロジェクトの作成] を選択します。From the Visual Studio select Create a new project.

  • [ASP.NET Core Web アプリケーション] を選択し、 [次へ] を選択します。Selecct ASP.NET Core Web Application and then select Next.

新しい ASP.NET Core Web アプリケーション

  • プロジェクトに MvcMovie という名前を付けて、 [作成] を選択します。Name the project MvcMovie and select Create. コードをコピーするときに名前空間が一致するように、プロジェクトに MvcMovie と名前を付けることが重要です。It's important to name the project MvcMovie so when you copy code, the namespace will match.

    新しい ASP.NET Core Web アプリケーション

  • [Web Application(Model-View-Controller)](Web アプリケーション (Model-View-Controller)) を選択し、 [作成] を選択します。Select Web Application(Model-View-Controller), and then select Create.

[新しいプロジェクト] ダイアログ、左ウィンドウの .NET Core、ASP.NET Core WebNew project dialog, .NET Core in left pane, ASP.NET Core web

Visual Studio では、作成した MVC プロジェクトに既定のテンプレートが使用されました。Visual Studio used the default template for the MVC project you just created. プロジェクト名を入力し、いくつかのオプションを選択すると、すぐに作業アプリができあがります。You have a working app right now by entering a project name and selecting a few options. これは基本的なスターター プロジェクトなので、ここから始めることをお勧めします。This is a basic starter project, and it's a good place to start.

アプリを実行するRun the app

Ctrl + F5 キーを押して、デバッグ以外のモードでアプリを実行します。Select Ctrl-F5 to run the app in non-debug mode.

Visual Studio に次のダイアログが表示されます。Visual Studio displays the following dialog:

このプロジェクトは SSL を使用するように構成されています。

IIS Express SSL 証明書を信頼する場合、 [はい] を選択します。Select Yes if you trust the IIS Express SSL certificate.

次のダイアログが表示されます。The following dialog is displayed:

セキュリティ警告のダイアログ

開発証明書を信頼することに同意する場合は、 [はい] を選択します。Select Yes if you agree to trust the development certificate.

詳細については、ASP.NET Core HTTPS 開発証明書の信頼に関する記事をご覧くださいSee Trust the ASP.NET Core HTTPS development certificate for more information.

  • Visual Studio で IIS Express が開始され、アプリが実行されます。Visual Studio starts IIS Express and runs the app. アドレス バーには、example.com などではなく、localhost:port# が表示されます。Notice that the address bar shows localhost:port# and not something like example.com. これは、localhost がローカル コンピューターの標準のホスト名であるためです。That's because localhost is the standard hostname for your local computer. Visual Studio が Web プロジェクトを作成する場合は、Web サーバーにランダム ポートが使用されます。When Visual Studio creates a web project, a random port is used for the web server.

  • Ctrl + F5 キー (非デバッグ モード) でアプリを起動することで、コードの変更、ファイルの保存、ブラウザーの更新、コード変更の確認を行うことができます。Launching the app with Ctrl+F5 (non-debug mode) allows you to make code changes, save the file, refresh the browser, and see the code changes. 多くの開発者は、すばやくアプリを起動し、変更を確認できる非デバッグ モードの使用を好みます。Many developers prefer to use non-debug mode to quickly launch the app and view changes.

  • [デバッグ] メニュー項目から、デバッグ モードまたは非デバッグ モードでアプリを起動できます。You can launch the app in debug or non-debug mode from the Debug menu item:

    [デバッグ] メニュー

  • [IIS Express] ボタンを選択することで、アプリをデバッグできます。You can debug the app by selecting the IIS Express button

    IIS Express

  • [同意する] を選択し、追跡に同意します。Select Accept to consent to tracking. このアプリでは個人情報は追跡されません。This app doesn't track personal information. テンプレートで生成されたコードには、一般的なデータ保護規制 (GDPR) を満たす資産が含まれます。The template generated code includes assets to help meet General Data Protection Regulation (GDPR).

    ホームまたはインデックス ページ

    次の図は、追跡に同意した後のアプリを示しています。The following image shows the app after accepting tracking:

    ホームまたはインデックス ページ

このチュートリアルの次のパートでは、MVC について説明し、コードの作成を開始します。In the next part of this tutorial, you learn about MVC and start writing some code.