JavaScriptのroutingを作ってみた

この記事はJ2complexed Advent Calender 2017　8日目の記事です。

はじめに

会社で婚姻届製作所と出生届製作所のサービスに携わってます。
出生届製作所はドラスティックに作り直してJavaScriptをes6で書き直したりしましたが、婚姻届製作所の方はまだそこに手が付かない状態が続いてました。（ただしまだjQuery依存があるので、最終的にはこれもなくしたい）
ようやく最近になってes6へ徐々に移行できつつある中、routingが必要になったので作ってみました。

routingを考える

シンプルに考えて「URLのパスにマッチしたら指定の関数を実行する」で作ります。
他にも（SPAだと特に）queryやhashでroutingしたい場合もあるでしょうが、それはまた今度の機会に。

というわけで作ってみました。

サンプルコード

class Routing {
  constructor(map) {
    const path = location.pathname;
    if(map[path]) this[map[path]]();
  }
  indexFunction() {
    // 中略
  }
  listFunction() {
    // 中略
  }
}

こんな感じで Routing クラスを作ります。
で、実行。

new Routing({
  "/": "indexFunction",
  "/list": "listFunction"
});

keyをパスにして、valueを実行したい関数名にします。
この関数名を Routing クラスに用意します。
で、その関数の中でぐるぐるコードを書くなりすればよいです。
簡単ですねー。