React + Nextでpathの構成情報を型定義する

はじめに

お疲れ様です。
@いけふくろうです。

どのWebアプリケーションでもpath（URL）は必要となりますので、pathに関する構成情報を型定義させてみました

解決したかったこと

path名がソース内にハードコードされていることが散見されており、path名が変わった際のメンテナビリティが下がる懸念があった

実施したこと

• routerの定義を一元管理させた
• pathを受け取って、合致するrouteの情報を返却できるようにした
• routerの構成情報を型定義して、path名の指定誤り（タイポや存在しないパス名など）を防止できるようにした

環境

• React v18.0.0
• Next v12.1.5

実装内容

routerの構成情報

interface Router {
  path: PATH;
  description: string;
  breadcrumb: {
    text: string;
  };
  isAuth: boolean;
}

export interface Routers {
  defaultRoute: PATH;
  routers: Router[];
}

export const PATH = {
  SYSTEM_ERROR: "/system-error",
  NOT_FOUND: "/404",
  MAINTENANCE: "/maintenance",
  TOP_PAGE: "/",
} as const;

export type PATH = typeof PATH[keyof typeof PATH];

export const RouterConfiguration: Routers = {
  defaultRoute: "/",
  routers: [
    {
      path: "/system-error",
      description: "システムエラー",
      breadcrumb: {
        text: "",
      },
      isAuth: false,
    },
    {
      path: "/404",
      description: "404",
      breadcrumb: {
        text: "",
      },
      isAuth: false,
    },
    {
      path: "/maintenance",
      description: "システムメンテナンス",
      breadcrumb: {
        text: "",
      },
      isAuth: false,
    },
    {
      path: "/",
      description: "TOPページ",
      breadcrumb: {
        text: "TOP",
      },
      isAuth: true,
    },
  ],
};

export const findRouteByPath = (path: PATH): Router | undefined => {
  return RouterConfiguration.routers.find((route) => route.path === path);
};

export const getIsAuthByPath = (path: PATH): boolean => {
  const route = findRouteByPath(path);
  if (route === undefined) return false;
  return route.isAuth;
};

解説

• 構成情報として、path名、説明、パンくずリストの情報、認証要否を定義しています
• 現状では、以下のメソッドを作りましたが、ユースケースに応じて、メソッドを生やせば良いかと思います

findRouteByPath

• 受け取ったpathに合致するrouterの定義情報を返却します

getIsAuthByPath

• 受け取ったpathの認証要否プロパティを返却します
  • ユースケースとしては、画面へアクセスがあった際にpages/xxxが反応することになりますので、該当画面の認証要否を確認するためのメソッドです

使用例

import {
  findRouteByPath,
  getIsAuthByPath,
  PATH,
} from "@/utils/const/Router";
import { useRouter } from "next/router";

const router = useRouter();

1. 現在のpathに応じた制御

  if (router.pathname === PATH.TOP_PAGE) {
    ...
  }

2. pathの構成情報を取得する

  const route = findRouteByPath("/");
  console.log("route: ", route);

• 取得結果

{
  path: "/",
  description: "TOPページ",
  breadcrumb: {
    text: "TOP",
  },
  isAuth: true,
}

• 補完が効きますのでpath指定誤りが防止できます
  

3. 認証が必要な画面であるかを取得する

  console.log("top page isAuth:", getIsAuthByPath("/"));
  // top page isAuth: true
  console.log("system error page isAuth:", getIsAuthByPath("/system-error"));
  // system error page isAuth: false

おわりに

アプリケーション開発当初にこういった仕掛けを入れておかないとなかなか開発途中に入れ込むのは厳しくなってくるかなとも思いますので、よろしければ是非参考にいただければ幸いです！

以上です。
本記事が何かの一助になれば幸いです。