Nwht0xn1

amakanでページ遷移時に表示しているプログレスバーの実装Created on 2016-09-01 by r7kamura

image

https://amakan.net/ で利用しているプログレスバーの実装について (2016年9月1日時点)。見づらいかもしれませんが、画面遷移時、画面上部にプログレスバーの青い線が走ります。

利用しているライブラリ

NProgressというライブラリを利用しています。プログレスバーのライブラリを探すとこれがヒットすることが多い。Turbolinksと併用されることも多いようです。

ページ遷移が発生する行動

amakanでは、以下の2つの内のいずれかの行動を取ると、XHRを利用したページ遷移が発生します。

  • 相対リンクをクリックする
  • ブラウザの戻るボタンを押す

ページ遷移時の具体的な処理内容

ページ遷移の際、具体的には以下の処理が行われます。

  1. 遷移先のURLを元に描画すべきコンポーネントを探す
  2. コンポーネントの描画に必要なデータをサーバから取得する
  3. 探したコンポーネントと取得したデータを利用して画面を更新する

なぜプログレスバーが必要になるのか

これら一連の処理を行う際、以下の理由によりプログレスバーの利用が期待されます。

  • サーバとの通信を伴うので時間が掛かってしまう
  • 画面が更新されるので利用者にそのことを伝えたい

NProgressを利用したプログレスバーの表示実装

NProgressというライブラリを利用すれば、処理の開始時と終了時に関数を呼び出すことで、処理の間にそれなりに適切にプログレスバーを表示してくれます。実装としては、まず前述した一連の処理を、Promiseを返す関数にまとめます。そして、関数を受け取ってその前後にプログレスバーを開始・終了させるような関数を定義します。簡単な例だとこういう感じになります。

import NProgress from "nprogress";

/**
 * @param {Function} callback
 */
function progress(callback) {
  NProgress.start();
  callback().then(() => {
    NProgress.done();
  }).catch(() => {
    NProgress.done();
  });
}

この実装は、以下のように使われます。

progress(() => {
  const component = findComponentFromPath(path);
  return component.getProps().then((props) => {
    this.setState({
      component,
      props,
    });
  });
});

課題に感じていること

callbackを受け取って処理するというのが少しださくて、Promiseを利用して何か上手く書けないか考えましたが、あまり良い案は浮かびませんでした。