Svelte入門：リファレンス CLI -paraglide-

今日は、SvelteKitのリファレンスについて解説して います。

背景

SvelteKitのリファレンスについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。

CLIツール（sv）

コマンドラインインターフェース（CLI）であるsvは、Svelteアプリケーションの作成と保守のためのツールキットです。

EParaglideとは

Paraglideは、Inlangが提供するコンパイラベースの国際化（i18n）ライブラリです。ツリーシェイク可能なメッセージ関数を生成し、小さなバンドルサイズ、非同期ウォーターフォールなし、完全な型安全性などの特徴を持っています。

使用方法

npx sv add paraglide

導入するもの

• Inlangプロジェクト設定
• paraglide Viteプラグイン
• SvelteKitのrerouteとhandleフック
• app.html内のtext-directionとlang属性
• .gitignoreの更新
• Paraglideの使い方を示すオプションのデモページ

オプション

availableLanguageTags

サポートしたい言語をIETF BCP 47言語タグとして指定します。

npx sv add --paraglide=en,es

demo

Paraglideの使い方を示すオプションのデモページを生成するかどうか。

npx sv add --paraglide=demo

使用例

基本的なセットアップ（英語と日本語）

cd my-sveltekit-project
npx sv add --paraglide=en,ja

これにより、英語と日本語をサポートするParaglideの基本設定が追加されます。

デモページ付きセットアップ（複数言語）

npx sv add --paraglide=en,ja,es,fr,de,demo

このコマンドは、5つの言語（英語、日本語、スペイン語、フランス語、ドイツ語）をサポートし、使い方を示すデモページも含むParaglide設定を追加します。

メッセージの定義と使用

Paraglideを追加した後、通常はproject.inlang/messagesディレクトリに言語ごとのメッセージファイルが作成されます。例えば：

project.inlang/messages/en.json:

{
  "welcome": "Welcome to our app!",
  "hello_name": "Hello, {name}!"
}

project.inlang/messages/ja.json:

{
  "welcome": "アプリへようこそ！",
  "hello_name": "こんにちは、{name}さん！"
}

これらのメッセージはコンポーネント内で以下のように使用できます：

<script>
  import { m } from '$paraglide/messages';
</script>

<h1>{m.welcome()}</h1>
<p>{m.hello_name({ name: 'ユーザー' })}</p>

言語切り替え

<script>
  import { setLanguageTag } from '$paraglide/runtime';
  import { languageTag } from '$paraglide/runtime';
</script>

<select value={$languageTag} on:change={(e) => setLanguageTag(e.target.value)}>
  <option value="en">English</option>
  <option value="ja">日本語</option>
  <option value="es">Español</option>
  <option value="fr">Français</option>
  <option value="de">Deutsch</option>
</select>

Paraglideは、小さなバンドルサイズと型安全性を備えた効率的な国際化ソリューションを提供します。SvelteKitと統合されたこのアドオンを使用することで、多言語サポートを簡単にプロジェクトに追加できます。

おわりに 

今日は、 SvelteKitのリファレンスについて解説しました。