やること
- 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によりデザインを調整する