辞書を作って効率よく英語→日本語変換させてみた

urlのパラメータを日本語に変換するのはめんどくさい

urlから取得したパラメータをそのページのタイトルにしたいときなどあると思いますが、パラメータが増えれば増えるほど英語→日本語の変換の作業が膨大になってしまいますよね。
しかし、一度辞書を作ればかなりきれいに楽に書けます。
↓例えば以下のように、http://localhost:3000/fighter/mario というurlからパラメータを取得してmarioを日本語変換してタイトルにしたときですが、意外とめんどくさい...

辞書の作り方

// 英語名と日本語名の対応表
export const characterTranslations: { [key: string]: string } = {
  mario: "マリオ",
  donkey_kong: "ドンキーコング",
  link: "リンク",
  samus: "サムス",
  dark_samus: "ダークサムス",
  yoshi: "ヨッシー",
  kirby: "カービィ",
  fox: "フォックス",
  pikachu: "ピカチュウ",
  // ...以下省略
};

// 英語名を日本語に変換する関数
export const translateCharacterName = (englishName: string): string => {
  return characterTranslations[englishName] || englishName;
};

辞書の使い方

使い方の例①

import { translateCharacterName } from "@/utils/translateCharacterName";

export default function Home({ params }: { params: { id: string } }) {
    return(
        <>
            //urlがhttp://localhost:3000/fighter/marioの時、マリオが出力される。
            <p>{translateCharacterName(params.id)}</p>
        </>
    )
}

使い方②

"use client";

import React from "react";
import { characterTranslations } from "@/utils/translateCharacterName";

const Fiters = () => {
  return (
    <div>
        // 配列に変換してからmap関数で展開
        {Object.entries(characterTranslations).map(
          ([englishName, japaneseName]) => (
            <Link　href={`/fighter/${englishName}`}　key={englishName}>
              <div>
                <p>{japaneseName}</p>
              </div>
            </Link>
          )
        )}
    </div>
  );
};

ちなみにObject.entries()でオブジェクトから配列に変換するとき、中身はこんな感じになっています。

const characterArray = [
  { englishName: "mario", japaneseName: "マリオ" },
  { englishName: "donkey_kong", japaneseName: "ドンキーコング" },
  { englishName: "link", japaneseName: "リンク" },
  // ... 他のキャラクター
];
```j