ASP.NET Core の概要Getting Started with ASP.NET Core

Visual Studio for Mac は最新の ASP.NET Core Web 開発プラットフォームをサポートしているため、アプリのサービスを簡単に開発できます。Visual Studio for Mac makes it easy to develop your app's service with its support for the latest ASP.NET Core Web development platform. ASP.NET Core は .NET Core (.NET Framework とランタイムの最新の進化) で実行されます。ASP.NET Core runs on .NET Core, the latest evolution of the .NET Framework and runtime. これは、パフォーマンスが高速になるように調整されています。また、インストール サイズが小さくなるように要素が細かく分かれているほか、Windows に加えて Linux と macOS でも動作するように再構成されています。It's been tuned for fast performance, factored for small install sizes, and reimagined to run on Linux and macOS, as well as Windows.

.NET Core のインストールInstalling .NET Core

.NET Core 3.1 は、Visual Studio for Mac をインストールすると自動的にインストールされます。.NET Core 3.1 is automatically installed when you install Visual Studio for Mac. Visual Studio for Mac でサポートされている .NET Core のバージョンの詳細については、「.NET Core のサポート」を参照してください。For more information about versions of .NET Core supported in Visual Studio for Mac, see .NET Core Support.

Visual Studio for Mac で ASP.NET Core を作成するCreating an ASP.NET Core app in Visual Studio for Mac

Visual Studio for Mac を開きます。Open Visual Studio for Mac. スタート画面で、 [新しいプロジェクト] を選択します。On the Start Screen, select New Project...

[新しいプロジェクト] ダイアログ

[新しいプロジェクト] ダイアログが表示されます。このダイアログで、アプリケーションを作成するためのテンプレートを選択できます。This will display the New Project dialog, allowing you to select a template to create your application.

ASP.NET Core アプリケーションの作成を開始するためのテンプレートがさまざまなプロジェクトで既に用意されています。There are a number of projects that will provide you with a pre-built template to start building your ASP.NET Core Application. これらのボタンの役割は、次のとおりです。These are:

  • [.NET Core] > [空].NET Core > Empty
  • [.NET Core] > [API].NET Core > API
  • [.NET Core] > [Web アプリケーション].NET Core > Web Application
  • [.NET Core] > [Web アプリケーション (モデル ビュー コントローラー)].NET Core > Web Application (Model-View-Controller)
  • [.NET Core] > [Blazor サーバー アプリ].NET Core > Blazor Server App
  • [.NET Core] > [Blazor WebAssembly アプリ].NET Core > Blazor WebAssembly App

ASP.NET プロジェクト オプション

[ASP.NET Core Empty Web Application](ASP.NET Core 空の Web アプリケーション) を選択し、 [次へ] を押します。Select the ASP.NET Core Empty Web Application and press Next. プロジェクトに名前を付け、 [作成] を押します。Give the Project a Name and press Create. これにより、新しい ASP.NET Core アプリが作成されます。This creates a new ASP.NET Core app. [ソリューション] ウィンドウの左側のウィンドウで、2 番目の矢印を展開し、 [Startup.cs] を選択します。In the solution window's left pane, expand the second arrow and then select Startup.cs. 以下の画像のようになります。It should look similar to the image below:

新しい ASP.NET Core の空のプロジェクト

ASP.NET Core の空のテンプレートでは、次の 2 つの既定のファイルを使って Web アプリケーションが作成されます。Program.csStartup.cs です。これらについて以下で説明します。The ASP.NET Core Empty template creates a web application with two default files: Program.cs and Startup.cs, which are explained below. また、[依存関係] フォルダーが作成されます。このフォルダーには、ASP.NET Core、.NET Core フレームワーク、プロジェクトをビルドする MSBuild ターゲットなど、プロジェクトの NuGet パッケージ依存関係が含まれます。It also creates a Dependencies folder, which contains your project's NuGet package dependencies such as ASP.NET Core, the .NET Core framework, and the MSBuild targets that build the project:

依存関係を表示する [ソリューション] ウィンドウ

Program.csProgram.cs

プロジェクトの Program.cs ファイルを開き、中を調べます。Open and inspect the Program.cs file in your project. Main メソッドでいくつかのことが行われていることに注目してください。作成するアプリに入る項目です。Notice that several things are happening in the Main method – the entry into your app:

    public class Program
    {
        public static void Main(string[] args)
        {
            CreateWebHostBuilder(args).Build().Run();
        }

        public static IWebHostBuilder CreateWebHostBuilder(string[] args) =>
            WebHost.CreateDefaultBuilder(args)
                .UseStartup<Startup>();
    }

ASP.NET Core アプリにより、その main メソッドで Web サーバーが作成されます。WebHostBuilder のインスタンスを介してホストが構成され、起動されます。An ASP.NET Core app creates a web server in its main method by configuring and launching a host via an instance of WebHostBuilder. このビルダーは、ホストの構成を可能にするメソッドを提供します。This builder provides methods to allow the host to be configured. テンプレート アプリで、次の構成が使用されます。In the template app, the following configurations are used:

  • .UseStartup<Startup>():スタートアップ クラスを指定します。.UseStartup<Startup>(): Specifies the Startup class.

ただし、次などの追加の構成も追加できます。However, you can also add additional configurations, such as:

  • UseKestrel:Kestrel サーバーがアプリにより使用されることを指定しますUseKestrel: Specifies the Kestrel server will be used by the app
  • UseContentRoot(Directory.GetCurrentDirectory()):アプリがこのフォルダーから起動されるとき、Web プロジェクトのルート フォルダーをアプリのコンテンツ ルートとして使用しますUseContentRoot(Directory.GetCurrentDirectory()): Uses the web project's root folder as the app's content root when the app is started from this folder
  • .UseIISIntegration():アプリが IIS と連動しなければならないことを指定します。.UseIISIntegration(): Specifies that the app should work with IIS. IIS と ASP.NET Core を一緒に使用するには、UseKestrelUseIISIntegration を指定する必要があります。To use IIS with ASP.NET Core both UseKestrel and UseIISIntegration need to be specified.

Startup.csStartup.cs

アプリのスタートアップ クラスは CreateWebHostBuilderUseStartup() メソッドに指定されます。The Startup class for your app is specified in the UseStartup() method on the CreateWebHostBuilder. このクラスで要求処理パイプラインを指定し、サービスを構成します。It is in this class that you will specify the request handling pipeline, and where you configure any services.

プロジェクトの Startup.cs ファイルを開き、中を調べます。Open and inspect the Startup.cs file in your project:

    public class Startup
    {
        // This method gets called by the runtime. Use this method to add services to the container.
        // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
        public void ConfigureServices(IServiceCollection services)
        {
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.Run(async (context) =>
            {
                await context.Response.WriteAsync("Hello World!");
            });
        }
    }

このスタートアップ クラスは次の規則に常に従う必要があります。This Startup class must always adhere to the following rules:

  • 常にパブリックに設定する必要がありますIt must always be public
  • ConfigureServicesConfigure という 2 つのパブリック メソッドが含まれている必要がありますIt must contain the two public methods: ConfigureServices and Configure

ConfigureServices メソッドは、アプリで使用されるサービスを定義します。The ConfigureServices method defines the services that will be used by your app.

Configure により、ミドルウェアを利用した要求パイプラインの作成が可能になります。The Configure allows you to compose your request pipeline using Middleware. これは、要求と応答を処理するために ASP.NET アプリケーション パイプライン内で使用されるコンポーネントです。These are components used within an ASP.NET application pipeline to handle requests and responses. HTTP パイプラインは、シーケンスで呼び出される、一連の要求デリゲートで構成されます。The HTTP pipeline consists of a number of request delegates, called in sequence. 各デリゲートは要求をそれ自体で処理するか、次のデリゲートに渡すことができます。Each delegate can choose to either handle the request itself, or pass it to the next delegate.

IApplicationBuilderRunMapUse メソッドを使用することでデリゲートを構成できますが、Run メソッドは次のデリゲートを呼び出すことがありません。常にパイプラインの終わりで使用する必要があります。You can configure delegates by using the Run,Map, and Use methods on IApplicationBuilder, but the Run method will never call a next delegate and should always be used at the end of your pipeline.

事前作成済みテンプレートの Configure メソッドは、いくつかのことを行うように作成されています。The Configure method of the pre-built template is built to do a few things. 最初に、開発中に使用するために、例外処理ページを構成します。First, it configures an exception handling page for use during development. 次に、簡単な "Hello World" で要求元の Web ページに応答を送信します。Then, it sends a response to the requesting web page with a simple "Hello World".

この簡単な "Hello World" プロジェクトは、コードを追加しなくても実行できるようになりました。This simple Hello, World project can run now without any additional code being added. アプリを実行する場合、再生ボタンの右側にあるドロップダウンを使用してどのブラウザーでアプリを実行するか選択するか、または単に再生 (三角形) ボタンを押して既定のブラウザーを使用するか、いずれかを選べます。To run the app, you can either select which browser you want to run app the app in using the dropdown right of the Play button, or simply hit the Play (triangular) button to use your default browser:

ブラウザーでの実行

Visual Studio for Mac では、ランダムのポートを利用して Web プロジェクトを起動します。Visual Studio for Mac uses a random port to launch your web project. 利用されているポートを調べるには、アプリケーション出力を開きます。これは [表示] の [その他のウィンドウ] メニューにあります。To find out what port this is, open the Application Output, which is listed under the View > Other Windows menu. 出力は下の画像のようになります。You should find output similar to that shown below:

アプリケーション出力と待ち受けポート

プロジェクトが実行されたら、お使いの既定の Web ブラウザーが起動し、[アプリケーション出力] に列挙されている URL に接続される必要があります。Once the project is running, your default web browser should launch and connect to the URL listed in the Application Output. または、任意のブラウザーを開き、http://localhost:5000/ を入力します。5000 は、Visual Studio が [アプリケーション出力] に出力したポートに変更します。Alternatively, you can open any browser of your choice, and enter http://localhost:5000/, replacing the 5000 with the port that Visual Studio output in the Application Output. Hello World! というテキストが表示されるはずです。You should see the text Hello World!:

ブラウザーにテキストが表示される

コントローラーを追加するAdding a Controller

ASP.NET Core アプリはモデル ビュー コントローラー (MVC) デザイン パターンを利用し、アプリの各パーツの責任を論理的に分離します。ASP.NET Core Apps use the Model-View-Controller (MVC) design pattern to provide a logical separation of responsibilities for each part of the app. MVC デザイン パターンは次の概念で構成されます。The MVC design pattern consists of the following concepts:

  • モデル:アプリのデータを表すクラス。Model: A class that represents the data of the app.
  • 表示:アプリのユーザー インターフェイス (多くの場合、モデル データ) を表示します。View: Displays the app's user interface (which is often the model data).
  • コントローラー:ブラウザー要求を処理し、ユーザー入力と繰り返しに応答するクラス。Controller: A class which handles browser requests, responds to user input and interaction.

MVC の使用方法については、「ASP.NET Core MVC の概要」というガイドを参照してください。For more information on using MVC, see the Overview of ASP.NET Core MVC guide.

コントローラーは次のように追加します。To add a controller, do the following:

  1. プロジェクト名を右クリックし、 [追加]、[新しいファイル] の順に選択します。Right-click on the Project name and select Add > New Files. [全般]、[空のクラス] を選択し、コントローラー名を入力します。Select General > Empty Class, and enter a controller name:

    [新しいファイル] ダイアログ

  2. 新しいコントローラーに次のコードを追加します。Add the following code to the new controller:

    using System;
    using Microsoft.AspNetCore.Mvc;
    using System.Text.Encodings.Web;
    
    namespace Hello_ASP
    {
        public class HelloWorldController : Controller
        {
            //
            // GET: /HelloWorld/
    
            public string Index()
            {
                return "This is my default action...";
            }
    
        }
    }
    
  3. [依存関係] フォルダーを右クリックし、 [パッケージの追加...] を選択して Microsoft.AspNetCore.Mvc 依存関係をプロジェクトに追加します。Add the Microsoft.AspNetCore.Mvc dependency to the project by right-clicking the Dependency folder, and selecting Add Package....

  4. 検索ボックスを利用し、Microsoft.AspNetCore.Mvc の NuGet ライブラリを参照し、 [パッケージの追加] を選択します。Use the Search box to browse the NuGet library for Microsoft.AspNetCore.Mvc, and select Add Package. インストールには数分かかることがあります。必要な依存関係のためにさまざまなライセンスに同意するように求められることがあります。This may take a few minutes to install and you may be prompted to accept various licenses for the required dependencies:

    Nuget を追加する

  5. スタートアップ クラスで app.Run lambda を削除し、呼び出すコードを MVC が決定するための URL ルーティング ロジックを次のように設定します。In the Startup class, remove the app.Run lambda and set the URL routing logic used by MVC to determine which code it should invoke to the following:

    app.UseMvc(routes =>
    {
        routes.MapRoute(
        name: "default",
        template: "{controller=HelloWorld}/{action=Index}/{id?}");
    });
    

    app.Run lambda は必ず削除してください。これはルーティング ロジックをオーバーライドします。Make sure to remove the app.Run lambda, as this will override the routing logic.

    MVC は次の形式を利用し、実行するコードを決定します。MVC uses the following format, to determine which code to run:

    /[Controller]/[ActionName]/[Parameters]

    上記のコード スニペットを追加すると、アプリの初期設定を HelloWorld コントローラーと Index アクション メソッドにすることになります。When you add the code snippet above, you are telling the app to default to the HelloWorld Controller, and the Index action method.

  6. 下の画像のように、services.AddMvc(); 呼び出しを ConfigureServices メソッドに追加します。Add the services.AddMvc(); call to the ConfigureServices method, as illustrated below:

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddMvc();
    }
    

    URL からコントローラーにパラメーター情報を渡すこともできます。You can also pass parameter information from the URL to the controller.

  7. 下の画像のように、HelloWorldController に別のメソッドを追加します。Add another method to your HelloWorldController, as illustrated below:

    public string Xamarin(string name)
    {
        return HtmlEncoder.Default.Encode($"Hello {name}, welcome to Visual Studio for Mac");
    }
    
  8. この時点でアプリを実行すると、ブラウザーが自動的に開くはずです。If you run the app now, it should automatically open your browser:

    ブラウザーでアプリを実行

  9. http://localhost:xxxx/HelloWorld/Xamarin?name=Amy にアクセスしてみてください。xxxx はポート番号に変更します。次のように表示されるはずです。Try to browse to http://localhost:xxxx/HelloWorld/Xamarin?name=Amy (replacing xxxx with the correct port), you should see the following:

    引数を指定し、ブラウザーでアプリを実行

トラブルシューティングTroubleshooting

macOS 10.12 (Sierra) 以降に .NET Core を手動インストールする場合、次のように行います。If you need to install .NET Core manually on macOS 10.12 (Sierra) and higher, do the following:

  1. .NET Core のインストールを開始する前に、すべての OS が安定した最新版に更新されていることを確認します。Before you start installing .NET Core, ensure that you have updated all OS updates to the latest stable version. これは App Store アプリケーションで確認できます。[更新プログラム] タブを選択してください。You can check this by going to the App Store application, and selecting the Updates tab.

  2. .NET Core サイトにある手順を実行してください。Follow the steps listed on the .NET Core site.

.NET Core を確実に正しくインストールするには、すべての手順を正常に完了したことを確認します。Make sure to complete all steps successfully to ensure that .NET Core is installed successfully.

まとめSummary

このガイドでは、ASP.NET Core の概要を説明しました。This guide gave an introduction to ASP.NET Core. ASP.NET Core とは何か、それを利用する状況、Visual Studio for Mac で使用する場合について説明しました。It describes what it is, when to use it, and provided information on using it in Visual Studio for Mac. ここから先の手順については、次のガイドを参照してください。For more information on the next steps from here, see the following guides: