追記2016/09/06
この記事は古くなっています。
公式からブラウザルーティングのライブラリが出ているので、こちらを検討してみてください。
elm-lang/navigation: Routing for SPAs, the Elm way
Elmでブラウザルーティングっぽいデモをつくる。
- アドレスの後ろにハッシュ(#)が付いたリンクは、アドレスの特定の部分(同id名)にリンクするハッシュリンクになる。
- history apiという、ブラウザの戻る進むを操作するapiがある。
ブラウザルーティングとは上記のような技術とかいろいろ組み合わせて、ルーティングっぽいインターフェイスで、リンクごとにページをモジュールのように使えるようにしたもの。
Elmにもそういった機能と見た目を提供するライブラリ（elm-history,elm-router）があるので簡単に作ってみる。
ブラウザデモhttp://giisyu.github.io/elmHistoryTest/
ソース https://github.com/giisyu/elmHistoryTest
elm-historyライブラリ
history api のラップライブラリ。
setPath : String -> Task error ()
ブラウザにパスをセット、履歴も変わる。今回使わない。
path : Signal String
リロードなどすると、現在のパス（ルートなら"/"）をSignalする。しかし"#hoge"みたいなハッシュリンクをsetPathしても反応無いので今回は使わない。
hash : Signal String
setPathにリンクをセットした時、ハッシュリンクをクリックした時にSignalする。setPathに"#"のみをセットした時や現在パスがルートの時は、""を返す。
流れ
上記のような挙動（chrome）なので以下のようになりました。
ナビゲーションボタンはハッシュ付きリンクを叩くようにする。
navbar : Html
navbar =
navbarDefault' ""
[ containerFluid_
[ navbarHeader_ []
, div [class "collapse navbar-collapse"]
[ ul [ class "nav navbar-nav" ]
[ li [] [ a [href "#" ] [text "page-1" ] ]
, li [] [ a [href "#/page2" ] [text "page-2" ] ]
, li [] [ a [href "#/page3" ] [text "page-3" ] ]
]
]
]
]
タブが押されアドレスが変わると、hashからハッシュ付きアドレスがSignalされる。
main = view <~ (Debug.log "hash" <~ hash)
その値を使って、画面を切り替える。
ちなRouterは、Route a = String -> aというStringから処理を振り分ける関数型Routerを作って文字列を渡す、とパースして振り分けてくれる。振り分けるときにヒット時の文字列を除いた残りも振り分け先に渡すので、入れ子で複雑なパスのルーティングも可能です。ルーティングっぽい見た目。
mainRoute : Route Html
mainRoute =
match
[ "#/page2" :-> page2
, "#/page3" :-> page3
] page1
view address =
div [] [ navbar
, mainRoute address]
話を戻して、以上でできました。
hashを使って、冒頭のgifのようなリロードも出来る切り替え画面が作れます。SEOとかについてはよくわからない。
ソース全文になります。github : https://github.com/giisyu/elmHistoryTest
（bowerでbootstarapを入れて使ってます。app.elmはapp.jsにコンパイルします。）
すごく簡単にルーティングっぽい見た目と画面の切り替えを実装できました。
ElmおもしろいよElm。
あと補足として、elm-historyライブラリはすべてのブラウザ環境とかを考慮しない簡単なデモ用のライブラリです。Elmが世のフレームワークのような規模、網羅性を持つようになるのはいつだろうかと思いつつ以上です。