Meteorでiron-routerを使ってルーティングさせてみよう

こんにちは！Meteorで何か開発していますか？ついにMeteorもv0.9.0を超えましたね！
Meteorでルーティングしたいですか？したいですよね？僕はルーティングしたいです。

Meteorのルーティングは`iron-router`というパッケージを使うのがデファクトスタンダードとなっています。

それでは早速実装してみましょう。

# パッケージを追加して開発の準備をする

## 使うパッケージ

Meteorのパッケージはここで検索できます。
[atmospherejs](http://atmospherejs.com/)

- [iron:router](http://atmospherejs.com/iron/router) ... ルーターです。
- [mizzao:bootstrap-3](http://atmospherejs.com/mizzao/bootstrap-3) ... Bootstrap3です。

今回はUIフレームワークとして`Bootstrap3`も一緒に使います。

## Meteorプロジェクトをつくる

Meteorのバージョンは`v0.9.0.1`です。

```shell-session
% meteor --version
Meteor 0.9.0.1
```

Meteorプロジェクトを生成します。

```shell-session
% meteor create router-demo
% cd router-demo
```

こんな感じになってればおｋです！

```shell-session
.meteor
router-demo.css
router-demo.html
router-demo.js
```

## パッケージを追加する

iron-routerパッケージを追加しましょう。

```shell-session
% meteor add iron:router
Refreshing package metadata. This may take a moment.
  added iron:dynamic-template at version 0.3.0
  added iron:router at version 0.9.1
  added iron:layout at version 0.3.0
  added iron:core at version 0.3.2

iron:router: Routing specifically designed for Meteor
```

追加されました！Bootstrap3パッケージを追加しましょう。

```shell-session
% meteor add mizzao:bootstrap-3
Refreshing package metadata. This may take a moment.
  added mizzao:bootstrap-3 at version 3.2.0

mizzao:bootstrap-3: HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
```

追加されましたね！これでパッケージの追加は完了です。

## 動作確認してみる

ここで動作確認をしてみましょう。
`meteor` or `meteor run` でMeteorプロジェクトを実行できます。僕は`meteor`コマンド派です。

```shell-session
% meteor
[[[[[ ~/github/meteor-demo/router-demo ]]]]]

=> Started proxy.
=> Started MongoDB.
=> Started your app.

=> App running at: http://localhost:3000/
```

## ブラウザでみてみよう

![1.png](https://qiita-image-store.s3.amazonaws.com/0/45283/01503e41-4c19-d025-6757-6f4f1025347d.png)

でました！やりましたね！

# Routerの設定をする

それではRouterの設定をしましょう。
とりあえずシンプルにこんな感じにしてみます。

- `http://localhost:3000/`
- `http://localhost:3000/about`

トップページとAboutページをつくってみます。何もない場合は`not found`を表示してみましょう。

## router-demo.html

```html
<head>
  <title>router-demo</title>
</head>

<template name="layout">
  <div class="container">
    {{> yield}}
  </div>
</template>

<template name="notFound">
  <h1>not found</h1>
</template>

<template name="home">
  <h1>Welcome!!</h1>
</template>

<template name="about">
  <h1>About me</h1>
</template>
```

## router-demo.js

```js
if (Meteor.isClient) {

    Router.configure({
        // templateの名前を設定します
        layoutTemplate: 'layout',
        notFoundTemplate: 'notFound'
    });

    // Controllerになります
    var HomeController = RouteController.extend({
        template: 'home'
    });

    var AboutController = RouteController.extend({
        template: 'about'
    });

    Router.map(function() {

        this.route('home', { // templateの名前になります
            path: '/', // URLパスになります
            controller: HomeController // Controllerを渡します
        });

        this.route('about', {
            path: '/about',
            controller: AboutController
        });

    });

}
```

こんな感じです。

## アクセスしてみる

それでは正しくルーティングできるか確認してみましょう。

`http://localhost:3000/`

![2.png](https://qiita-image-store.s3.amazonaws.com/0/45283/8857518c-59f5-ac7a-1b5f-caf4618490ab.png)

`http://localhost:3000/about`

![3.png](https://qiita-image-store.s3.amazonaws.com/0/45283/b798f4b2-517a-1274-80a8-7750ae222942.png)

`http://localhost:3000/hoge`

![4.png](https://qiita-image-store.s3.amazonaws.com/0/45283/d44bd292-faf6-3973-5b5e-e976e0bdb21a.png)

こんな感じで表示されればおｋです！

# 動的ページ(パラメータID)のルーティング設定

Webサービスやアプリをつくる場合は静的なページよりも動的に書き出すことが多いはずです。
パラメータIDによるルーティング設定はこんな感じになります。

## router-demo.html

```html
<head>
  <title>router-demo</title>
</head>

<template name="layout">
  <div class="container">
    {{> yield}}
  </div>
</template>

<template name="notFound">
  <h1>not found</h1>
</template>

<template name="home">
  <h1>Welcome!!</h1>
</template>

<template name="about">
  <h1>About me</h1>
</template>

<template name="show">
  <h1>{{.}}</h1>
</template>
```

## router-demo.js

```js
if (Meteor.isClient) {

    Router.configure({
        layoutTemplate: 'layout',
        notFoundTemplate: 'notFound'
    });

    var HomeController = RouteController.extend({
        template: 'home'
    });

    var AboutController = RouteController.extend({
        template: 'about'
    });

    var ShowController = RouteController.extend({

        template: 'show',

        data: function() {
            return this.params._id;
        }

    });

    Router.map(function() {

        this.route('home', {
            path: '/',
            controller: HomeController
        });

        this.route('about', {
            path: '/about',
            controller: AboutController
        });

        this.route('show', {
            path: '/show/:_id',
            controller: ShowController,
        });

    });

}
```

動的ルーティングの場合は`/show/:_id`みたいな感じに書きます。で、`route`が`params`をもっていて、`params`の中に`_id`が格納されています。
`data`に値を渡すとテンプレート側で`{{.}}`みたいな感じでデータバインディングされます。

実際はCollectionに`_id`を渡してデータをとってきたりするのに使います。
例えばこんな感じです。

```js
var UsersController = RouteController.extend({

    template: 'user',

    data: function() {
        return UsersCollections.findOne(this.params._id);
    }

});
```

## 確認してみる

`http://localhost:3000/show/q12w3e4r5t6y`

![5.png](https://qiita-image-store.s3.amazonaws.com/0/45283/25df7c98-bade-2705-c2b4-36032b9ea15c.png)

表示されたら完成です！

# {{pathFor}} ヘルパーを使ってナビゲーションをつくる

せっかくここまでつくったのでナビゲーションほしいですよね！つくりましょう。

テンプレート側でナビゲーションを設置してリンクをはる場合は、`{{pathFor}}`ヘルパーを使います。

ナビゲーションはBootstrap3のコンポーネントを使います。

## router-demo.html

```html
<head>
  <title>router-demo</title>
</head>

<template name="layout">
  {{> navigation}}
  <div class="container">
    {{> yield}}
  </div>
</template>

<template name="navigation">
  <nav class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="container">
      <ul class="nav navbar-nav">
        <li><a href="{{pathFor 'home'}}">Home</a></li>
        <li><a href="{{pathFor 'about'}}">About</a></li>
      </ul>
    </div>
  </nav>
</template>

<template name="notFound">
  <h1>not found</h1>
</template>

<template name="home">
  <h1>Welcome!!</h1>
</template>

<template name="about">
  <h1>About me</h1>
</template>

<template name="show">
  <h1>{{.}}</h1>
</template>
```

## 確認してみる

![6.png](https://qiita-image-store.s3.amazonaws.com/0/45283/458212f5-ad18-4a7f-602b-1f4bcb5707cf.png)

ナビゲーションがでました！ナビゲーションをクリックしてリンクがとべるかも確認しましょう。とべましたか？無事とべたら完成です！

# まとめ

こんな感じで`iron-router`を使うとMeteorで簡単にルーティングできます。
詳しいドキュメントはこちらをみてください。

[Iron Router DOCS](https://github.com/iron-meteor/iron-router/blob/devel/Guide.md)

[今回つくったソースはこちら](https://github.com/funnythingz/meteor-demo/tree/master/router-demo)