Svelte/SvelteKit で i18n 多言語対応を行う #TypeScript

Svekte/SvelteKit でアプリケーションを開発していると、多言語での対応が必要になってくることも多いと思います。

今回の記事では、Svekte/SvelteKit で多言語対応をする初期設定の流れについて解説できればと思います。

多言語対応ライブラリ

svelte, i18n あたりで検索すると、以下の 2 つのライブラリが見つかりました。

今回の記事では、sveltekit-i18n のライブラリを使って、実際に i18n 多言語対応をしてみたいと思います。

多言語対応実装用のプロジェクトを用意する

多言語対応を動かすプロジェクトを用意します。

ここでは、以下の SvelteKit のページのデモアプリを使ってみます。

https://kit.svelte.jp/

$ npm create svelte@latest my-app

SvelteKit の demo アプリを使用し、TypeScript を使用する形にしました。

◇  Which Svelte app template?
x  SvelteKit demo app
x
◇  Add type checking with TypeScript?
x  Yes, using TypeScript syntax

$ cd my-app
$ npm install

この状態で以下コマンドを実行し、

$ npm run dev

以下にアクセスすることで、デモアプリが表示されると思います。

http://<アプリが動いているサーバーのホスト名>:5173/

ライブラリのインストール

以下コマンドで sveltekit-i18n のライブラリをインストールします。

$ npm i sveltekit-i18n

多言語表示処理を動かしてみる

src/lib/translations のディレクトリを作ります。言語関連の設定が入ります。

$ mkdir src/lib/translations

src/lib/translations/en および src/lib/translations/ja のディレクトリを作ります。英語と日本語の実際の表示内容が入ります。

$ mkdir src/lib/translations/en
$ mkdir src/lib/translations/ja

src/lib/translations/en/common.json のファイルを作って、以下を記述します。

{
	"welcome": "Welcome to SvelteKit App!"
}

src/lib/translations/ja/common.json のファイルを作って、以下を記述します。

{
	"welcome": "SvelteKit のアプリへようこそ！"
}

src/lib/translations/translations.ts のファイルを作って、以下を記述します。

import i18n from 'sveltekit-i18n';

/** @type {import('sveltekit-i18n').Config} */
const config = ({
  loaders: [
    {
      locale: 'en',
      key: 'common',
      loader: async () => (
        await import('./en/common.json')
      ).default,
    },
    {
      locale: 'ja',
      key: 'common',
      loader: async () => (
        await import('./ja/common.json')
      ).default,
    },
  ],
});

export const { t, locale, locales, loading, loadTranslations } = new i18n(config);

src/routes/+layout.svelte にて、言語設定を読み込む記述を追加します。

<script>
	import Header from './Header.svelte';
	import './styles.css';

	// 以下 import を追加
	import { loadTranslations } from '$lib/translations/translations';

	// 言語読み込み設定を追加
	const defaultLanguage = "en"
	loadTranslations(defaultLanguage, "/"); 
</script>

src/routes/+page.svelte にて　<script> の中に以下 import 文を入れます。

import { t } from '$lib/translations/translations';

また、同ファイルにて、{$t('common.welcome')} の形で言語に応じた文言を画面上に表示する設定を追加します。

<section>
	<h1>
		<span class="welcome">
			<picture>
				<source srcset={welcome} type="image/webp" />
				<img src={welcome_fallback} alt="Welcome" />
			</picture>
		</span>

		to your new<br />SvelteKit app
	</h1>

	<!-- ここで言語に応じた文言を表示してみる -->
	<p>{$t('common.welcome')}</p>

	<h2>
		try editing <strong>src/routes/+page.svelte</strong>
	</h2>

	<Counter />
</section>

ここまで出来たら、以下のように英語版の文言が表示されることを確認できると思います。

次に、src/routes/+layout.svelte にて、言語を日本語にしてみます。

const defaultLanguage = "ja"

すると、以下のように日本語版の文言が表示されることを確認できると思います。

これで多言語対応の最初の一歩が踏み出せたかなと思います。

動的に言語を切り替えてみる

一旦、src/routes/+layout.svelte にて、デフォルト言語を英語に戻しておきます。

const defaultLanguage = "en"

src/routes/+page.svelte の　<script> の中の import 文を更新し、language の変数および変更時の関数を定義します。

locale.set で言語を設定することで、画面上の言語情報が更新される動きになると思われます。

<script>
    ...
    import { t, locale } from '$lib/translations/translations';

    let language = "en";
    const onChange = () => {
    	locale.set(language);
    }
</script>

言語に応じた文言の表示部分の下あたりに、言語を選択するプルダウンを設置します。

	<!-- ここで言語の文言を表示してみる -->
	<p>{$t('common.welcome')}</p>

    <!-- 言語選択用のプルダウン -->
	<select bind:value={language} on:change={onChange}>
			<option value="en">en</option> 
			<option value="ja">ja</option> 
	</select>

すると、以下のような画面となり、プルダウンで言語を切り替えた際、その言語に応じた文言が画面上に表示されることを確認できると思います。

さいごに

今回は、sveltekit-i18n のライブラリを使って、実際に i18n 多言語対応をする基本的な流れについてまとめてみました。

この記事が誰かの一助になれば幸いです。