【初心者向け】はじめての ASP.NET Core 作りながら学習(2)- プロジェクト作成

オウルです。

「はじめての ASP.NET Core 作りながら学習」の第2回目となります。

前回の記事はこちらをご覧ください。

今回は、 Visual Studio 2019 RC を使って ASP.NET Core プロジェクトを作成します。プログラミング初心者の方は、途中で分からない単語などでてくるかと思いますが、手を止めず ASP.NET Core プロジェクトを作成を進めてください。もしかして分からないかなと僕が予想した内容については、最後にリファレンス情報を載せているので参考にしてください。初めて見聞きする単語が、たくさん出てきて意識があっちこっち行きがちになりますが、今回の目標である ASP.NET Core プロジェクト作成以外は後回しです。心配しなくても作りながら学習を進めていくと、分からないことも徐々に分かるようになってきます。焦らず、1つ1つ学習を進めていきましょう。それでは、ASP.NET Core プロジェクトを作成してみましょう。

※を付けている単語には、最後にリファレンスサイトを紹介しています。

Visual Studio 2019 RC インストール

当初は、Visual Studio 2017 の予定でしたが、せっかくなので最新の方がいいかなと思い Visual Studio 2019 RC にしました。

Visual Studio 2019 RC のユーザーは、4 月 2 日に製品版リリースにアップグレードされるみたいです。

少し Visual Studio を説明すると、Visual Studio(※1) は、.NET Core をはじめとする様々な言語の開発を支援する統合開発環境(IDE)です。 コード編集、デバッグ、ビルド、アプリを発行までを支援してくれます。

Visual Studio 2019 RC ダウンロード

下記のリンクをクリックして、Visual Studio 2019 RC の無料版「コミュニティ」をダウンロードします。

Visual Studio 2019 RC インストール

先ほどダウンロードしたインストーラーを起動します。

1. .NET Core クロスプラットフォームの開発を選択します。

2. 右ペインの次のオプションを忘れずにチェックします。

  • 開発時IISサポート
  • .NET Core 2.2 開発ツール

3. [インストール] をクリックするとインストールが開始されます。

インストールが終わるまで、しばらくコーヒーでも飲んで一休みしてください。

ASP.NET Core プロジェクト作成

プロジェクトの作成

Visual Studio を起動してプロジェクトを作成していきます。

※以降、Visual Studio 2019 RC Community を Visual Studio とします。

ソリューション作成

1. 右ペインの [新しいプロジェクトの作成] をクリックします。

2. 右上のプロジェクトタイプから「その他」を選択します。

3. [空のソリューション] を選択して [次へ] をクリックします。

4. プロジェクト名(ソリューション名)に好きな名前を入力してください。これが初めてのプログラミングの方は記念すべき初ソリューションの名前になりますよ。

これでソリューションが作成されました。次に作成したソリューションにプロジェクトを作成します。

プロジェクト作成

Visual Studio の右ペインにあるソリューションエクスプローラーを操作します。次の手順で進めてください。

1. 先ほど名前を付けたソリューションの右クリックメニューから、追加 / 新しいソリューションフォルダを選択します。

2. 作成したフォルダ名を、src にします。

3. 作成した src フォルダの右クリックメニューから、追加 / 新しいプロジェクトを選択します。

4. [ASP.NET Core Web アプリケーション] を選択して [次へ] をクリックします。

5. プロジェクト名に好きな名前を入力してください。今回は分かりやすいように 、名前の最後に MVC(※2) を含めます。

※以降、このプロジェクトを MVC プロジェクトとします。

6. [Web アプリケーションモデル ビュー コントローラー)] を選択します。

認証

[個別のユーザアカウント] に変更します。[Docker サポートを有効にする] は未選択にして [作成] をクリックします。

※Docker(※3) サポートの有効化は後からでも変更できます。

7. 4のところで今度は [API] を選択します。

※以降、このプロジェクトを API プロジェクトとします。
認証
デフォルトのなしです。[Docker サポートを有効にする] は未選択にして [作成] をクリックします。

ASP.NET Core プロジェクトをデバック

IISの有効化を確認

デバックするのには、端末に IIS がインストールされていることが前提となります。既に IIS がインストールされている方はスキップしてください。

Windows10

Windowsシステムツール / コントロールパネル / プログラムと機能 / Windows の機能の有効化または無効化(画面の左)をクリックします。

上記の [インターネット インフォメーション サービス] が ON になっていれば IIS が有効化されています。OFF の場合はチェックして [OK] をクリックします。

スタートアッププロジェクトの変更

デバックを実行するときに起動するプロジェクトを設定します。ソリューションの右クリックメニューから [プロパティ] を選択します。

1. マルチ スタートアップ プロジェクトを選択します。

2. 作成したプロジェクトのアクションを [開始] に変更して [OK] をクリックします。

デバックの実行

いよいよデバックを実行します。

2つのページが表示されれば成功です。

MVC プロジェクト

API プロジェクト

ん?!なぜ、APIがブラウザで表示されるんだ・・・おかしい。

デバックの設定を変更

API プロジェクトはブラウザを起動しないように設定します。あわせてデバッグ時に IIS(※4) を起動するように新規にプロファイルを作成します。MVC プロジェクトの右クリックメニューから、[プロパティ] を選択します。

1. [新規] をクリックして表示されたフォームに「IIS」と入力して [OK] をクリックします。

2. 環境変数に名前:ASPNETCORE_ENVIRONMENT、値:Development を入力します。

Ctl + S、念のため、メニュー / ファイル / すべて保存を選択します。デバック実行します。

ん?!なぜ IIS Expres 起動するの・・・なぜだ?!もう一度、MVCプロジェクトを右クリックして [プロパティ] を開くと、プロファイルが IIS Express に戻ってる・・・意味わからん。こういう時に公式リファレンスサイトを活用します。

launchSettings.json

どうやら launchSettings.json なるものがあり、これで複数の環境の使用を制御しているみたいです。

「アプリが dotnet run で起動すると、”commandName”: “Project” を含む最初のプロファイルが使用されます」とあります。うん、これですね。

launchSettings.json の修正

プロジェクト / Properties に launchSettings.json があるので、下のように「iis」と「IIS」が、それぞれ一番上になるように位置を修正します。JSON(※5)形式で定義されています。

ァイルを探すポイント

Ctl + f で表示される検索ウインドウのデフォルトで表示されている「現在のドキュメント」を「ソリューション全体」に変更して検索すると結果一覧が表示されます。結果一覧をクリックすると該当ファイルが開きます。試しに launchSettings.json で検索してみてください。

同様のことを、API プロジェクトでも行います。後、ブラウザの起動のチェックボックスのOFFを忘れずに。

IIS のDefault Web Site に https を追加

いざデバック実行!とするとエラー・・・どうやら僕の環境のIISは https が有効になってない。https を有効にします。

1. Windows 管理サービス / インターネット インフォーメーション サービス(IIS)マネージャーを選択します。

2. Default Web Site の右クリックメニューから [バインドの編集] を選択します。

3. [追加] をクリックします。

4. [種類] を https に変更します。

5. [SSL証明書] を IIS Express Development Certificate に変更します。

再度、デバック実行します。

はい、ようやく IIS でデバック起動しました。今度は API プロジェクトです。ブラウザ以外でAPIの動作を確認する方法ないのかなと調べていると、ありました便利ツール。その名も”Postman” !!

Postman インストール

以下のサイトよりフリー版のPostman をダウンロードします。

ダウンロードしたインストーラーを起動します。

ここは Google 認証にします。まだ、Google アカウントを持っていない方は、この機会にフリーのGoogle アカウントを取得しましょう。特に、これからプログラミングを学習するつもりの方は、Google Keep(※6)、Googleドライブ、Google Colaboratory など便利な機能がたくさん使えます。

Postman でASP.NET Core API にアクセス

早速先ほどインストールしたての Postman を起動します。

URL を入力して [Send] をクリックします。

※URL は API プロジェクトの右クリックメニューからプロパティを選択して、左のデバックを選択するとアプリ URL があります。その URL に /api/values をくっつけたものです。/api/values は後々分かるようになるはずです。今は気にしないでおきましょう。

おぅ?!・・・エラーだ。うーん、エラーの内容を見ると自己署名SSL証明書(※7)はダメみたいですね。でも、これダメだとかなり不便なので何か設定があるはず!

1. File / Settings を選択します。

2. SSL certificate verification を OFF にします。

3. [Send] をクリックします。

きたー!!成功です。お疲れ様でした!今回の目標である ASP.NET Core プロジェクト作成は達成です。

「はじめての ASP.NET Core」シリーズ
  1. 作りながら学習
  2. プロジェクト作成
  3. AI 支援 IntelliCode
  4. NLog
  5. MVC(1)
  6. MVC(2)レイアウト
「【初心者向け】ASP.NET Core Identity」シリーズ
  1. ASP.NET Core Identity の2要素認証と Identity を使わない Cookie 認証 – 概要編
  2. ASP.NET Core Identity 構成編

リファレンス情報

※1 Visual Studio
※2 MVC
※3 Docker
※4 IIS
※5 JSON
※6 Google Keep
※7 SSL(サーバ証明書)
技術者向けではないですが、日常生活においてとても大切なこをを紹介しています。

おすすめ書籍

プログラミング初心者の方は、例えば Web アプリケーションがどのように動作するのかをイメージ・想像することは難しいと思います。当然です、プログラミングに限らず知らないことをイメージするのはそもそも難しいのです。でも逆に少しイメージできると理解のスピードが上がります。そのため初心者の方にはイメージすることを手助けする図解式の技術本をおすすめします。

技術本を読むなら Kindle がおすすめです。こちらの記事をご覧ください。

▼ Web の基本をイラスト図解式で紹介
『この一冊で全部わかるWeb技術の基本』
▼ サーバーの基本をイラスト図解式で紹介
『この一冊で全部わかるサーバーの基本』

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA