次の方法で共有

ASP.NET MVC 5 の概要

  • [アーティクル]

作成者: Rick Anderson

Note

Visual Studio の最新バージョンを使用した、このチュートリアルの更新バージョンはこちらにあります。 新しいチュートリアル (このチュートリアルよりも多くの改善がされています) では、ASP.NET Core MVC を使用しています。

このチュートリアルでは、ASP.NET Core MVC のコントローラーとビューについて説明します。 Razor Pages は ASP.NET Core での新しい代替手段であり、Web UI の構築をより簡単かつ生産的にする、ページベースのプログラミング モデルです。 MVC のバージョンの前に、Razor ページのチュートリアルを試すことをお勧めします。 この Razor ページのチュートリアルの特徴は次のとおりです。

  • 使いやすい。
  • 多くの機能をカバーしている。
  • 新しいアプリ開発に推奨されるアプローチです。

このチュートリアルでは、Visual Studio 2017 を使用した ASP.NET MVC 5 Web アプリのビルドの基礎について説明します。 このチュートリアルの最終的なソース コードは GitHub にあります。

このチュートリアルは、Scott Guthrie (twitter: @scottgu)、Scott Hanselman (twitter: @shanselman)、Rick Anderson (@RickAndMSFT) によって作成されました

このアプリを Azure にデプロイするには、Azure アカウントが必要です。

  • 無料でAzure アカウントを開く - Azure の有料サービスを試用できるクレジットが提供されます。このクレジットを使い切ってもアカウントは維持されるため、無料の Azure サービスをご利用になれます。
  • MSDN サブスクライバーの特典を有効にする こともできます - MSDN サブスクリプションにより、有料の Azure のサービスを使用できるクレジットが毎月与えられます。

作業の開始

まず、Visual Studio 2017 をインストールします。 次に、Visual Studio を開きます。

Visual Studio は IDE (統合開発環境) です。 Microsoft Word を使用してドキュメントを作成するのと同様に、IDE を使用してアプリケーションを作成します。 Visual Studio の下部には、使用できるさまざまなオプションを示す一覧があります。 また、メニューを使用して IDE のタスクを実行することもできます。 たとえば、[スタート] ページで [新しいプロジェクト] を選択する代わりに、メニュー バーを使用して [ファイル]>[新しいプロジェクト] を選択できます。

Visual Studio のスタート ページを示すスクリーンショット。

最初のアプリを作成する

[スタート] ページで [新しいプロジェクト] を選択します。 [新しいプロジェクト] ダイアログ ボックスで、左側の [Visual C#] カテゴリ、[Web] の順に選択し、[ASP.NET Web アプリケーション (.NET Framework)] プロジェクト テンプレートを選択します。 プロジェクトに "MvcMovie" という名前を付けて、[OK] を選択します。

[新しいプロジェクト] ウィンドウを示すスクリーンショット。Web と A S P ドット NET Web アプリケーション ドット NET Framework が選択されています。

[新しい ASP.NET Web アプリケーション] ダイアログで、[MVC]、[OK] の順に選択します。

新しい A S P ドット NET Web アプリケーション ダイアログを示すスクリーンショット。M V C が選択されています。

Visual Studio では、先ほど作成した ASP.NET MVC プロジェクトに既定のテンプレートを使用しているため、何もしなくてもすぐにアプリケーションが動作します。 これは、単純な "Hello World!" プロジェクトで、アプリケーションの開始点として適切なものです。

[概要] ページが開いている M V C ムービー ウィンドウを示すスクリーンショット。

F5 キーを押してデバッグを開始します。 F5 キーを押すと、Visual Studio によって IIS Express が開始され、Web アプリが実行されます。 その後、Visual Studio はブラウザーを起動して、アプリケーションのホーム ページを開きます。 ブラウザーのアドレス バーには、example.com などではなく、localhost:port# と表示されていることに注目してください。 これは、localhost が常に自分のローカル コンピューターを指しているためです。この例の場合は、今ビルドしたアプリケーションを実行しているものです。 Visual Studio が Web プロジェクトを実行するときには、Web サーバー用にランダムなポートが使用されます。 以下の画像内で、ポート番号は "1234" です。 アプリケーションを実行すると、別のポート番号が表示されます。

A S P ドット NET ホーム ページを示すスクリーンショット。

すぐに使用できるこの既定のテンプレートには、Home、Contact、About ページが用意されています。 次の図には、Home、About、Contact リンクが表示されていません。 ブラウザー ウィンドウのサイズによっては、ナビゲーション アイコンをクリックしてリンクを表示する必要がある場合があります。

小さい表示ウィンドウ内の A S P ドット NET ホーム ページを示すスクリーンショット。ナビゲーション メニューを示す三本線が赤で囲まれています。

アプリケーションでは、登録とログインのサポートも提供されます。 次のステップでは、このアプリケーションの動作方法を変更して、ASP.NET MVC について少しだけ説明します。 ASP.NET MVC アプリケーションを閉じて、一部のコードを変更してみましょう。

現在のチュートリアルの一覧については、MVC の推奨記事を参照してください。

次へ