TOPシステム開発> 第3回:Webアプリケーション開発と簡単Ajax化 (2/3)




今こそ聞きたいVisual Studio 2008の基礎の基礎

今こそ聞きたいVisual Studio 2008の基礎の基礎

第3回:Webアプリケーション開発と簡単Ajax化

著者:マイクロソフト 馬田 隆明

公開日:2008/02/19(火)

コードビハインドで明瞭さを保持する

さきほど設置したTextBoxをダブルクリックすると、コード画面が表示されます。こちらはHTMLのソースコードではなく、拡張子が「.cs」なVisual C#のファイルになります。

Visual StudioではWebアプリケーション開発に「コードビハインド」という仕組みを標準採用しており、デザイン部分のHTMLと、挙動を制御するプログラム部分のコードを分割管理できます。

これによってUIとロジックを明確に分離して開発効率を向上できるだけでなく、UIとロジックそれぞれの変更に対する影響度を最小限に抑えられます。これは「高い保守性を確保できる」ことをはじめとして、さまざまなメリットにつながっています。

続いて、サンプルコード画面でTextBoxのイベントハンドラに「TextBox1.Text = Calendar1.SelectedDate.ToString("yyyy/MM/dd");」というコードを追加します。これにより、サンプルアプリケーションでカレンダーの日付をテキストボックスに表示できるようになります。これをベースに、さらに改良を加えていきます。

伝言板を作るには、基となるデータが必要です。そこで、まずはそのサンプルデータを作るところからはじめます。カレンダーのイベントハンドラの中に、リスト1の文を書き込みます。

リスト1では「dengonban」変数を宣言し、そこに匿名の配列(new[]、のこと)を初期値として代入しています。ここで使われている「var」は型推論と呼ばれ、変数の型を明示的に宣言しなくても、コンパイラが自動的に型を決定します。

さらにクラス(new {…}、のこと)に対して、「date」を日付、「comment」を伝言板の内容として設定します。さらに同じものを2つ作成した上で匿名の配列の初期化を行ってうと、サンプルデータの完成です。

なおこのような記述は、今回のVS2008および.NET Framework 3.5のリリースにあわせて強化されたC#3.0によって実現できるようになりました。

図2:必要なコードを追加
図2:必要なコードを追加
(画像をクリックすると別ウィンドウに拡大図を表示します)

リスト1:サンプルデータの作成
var dengonban = new[] {
    new {date = "2008/02/01", comment ="Visual Studio 2008 ボリューム ライセンス発売開始"},
    new {date = "2008/02/08", comment ="Visual Studio 2008 パッケージ販売開始"}
};

リスト2:データを取り出す仕組み
var temporary = from i in dengonban
  where i.date == Calendar1.SelectedDate.ToString("yyyy/MM/dd")
  select i.comment;

リスト3:データの変更と表示
String[] date = temporary.ToArray();
TextBox1.Text = date[0];

作ったデータにアクセスする

データの保存ができたら、続いてそのデータを取り出すための仕組みが必要です。それを実現するのがリスト2のコードです。こちらを伝言板アプリケーションのコードに追加します。

まず「temporary」変数を匿名型で宣言します(var temporary、のこと)。そして、先ほど作ったdengobanオブジェクトの中(in)にあるdateの中から、クリックされた日付と同じものがあるという条件の箇所(where)と、含まれたcommentを選択(select)し、temporary に順次代入します。なお「i」は仮引数です。

リスト2のコードを利用することで、先ほど作ったデータをtemporary変数に格納できました。これは、.NET Framework 3.5から実装された「統合言語クエリ(LINQ)」と呼ばれる機能を使ったデータアクセスです。具体的には、Visual BasicおよびC#に新たに実装されたラムダ式や拡張メソッド、匿名型、オブジェクト初期化子などを利用し、LINQ構文を実現しています。

なおLINQについてより詳しく知りたい方は「次世代データアクセステクノロジ」を参照してください。

条件に当てはまるデータをtemporaryに格納できたら、次にデータを表示に適した型に変更し、実際の表示を行う部分が必要になります。これは、LINQ文の後にリスト3のコードを記述することで実現できます。

ここでは、dateというstring型の配列を宣言し、先ほどtemporaryに代入したデータを使って初期化を行っています。さらにdate配列の中に格納されたテキストは、TextBoxに格納されます。

こうして完成したアプリケーションを実行し、カレンダーの2月1日の箇所をクリックしてみましょう。するとテキストボックスには「Visual Studio 2008ボリュームライセンス発売開始」と表示されます。同様に2月8日の箇所もクリックし、コメントを確認してください。

なお、この状態で2月1日と8日以外の日付をクリックするとエラーになってしまいます。 次のページ


前のページ  1   2  3  次のページ


マイクロソフト株式会社 馬田 隆明
著者プロフィール
マイクロソフト株式会社  馬田 隆明
2007年、マイクロソフト株式会社に入社。Visual StudioプロダクトマネージャとしてVisual StudioやPopflyのマーケティングに携わる。両製品を通して、開発者層の拡大と最新技術の普及に尽力する。


この記事の評価をお聞かせください
ボタンをクリックしますとウインドウが開きます。

INDEX
第3回:Webアプリケーション開発と簡単Ajax化
  リッチなコンテンツの普及によりWeb開発のハードルが上がった
コードビハインドで明瞭さを保持する
  エラーの表示とデバッグ
今こそ聞きたいVisual Studio 2008の基礎の基礎
第1回 再発見Visual Studioの魅力
第2回 4つのアプリケーションを開発してみる
第3回 Webアプリケーション開発と簡単Ajax化
第4回 WPFで作るWindowsアプリケーション
関連記事
Visual Studio 2008が変える!デジタルワークスタイル像
次世代データアクセステクノロジー
チーム開発ここまできた、個人からチームの生産性向上へ