🏀 SPAでパスをシンボル化・関数化する、というアイディア

あんまり小さいサービスではやらないのですが、一定程度大きなSPAを作るとパスの管理をしたくなってきます。

すなわち /aaa/bb というパスを文字列ではなくシンボルとして扱い、必要に応じて参照を取得したりリファクタリングしたりということが容易にしたいのです。

パスをシンボル化するメリット

• パスの生成ロジックの共通化
• パスの変更時に、変更するべき箇所を「検索・置換」ではなく、エディタの定義の変更機能によって、安全かつ網羅的に変更できる

実際どんな形？

定義

export const routes = {
  articles: (id?: string) => id ? `/articles/${id}` : '/articles',
  about: `/about`,
  tags: (slug?: string) => slug ? `/tags/${slug}` : '/tags',
  services: (key?: string) => key ? `/services#${key}` : '/services'
} as const;

このようにすることで、このような参照を得ることができます。(文字のケースは諸説あり）

こうすることで、さまざまな箇所で直接

router.push(`/articles/${id}`);

としていた部分を、

router.push(routes.articles(id));

という形に置き換えできます。

もし、ReactやVueのRouterを使う場合でも、

{
  articles: (id?: string) => ({
    pathname: id ? `/articles/${id}` : '/articles',
  })
}

こうしてしまえば

router.push({...routes.article(id), state: {myData: 'data'}});

のような利用も可能です。

以上がパスのシンボル化のアイディアでした。