miso_soup3 Blog

主に ASP.NET 関連について書いています。

Htmlヘルパーをどんどん利用する

この間、納期間近で切羽詰まっていた時でも、
Htmlヘルパーとその単体テストをCleanに記述できました。

それは、こちらの記事Unit Testing Html Helpers in ASP.NET MVC3–The Cleaner Way
があったからできたものでした。

  • 時間がなくてもHtmlヘルパーとテストは簡単に書ける
  • この記事の素晴らしさ

この2点をお伝えしたく、今回の記事を書きます。
記事の素晴らしさについては、一番最後をご覧願います。

Htmlヘルパーをどんどん利用する

Htmlヘルパーは積極的に使うべきだと思います。
その理由の1つは、Viewのロジックを減らすことで、可読性と保守性が上がるからです。

たとえば、こんな画面を想定します。

料理やピアノのboolean型のデータをもとに、
得意・不得意を表示する、という画面です。

得意と不得意それぞれに違ったデザインを適用したい、となった場合、
素直に書くとこんなコードになるかもしれません。

このコードはとてもわかりやすいですが、
クラス名を追加したり、spanではなくdivにしたりなどの変更があると大変です。
また、このコードは、新たなif文の条件を後ろに追加することを誘惑します。(*´д`*)

腐ったミカンは箱から追い出せ!ということで
以下のようにまとめてしまいます。

この呼び出し先メソッドでは、タグをはき出すことになります。
ですので、ASP.NET MVC では、Htmlヘルパーに記述するのが良いと思われます。
(Html.SpanFor(...)など、ViewDataを扱う場合もありますし)

以上の例に限らず、アプリケーションの固定された表記方法は、
どんどんHtmlヘルパーに書くことをおすすめします。

Htmlタグ生成は、なんとなく敷居が高い感じがしますが、
実装時間はそんなにかかりません。テストも容易です。
コードは、この後記載します。

Htmlヘルパーをテストする

ここからの内容は、Unit Testing Html Helpers in ASP.NET MVC3–The Cleaner Wayとほぼ同じになります。

Htmlヘルパーには素敵なテスト方法があります。

さきほどのカスタムHtmlヘルパーをテストしようとすると、
下のようになるかもしれません。

紹介した記事では、この最後のアサート文の文字列を、
”a long magical string value”と読び、たくさんの問題点を指摘しています。

例えば、

「このタグのclassにappを追加しよう」→
「あれ?テスト通らない・・・ちゃんとテスト書いたのに」→
半角スペース1コ多かった

と、主旨とは全く違う余計なストレスを開発者に与え、
「ほら、単体テストは時間がかかるし必要ない o(`ω´*)o」
という最悪の事態になる可能性があります。

問題に対し、記事では素敵な解決方法を紹介されています。

方法

まず、HtmlをXml化する拡張メソッドを用意します。

準備は、これでおしまいです。テストを書きます。

一見、前者の文字列のテストの方がわかりやすい!と思われるかもしれませんが、
このテストは、何をテストしているのか?が明確になっています。
タグがspanであるか? テキストが”得意”であるか? classがあっているか?
とてもピンポイントで無駄のないテストがされています。

おまけの実装コードです。

Htmlヘルパーは、WebFormsのコントロールとよく比べられています。
Htmlタグを気軽にカスタマイズ&再利用&テストできるのは、
MVCの素敵なところですので、どんどん利用したいところです。

記事の素晴らしいところ

紹介した記事 Unit Testing Html Helpers in ASP.NET MVC3–The Cleaner Way
の素晴らしいところは、

・テストするべきところを的確に捉えている
 (Htmlのテスト対象は、文字列ではなく、属性・値・名前である。)
・テストするために必要な状態を、工夫して作り出している
 (Html文字列から、Xml要素への変換)
・その必要な状態を、簡単に実現している
 (たった1行の拡張メソッド)
・記事の内容にメリハリがある
 (英語だから・・・だけではないでしょう)

少なくともこの4つだと思います。
こんな開発者を目指したいです!