page.js を導入しよう

2019 / 10 / 21

前回は画面を表すクラスを定義し、その中で Ractive.js を使って画面表示する例を紹介しました。今回は画面遷移をどうやって実現するかを説明します。

ルーティング

Web で複数の画面を扱うには、経路制御（ルーティング）が必要です。 HTML をサーバー側で用意する場合、画面の数だけ html ファイルをサーバーに配置することで、Apache や nginx などが適切にルーティングしてくれます。

一方、ブラウザだけで動作するシングルページアプリケーション(SPA)の場合、このルーティングの仕組みを JavaScript で実現する必要があります。

メジャーな SPA フレームワークは独自のルーティングの仕組みを持っています。

active.js にはルーティングの仕組みが用意されていないので、公式サイトでも言及されているように page.js というライブラリを使用します。

page.js の導入

page.js はとても軽量なルーターです。script 要素で読み込むだけでも使えますが、今回は npm 経由でアプリに追加してみます。

$ npm install page
(中略)

+ page@1.11.5
added 3 packages from 1 contributor and audited 1787233 packages in 8.33s
found 0 vulnerabilities

TypeScript 用の型定義は@types/page で用意されているので、こちらも追加します。

$ npm install --save-dev @types/page
(中略)

+ @types/page@1.8.0
added 1 package from 2 contributors and audited 1787234 packages in 7.581s
found 0 vulnerabilities

main.ts でルーティングの設定を記述する

npm での追加が完了したら、早速ルーティングの設定を記述しましょう。まず main.ts の先頭でインポートします。

// page.jsを読み込む
import page from "page";
import { TopPage } from "./TopPage";

次に初期設定を行います。この初期設定を忘れると後の処理でエラーとなり、画面に何も表示されなくなります。なお script 要素で読み込む場合はこの処理はいらないようです（該当 Issue はこちら)

(<any>page).configure({ window: window });

次はルーティングの設定です。第 1 引数にパスを書き、第 2 引数にそのパスでアクセスしたときに実行する関数を渡します。この設定を画面の数だけ書いていきます。

// / でアクセスされたら、TopPageを表示する
page("/", () => {
  new TopPage().onCreate();
});

最後にルーティングの開始です。引数なしで page()を呼びます。内部で今の URL 欄を確認し、パスに応じた関数を呼んでくれます。サーバー側の設定が必要ですが、この仕組みのおかげでリロードやリンクからのアクセスにも対応できます。

// ルーティングの開始
page();

main.tsの全体は次のようになっていればOKです。

// page.jsを読み込む
import page from "page";
import { TopPage } from "./TopPage";

(<any>page).configure({ window: window });

page("/", () => {
  new TopPage().onCreate();
});

page();

ここまで記述したら、ビルドを忘れずにやっておきましょう。

$ npm run build

> demoapp@1.0.0 build /(中略)/demoapp
> webpack

Hash: a686a5b15fef509ed7d4
Version: webpack 4.41.1
Time: 1473ms
Built at: 2019-10-20 22:45:58
  Asset     Size  Chunks             Chunk Names
main.js  562 KiB    main  [emitted]  main
Entrypoint main = main.js
[./src/TopPage.ts] 466 bytes {main} [built]
[./src/main.ts] 441 bytes {main} [built]
    + 3 hidden modules

確認する

今までは dist フォルダ内の index.html を直接開くことで動作確認ができました(file:///形式)。しかし page.js 導入後はルーティングの仕組みがある関係で、サーバーを介しての動作確認が必要となります。手っ取り早い方法として python でサーバーを起動し、それ経由で確認する方法があります。

python 2 系と python 3 系で使用するコマンドが異なります。各コマンドの最後の数値(20080)はポート番号です。

cd dist

# python 2系
$ python2 -m SimpleHTTPServer 20080
# python 3系
$ python3 -m http.server 20080

サーバーが起動したら、ブラウザで localhost:20080 にアクセスしてみましょう。

まとめ

page.js の導入方法について説明しました。次回は画面遷移の方法と、パラメータの扱い方を説明します。