やること

• RailsチュートリアルのCh5 をAurelia2 で作成する

ToDo

• Ch5 のワイヤーフレームから作成するコンポーネントを分割する

• 各コンポーネントを作成する

ワイヤーフレームをコンポーネントに分割する

共通部分であるヘッダーとフッターとその他のページとに分ける。その上で下記のコンポーネントでアプリケーションを構成したい。

• shared/header
• shared/footer
• pages/home
• pages/help
• pages/login
• pages/about
• pages/content
• pages/news

makesコマンドで作成したsrcディレクトリ内にsharedディレクトリを作成し、さらにその中にheaderディレクトリ、footerディレクトリを作成する。同様にpagesディレクトリとその中に各ページ用のディレクトリを作成する。

コンポーネントの作成

各コンポーネントはそれぞれ個別の役割を負うものとする。例えばヘッダーコンポーネントであれば、ヘッダーナビゲーションをユーザーに提供する、等。

コンポーネント作成の基本

コンポーネントは、view-model を提供するためのJavaScript(TypeScript)のクラスとレンダリング対象となるHTMLで構成される。
具体的には、jsまたはtsファイルとhtmlファイルのセットが最小構成になる。例えば、home-pageを作成する場合、

home-page.ts
home-page.html

となる。これに追加で各コンポーネント用のcssファイルも追加する。この際、ファイル名がコンポーネントの名称となる。名称には必ず“-”を使用して命名する必要がある。また、tsファイルとhtmlファイルの名称は拡張子を除いて同一である必要もある。

HomePageコンポーネントの実装

/*
HomePage コンポーネントで使用するモデル
*/
export class HomePage {
}

<div class="center jumbotron">
   <h1>Welcome to the Sample App</h1>

   <h2>
     This is the home page for the Ruby on Rails Tutorial sample application.
   </h2>
</div>

必要最低限の実装はおこなった。次は、アプリケーションのルートコンポーネントで新しく作成したHomePageコンポーネントを使用したい。

アプリケーションルートコンポーネントへのインポート

最初にアプリケーションを作成されるファイルにmain.tsがある。

import Aurelia from 'aurelia';
import { MyApp } from './my-app';

Aurelia
  .app(MyApp)
  .start();

Aurelia は上記のコードでインポートされているmy-app.ts ファイルのクラスMyAppをアプリケーションのルート、大元のコンポーネントとして構成している。先ほど作成したHomeコンポーネントもただファイルを作成しただけではアプリケーションに組み込まれていない。作成したコンポーネントをアプリケーションに組み込む方法はいくつかあるが、今回は使用するコンポーネントのhtmlファイルに直接インポートする方法で実装する。
（別章の実装時に今みているmain.tsファイルに登録する方法に変更する。）

my-appコンポーネントへのインポート

自動生成されたmy-app.htmlのコードをすべて削除して、下記のコードに書き換える。

<import from="./pages/home/home-page"></import>
<home-page></home-page>

コンポーネントを利用するためには、利用するコンポーネントのhtmlファイルにタグを追加し、importタグ内で使用したいコンポーネントを指定する。

import from="コンポーネントの存在する相対パス/コンポーネント名称"

コンポーネントの名称は先ほど作成したファイル名となる。続いて、使用するコンポーネントのタグを記載する。

アプリケーションをサーブする

最後にnpm startコマンドでアプリケーションをローカルで起動して、先ほど作成したhomeページの記載内容がレンダリングされているか確認する。

次にやること

• 残りのコンポーネントを作成する
• 複数のコンポーネントをルータによりルーティングする
• Bootstrapによりデザインを調整する