読者です 読者をやめる 読者になる 読者になる

is Neet

ネトゲしながら暮したい

ActiveRecordっぽいinterfaceを持ちつつajax通信も担当してくれるjsのライブラリが欲しかった俺は

自分でつくることにした。
動作環境とかChromeでしか試してないし、テストも書いてないし、昨今のjsライブラリの一般的な作り方とかもよく分かってないので完全に勢いで作り始めた。
その辺のお作法の話も学びながら作っていきたい思い。

完全に同じような事をするためのライブラリにjs-modelというのがあるが更新が2年ほど止まっているし、名前にエモみを感じないので、やってやろうという気持ちになった。
js-model • models in your JavaScript

gulpとかbabeljsとか、使ってみたかったし、ES6も全然触ってなかったし、何より一年くらいまともにプログラミングすらしてなかった気がするので、大変面白かった。
取り敢えず今日一日で出来たのところまでを書いておこう。

作ったものはコチラ↓
soplana/leaps-js · GitHub

どんなライブラリ

できればスタンドアローンで動かせるようにしたかったのだけれど、少なくとも現時点ではunderscore.jsに依存する形となってしまった。
20代の頃なら自作してたと思うけれど、残念ながら若さと気持ちが足りなかった。
個人のAWSが不正利用され140万の請求がきている現状も無関係ではない気もする。

まずmodelとなるクラスを宣言する

class SampleUserModel extends LeapsModel {
  static properties() {
    return {
      name:        "",
      age:         null,
      admin:       false
    }
  }
}

インスタンス化し、保存することが出来る。
今のところただたんにArrayにぶち込んでるだけなので、ページ遷移したら消えてしまうというあまり意味のない実装になっている。そのうちlocalStorageに入れるようにしたい。
保存に成功するとmodel.__idにシーケンス番号が入る。

var user = new SampleUserModel({name: "soplana"});
user.admin = false
user.save() // true

保存したレコードはwhereやfindを使って取得できる。

// データの用意
new SampleUserModel({name: "a", age: 10}).save()
new SampleUserModel({name: "b", age: 10}).save()
new SampleUserModel({name: "c", age: 20}).save()

// where検索
var users = SampleUserModel.where({age: 10})
users.length // 2

// id指定で検索
SampleUserModel.find(1)

http requestを走らせる

これが一番やりたかったのだけれど、おおむねmodelとajax通信は密接に関係しているはずなので、通信部分の処理はmodelに任せたかった。
まぁ普段Railsで、極一般的なCRUD/RESTなアプリケーションばかり書いてる僕だからこその発想かもしれないけれど。

まず、先ほど定義したmodelに追加でエンドポイントを定義する。

class SampleUserModel extends LeapsModel {
  static resourcePath() {
    return '/users/{id}.json'
  };

  static properties() {
    return {
      id:          null,
      name:        "",
      age:         null,
      admin:       false
    }
  }
};

上記の例では{id}部分が動的にきりかわるpathで、modelに同名のpropertyがあればそれを参照してつっこんでくれるようにした。model.routing()を使いエンドポイントを確認できる。
こんな感じだ。

var user = new SampleUserModel({id: 1})
user.routing().indexPath // /users/1.json
var promise = user.show()

promise.then(function(data){
  console.log(data) // SampleUserModel

}).catch(function(error){
  console.log(error)

});

今日作り始めたばかりなのでアレだけど、やりたいことはだいたいこんな感じだ。
全然目新しい事もないし車輪の再発明感あるけど、実装してて楽しかった。
ブログも勢いで書いてるからかなり雑だ。
個人のAWSが不正利用され140万の請求がきている現状も無関係ではない気もする。