[翻訳] Web 開発入門：Part 5 データを扱う (20110215)

2011-02-14

今回は Part 5です。このシリーズは全9回なのでちょうど折り返し地点になります。

このパートではデータアクセスのもっとも基本的な部分について紹介します。

元ネタはこちらです。

https://www.microsoft.com/web/post/Web-Development-101-Part-5-Using-Data

なお、このシリーズの目次はこちらになります。

https://blogs.msdn.com/b/tashinmu/archive/2011/02/04/webmatrix-web-20110204.aspx

Web 開発入門：Part 5 データを扱う

これまで、WebMatrix を使って HTML ページを作る方法、効率的に Cascaded Style Sheet (CSS) を使ってページのスタイルを設定する方法、Razor 記法による WebMatrix 標準のレイアウト機能を使って余計な作業を減らしページの内容だけに注力する方法などを学んできました。

このパートではこれまで使ってきた静的な映画の一覧を動的な一覧に変更していきたいと思います。具体的には手書きで作成していた映画のリストを、データベースで映画の一覧を管理し、WebMatrix を使ってデータを読み出して HTML を生成する方法に変更します。こうすることで、データの変更や管理を簡単にし、Web ページの更新を自動的に行えるようにします。

WebMatrix でデータベースを作成する

まず初めに、WebMatrix の [データベース] の作業領域を選択してください。画面の中央に [データベースをサイトに追加] という選択肢が表示されているかと思います。

この選択肢をクリックすると、WebMatrix は “Movies.sdf” という新しいデータベースを作成します。もし、サイト名が異なる場合は、WebMatrix はサイト名に基づいてデータベースを作成します。(たとえば、サイト名が “foo” の場合は “foo.sdf” のように)

画面に右側にあるデータベースエクスプローラーには下記のようにデータベースが表示されているかと思います。

データベースにテーブルを追加する

画面の上部にいくつか[新しいデータベース]、[新しいテーブル]、[新しいクエリ] といったデータベースを操作するためのボタンが表示されているかと思います。このボタン群から [新しいテーブル] をクリックします。もし、クリックしても何も起きない場合は、データベースエクスプローラーで “Movies.sdf” が選択されているか確認してください。

WebMatrix はテーブルを作成し、列エディターを起動します。これはデータベースのテーブルに新しい列を作成したり、列を編集したりするツールです。ここでデータベースの用語について少し説明しておきたいと思います。レコードはテーブルにおける個々のデータを表します。たとえば、”人” というテーブルがあった場合、名前、年齢、住所、電話番号といった個人を表すデータの集合がレコードになります。列はデータの項目のことです。列のそれそれのデータがどのレコードに属するかは関係ありません。先ほどの “人” というテーブルの例でいうと、名前や年齢は列になります。

これから作成するこのサンプルのテーブルを例にとってみると下記のような関係になります。

まずは ID を作成します。ID は特定のレコードを識別するために使用します。このサンプルのようなシンプルなデータベースでは特に ID を作成する必要がない場合もありますが、より複雑なデータベースを扱ったりデータの追跡をしたりする場合を考えると、ID を設定しておいた方が良いでしょう。

列エディターで詳細を入力していきます。：

列名には “id” を設定します。 [データ型] に数値 (bigint) に設定し、必ず値が入っている ( [Null を許可] を False) ようにします。 [ID かどうか] は True にして、値に重複が無いようにします。これはデータベースでこの値を ID として使うことを宣言しています。これを True にすることの利点は新しいレコードを追加する場合に自動的に ID を設定してもらえる点です。そのために、新しい ID を振ろうとして場合に最後の番号が何で、次の番号を何にするかという事を考えなくてもよくなります。

次に、このフィールドが主キーであることを定義します。これもデータベース用語ですが、「キー」はデータベースにおいて特殊な値が設定される列で、レコードを抽出するときに使用されます。このキーはデータベースがデータを簡単に見つけるために使われます。たとえば、職場における社員番号などがそれに当たります。社員番号はあなたを特定するのに非常に便利です。非常にたくさんの社員がいるような場合、‘鈴木太郎’ という社員を探すよりもシステム的には社員番号が ‘333102’ の社員を探す方が簡単です。これはあなたを見つける際に、社員番号をキーとして使用されていることを意味します。データを見つけやすくするための複数のキーを持っている場合もありますし、主キーという形であなたを特定している場合もあります。

それでは、データベースから映画を増やしていくために映画に ID を設定して、 [主キーかどうか] を True にし、ID を主キーとして設定します。

[新しい列] ボタンを使用してさらに3つの列を作成します。テーブル上には名前のない3つの列が作成されました。

最初の空の列を指定し “Name” という名前を付け、 [データ型] に “ntext” を設定します。 [ID かどうか] 、 [主キーかどうか] はともに False とします。

2番目の空の列の名前を “ReleaseYear” として [データ型] は “bigint” に設定します。

3番目は “Genre” という名前にし、 [データ型] は “ntext” に設定します。

セーブボタンをクリックして、テーブルを保存します。

テーブル名を確認するダイアログが表示されるので、”Favorites” とします。

画面の左側のデータベースエクスプローラーにテーブルが表示されます。

テーブルにデータを追加する

データベースエクスプローラーのテーブル名をダブルクリックし、テーブルを開くとデータが空であるのが確認できるかと思います。

Name のフィールドにカーソルをセットし、値を入力します。入力が終わったらタブキーを押して次のフィールド (ReleaseYear) にフォーカスを移動させ値を入力します。またタブキーを押して Genre に値を入力していきます。

もう一度タブキーを押すと、id のフィールドに “1” が表示されたのを確認できたかと思います。自動で ID を振ってくれるため、非常に有効な機能です。現在、カーソルが id のフィールドにあるかと思いますので、もう一度タブキーを押して Name フィールドに移動してください。

この作業を何度か繰り返して、いくつかの映画を入力して下さい。ここでは下記の4つの映画を設定しました。

データを扱うページを作成する

前のパートでは <head> タグの内容、スタイル、ページの内容などの HTML を生成するためにレイアウトを使う方法を学習しました。この際に作成した “_siteLayout.cshtml” と “_PageStart.cshtml” があるかと思います。もし、これらのファイルを作成していなかったり、うまく動いていない場合は Part 3 に戻ってファイルを作成する必要があります。

レイアウト機能を使うメリットは@RenerBody() が必要なコードを呼び出し完全なページをテンプレートから作り出してくれるため、本当に必要なコードだけを書けばよいという点でした。

それを念頭に置いて、”dataMovies.cshtml” という新しい CSHTML のページを作成します。

下記の静的なHTML を使って初期のコードを上書きします。：

 <div id="movieslist">
  <ol>
    <li><a href="#">It's a wonderful life</a></li>
    <li><a href="#">Lord of the Rings</a></li>
    <li><a href="#">The Fourth World</a></li>
    <li><a href="#">The Lion King</a></li>
  </ol>
</div>

よく見ると、<ol> タグの一覧に特化した<div> タグだという事がわかるかと思います。

この静的な一覧は4つのアイテムを持っています。もし、5つ目のアイテムを表示させたければ、新たに <li> タグを使ってアイテムを追加すればよいのです。

一方で、データベースからデータを取得するとき、ページ側ではいくつのアイテム (レコード) がデータベースにあるのかはわかりません。そのため、<li> タグを使ってレコード数分のアイテムを生成することになります。この場合のアイテムの個数はデータベース上のレコード数になります。これを実現するには繰り返しの処理が向いています。これから繰り返しの処理を書いていきましょう。

はずは、繰り返しの処理を書く前にページにデータベースの情報を提供しなければいけません。“dataMovies.cshtml” の先頭で次のようなコードを記述します。

 @{
  var db= Database.Open("Movies");
  var sqlQ = "SELECT * FROM Favorites";
  var data = db.Query(sqlQ);
}

前のパートで “@” について触れたことを覚えていますか？これはサーバーに対してそれ以降のコードはサーバー上で実行する Razor 記法のコードであることを表しています。この例の場合複数行のコードがあります。ただし、それぞれの行の先頭に “@” を置くのではなく、”@{” をコードの初めに書いて “}” で閉じてコードのブロックにしています。複数行を書く場合はこの記述方法を使用します。

もし、Java や C++、C、C# といった言語を使ったことがあれば、わかるかと思いますが、これを「ブレース」と呼びます。

それではこのコードを一行ずつ見ていきたいと思います。：

 var db= Database.Open("Movies");

“var” は変数 (Variable) を表し、データを割り付けることができるアイテムです。このコードはサーバーに “Movies” というデータベースをオープンして、その参照を “db” という変数に格納しています。

 var sqlQ = "SELECT * FROM Favorites";

この行でも新しい “sqlQ” という変数を作成して、そこに “SELECT * FROM Favorites” という SQL のコマンドを格納しています。

データベースを使用する場合は、”Structured Query Language” (SQL) と呼ばれる言語を使用します。これはデータベースから必要なデータを取得する場合などに使用されます。実際には新しいデータを追加したり編集したりすることもできますが、ここでは取得する部分を紹介します。その他の処理に関しては別のパートで説明します。

データベースからデータを取得する場合には、“SELECT” コマンドを使用します。文法は “SELECT <何を> FROM <どこから> WHERE <条件>” のような形式になっています。

<何を> は取得するフィールドの一覧になります。またワイルドカード (*) を使用することもできます。これはすべてのフィールドを取得してくることを意味します。今回は条件を指定する必要がないので、” SELECT * FROM Favorites” というコマンドを使用して、データベースに対して Favoriate テーブルのすべてのレコードのすべての列のデータを返すように指示しています。

 var data = db.Query(sqlQ);

ここがこのページの重要な実行ポイントになります。先ほど、データベースをオープンしてこれを参照するために、”db” という変数に格納しました。WebMatrix はオープンしたものがデータベースであることを知っています。そのため、WebMatrix で提供するデータベースのオブジェクトはデータベースを操作するための機能 (一般的にはメソッドと呼ばれる) を一通り持っています。その中の一つが Query() です。Query() は SQL コマンドを実行するメソッドです。SQL コマンドを文字列として Query() に渡せば、データベースはその処理を実行してレコードを返してくれます。このレコードは “data” という変数に格納されます。その結果、データを取得し、いろいろとデータを使って処理ができるようになりました。

