🐈
辞書を作って効率よく英語→日本語変換させてみた
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
Discussion