SHOEISHA iD

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

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

Scott Guthrie氏 Blog翻訳

ASP.NET MVC 3:Razorの@:と文法

連載:ScottGu's Blog翻訳


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

@:を使用してコンテンツの開始を明示的に表示

 タグ要素で開始されているコンテンツコンテナばかりではないので、Razorが暗黙的にコンテンツブロックを検知できないようなシナリオもあります。

 コードブロック内で@:文字列を使用して、明示的にコンテンツの開始行を表示することにより、Razorはこれに対処しています。@:文字列は、それに続くコンテンツ行をコンテンツブロックとして取り扱います。

caption

 もっと具体的にいうと、以下のスニペットは、もし製品が在庫切れだった場合、その製品名の横に『(Out of stock!)』(在庫切れ!)というメッセージを出力する方法です。

caption

 『(Out of stock!)』(在庫切れ!)メッセージをHTMLタグ要素でラップしていないので、Razorは暗黙的に、@ifブロック内のコンテンツがコンテンツブロックの開始なのかどうかを確認できません。@:文字列を使用して、明示的にこの行がコンテンツとして取り扱われるべきであることを示します。

@:コンテンツブロック内のコードナゲットの使用

 静的なコンテンツを出力する以外に、最初に@:文字列を使用されたコンテンツブロック内に、コードナゲットを埋め込むことも可能です。

 例えば、以下では、コードスニペットに2つの@:文字列があります。

caption

 コンテンツブロック内の2つ目の@:文字列での残数の表示方法を確認してください(例:『(Only 3 left!)』(3つだけあります!))。コンテンツ行内に@p.UnitsInStockのコードナゲットを埋め込んで実現しています。

複数行のコンテンツ

 Razorにより、HTML要素でラップされている複数行のコンテンツが簡単に持てるようになります。例えば、以下のHTMLの<p>要素でラップされた@ifコンテナの内部コンテンツは、Razorではコンテンツとして扱われます。

caption

 複数行のコンテンツがHTML要素でラップされていないようなシナリオでは、@:文字列を複数使用できます。

caption

 または、Razorでは、コンテンツを明示的に確認するために<text>要素を使用できます。

caption

 Razorは<text>タグを特別扱いします。<text>ブロック内のコンテンツをコンテンツとして理解し、<text>タグ要素の部分は描画しません(つまり、<text>要素の内部コンテンツだけ描画され、タグ自体は描画されません)。これは、HTML要素にラップされていない複数行のコンテンツブロックを描画する時に便利です。

 @:文字列より簡潔にしたい場合、オプションで<text>要素を使用して、1行のコンテンツとして表示することも可能です。

caption

 上記のコードは、最初の方で確認した@:バージョンと同じ出力を描画します。Razorは、自動的に出力から<text>のラップ要素を省いて、その中のコンテンツだけを描画します。

まとめ

 Razorは、クリーンで簡潔なテンプレートの文法が可能なので、非常に流れの良いコーディングワークフローになります。RazorのHTML生成シナリオが非常に上手く動作し、if/elseやforeachの約95%のシナリオでコンテンツ領域の開始/終了を明示的に表示しなくてもいいのは、コンテンツ領域の開始を確認するために<tag>要素を検知する機能があるというのが、その理由の1つになっています。

 そして、コードのコンテナブロック内にHTML要素を使用したくなく、またコンテンツをより明示的に表示する必要がある場合に、Razorの@:と<text>文法が利用できます。

 Hope this helps,

 Scott

 P.S. ブログに加え、現在Twitterを使って簡単な更新やリンク共有を行っています。twitter.com/scottguで、私をフォローしてください。

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

  • X ポスト
  • このエントリーをはてなブックマークに追加
Scott Guthrie氏 Blog翻訳連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト Chica(チカ)

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

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

Scott Guthrie(Scott Guthrie)

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

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

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5679 2011/01/24 17:12

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング