Backbone.js Backbone.Routerを試してみる

前回から、Backbone.jsに取り組み始めました。
今回は、Backbone.Routerを試してみます。

目次

使い方

とてもシンプルだなと感じました。

src\router\router.jsを作成します。

src\router\router.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const Backbone = require("backbone");

const myrouter = Backbone.Router.extend({
routes: {
sample_a: "sample_A",
sample_b: "sample_B",
"*path": "default",
},
default: function () {
console.log("default");
},
sample_A: function () {
console.log("sample_A");
},
sample_B: function () {
console.log("sample_B");
},
});

module.exports = myrouter;

/#sample_aにブラウザでアクセスしたとき、sample_Aメソッドが実行されます。
"*path"は、defaultメソッドが実行されます。
"*path"は、/#sample_a/#sample_bに合致しなかったとき、実行されるものを指定しています。

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

src/index.js
1
2
3
4
5
const Backbone = require("backbone");
const MyRouter = require("./router/router");

const router = new MyRouter();
Backbone.history.start();

ここまでの 2 つの.js ファイルをwebpackでバンドルして使います。

バンドルした JavaScript を実行する index.html を以下のように用意します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<title>webpack-Backbone-router</title>
</head>
<body>
<div>
<a href="#sample_a">リンクA</a>
<a href="#sample_b">リンクB</a>
<a href="#sample_none">リンクそれ以外</a>
</div>
<script src="app.js"></script>
</body>
</html>

一旦動作確認

npm run serveを実行し確認します。
以下の表示になります。

リンクが 3 つ見えます。
Chorme 開発ツールを開いて確認するとクリックごとにコンソールへログが残ります。
この時、ブラウザの URL を見ると連動しています。

ブラウザでの表示を切り替えてはいませんが、Backbone.Routerを最小構成で確認できました。

画面の切り替えをやってみる

準備

今度は、画面の切り替えを組み込んでみます。
今回は bootstrap を使用するので、不足しているパッケージを導入します。
加えて、style-loadercss-loaderを導入します。

1
2
npm i --save bootstrap  popper.js
npm i --save-dev style-loader css-loader

style-loadercss-loaderを使用できるようにwebpack.config.jsを編集します。

webpack.config.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
module.exports = {
mode: "development",
// エントリーポイントの.jsファイル
entry: `./src/index.js`,
// ファイルの出力設定
output: {
// 出力ファイルのディレクトリ名
path: `${__dirname}/dist`,
// 出力ファイル名
filename: "app.js",
},
//webpack-dev-server設定
devServer: {
contentBase: "dist",
open: true,
},
devtool: "inline-source-map",
//CSS読み込み設定
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
],
},
};

実装

src/router/router.jsを以下のように作成しました。

src/router/router.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
const Backbone = require("backbone");
const $ = require("jquery");

const myrouter = Backbone.Router.extend({
routes: {
home: "home",
links: "links",
lists: "lists",
"*path": "default",
},
home: function () {
resetActive();
console.log("HOME");
$("#home").addClass("active");
$("#content").html("<h2>Home-Content</h2>");
},
links: function () {
resetActive();
$("#links").addClass("active");
console.log("LINKS");
$("#content").html("<h2>Links-Content</h2>");
},
lists: function () {
resetActive();
$("#lists").addClass("active");
console.log("LISTS");
$("#content").html("<h2>Lists-Content</h2>");
},
default: function () {
console.log("DEFAULT");
//defaultルートにたどり着いたとき/#homeに転送する
this.navigate("#home", { trigger: true });
},
});

//nav部分のactiveクラス付与をすべてリセットする
const resetActive = () => {
$(".nav-link").removeClass("active");
};

module.exports = myrouter;

src/index.jsを以下のように作成しました。

src/index.js
1
2
3
4
5
6
7
8
9
10
// Bootstrapのcssを読み込み
import "bootstrap/dist/css/bootstrap.min.css";
// Bootstrapのjsを読み込み
import "bootstrap";

const Backbone = require("backbone");
const MyRouter = require("./router/router");

const router = new MyRouter();
Backbone.history.start();

dist/index.htmlを以下のように作成しました。

dist/index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<title>webpack-Backbone</title>
</head>
<body>
<div class="container">
<h1>Links</h1>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link" href="#home" id="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#links" id="links">Links</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#lists" id="lists">Lists</a>
</li>
</ul>
<div id="content"></div>
</div>
<script src="app.js"></script>
</body>
</html>

確認

npm run serveを実行し確認します。
以下の表示になります。

タブをクリックすると表示が書き換わっているのと、対応する URL への変更が確認できます。
また、合致しない URL を直接入力したとき、/#homeに転送されています。

今回は$("#content").html("<h2>Lists-Content</h2>");のように固定の HTML を設定しています。
Backbone.View からレンダリングした HTML を設定すれば、アプリケーションとして成立するものが作れそうです。


今回は、Backbone.Routerを試してみました。
Bootstrap との連携もできたので良かったです。

ではでは。