画面遷移してみよう

前回はアプリに page.js を導入してみました。今回は複数の画面を用意し、画面遷移を実現してみましょう。

2番目の画面を定義する

画面遷移を扱うには、当然ですが遷移先となる 2番目の画面が必要です。すでにここまでの説明でトップ画面を TopPage クラスとして定義しているので、それに倣って 2番目の画面を SecondPage クラスとして定義してみます。

import Ractive from "ractive";

export class SecondPage implements IPage {
  private ractive!: Ractive;

  onCreate(): void {
    this.ractive = new Ractive({
      el: "#container",
      template: "#secondTemplate",
    });
  }
}

id=secondTemplate を表示するよう指定しているので、 index.html にもテンプレートを追加しておきます。

<script id="topTemplate" type="text/plain">
    <h1>Top page</h1>
</script>
<!-- 2番目の画面用 -->
<script id="secondTemplate" type="text/plain">
    <h1>Second page</h1>
</script>

ルーティングの設定をする

2番目の画面クラスが定義できたら、次はルーティングの設定をします。 ルーティングの設定は main.ts で行っていました。今回は /second というパスでアクセスされたときに、SecondPage が使用されるよう設定してみます。

page("/", () => {
  new TopPage().onCreate();
});
// 2番目の画面を表示するパス
page("/second", () => {
  new SecondPage().onCreate();
});

画面遷移のためのボタンを TopPage に追加する

クリック/タップすると SecondPage に遷移するボタンを用意しましょう。わかりやすさのためにbutton を使用しますが、onclick の設定できる要素であれば何でもよいです。クリック時に発生させるイベント名も指定しておきます。

<script id="topTemplate" type="text/plain">
          <h1>Top page</h1>
          <button on-click="toSecond">次の画面へ</button>
      </script>

画面遷移の関数を呼ぶ

今回の記事で一番大事な部分です。TopPage にボタンを追加し、イベントも設定したので次はイベントでどんな処理をするかを記述します。今回は 2番目の画面に遷移するイベントとなるよう、次のように記述します。

import Ractive from "ractive";
import page from "page";

export class TopPage implements IPage {
  private ractive!: Ractive;

  onCreate(): void {
    this.ractive = new Ractive({
      el: "#container",
      template: "#topTemplate",
      on: {
        toSecond: () => {
          // /second に遷移する
          page("/second");
        },
      },
    });
  }
}

page.js を用いた画面遷移は、page()関数に遷移先となるパスを記述するだけです。これでボタンをタップ/クリックすると 2 番目の画面が表示されます。ブラウザバックにも対応しており、ブラウザの戻るボタンを押すとちゃんと TopPage の内容が表示されます。

まとめ

page.jsによる画面遷移のやり方を説明しました。 画面遷移そのものは関数を呼ぶだけなので、ある程度プログラミングに慣れた方であれば使い方に困ることはないでしょう。