svelte/svelte5手抜き国際化 の履歴(No.1)

概要：英語版と日本語版を同時に開発したい†

どうせ個人での開発なのでロケールファイルを切り出したりせず、手抜きでやりたい

日本語版と英語版を作れればいい

実現したい機能†

• /some/path/to/file ならブラウザの設定を読んで自動で表示言語を選択
• /ja/some/path/to/file や /en/some/path/to/file を読めば指定の言語で表示
• 言語切替ボタン

を実現したい

パスにオプションパラメータ locale を含める†

３つの URL で実質的に同じ内容を表示することになるので１つにまとめたい

• /some/path/to/file
• /ja/some/path/to/file
• /en/some/path/to/file

src/routes/locale=locales/some/path/to/file というパスにファイルを置けばこれが実現できる。

• locale=locales でオプショナルなパラメータを指定する https://learn.svelte.jp/tutorial/optional-params
• lib/params/locales.ts にて export const match: ParamMatcher しておく

lib/params/locales.ts

LANG: ts
// locales[0] will be the default locale
export const locales = ['en', 'ja'] as const;

export type Locale = (typeof locales)[number];

// param が locales に含まれるかどうかを返す
export const match: ParamMatcher = (param) => {
  return (locales as readonly string[]).includes(param);
};

これで URL からロケールを拾えるようになった。