3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【ASP.NET Core】Razor Pagesの学習目的で超簡易的なTodoアプリを作った

Last updated at Posted at 2024-09-01

はじめに

業務でRazor Pagesを使うことになったので、Todoアプリを作りながらどんなものか勉強しました。
本記事では、Razor Pagesとは何か、自分が開発したもの、および学んだことをまとめていこうと思います!

Razor Pagesの概要

Razor Pagesとは、ASP.NET Coreで開発できる、ページコーディングに重点を置いたWebアプリケーションです。

ASP.NET Coreとは

ASP.NET Core は、macOS、Linux、および Windows 上で実行される ASP.NET のオープンソース バージョンです。

https://dotnet.microsoft.com/ja-jp/learn/aspnet/what-is-aspnet-core

つまり、.NET環境で開発・動作するWeb開発フレームワークであるASP.NETを、クロスプラットフォームでオープンソースとして作り直したものが、ASP.NET Coreとなります。

以前はどちらも開発が進められていましたが、今は統合されてASP.NET Coreを本流としています。
image.png

これらは、以下の通り作成できるアプリケーションに違いがあります。

ASP.NET:

  • Webフォーム
  • MVC
  • Webページ

ASP.NET Core:

  • Razor Pages
  • MVC
  • Blazor

ページコーディングに重点を置いたとは

MVCと比較すると分かりやすく、
MVCがコードとビューを分離し、複数のページを一つのコントローラーで集中管理しているのに対して、Razor Pagesでは、コードとビューが1対1で対応しており、ページ単位で整理しながら開発を進めることができます。
(ASP.NET Webフォームや、デスクトップアプリであるWindowsフォームやWPF、UWPのように、画面とコードビハインドがセットになっています)

そのため、Razor Pagesは各ページ単位で完結するようなアプリケーションの開発に向いており、逆に複数ページで頻繁にデータを共有するようなケースは苦手としています。

開発したTodoアプリ

設計書

ちょうど最近読んだこちらの記事が勉強になったので、参考にしてドキュメントを作るところから始めてみました。

画面設計
image.png

機能設計
image.png
データ設計
image.png

画面

(一部抜粋)
image.png

image.png

リポジトリ

補足

「超簡易的」とだけあって、これできないの?という点(ユーザごとのカテゴリ管理や、アカウントの編集・削除など)や、デザインについてほとんどノータッチな点など、気になる箇所は多々ありますが、時間をかけずにRazor Pagesの理解に重点を置いたためこれでよしとしています。。

開発してみて

身についたこと

Razor Pagesのルーティングや、値を受け渡す方法、Entity Framework Coreを利用したスキャフォールディング、CRUD処理、DBマイグレーションなどに加えて、Razor構文、タグヘルパーやHTMLヘルパー、モデルの検証などを理解することができました。

便利だと思ったこと

ページコーディング × Razor構文

ビュー・コードが密接に結びついているという特徴と、HTML内にC#コードを埋め込むことができるRazor構文の組み合わせがとても強力だと感じました。

実際に、Todoアプリのタスク一覧やカテゴリ一覧の表示には、コード側でDBからデータを取得して保持しておき、画面側でそのデータを参照しつつfor文を回してHTMLを生成することで実現しています。

このように、ビュー・コード間でデータを簡単に渡すことができ、その上で制御構文を使って柔軟に画面を作れる点がRazor Pagesの魅力的な特徴の一つだと実感しました。

モデルの検証

モデル側で各項目の表示名やバリデーションなどを一元管理することができる点も便利だと感じました。
こちらはRazor Pages独自の機能ではなく、ASP.NET Coreで共通して使うことができます。

使い方としては、以下の通りモデルに定義しておけば、

Todo.cs
[Display(Name = "タスク")]
[DataType(DataType.Text)]
[Required(ErrorMessage = "必須項目です。")]
[StringLength(30, ErrorMessage = "30文字以下で入力してください。")]
public string Name { get; set; } = string.Empty;

各画面で以下の通り定義してあげるだけで、

Create.cshtml.cs
<form>
    <label asp-for="Todo.Name"></label>
    <input asp-for="Todo.Name" />
    <span asp-validation-for="Todo.Name"></span>
</form>
  • 文字列「タスク」のlabelタグ
  • type="text"のinputタグ
  • 必須チェックおよびエラーメッセージ
  • 文字数チェックおよびエラーメッセージ

これらを自動で実装してくれます。

各画面で同じような処理を実装する必要がなく、モデルとして一括で管理できる点が使いやすかったです。

@functionsディレクティブ

こちらもASP.NET Coreで共通の機能ですが、ページコーディングとの相性は抜群だと思います。

用途としては、コード(サーバ側)での処理結果に対し、ビュー(フロント側)で条件を満たす要素のみ振る舞いを変えたい時などに重宝します。

今回のTodoアプリでは、ユーザが選択したカテゴリにのみCSSを適用する処理を実装するのに利用しました。
具体的な実装方法は以下記事にまとめていますので、ご覧いただければ幸いです。

おわりに

Entity Framework Coreがデータアクセスを容易にし、Razor構文やタグヘルパーが画面の組み立てを柔軟にしていますが、
Razor Pagesはこれらの間に入り、ビュー・コード間でデータの受け渡しを容易にすることで、高速なWebアプリケーション開発を実現しているのだと学ぶことができました。
まだまだ知らない便利機能があったり、Webアプリケーション自体の知識が足りないと思うので、引き続き学んでいけたらと思います。

また、簡易的なものであっても、手を動かしてアプリケーションを作ってみることで学びが定着することを改めて実感することができました。

ここまでご一読いただき、ありがとうございました!

動作環境

  • Windows 11 Home(23H2)
  • .NET 8.0(SDK 8.0.204)
  • Visual Studio 2022

参考

Razor Pages全般
チュートリアル: ASP.NET Core で Razor Pages Web アプリを作成する

アクションの振り分け
ASP.NET Core のアンカー タグ ヘルパー

Razor構文
ASP.NET Core の Razor 構文リファレンス

Entity Framework Core(一対多リレーションシップ)
一対多のリレーションシップ

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?