FallbackReactとReduxを学ぶために、開発環境というかプロジェクトテンプレートをスクラッチから作っている。(最終的な成果はGitHubに置いた。Sagaをセットアップした。(2018/11/21更新)フロントエンドのルーティングWebアプリケーションにおけるルーティングとは、クライアントがリクエストしたURLに対して、返すべきリソースを選択する処理。サーバサイド)でやってたけど、バックエンドでリソースを返すということは、ページ遷移が発生するということなので、ネイティブアプリケーションに比べてUXが落ちてしまう。ページ遷移を発生させないようにAjaxでサーバとやりとりしつつ、ちまちまDOMをいじるのは大変。DOMをごっそり書き換えて、ページ遷移なしに画面を切り替えることはできるけど、ナイーブにやると以下のような問題がある。URLと画面の紐づけがなく、URLを指定して直接開けないブラウザの進む、戻るが使えない宣言的に書けないこういった問題に対応するため、フロントエンドでのルーティング技術が生まれた。フロントエンドのルーティングでは、URLが変わってもリクエストはサーバに飛ばない。代わりに、フロントエンドフレームワークがそのURLを見て、適切な画面を選んでレンダリングする。ハッシュベースのルーティングURLが変わってもリクエストがサーバに飛ばないとは何事か。それを実現するやりかたは2通りある。古くはハッシュ(#、フラグメント識別子)をつかったやり方。http://example.com/でUIをサーブしているとすると、http://example.com/#fooとか、http://example.com/#barで別々のページの状態を表現する。ハッシュ以降が変わってもブラウザがサーバにリクエストを投げることはないので、クライアント側でハンドリングできる。(因みに、ハッシュを含んだURLをブラウザのアドレスバーに入れても、ハッシュを除いたURLでリクエストが送られる。この挙動の根拠となる規格はRFCなどを調べても見つからなかったけど...)ハッシュの書き換えは、JavaScriptで以下のようにしてできる。UIのボタンをクリックしたときなんかに実行してURLを変えて、その上で画面を更新してやればいい。そのあと、ブラウザの戻るボタンなんかを押されると書き換える前のURLにもどるわけだけど、これを検知するためにsetInterval()とかで定期的にlocation.hashを監視してたりした。APIによるルーティングハッシュベースのルーティングは見るからにしょぼい。URLのハッシュ以降しか使えないのもしょぼいし、内部の処理も泥臭い。APIがでて変わった。APIはJavaScriptのAPIで、ブラウザの履歴を操作できる。"/foo/bar");こんな感じのを実行すると、URLが/foo/barに変わる。(が、もちろんサーバにはリクエストは飛ばない。ブラウザの戻るボタンを押すと、popstateイベントが発生するので、それにイベントハンドラを登録しておけば、もとのURLに戻った時にも適時画面を書き換えられる。popstateイベントからは、pushState()に渡したstateオブジェクトを取得できる。ところで、ブラウザのアドレスバーに/foo/barを直打ちするとどうなるかというと、普通にWebサーバを設定しておくと、/foo/bar/index.htmlを返そうとして、無いので404エラーになっちゃう。/index.html)をしといて、そこからJavaScriptを呼んで、URLを読み取って、画面を描いてやればいい。APIを使ったフロントエンドルーティングをするフレームワークやライブラリが色々出てきた。Routerがフロントエンドルーティングを実現してくれる。Routerは、宣言的にフロントエンドルーティングを実現できるReactコンポーネントのライブラリ。Routerにはhistoryが必要。Routerはv5.0.1が入った。RouterのUsageを参考に、ReduxのReducerにrouterを追加し、MiddlewareにrouterMiddlewareを追加して、historyのインスタンスをStoreとつなぐ。ReduxのProviderの下に追加する。Routerのコンポーネントを使えるようになった。RouterのRedirectコンポーネントとRouteコンポーネントを使って、/にアクセスしたら/homeにリダイレクトして、/homeで今までと同じ画面をレンダリングするようにする。App.jsxをHome.jsxにリネームして、Homeコンポーネントに変える。Home;で、App.jsxはルーティングを定義するコンポーネントとして作り直す。Fallbackを有効にしてやる。});こうしておくと、/index.html以外にリクエストが来た場合、404エラーを返す代わりに/index.htmlを返してくれるようになる。SplittingとFlowとJestとEnzyme。