Backbone.js データをサーバーとの間でCURDしてみる

先日は、Backbone.Router とドットインストールにて取り上げられているアプリを 2020 年的に取り組むことをしてみました。
今回もドットインストールでは触れていない、サーバーと通信してのデータの CURD(作成、更新、読み取り、削除)を試してみます。

目次

参考

ディレクトリ構成

以下のディレクトリ構成になっています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|   package-lock.json
|   package.json
|   webpack.config.js
|
+---dist
|       index.html
|
+---node_modules
\---src
    |   index.js
    |---collection
    |       memos.js
    |
    \---model
            memo.js

モデルの CURD

モデル単独での curd を試してみます。

src/model/memo.jsを以下のように作成します。

src/model/memo.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const _ = require("underscore");
const $ = require("jquery");
const Backbone = require("backbone");

const Memo = Backbone.Model.extend({
  idAttribute: "id",
  defaults: {
    text: "",
  },
  validate: function (attrs) {
    if (attrs.text.length > 255) {
      return "The sentence is too long";
    }
  },
  urlRoot: "/api/memos/",
});

module.exports = Memo;

モデルを呼び出すsrc/index.jsは次のようになっています。

src/index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
const Memo = require("./model/memo");

//IDを指定してモデルを作成
const memo1 = new Memo({ id: 1 });

//サーバーと通信してデータを取得
//get /api/memos/1 を実行
memo1.fetch().done(function () {
  console.log("fetch");
});

//値を表示
console.log(memo1.toJSON());

//パラメータを設定
memo1.set("text", "text1");

//サーバーにデータを保存
//post /api/memos/1 を実行
const state1 = memo1.save(null, {
  success: function (model, res) {
    console.log(model.toJSON());
    console.log(res);
    console.log("success.");
  },
  error: function () {
    console.log("error!");
  },
});

//IDを指定しない=>新規のデータを作成
const memo2 = new Memo();

//データの保存=>新しいレコードの追加
//post /api/memos を実行
const state2 = memo2.save(null, {
  success: function (model, res) {
    console.log(model.toJSON());
    console.log(res);
    console.log("success.");

    //データの削除
    //DELETE /api/memos/[割り当てされたID] を実行
    memo2.destroy();
  },
  error: function () {
    console.log("error!");
  },
});

確認(モデルの CURD)

src/model/memo.jsとsrc/index.jsが用意しました。
用意できたら、API サーバーと backbone.js をビルドするサーバーを両方起動して、ブラウザでアクセスします。

動作確認では、コンソールへの表示しかしないので、開発ツールを立ち上げます。
以下のようになります。

コンソールログの様子
1
2
3
4
5
6
7
8
9
10
index.js:13 {text: "", id: 1}
contentscript.js:58 <body>​…​</body>​
contentscript.js:54 <body>​…​</body>​
index.js:9 fetch
index.js:22 {text: "text1", id: 1}
index.js:23 {text: "text1", id: 1}
index.js:24 success.
index.js:38 {text: "", id: 25}
index.js:39 {text: "", id: 25}
index.js:40 success.

非同期で通信しているので、順番が合いませんが、データの作成・更新・読み込み・削除が実現できています。
アクセス先の API サーバは、json-server で用意していますが、データが目に見えて書き換わってゆくのが見ていても楽しいです。

コレクションの CURD

今度は、コレクションで CURD をしてみます。
先に作ったMemoモデルのコレクションを作成します。
以下のsrc/collection/memos.jsです。

src/collection/memos.js
1
2
3
4
5
6
7
8
9
10
11
const Backbone = require("backbone");
const Memo = require("../model/memo");

const Memos = Backbone.Collection.extend({
  model: Memo,
  url: function () {
    return "/api/memos";
  },
});

module.exports = Memos;

コレクションを呼び出すsrc/index.jsは次のようになっています。

src/index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
const Memos = require("./collection/memos");

//コレクションを作成
const memos = new Memos();

//サーバーからデータを取得
memos.fetch();

//データを表示
setTimeout(() => {
  console.log(memos.toJSON());
}, 500);

//データの追加
setTimeout(() => {
  result = memos.create({ text: "text5" });
}, 1000);

//追加されたデータ表示
setTimeout(() => {
  console.log(result.toJSON());
}, 1500);

//追加後のデータすべてを表示
setTimeout(() => {
  console.log(memos.toJSON());
}, 2000);

//データを更新
setTimeout(() => {
  id = result.toJSON().id - 1;
  console.log(id);
  memos.models[id].set({ text: "textXX" });
  memos.models[id].save();
}, 2500);

//更新後のデータ確認
setTimeout(() => {
  console.log(memos.toJSON());
}, 3000);

//データを削除
setTimeout(() => {
  id = result.toJSON().id - 1;
  memos.models[id].destroy();
}, 3500);

//削除後のデータ確認
setTimeout(() => {
  console.log(memos.toJSON());
}, 4000);

本来であればデータの更新などは、イベントを検知すべきですが、コレクションの CURD だけを動作確認したいのでいいとしましょう。

確認(コレクションの CURD)

ここまでで、src/model/memo.jsとsrc/collection/memos.js、src/index.jsが用意しました。
用意できたら、API サーバーと backbone.js をビルドするサーバーを両方起動して、ブラウザでアクセスします。

コンソールの表示は以下のようになります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
index.js:11 (4) [{…}, {…}, {…}, {…}] <=データ表示
    0: {text: "text1", id: 1}
    1: {text: "text2", id: 2}
    2: {text: "text3", id: 3}
    3: {text: "text4", id: 4}
    length: 4
    __proto__: Array(0)
index.js:21 {text: "text5", id: 5} <=追加されたデータ表示
index.js:26 (5) [{…}, {…}, {…}, {…}, {…}] <=追加されたデータを
    0: {text: "text1", id: 1}
    1: {text: "text2", id: 2}
    2: {text: "text3", id: 3}
    3: {text: "text4", id: 4}
    4: {text: "text5", id: 5}
    length: 5
    __proto__: Array(0)
index.js:38 (5) [{…}, {…}, {…}, {…}, {…}] <=データを更新
    0: {text: "text1", id: 1}
    1: {text: "text2", id: 2}
    2: {text: "text3", id: 3}
    3: {text: "text4", id: 4}
    4: {text: "textXX", id: 5}
    length: 5
    __proto__: Array(0)
index.js:49 (4) [{…}, {…}, {…}, {…}] <=データを削除
    0: {text: "text1", id: 1}
    1: {text: "text2", id: 2}
    2: {text: "text3", id: 3}
    3: {text: "text4", id: 4}
    length: 4
    __proto__: Array(0)

値の取得、追加、更新、削除ができました。

モデルとコレクションで CURD を試すことができました。
Rails も触っているからか、Backbone.js はコレクションの単位もモデルっぽいと感じるところがありました。

ではでは。