SvelteKitで国際化（多言語化）

出版日: 2024年5月12日

背景

ウェブサイトへのトラフィックを増やすために、ウェブサイトに言語サポートを追加することを検討するかもしれません。

たとえば、以下のチャートは、2024年5月12日現在の私のウェブサイトのページごとの訪問数を示しています。

ほとんどの訪問は英語ページに行われました（全体的なランディングページが英語であるため）。しかし、トルコ語と日本語のバージョンへの訪問もかなりあります。これらの潜在的な訪問を見逃したくはありません。

また、ChatGPTの翻訳は最近非常に良くなっているため、コンテンツを翻訳するために必要な作業量も以前ほど高くはありません。ChatGPTの翻訳は完璧ではないことが通常ですが、コンテンツを翻訳する際の素晴らしい作業基盤を提供しています。

SvelteKitでウェブサイトを国際化する方法

このトピックについて調査を行っていないにもかかわらず、可能な限りスムーズに3言語をウェブサイトに有効化するための戦略を説明します。アプローチは3つの柱に分かれます。

1. ルーティング戦略

私のウェブサイトは、www.danyelkoca.com/<language>/<something>という構造になっています。

. 実際のルートは以下のようになります：

このようなルーティング方法は、srcフォルダーの中のroutesフォルダーにあるフォルダー構造によって実現できます：

私のウェブサイトは3つの言語を持っているため、srcフォルダーの中に3つのサブフォルダーがあります。

各サブフォルダーにはほぼ同じ内容が含まれていますが、これは必須ではありません。たとえば、英語のみでproductsページを持っている場合、enフォルダーの下にproductsサブフォルダーのみを持つことが意味があります。

2. 状態管理戦略

ルーティングが完了したら、ユーザーの選択した言語を追跡する必要があります。ほとんどの場合、各言語に個別のページがないからです。たとえば：

let language = "en"; // jp or tr is possible
let greeting = language == "en" ? "Hello" : language == "jp" : "こんにちは"  : "Selam";

もちろん、各ページで変数を宣言するのではなく、SvelteKitのwritable storeを使用します。

 // stores/main.js
import { writable } from 'svelte/store';
export const language = writable('en');

このストア変数は、必要に応じてコンポーネントでインポートされ、以下のように使用されます：

<script>
	import { language } from '$stores/main'
	let title = $language == "en" ? "About" : $language == "jp" ? "私について" : "Hakkimda";
</script>

<svelte:head>
	<title>{title}</title>
</svelte:head>

3. コンポーネント戦略

さて、異なる言語ごとに異なるルートがある場合、各言語ごとのコンテンツをどのように提供しますか？つまり、各ページと言語ごとに異なるpage.svelteがある場合です。

en/contact/page.svelte
jp/contact/page.svelte
tr/contact/page.svelte

ページで提供されるコンテンツが類似している場合、1つのコンポーネントを持ち、条件に基づいて言語を調整します。

したがって、上記の例の各page.svelteは同じContactコンポーネントを参照します：

<script>
	import Contact from 'components/Contact.svelte';
</script>

<Contact />

そして、Contactコンポーネント内で、ストアされた言語変数に基づいてコンテンツを動的に作成します。

 // components/Contact.svelte
<script>
	import { language } from '$stores/main'
</script>

<h1>
		{$language == 'en' ? 'Contact Me' : $language == 'jp' ? '問い合わせ' : 'İletişim'}
</h1>

ただし、一部のページは言語に応じて非常に異なるコンテンツを持つため、1つのページで条件に基づいてコンテンツを作成することは悪夢です（たとえば、ブログ投稿）。その場合は、言語ごとに個別のコンポーネントを作成することをお勧めします。

4. その他の考慮事項：ストアの更新

最後に考慮する必要があるのは、ストア内のlanguage変数を追跡することです。ウェブサイトには言語ボタンがあり、次のように機能します。

<div>
	<button on:click={() => language.set('en')}>English</button>
	<button on:click={() => language.set('jp')}>Japanese</button>
	<button on:click={() => language.set('tr')}>Turkish</button>
</div>

これは簡単に管理できます。ただし、言語の保存された値はenなどの初期値を持っています。ユーザーが直接日本語やトルコ語のページにアクセスした場合でも、ページが表示される前に言語変数を更新する必要があります。これにより、ユーザーに適切なコンテンツが表示されます。

これには、通常はデータをロードするために使用されるSvelteKitのpage.jsを使用します。このページはpage.svelteがロードされる前に実行され、任意の状態変更を行うのに最適な場所です：

// routes/jp/{something}/page.svelte
import { language } from '$stores/main';
language.set('jp');

トルコ語や英語のルートに対しても同様の操作が必要であることに注意してください。英語の場合、デフォルトのストア値が英語であるため、これは不要だと考えるかもしれません。しかし、ユーザーが言語を日本語に変更し、英語のサイトを訪れる場合があるため、言語が日本語に固定されることを防ぎたいです。そのような状況を防ぎたいと思います。