現時点で、ページは下記のようになっているかと思います。

 @{
  var db= Database.Open("Movies");
  var sqlQ = "SELECT * FROM Favorites";
  var data = db.Query(sqlQ);
}
<div id="movieslist">
  <ol>
    <li><a href="#">It's a wonderful life</a></li>
    <li><a href="#">Lord of the Rings</a></li>
    <li><a href="#">The Fourth World</a></li>
    <li><a href="#">The Lion King</a></li>
  </ol>
</div>

データをデータベースから取得しましたが、まだ、それを使って何もしていません。現時点では静的な HTML が出力されるだけですので、これを変えていきましょう。

まずは、1つを残して <li> の行を消してしまいましょう。結果的に <ol> タグの中身はこのようになっているかと思います。

 <ol>
  <li><a href="#">It's a wonderful life</a></li>
</ol>

先ほど、複数のデータベースのレコードを持つ場合、複数の <li> のエントリーを表示しなければいけません。これを実現するために繰り返しの処理を実装したいと思います。

Razor 記法を使う場合、”@” を使って下記のように繰り返し処理を記述します。

 <ol>
@foreach(var row in data)
  {
    <li><a href="#">It's a wonderful life</a></li>
  }
</ol>

このコードはサーバーに対してデータのレコード数を数えて、それぞれのデータごとに <li> タグを書き出していく処理をしています。

その結果、データベース上には4件のデータがあるため、 “It’s a wonderful life” が 4 回出力されています。

サーバーは命令されたことのみを実行するため、それぞれのレコードのデータを読み込んでもそれを出力する処理が無い限り、HTML に記述された映画のタイトルしか出力していません。

もう少し賢いプログラムにしていきましょう。本当にやりたいことはそれぞれのレコードに含まれている映画のタイトルを抜き出してそれぞれ表示することです。言い換えれば、”It’s a wonderful life” の部分をレコード上にある映画のタイトルに置き換えることです。

データベースを作成した時、映画のタイトルを格納する列として “Name” という列を作りました。そして、お気づきの通り、繰り返し処理の中で指示しているレコードを “row” という変数に格納しています。そのため、row.Name という表記を使って現在指示しているレコードの中から映画のタイトルを抜き出します。

次のようにコードを変えてください。

 <ul>
  @foreach(var row in data)
  {
    <li><a href="#">@row.Name</a></li>
  }
</ul>

これでレコードのデータを抽出し、”Name” のフィールドをレコードから <li> の要素として出力できるようになりました。実行結果は下記のとおりです。：

これで、すべての映画のタイトルが表示できました。

すでにこのページは動的で、映画のタイトルをデータベースのデータから取得しています。それではここに新しい映画をデータベースに追加してみましょう。

WebMatrix のデータベースエディターに戻り、Favorites テーブルに戻り新しいレコードを追加します。：

そして、ページを実行すると、HTML を書かずに一覧に新しい映画が追加されていることがわかります。

もし、今までにこのようなスクリプト言語で Web 開発をしたことがあれば、Razor 記法は <li> タグの中にコードを埋め込むというコードを例にとってみても非常に効率的な記法であることに気づくでしょう。この演習では row.Name を出力するための処理をわざわざ記述せずに、出力したい箇所に @row.Name と記述するだけでよいことが分かったかと思います。これは CSHTML を編集したりメンテナンスしたりするうえで、PHP などの言語で “<?php echo(row.Name);>” と書くよりも作業を大幅に削減します。

もちろん、動的要素と静的要素を組み合わせて使うこともできます。たとえば下記のようにコードを変更することもできます。

 <div id="movieslist">
  <ol>
    @foreach(var row in data){
      <li><a href="#">@row.Name, @row.Genre, @row.ReleaseYear</a></li>
    }
  </ol>
</div>

実行結果は静的HTMLの要素としてのカンマと、データベースから取得した各データがうまく統合されて、出力されているのがわかるかと思います。

このように、非常に簡単にデータベースを使った動的 Web ページを作成することができました。

まとめ

このパートではデータを基にした動的 Web サイトの作成について学びました。好みの映画の一覧を格納するSQL Server Compact のデータベースを作成し、そこからデータを取得し、HTML 生成し、ブラウザに表示する方法を学びました。また、Part 3 で学習したレイアウトと合わせて、CSHTML のページを作成して軽量で役立つアプリケーションを簡単に作成できることを理解いただけたかと思います。

次のパートではデータベースに新しい映画を追加するためにはどうしたらよいかというのを学びます。このサイトのユーザーは直接データベースを編集することができません。そのため、このデータベースに映画を追加するための Web インターフェイスを作成し、データベース更新できるようにします。

Share via

[翻訳] Web 開発入門：Part 5 データを扱う (20110215)

Additional resources