日記:2018年1月8日~ASP.NET Core MVC で読書管理アプリを作って遊ぶ

執筆日時:

f:id:daruyanagi:20180108145800p:plain

お正月は ASP.NET Core MVC で読書管理アプリを作って遊んでいた。最初は Razor Page で作っていたのだけど、CRUD 処理やるんだったら MVC の方がスキャフォールド使えて楽かなーと。

Entity Framework Core

モデルは Entity Framework Core の Code First で作ったけど、相変わらず簡単だった。基本的には

  • モデルクラスを作り、
  • Add-Migration {Migration Name} して、(なぜか NuGet パッケージコンソールで!)
  • Update-Database する

だけで、モデルクラス通りにデータベーススキーマを作ってくれる。はるか昔、Rails 2.0 を触ってた時に rake db:migrate とかやってた気がするけど、あの時代からあまり変わってない感じがする。

f:id:daruyanagi:20180108150516p:plain

けれど、ちょっと困ったのがコレ。モデルクラスを変更したときにたまに Build failed. と言われて詰まってしまう。カラムを消したときとかによくなるんだけど、どうやって解消すればいいのかな。エラーメッセージがシンプル過ぎて、とっかかりがない感じがつらい。

おかげで、エラーで詰まるたびに新規プロジェクトを作る感じで、ちょっとげんなりしてる。まぁ、趣味で遊んでるだけなのでそれでもいいんだけど……Include() の使い方とかはネットをうろうろしてるうちに身につけられたけど、ちゃんと Entity Framework Core の本を一冊(日本語で)読んで系統だって理解したいなって思った。

Tag Helper

f:id:daruyanagi:20180108150956p:plain

enum で表したデータをそのまま表示すると味気ない(上の表示)ので、少しリッチにしたい(下の表示)のだけど、Razor でごてごて分岐を書くのは面倒だし管理が大変だ。

そこで今回は Tag Helper というのを使ってみた。これが超便利……。たとえば、こんな感じに

<reading-status>@Mode.Status</reading-status>

独自定義したタグを、

<span class="reading-status">{日本語表記}</span>

みたいに展開できる(スクリーンショットの部分は、もともと @Mode.Status という簡素な記述だった)。Web Components みたいなのをサーバーサイドで処理できるイメージかな?

f:id:daruyanagi:20180108151613p:plain

公式ドキュメントに <email> を <a> に書き換えるサンプルがあるので、それを見ながら作るといい感じ。

docs.microsoft.com

ただ、独自定義したタグを閉じて書く(<foo />)と、SetContent() でタグの中身を設定できなくてちょっとハマった。開いて書く(<foo></foo>)と期待通りに動く。

Tag Helper と Select

あと Tag Helper 関連で――enum を含むデータをスキャフォールドすると slect タグが出力されるんだけど、そのアイテムが空なので少し困った。

これは Html.GetEnumSelectList<***>()" で解決できる。

<select asp-for="***" asp-items="Html.GetEnumSelectList<***>()"></select>

まぁ、このアプリは完成しないと思うけど、たまに目標決めていろいろ組んでみるのは楽しい。楽しみでやっているから、バックエンドを作るのが面倒になったらインターフェイスを、インターフェイスで不都合が出たらバックエンドを、みたいな感じでちょろちょろ齧って、最終的には訳が分からなくなって、また最初から作り直す――というのを繰り返しているだけだから、たいして技術力はつかないんだけどね。“楽しくないこと(≒めんどうくさいこと、むずかしくてわかんないこと)”を乗り越えていかないから、その下でウロウロしてるだけ。お仕事でやる人と趣味でやる人の差って、こういうのでつくんだろうな。趣味は趣味でも、謎のモチベーションで困難を乗り越えてしまうタイプも、前者に属するんだろうと思う。ウチは下手の横好きなので、底辺でちょろちょろして遊んでるだけだけど、すごい人の言うことがなんとなくわかるレベルは保っていきたい。