SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

.NET最新版でASP.NET Core

.NET 6でASP.NET CoreのRazor Pagesアプリケーションを理解しよう

.NET最新版でASP.NET Core 第2回


  • X ポスト
  • このエントリーをはてなブックマークに追加

プロジェクトの作成

 では、ここからプロジェクトを作成していきます。本連載では、いくつかのプロジェクトを作成していきますから、まずはプロジェクト群を格納するフォルダを作っておきましょう。ここでは、cz_aspdotnetとしました。これを、Documents配下でもよいので適当な場所に作っておいて下さい。

 ここで、Visual Studio Code(以下、VSCode)を起動しておきます。コマンドの操作は、基本的にVSCodeのターミナル上で行っていきます。

プロジェクトの作成

 まず、cz_aspdotnetフォルダに移動します。そして、以下のコマンドでプロジェクトを作成します。

% dotnet new webapp -o RazorPagesSample
テンプレート "ASP.NET Core Web App" が正常に作成されました。
このテンプレートには、Microsoft 以外のパーティのテクノロジが含まれています。詳しくは、https://aka.ms/aspnetcore/6.0-third-party-notices をご覧下さい。

作成後の操作を処理しています...
/Users/nao/Documents/cz_aspdotnet/RazorPagesSample/RazorPagesSample.csproj で ' dotnet restore ' を実行しています...
  復元対象のプロジェクトを決定しています...
  /Users/nao/Documents/cz_aspdotnet/RazorPagesSample/RazorPagesSample.csproj を復元しました (84 ms)。
正常に復元されました。

 ここで使われているdotnetコマンドは、.NET Coreで利用できる汎用のコマンドです。具体的な処理は、ここでのnewのようなサブコマンドが受け持ちます。つまり、dotnet newでひとつのコマンドとなります。dotnet newコマンドの書式は以下のとおりで、テンプレートに基づいてプロジェクトが作成されます。

[構文]dotnet newコマンド

 dotnet new <テンプレート名> [オプション] [テンプレートオプション]

 <テンプレート名>には、インストールされているテンプレートの中から、作成したいプロジェクトのテンプレートを指定します。ここではwebappを指定しましたが、webappはASP.NET Coreにおける標準的なWebアプリケーションのテンプレートのひとつです。どのようなテンプレートがインストールされているかを知るには、dotnet new --listコマンドを実行します。ただし、このコマンドをそのまま実行すると出力が膨大になるので、名前に「web」を含むものだけに絞って実行してみました。

% dotnet new --list web
これらのテンプレートは、入力: 'web' と一致しました

テンプレート名                                短い名前      言語     タグ
--------------------------------------------  ------------  -------  --------------------------
ASP.NET Core Empty                            web           [C#],F#  Web/Empty
ASP.NET Core Web API                          webapi        [C#],F#  Web/WebAPI
ASP.NET Core Web App                          webapp,razor  [C#]     Web/MVC/Razor Pages
ASP.NET Core Web App (Model-View-Controller)  mvc           [C#],F#  Web/MVC
Blazor WebAssembly App                        blazorwasm    [C#]     Web/Blazor/WebAssembly/PWA
Web 構成                                      webconfig              Config

 「短い名前」欄にwebapp,razorがある「ASP.NET Core Web App」が採用されることがわかります。言語はC#で、タグに「Web/MVC/Razor Pages」が指定されていることもわかります。今後、異なるタイプのアプリケーションを作りたいというときには、このように出力できるリストを参考にするとよいでしょう。

 dotnet newコマンドの詳細なオプションについては、dotnet new --helpコマンドを実行して下さい。上記で指定されていた-oオプションは、テンプレートの出力フォルダを指定します(--outputと同じ)。つまり、カレントフォルダにRazorPagesSampleフォルダを作り、そこにファイルが出力されます。テンプレートオプションはテンプレートごとに指定できるオプションですが、ここでは不要なので割愛します。

ビルドと実行の準備

 これで、RazorPagesSampleフォルダに新しいプロジェクトが作成されますので、codeコマンドでこのフォルダに移動しておきます。なお、VSCodeのターミナルでcodeコマンドを-rオプションを付けて実行すると、同じVSCodeインスタンスのまま指定のフォルダに移動し、自動的にVSCodeのエクスプローラーでそのフォルダを開きます。

% code -r RazorPagesSample

[NOTE]macOSでcodeコマンドを実行できるようにする

 Windowsでは、codeコマンドがすでにPATHに通っていますので問題ないですが、macOSではPATHが通っておらずそのままでは実行できません。[表示]-[コマンドパレット...]を選択し表示されるドロップダウンで、「shell」と入力します。すると、「シェル コマンド: PATH 内に 'code' コマンドをインストールします」を含む選択肢が表示されますので、それを選択します。「正常にインストールされました」と表示されたら、[OK]をクリックします。これで、ターミナル上からcodeコマンドが実行できます。

[NOTE]C#の実行環境をインストールしておく

 VSCodeに、C#の実行環境がインストールされていない場合には、その拡張機能をインストールしておきます。[実行]-[構成の追加...]を選択し、一覧に出てこなければ[拡張機能をインストールする...]を選択します。「拡張機能:マーケットプレース」が展開されますので、「C#」(C# for Visual Studio Code)を探して[インストール]をクリックします。「インストールしています」の表示が消えて「アンインストール」などの表示に変わればインストールは終了です。

 VSCodeでプロジェクトのフォルダを開くと、右下に「Required assets to build...」というポップアップが表示されますので、[Yes]をクリックしてビルドとデバッグに必要なアセットをプロジェクトに追加します。プロジェクトのフォルダに.vscodeフォルダが作成され、そこにlaunch.jsonとtasks.jsonが追加されているのを確認しましょう。

 また、localhost上での実行のための開発用証明書を受け入れる設定を、以下のようにdotnet dev-certsコマンドで行っておきます(macOSでの出力)。

% dotnet dev-certs https --trust
Trusting the HTTPS development certificate was requested. If the certificate is not already trusted we will run the following command:
'sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain <<certificate>>'
This command might prompt you for your password to install the certificate on the system keychain.
Password:

 macOSの場合は、パスワードを要求されたら、キーチェーンのパスワードを入力します。Windowsの場合は、「Security Warning」のダイアログボックスが表されますので、[Yes]をクリックします。これで、開発用証明書の使用に同意したことになります。

 ここまでで、準備は完了です。

実行する

 作成したプロジェクトは、すぐに実行できます。実行は、Ctrl+F5キーで行います(デバッガなしの実行)。すると、デフォルトブラウザが起動しトップページが表示されます(図4)。

図02-04:RazorPagesSampleのトップページ
図4 RazorPagesSampleのトップページ

 何もないページですが、ナビゲーション上の「Privacy」リンクをクリックすると、Privacyページに移動します。プロジェクト作成直後は、トップページの「Index」、Privacyページの「Privacy」、そしてエラー画面の「Error」の3つのページが作成されています。

次のページ
プロジェクトの構成

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
.NET最新版でASP.NET Core連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 山内 直(WINGSプロジェクト ヤマウチ ナオ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook <個人紹介>WINGSプロジェクト所属のテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/15824 2023/05/26 17:10

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング