SHOEISHA iD

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

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

進化した「ASP.NET Core 2.0」新しいWeb開発手法を学ぶ

ASP.NET Core 2.0でRazor Pagesアプリケーションを作ろう

進化した「ASP.NET Core 2.0」新しいWeb開発手法を学ぶ 第2回

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

 2017年8月14日、「ASP.NET Core 2.0」が公開されました。今回は新たに登場した「Razor Pages」を使ったWebアプリケーションの作成を通してRazor Pagesの構成要素や基本的な実装方法、データバインディングの仕組みについて説明します。

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

対象読者

  • 新しいASP.NET Coreの機能について知りたい方
  • MacやLinuxなどでASP.NET Coreアプリケーションを動かしたい方

検証環境

 本稿では、以下の環境で動作を確認しています。

  • Windows 10
  • macOS Sierra 10.12.6

Razor Pagesアプリケーションを作成しよう(1)

 前回も簡単に触れましたが、Razor PagesはASP.NET Core 2.0から導入された新機能です。ページコーディングの多いアプリケーションで重用されるように設計されており、ASP.NET Core MVCとは異なるアーキテクチャ/手法でWebアプリケーションを作成することができます。

Razor Pagesの構成要素

 Razor Pagesにおける主要なコンポーネントは「ページ」と「ページモデル」です。アプリケーションのプレゼンテーション層にあたるのがページで、ページの中で使用するデータを保持しているのがページモデルです。ページとページモデルはお互いにデータを共有しており、片方のアクションによってデータが変更されるともう片方に変更が反映される仕組みとなっています。これはMVVMデザインパターンのViewとViewModel間で行われる2方向データバインディングと同じものであるため、Razor PagesはASP.NET CoreにおけるMVVMパターンのWebアプリケーションフレームワークと位置づけることができます。

 図1はMVVMパターンとRazor Pagesの対応図です。ページとページモデルは前述の通りです。モデルに関してはページに依存しないビジネスロジックやデータベースアクセス等を行うレイヤで、MVCパターンのモデルとほぼ同じ責務を有しています。

図1 MVVMパターンとRazor Pagesの構成要素の対応図
図1 MVVMパターンとRazor Pagesの構成要素の対応図

Razor Pagesプロジェクトの作成

 ここからは、実際にプロジェクトの作成からRazor Pagesアプリケーションの起動までを行います。Razor Pagesに必要なコンポーネントを確認するために、空のWebアプリケーション用のプロジェクトテンプレートで、プロジェクトを作成していきます。

 .NET Core 2.0で使用可能なプロジェクトテンプレートを確認するには、コマンドラインで「dotnet new --help」と入力します。

図2 用意されているテンプレートの一覧
図2 用意されているテンプレートの一覧

 ここでは一からRazor Pagesアプリケーションを作成するため、「ASP.NET Core Empty」テンプレートを使います。「dotnet new」の後にプロジェクトテンプレートの短縮名(図中の「短い名前の列」)を、-oオプションの後にプロジェクト名を入力します。

リスト1 emptyテンプレートからプロジェクトを新規作成
$ dotnet new web -o razor-web-sample
テンプレート "ASP.NET Core Empty" が正常に作成されました。
・・・中略・・・
正常に復元されました。
$

 リスト1のように、エラーなくコマンドが実行されればプロジェクトの作成は成功です。

アプリケーションでのRazor Pagesの有効化

 次は、アプリケーション全体でRazor Pagesを使用可能とするための最小設定を追加していきます。プロジェクトのルートディレクトリにある「Starup.cs」を編集します。

リスト2 アプリケーションでRazor Pagesを有効にする設定(Startup.cs)
namespace Sample.RazorPages
{
    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            // 以下を追加する(これでRazor Pagesが有効化される)
            services.AddMvc();
        }

        public void Configure(IApplicationBuilder app)
        {
            // 他の記述を削除して以下を追加する
            app.UseMvc();
        }
    }
}

 編集内容を保存し、一度アプリケーションを起動してみましょう。プロジェクトのルートディレクトリで「dotnet run」とコマンドを実行します。実行後に表示されるメッセージの「Now listening on: 」に続いて表示されているURLにブラウザからアクセスしてみると、「ページが見つかりません」といった画面(404ページ)が表示されるかと思います。

 図3のように、コンソール上にも「http://<表示されたアドレス:ポート>/」に対するGETリクエストがあり、結果として404エラーとなった旨のメッセージが表示されているかと思います。

図3 Startup.cs編集後のアプリケーションログ
図3 Startup.cs編集後のアプリケーションログ

 これは、アプリケーションのルートパスである「/」に対応するページが実装されていないために発生したエラーです。それではこのエラーを解消するページを、Razor Pagesを使って実装しましょう。

会員登録無料すると、続きをお読みいただけます

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

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

メールバックナンバー

次のページ
Razor Pagesアプリケーションを作成しよう(2)

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

  • このエントリーをはてなブックマークに追加
進化した「ASP.NET Core 2.0」新しいWeb開発手法を学ぶ連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 秋葉 龍一(アキバ リュウイチ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

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

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、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編 」他、著書多数

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

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

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/10515 2017/11/21 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング