blog.bouzuya.net

2015-05-11 bouzuya/bbn-react の Router をつくった

bouzuya/bbn-react の Router

bouzuya/bbn-react の Router をつくった。

最低限の履歴管理とルーティングのためのモジュール。 History API を使って履歴 (URL) をそれらしく書き換えるようにした。

機能としては次の通り。

  • エントリーを開いたときに URL を /yyyy/mm/dd/ になるようにした
  • /#/yyyy/mm/dd/ にアクセスしたときに /yyyy/mm/dd/ に URL を書き換えつつエントリーを開くようにした
  • ブラウザの戻る・進むに対応してページを変えるようにした

ルーティングの設定がいけてない。とりあえず動くといった状況。

History API には不満がすこしあって

  • pushState はあるけど popState はない (popState はイベント)
  • popState 的な動作のためには window.history.back() する
  • popState は戻る・進むで兼用

このあたりの兼ね合いが難しい。最終的には go (任意のパスに進むもしくは戻る) と back (履歴をひとつ戻る) と start (window.addEventListener('popstate', ...)) の 3 つを提供しつつ、go を制御するための簡易なルーティング機能を付けて RouteService としてつくった。

HistoryService として分離しても良いのかもしれない。ぼくの感覚としては外から見たときの操作としてはスマートフォンを含めたブラウザの場合

  • 指定したページに進む(サイトの構造上は戻る場合もある)
  • ブラウザの履歴を進む
  • ブラウザの履歴を戻る

という3つの操作でなりたっていると思う。

基本的には goback で事足りるようになっている。 go が画面タップ back がバックボタンのイメージ。iOS はゴミなのでバックボタンがないけどね。

他に用意するとすれば「指定したページに進む」の中でもよくある操作として「ホームに進む」操作は追加しても良いかもしれない。Android におけるタスクに相当するものは Web ページで言うならメニューが近いのかな。今回はメニューを提供しないつもりだけど。

その他

せきがひどいので明日は病院に行く。