画面クラスを作る

2019 / 10 / 14

ここまでの説明で Web アプリ開発の準備はできました。今回から簡単なアプリを作ってみましょう。

画面を定義する

まず、「画面とはどのようなものか」という定義を作っておきます。ここでは「これから画面の詳細を作ってくださいね」と呼びかけできるものを「画面」と定義してみます。TypeScript ではインターフェースが定義できるので、次のようなインターフェースにしてみましょう。 IPage.ts というファイルで main.ts と同じフォルダにいれておきます。

interface IPage {
  onCreate(): void;
}

トップ画面クラスを定義する

次に、アプリの入り口となるトップ画面を表示するTopPageクラスを定義してみましょう。 main.ts と同じフォルダに TopPage.ts というファイルを追加します。

export class TopPage implements IPage {
  onCreate(): void {
    throw new Error("Method not implemented.");
  }
}

このクラスは外部から使用されるので、export をつけておきます。exportについての詳しい説明は今回の記事の後半で説明します。

npm で Ractive.js を追加する

実際の画面組み立ては以前説明した Ractive.js を使用しましょう。次のコマンドでプロジェクトに追加します。今回は成果物で使用するパッケージなので --save-dev はつけません。

$ npm install ractive

+ ractive@1.3.8
added 1 package and audited 1787230 packages in 9.935s
found 0 vulnerabilities

Ractive.js で画面を表示させる

TopPage の onCreate() で画面を表示させる処理を記述しましょう。Ractive.js を使うので、TopPage.ts の 1 行目に import Ractive from "ractive";を追加します。

import Ractive from "ractive";

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

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

index.html にテンプレートを記述する

TopPageのonCreate()では、Ractive.jsを使ってid=container の位置に id=topTemplate の内容を貼り付けると記述しました。それにあわせて dist/index.html も修正しましょう。

<html>
  <body>
    <!-- 貼り付け先 -->
    <div id="container"></div>
    <!-- 貼り付ける内容 -->
    <script id="topTemplate" type="text/plain">
      <h1>Top page</h1>
    </script>
    <script src="./main.js"></script>
  </body>
</html>

main.ts でトップ画面を表示させる

アプリは main.ts から実行されます。このままではトップ画面を表示するための処理が実行されないので、次のように main.ts を変更します。

import { TopPage } from "./TopPage";

new TopPage().onCreate();

npm run build でビルドし、dist/index.html を表示させるとちゃんと topTemplate の内容が表示されれば OK です。

import/export とは？

ところで、今回は説明なしに import/export を使用しました。これらは ES6 module の機能です。ファイルが 1 つのモジュール（部品）となります。

まずは export です。これは指定した関数やクラスを外部に公開するために使用します。export をつけなかった場合、関数や変数などはモジュール内（＝ファイル内）でのみ参照可能になります。

次に import です。これは指定したモジュールから、export された関数やクラスなどを読み込むために使用します。今回は次の 2 パターンが登場しました。

import Ractive from "ractive";
import { TopPage } from "./TopPage";

まずは from の部分から説明します。from は文字通り、どのモジュールから読み込むかを指定します。"./TopPage"のように相対パスを指定した場合、import しようとしているモジュールの位置を基準に探します。"ractive"のようにモジュール名だけを記述した場合、 npm install で追加した node_modules から探します。

次に import の部分です。{}をつけるパターンとつけないパターンがあります。{}をつけるパターンは、モジュール中で export されているもののうち、どれを使うかを記述します。{}をつけないパターンは、読み込むモジュールで export default されているものをどの名称で使用するかを記述します。ractive モジュールでは Ractive というクラスが export default で指定されているので、{}をつけないパターンで読み込みます。

ビルドに webpack を使用すると、この import を解析し最終的に 1 つの js ファイルにしてくれます。この恩恵をうけるため、webpack を導入する例をこのシリーズで紹介しています。

まとめ

これまで学んだことを用いて最初の画面を表示するところまで記述しました。なぜ npm や webpack を使用しているのか、徐々に理解できてきたのではないでしょうか。