Ant DesignのUIを日本語化する

この投稿ではAnt DesingのUIを日本語化する方法を説明します。ここで示すコードサンプルはNext.js+TypeScriptでの実装例です。

Ant DesignのUIを日本語化する方法

日本語化するには、ConfigProviderに日本語翻訳データ"antd/lib/locale/ja_JP"を渡すだけです:

pages/_app.tsx

import { ConfigProvider } from "antd";
import jaJP from "antd/lib/locale/ja_JP";

// ...

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ConfigProvider locale={jaJP}>
      <Component {...pageProps} />
    </ConfigProvider>
  );
}

翻訳できているか、試しにフォームを作って確認します:

pages/equipments/new.tsx

import { Button, Form, Input } from "antd";

const { Item } = Form;

export default function New() {
  return (
    <Form>
      <Item name="name" label="名前" rules={[{ required: true }]}>
        <Input />
      </Item>
      <Item wrapperCol={{ offset: 8, span: 16 }}>
        <Button type="primary" htmlType="submit">
          保存
        </Button>
      </Item>
    </Form>
  );
}

このフォームを送信してみると、バリデーションエラーの文言が日本語化されているのが分かります:

翻訳されるのはAnt Designのコンポーネントのメッセージだけのようで、アプリ固有の翻訳はAnt Design自体はサポートしていないようです。

この投稿で扱ったコードを含んだアプリ全体のコードはGitHubでご覧いただけます:

サンプルで作ったフォームの動作デモはVercelにホスティングしてあるので試せます: