リンクは型安全に生成できます

リンク切れはWebにおける大きな課題の1つです。

React、Vue、Svelteなどのライブラリ、ディレクトリベースのルーティングとファイルベースのルーティング、様々な手法でWebサイト、Webアプリを作ることでしょう。

Webアプリを作成している途中で、特定のルートを別のパスでマッチさせるよう変更した場合、その影響範囲をすべて把握し、確実にすべてのファイルを修正することは可能でしょうか。また、それはどのようにして保証されるのでしょうか。

リンクの生成元は一元管理されるべきです。

私はTypeScriptを使用できる全ての環境で機能するリンク生成の手法を作成しました。

はじめに、依存関係をインストールします。

npx jsr add @kokomi/link-generator

次に、リンクを生成するために必要なオブジェクトを作成します。

import {
  link_generator,
  type RouteConfig,
} from "@kokomi/link-generator";

const route_config = {
  products: {
    path: "/products?color",
    children: {
      product: {
        path: "/:id",
      },
    },
  },
} as const satisfies RouteConfig;

最後に、リンクを生成するための関数を取得します。

const link = link_generator(route_config);

これでリンクを完全に型安全に生成する準備が整いました。

それではリンクを生成します。

link("products"); // => /products
link("products/product", { id: "item1" }); // => /products/item1
link("products/product", undefined, { color: "red" }); // => /products?color="red"

link関数の全ての引数は型安全です。このために使用される型推論の回数は最小限に抑えているためプロジェクト全体の型生成を遅延させることはありません。また、Mapデータからリンクは生成されるため非常に高速です。

APIに関する詳しいドキュメントはlink-generatorのリポジトリをご覧ください。

この投稿をご覧いただき、ありがとうございました。