GearsORM改めJStORMを使ってみた

Gears JavaScript

GoogleGears用のORマッパーであるGearsORMを使ってみようと思ったら、「JStORM」という名前に変わってたけど気にせず使ってみた。

ダウンロードは以下のURLからできる。現在のバージョンは0.3 Beta。

ダウンロードした圧縮ファイルを解凍してできた「src」フォルダに大量のJavaScriptファイルが入っている。

  • JStORM.js
  • JStORM.Events.js
  • JStORM.Field.js
  • JStORM.Gears.js
  • JStORM.Jaxer.js
  • JStORM.Model.js
  • JStORM.ModelMetaData.js
  • JStORM.MySQL.Introspection.js
  • JStORM.Query.js
  • JStORM.Sql.js
  • JStORM.SQLite.Introspection.js

で、これインクルードする順番とか必要なファイルとかが色々面倒くさいので、一つのファイルにまとめて、YUICompressorで圧縮しておいた。

ライセンスが明記されていないので、取り扱いには注意！！

とりあえずこのエントリで作ったCRUDフォームをJStORMで作り直してみた。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="GearsORMSample._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>GearsORM Sample</title>
    <script type="text/javascript" src="Scripts/jquery-1.2.6.pack.js"></script>
    <script type="text/javascript" src="Scripts/gears_init.js"></script>
    <script type="text/javascript" src="Scripts/gearsorm-0.3.pack.js"></script>
    <script type="text/javascript">
        $(function() {
            JStORM.connections = {
                "default": {
                    PROVIDER: "Gears",
                    DIALECT: "SQLite",
                    PATH: "gearsorm_sample"
                }
            };
            var Person = new JStORM.Model({
                name: "Person",
                fields: {
                    firstName: new JStORM.Field({
                        type: "String",
                        maxLength: 16
                    }),
                    lastName: new JStORM.Field({
                        type: "String",
                        maxLength: 16
                    })
                },
                connection: "default"
            });
            Person.createTable();

            function load() {
                var dataTable = $("#dataTable");
                dataTable.find("tbody").remove();

                Person.all().each(function(o) {
                    dataTable.append(
                        $("<tr>").append(
                            $("<td>").append(
                                $("<input type='button' value='削除'>").data("id", o.rowid).click(function() {
                                    var id = $(this).data("id");

                                    Person.removeByPk(id);

                                    load();
                                })
                            ),
                            $("<td>").text(o.firstName),
                            $("<td>").text(o.lastName)
                        )
                    );
                });
            }

            $("#insertBtn").click(function() {
                var firstname = $("#firstname").val();
                var lastname = $("#lastname").val();

                if(firstname.length > 0 && lastname.length > 0) {
                    $("#firstname").val(""); $("#lastname").val("");

                    var person = new Person();
                    person.firstName = firstname;
                    person.lastName = lastname;
                    person.save();
                    
                    load();

                } else alert("ERROR");
            });
            load();

            $("#firstname").focus();
        });
        
    </script>
    <style type="text/css">
        th
        {
            font-size: small;
            width: 60px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">

    <div>
        <table border="1">
            <tr>
                <th>
                    苗字:
                </th>
                <td>
                    <input id="firstname" type="text" />
                </td>
            </tr>
            <tr>
                <th>
                    名前:
                </th>
                <td>
                    <input id="lastname" type="text" />
                </td>
            </tr>
        </table>

        <div style="margin-top: 5px;">
            <input id="insertBtn" type="button" value="追加" />
        </div>

    </div>

    <div style="margin-top: 10px;">
        <table id="dataTable" border="1">
            <thead>
                <tr>
                    <th style="width: 30px;">
                        &nbsp;
                    </th>
                    <th>
                        苗字
                    </th>
                    <th>
                        名前
                    </th>
                </tr>
            </thead>
        </table>
    </div>

    </form>
</body>
</html>

解説

「JStORM.connections」属性に接続設定を追加するところから始まる。

JStORM.connections = {
    "default": {
        PROVIDER: "Gears",
        DIALECT: "SQLite",
        PATH: "gearsorm_sample"
    }
};

「default」という設定名で、PROVIDER、DIALECT、PATHというキーを指定する。JStORMではGearsやSQLite以外にも対応しているので、こういった設定が必要になる。

「JStORM.Model」クラスでモデルを定義する事ができる。「name」属性でモデル名を「fields」属性で列を定義できるようになっている。

var Person = new JStORM.Model({
    name: "Person",
    fields: {
        firstName: new JStORM.Field({
            type: "String",
            maxLength: 16
        }),
        lastName: new JStORM.Field({
            type: "String",
            maxLength: 16
        })
    },
    connection: "default"
});
Person.createTable();

このモデルからテーブルを作るのも簡単で「モデル名.createTable」という関数を呼び出すだけ。その逆はもちろん「dropTable」

データの追加はモデルクラスをインスタンス化して、属性を設定して「save」関数を呼び出すだけ。

var person = new Person();
person.firstName = firstname;
person.lastName = lastname;
person.save();

このへんは分かり易い。

検索の仕方は「all」関数を使う。結果の取り方は「next」関数とか呼び出してやるんだけど、「each」関数を使うとforループのように要素にアクセスできる。

Person.all().each(function(o) {
	...
});

これは今風のJavaScriptライブラリという感じ。

うん。コード量は増えた気がするけど可読性は上がっているので結構使えそうな気がする。

他にもリレーションを張ったりもできるみたいなので、これからウォッチしていこう。