react-router と ReactCSSTransitionGroup を組み合わせてページ遷移時のアニメーションを実装したメモ。
サンプルを参考に進めれば容易であった。
しかし細かい挙動に凝り始めると、提供されているハイレベルなAPIでは難しくなってくる。
今回はページ遷移時にスクロールポジションが維持されてしまう問題の修正に少しハマった。
結果的に react-router 側を微調整して完了となった。
1 window.scrollTo(0, 0)} history={createBrowserHistory()}> 2 ...</Router>
これでページ遷移時に強制的にスクロールポジションをトップへ固定することができる。
ただこの方法だとブラウザバックの際にも window.scrollTo(0, 0) が発動してしまいユーザビリティが損なわれる。
結果的に下記の方法を採用した。
1const history = createBrowserHistory();
2history.listen(location => {
3 setTimeout(() => {
4 if (location.action === 'POP') {
5 return;
6 }
7
8 window.scrollTo(0, 0);
9 });
10});
11
12const routes = (
13 // ... </Router>
14);これでブラウザバック時は前回のスクロールポジションを維持することができる。
ちなみに下記のようなものもあるらしい。
Reactベースで構築されたSPAの場合、Google Analyticsを用いたアクセス解析には一工夫が必要となる。
単純にアナリティクスのコードを読み込むだけではなく、ルーティングへのフックを設置しなければならない。
今回はreact-routerを採用しているので、それを基準にライブラリを探すと、以下が見つかった。
react-gaはapiが豊富で、Mozilla内でドッグフーディングされているようで信頼もできる。コード量は一番多いかな。
3.73 KB
react-g-analyticsは機能をpageviewの送信にしぼっている分、シンプルな作り。
ga-react-routerはとにかくシンプル。Webpack前提の作りだが、かなり軽量だ。
一番サクっと導入できそうなのはreact-g-analyticsだが、その前にreact-routerのアップグレードからしたほうがよさそうだ。
最終的には react-ga を採用し、以下を参考に実装を行った。
Reactを用いたUniversal(Isomorphic)なサイトのクリティカルパスCSSを自動化したい。
以前Nunjucksを使用したパターンはうまく機能したので、同様の手法でReactの実装を考えた。
すなわち、Cssの更新にフックしGulp経由で静的なHTMLを生成し、それに対してCriticalを実行させクリティカルパスの部分を別のHTMLとして抽出し、インポートするという手法であった。
しかし、Critical 0.7.0がリリースされPenthouseのようにURL指定にて実行が可能になった。
というよりPenthouseを内蔵した様子。
ともかくこれによりCriticalと変わらぬ実行結果をURL指定で取得できそうなので、ぜひこの機能を利用したい。
オフラインファーストで実装を試みるべく、ServiceWorkerを導入した。
このワードが唱えられたころ、実現するための技術としてはAppCacheやWebStrageが紹介されていたが、現在は当然ServiceWorkerへとスライドしている。
コードの記述量は多くなってるが、低レベルのAPI群を提供することで遥かに柔軟になっており、実質ES6で書けるのでストレスもほとんどない。
導入にあたって現時点での仕様とサンプルを調べたが、GoogleやMozillaなどブラウザベンダが提供してるものが質と信頼性が高いと思われるので、ここのみに視野を絞り参考にした。
また下記記事も実践的な考え方の参考になった。
レスポンシブイメージは低解像度のpngとwebpをキャッシュさせれば十分であろう。
SPAを構築する際にはやはりWebpackの豊富な機能が生きる。
今作成しているWebアプリはUniversalでFluxでi18nなWebアプリとなっており、無計画にファイルを結合し続けると初期リロードの問題が出てくる。
3度の法則にしたがって開発過程でも適切なモジュール分割を容易に行うことができるのはWebpackの大きな強みだと感じた。
CSSや画像はちょっと考えがあり、ローダーを使用していない。