Hatena::Groupwebmatrix

CX's WebMatrix Diary

2011-02-28

ASP.NET Razor 記法 基礎文法最速マスター

06:18 | ASP.NET Razor 記法 基礎文法最速マスター - CX's WebMatrix Diary を含むブックマーク はてなブックマーク - ASP.NET Razor 記法 基礎文法最速マスター - CX's WebMatrix Diary

ASP.NET の新しい Web ページ記述構文「Razor」の構文一覧です。

他の言語をある程度知っている人はこれを読めば Razor 構文の基礎をマスターして ASP.NET Web ページ を書くことができるようになっています。

簡易リファレンスとしても利用できると思いますので、これは足りないと思うものがあれば教えてください。

0. はじめに

 Razor 構文はタイピング量とコードサイズの低減(PHP や ASPX に比べて)を可能とする、シンプルなページ記述の構文(記法)です。

 記法であり、言語ではない為、実際の言語としては、C# もしくは Visual Basic を使用します。

 言語に応じて、ファイルの拡張子が異なります。 C# の場合は「.cshtml」、Visual Basic の場合は「.vbhtml」となります。

 マイクロソフト社の提供する無償の開発ツール「WebMatrix」さえあれば、開発が可能ですので、試してみてはいかがでしょうか?

1. 基礎

コードブロック

 Razor 構文では「@{」~「}」がコードブロックになります。

 コードブロックには C#Visual Basic のコードが記述可能です。

<!-- 単一行の場合 -->
@{ ここにコードを記述します }

<!-- 複数行の場合 -->
@{
   ここにコードを記述します
}
メッセージの表示
@{ var message = "Hello, World."; }
<!-- ブラウザの画面にメッセージを表示します。-->
<p>@message</p>
コメント

 サーバーサイドのコメントは「@*」~「*@」で記述します。

 コードブロック内は C#Visual Basic のコメント記法も利用可能です。

 クライアントサイドの HTML コメント「」も記述することができます。

@* コメントその1(単一行のコメント) *@

@*
 コメントその2(複数行のコメント)
*@

