This page covers Elm 0.18

ルーティングの紹介

アプリケーションにルーティングを追加しましょう。 Elm Navigation packageとUrlParserを使用します。

• ナビゲーションはブラウザの場所を変更し、変更に対応する手段を提供します
• UrlParserはルートマッチャーを提供します

最初にパッケージをインストールします。

elm package install elm-lang/navigation 1.0.0
elm package install evancz/url-parser 1.0.0

NavigationはHtml.programをラップするライブラリです。 Html.programのすべての機能といくつかの余分な機能を備えています：

• ブラウザ上でのロケーションの変更を待ち受る
• 場所が変更されたときにメッセージをトリガする
• ブラウザの場所を変更する方法を提供する

フロー

ルーティングの仕組みを理解するための図をいくつか示します。

初期レンダリング

(1) ページが最初に読み込まれるとき、 Navigationモジュールは現在のLocationを取得し、それをアプリケーションのinit関数に送ります。 (2) init関数中でこのlocationをパースし一致するRouteを得ます。 (3,4) 一致した Routeをアプリケーションの初期モデルに保存し、このモデルをNavigationに返します。 (5,6) この初期モデルを送ることでNavigationはビューをレンダリングします。

ロケーションが変更されたとき

(1) ブラウザの閲覧ロケーションが変更されると、ナビゲーション・ライブラリーはイベントを受け取ります (2) OnLocationChangeメッセージがupdate関数に送られます。このメッセージには新しいLocationが含まれます。 (3,4) updateでは、 Locationを解析し、一致するRouteを返します。 (5) updateからアップデートRouteを含む更新されたモデルを返します。 (6,7) Navigationは、アプリケーションを通常通りレンダリングします