@{
    @* コメント3(コードブロック内のコメント) *@

    // コメント4(C# のコメント(.cshtml の場合))

    /* コメント5(C# のコメント(.cshtml の場合)) */
}
<!-- コメントその6(HTMLコメント) -->
変数の宣言

 変数の宣言は「var」を用います(C# の場合)。

 var は暗黙的な型宣言で、コンパイル時に適切な型に変換されます。

 明示的に型を指定した場合は、その型が使用されます。

 コードブロック外で変数を参照する場合は変数の前に「@」をつけます。

@{
    var num = 1;           // コンパイル時に int 型に変換 
    var name = "foo";      // コンパイル時に string 型に変換
    string s;              // string 型
    string[] arr;          // string の配列
}
プログラムの実行

 WebMatrix(開発環境)で、ソースファイルを開き [F12] キーを押すことで IIS 7.5 Express でプログラムが実行されます。

 処理結果はブラウザに表示されます。

デバッガの起動

 残念ながら、WebMatrix 自体にはデバッガの機能はありません。

 Visual Studio 2010(有償)もしくは Visual Web Developer 2010 Express(無償)でデバッグ実行が可能ですので検討してみてください。

 なお、WebMatrix のリボンの右端にある「Visual Studio 起動」をクリックすることでプロジェクトを Visual Studio に読み込ませることが可能です。

2. 数値

数値の表現

 var 変数は宣言時に任意の数値を代入することができます。ただし代入した後に別の型に変更することはできません。

 明示的に型を指定した場合は、その型が使用されます。

@{
    // 暗黙的な型を使用
    var    num1 = 1;          // 整数型(int)
    var    num2 = 100000000;  // 整数型(int)
    var    num3 = 1.234f;     // 単制度浮動小数点型(float)
    var    num4 = 1.234;      // 倍精度浮動小数点型(double)
    // 明示的な型を使用
    int    num5 = 1;          // 整数型(int)
    int    num6 = 100000000;  // 整数型(int)
    float  num7 = 1.234f;     // 単制度浮動小数点型(float)
    double num8 = 1.234;      // 倍精度浮動小数点型(double)
}
四則演算

 四則演算です。

@{
    num = 1 + 1;      // 2
    num = 1 - 1;      // 0
    num = 1 * 2;      // 2
    num = 1 / 2;      // 0(整数同士の割り算の場合は、結果も整数になります)
    num = 1.0 / 2.0;  // 0.5(小数の割り算の場合は、結果も小数になります)
}

 余りの求め方です。

@{
    num = 3 % 2;      // 1(余り)
}
インクリメントとデクリメント

 インクリメントとデクリメントです。

@{
    // インクリメント
    i++;
    
    // デクリメント
    i--;
}

3. 文字列

文字列の表現

 文字列は「"」ダブルクォーテーションで囲みます。

 var 変数は宣言時に文字列を代入することができます。ただし代入した後に別の型に変更することはできません。

 明示的に型を指定した場合は、その型が使用されます。

@{
    // 暗黙的な型を使用
    var str1 = "abc";
    
    // 明示的な型を使用
    string str2 = "abc";
}
文字列操作

 各種文字列操作です。

@{
    // 結合
    str1 = "aaa" + "bbb";                 // 文字列の連結
    
    // 分割
    string[] record = "aaa,bbb,ccc".Split(',');
    
    // 長さ
    length = "abcdef".Length;           // 6
    length = "あいうえお".Length;       // 5(全角文字も1文字としてカウントされます。)
    
    // 切り出し
    str = "abcd".Substring(0, 2);       // ab(1桁目から2文字)
    
    // 検索
    result = "abcd".IndexOf("cd");      // 見つかった場合はその位置、見つからなった場合は -1 が返ります
}

4. 配列

配列の宣言と代入

 配列の宣言と代入です。配列は複数の値を代入することができる変数です。

@{
    // 配列の宣言
    int[] array;
    
    // 配列への代入
    array = new int[] { 1, 2, 3 };
  
    // 配列の宣言と同時に初期化
    int[] array = { 1, 2, 3 };
}
配列の要素の参照と代入
@{
    // 要素の代入
    a = array[0];   // 1
    b = array[1];   // 2
  
    // 要素の参照
    array[0] = 1;
    array[1] = 2;
}
要素の個数

 配列の要素数を取得するには Length プロパティを使用します。

@{
    n = array.Length;
}
配列の操作
@{
    int[] array = { 1, 2, 3 };
    
    // 先頭を取り出す
    a = array[0];               // a は 1
    // 末尾を取り出す
    b = array[array.Length-1];  // b は 3
    // 末尾に追加
    Array.Resize<int>(ref array, array.Length+1);
    array[array.Length-1] = 9;  // array は { 1, 2, 3, 9 } に
}

5. ハッシュ連想配列

C# にはハッシュ変数はありませんが、Dictionary クラスを用いることで代替えが可能です。

ハッシュの宣言と代入

 以下は、キーに文字列、値に整数をセットする場合の例です。

@{
    var hash = new Dictionary<string, int>();
    hash["a"] = 1;
    hash["b"] = 2;
}
ハッシュの要素の参照と代入
@{
    // 要素の参照
    hash["a"]; // 1
    hash["b"]; // 2
    
    // 要素の代入
    hash["a"] = 5;
    hash["b"] = 7;
}
ハッシュに関する関数(Dictionary のプロパティとメソッド)
@{
    // キーの取得
    keys = hash.Keys;
  
    // 値の取得
    values = hash.Values;
  
    // キーの存在確認
    hash.ContainsKey("a");
  
    // キーの削除
    hash.Remove( "a" );
}

6. 制御文

if 文

 if 文です。

@if ( 条件 ) {
    
else if {
    
else {
    
}
switch

 switch 文です。

@switch ( 条件 ) {
    case 値:
        処理
        break;
    case 値:
        処理
        break;
    default:
        処理
        break;
}
for 文

 for 文です。

<ul>
@for ( var i = 0; i < 4; i++ ) {
    <li>@i</li>
}
</ul>
foreach 文

 foreach 文です。配列の各要素を参照するときに使用します。

<ul>
@foreach ( var field in fields ) {
    <li>@field</li>
</ul>
}
比較演算子

 比較演算子の一覧です。

num1 == num2 // num1 は num2 と等しい
num1 != num2 // num1 は num2 と等しくない
num1 < num2  // num1 は num2 より小さい
num1 > num2  // num1 は num2 より大きい
num1 <= num2 // num1 は num2 以下
num1 >= num2 // num1 は num2 以上

7. 関数

関数ブロック

 Razor 構文では関数を記述する場合、コードブロックの先頭に「@functions」を記述する必要があります。

 関数自体の記述は、C# と同じです。

@functions{
    int sum( int num1, int num2 ) {
        int total;
  
        total = num1 + num2;
  
        return total;
    }
}

8. 知っておいたほうがよい文法

Razor でよく出てくる知っておいたほうがよい文法の一覧です。

ラムダ式

 関数を記述する別の方法としてラムダ式があります。

 以下は、Func<T> デリゲート型の変数「sum」を定義している例になります。

 Func<int, int, int> の意味は、引数1が「int」、引数2が「int」、戻り値が「int」を表します。

@{
    Func<int, int, int> sum = ( num1, num2 ) => {
        int total;
  
        total = num1 + num2;
  
        return total;
    }; // ←「;」が必要なことに注意
}
ヘルパー

 ヘルパー(Webパーツライブラリ)を作成する為に「@helper」という構文が用意されています。

 関数と同様ですが、戻り値がなく、HTML の出力に特化しているところが違います。

 ヘルパーを作成するには「App_Code」という名称のフォルダに「<ヘルパー名>.cshtml」を配置する必要があります。

@helper circle( int r ) {
    int x, y, t;
    int m = r * 2 + 1;
    string [,] s = new string[m,m];
    string line;
    string result;
    /* 方眼用紙の作成 */
    for ( x = 0; x < m; x++ ) {
        for ( y = 0; y < m; y++ ) {
            s[x,y] = "+";
        }
    }
    /* プロット座標の計算 */
    for ( t = 0; t < m; t++ ) {
        x = (int)Math.Round( r - ( Math.Sin( t * Math.PI / r ) * r ) );
        y = (int)Math.Round( r + ( Math.Cos( t * Math.PI / r ) * r ) );
        s[x,y] = "o";
    }
    /* グラフの表示 */
    result = "";
    for ( y = 0; y < m; y++ ) {
        line = "";
        for ( x = 0; x < m; x++ ) {
            line += s[x,y];
        }
        result += line + "\r\n";
    }
    <pre>@result</pre>
}
<呼び出し例>
@Graph.circle(6)
<実行結果>
++++++o++++++
+++o+++++o+++
+++++++++++++
+o+++++++++o+
+++++++++++++
+++++++++++++
o+++++++++++o
+++++++++++++
+++++++++++++
+o+++++++++o+
+++++++++++++
+++o+++++o+++
++++++o++++++

 また、ヘルパーライブラリは自分で作成する以外に、組み込みで用意されているものや、公開されているライブラリがあります。

<組み込みで用意されているライブラリの例>
@ObjectInfo.Print( data ) … 変数の内容(オブジェクトの構造)を表示します。簡易デバッグに使用できます。
@ServerInfo.GetHtml() … サーバー情報を表示します。PHP の phpinfo() に相当します。

 例えば、公開されているライブラリとして、Twitter 用のヘルパーライブラリをダウンロードすれば、以下のような記述で Twitter のタイムラインが表示可能な Web パーツを組み込むことが可能です。

 なお、ヘルパーライブラリWebMatrix では「ASP.NET Web ページの管理」より入手可能です。

<公開されているライブラリの例>
@Twitter.Search( "検索ワード" )
.NET ライブラリの参照を追加する

 using 構文を使用することで追加のライブラリを参照可能です。

 using 構文はファイルの先頭に記述することが推奨されています。

@using System.Collections;
@{
    ArrayList array = new ArrayList();
    array.Add("Hello");
    array.Add("World");
    array.Add("!");
}

 なお、既定でいくつかのライブラリが参照設定されています。以下は、コンパイル結果のソースより取得した情報です。

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.Helpers;
using System.Web.Security;
using System.Web.UI;
using System.Web.WebPages;
using System.Web.WebPages.Html;
using WebMatrix.Data;
using WebMatrix.WebData;

参考情報

その他の基礎文法マスター

この記事は他の基本文法マスターに便乗して書いた物です。誤り等ございましたらコメント等して頂けると助かります。

PHP、オープンソースアプリを簡単編集できる無償ツール WebMatrix ダウンロードはこちら