作成:2024-03-07最終更新:2025-10-03

GitHubでアプリケーションテンプレートを見る

このページにはアプリケーションテンプレートが用意されています。

このドキュメントをあなたの好きなAIアシスタントに参照してくださいChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

このページとあなたの好きなAIアシスタントを使ってドキュメントを要約します

AIアシスタントにMCP Serverを追加

Intlayer MCPサーバーを統合することで、ChatGPT、DeepSeek、Cursor、VSCodeなどから直接ドキュメントを取得できます。

MCPサーバーのドキュメントを表示

このページのコンテンツはAIを使用して翻訳されました。

英語の元のコンテンツの最新バージョンを見る

このドキュメントを編集

このドキュメントを改善するアイデアがある場合は、GitHubでプルリクエストを送信することで自由に貢献してください。

ドキュメントへのGitHubリンク

コピー

ドキュメントのMarkdownをクリップボードにコピー

IntlayerでAstroを翻訳する | 国際化（i18n）

GitHubのアプリケーションテンプレートをご覧ください。

Intlayerとは？

Intlayerは、最新のウェブアプリケーションにおける多言語対応を簡素化するために設計された革新的なオープンソースの国際化（i18n）ライブラリです。

Intlayerを使うと、以下が可能です：

コンポーネントレベルで宣言的な辞書を使用して翻訳を簡単に管理できます。
メタデータ、ルート、コンテンツを動的にローカライズできます。
自動生成された型によりTypeScriptサポートを確保し、オートコンプリートやエラー検出を向上させます。
動的なロケール検出や切り替えなどの高度な機能を活用できます。

AstroでIntlayerをセットアップするステップバイステップガイド

ステップ1：依存関係のインストール

パッケージマネージャーを使って必要なパッケージをインストールします：

npm install intlayer astro-intlayer# Optional: add React island supportnpm install react react-dom react-intlayer @astrojs/react

intlayer
設定管理、翻訳、コンテンツ宣言、トランスパイル、およびCLIコマンドのための国際化ツールを提供するコアパッケージ。
astro-intlayer
Astroとの統合プラグインを含み、IntlayerをViteバンドラーと連携させるほか、ユーザーの優先ロケールの検出、クッキー管理、URLリダイレクトの処理を行うミドルウェアも提供します。

ステップ2: プロジェクトの設定

アプリケーションの言語を設定するための設定ファイルを作成します：

intlayer.config.ts

コードをコピー

コードをクリップボードにコピー

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [      Locales.ENGLISH,      Locales.FRENCH,      Locales.SPANISH,      // 他のロケールをここに追加    ],    defaultLocale: Locales.ENGLISH,  },};export default config;

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [      Locales.ENGLISH,      Locales.FRENCH,      Locales.SPANISH,      // 他のロケールをここに追加    ],    defaultLocale: Locales.ENGLISH,  },};export default config;

この設定ファイルを通じて、ローカライズされたURLの設定、ミドルウェアのリダイレクション、クッキー名、コンテンツ宣言の場所と拡張子の指定、コンソールでのIntlayerログの無効化などを行うことができます。利用可能なパラメータの完全なリストについては、設定ドキュメントを参照してください。

ステップ3: Astro設定にIntlayerを統合する

intlayerプラグインを設定に追加します。

astro.config.ts

コードをコピー

コードをクリップボードにコピー

// @ts-checkimport { intlayer } from "astro-intlayer";import { defineConfig } from "astro/config";// https://astro.build/configexport default defineConfig({  integrations: [intlayer()],});

// @ts-checkimport { intlayer } from "astro-intlayer";import { defineConfig } from "astro/config";// https://astro.build/configexport default defineConfig({  integrations: [intlayer()],});

intlayer() Astro統合プラグインは、IntlayerをAstroと統合するために使用されます。これは、コンテンツ宣言ファイルのビルドを確実に行い、開発モードでそれらを監視します。Astroアプリケーション内でIntlayerの環境変数を定義します。さらに、パフォーマンスを最適化するためのエイリアスも提供します。

ステップ4: コンテンツを宣言する

翻訳を格納するためのコンテンツ宣言を作成および管理します：

src/app.content.tsx

コードをコピー

コードをクリップボードにコピー

import { t, type Dictionary } from "intlayer";import type { ReactNode } from "react";const appContent = {  key: "app",  content: {    title: t({      en: "Hello World",      fr: "Bonjour le monde",      es: "Hola mundo",    }),  },} satisfies Dictionary;export default appContent;

import { t, type Dictionary } from "intlayer";import type { ReactNode } from "react";const appContent = {  key: "app",  content: {    title: t({      en: "Hello World",      fr: "Bonjour le monde",      es: "Hola mundo",    }),  },} satisfies Dictionary;export default appContent;

コンテンツ宣言は、contentDir ディレクトリ（デフォルトは ./src）に含まれている限り、アプリケーションのどこにでも定義できます。また、コンテンツ宣言ファイルの拡張子（デフォルトは .content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}）に一致している必要があります。

詳細については、コンテンツ宣言のドキュメントを参照してください。

ステップ 5: Astro でコンテンツを使用する

intlayer からエクスポートされるコアヘルパーを使って、.astro ファイル内で辞書を直接利用できます。

src/pages/index.astro

コードをコピー

コードをクリップボードにコピー

<!-- astro -->---import { getIntlayer } from "intlayer";import appContent from "../app.content";const { title } = getIntlayer('app');---<html lang="en">  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width" />    <title>{title}</title>  </head>  <body>    <h1>{title}</h1>  </body></html>

<!-- astro -->---import { getIntlayer } from "intlayer";import appContent from "../app.content";const { title } = getIntlayer('app');---<html lang="en">  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width" />    <title>{title}</title>  </head>  <body>    <h1>{title}</h1>  </body></html>

ステップ6: ローカライズされたルーティング

ローカライズされたページを提供するために、動的なルートセグメントを作成します。例えば src/pages/[locale]/index.astro のようにします。

src/pages/[locale]/index.astro

コードをコピー

コードをクリップボードにコピー

<!-- astro -->---import { getIntlayer } from "intlayer";const { title } = getIntlayer('app');---<h1>{title}</h1>

<!-- astro -->---import { getIntlayer } from "intlayer";const { title } = getIntlayer('app');---<h1>{title}</h1>

Astroの統合は、開発中にViteのミドルウェアを追加し、ロケール対応のルーティングや環境定義を支援します。独自のロジックや、intlayer の getLocalizedUrl のようなユーティリティ関数を使って、ロケール間のリンクを作成することも可能です。

ステップ7: お気に入りのフレームワークを使い続ける

お気に入りのフレームワークを使い続けて、アプリケーションを構築してください。

Intlayer + React: Intlayer with React
Intlayer + Vue: Intlayer with Vue
Intlayer + Svelte: Intlayer with Svelte
Intlayer + Solid: Intlayer with Solid
Intlayer + Preact: Intlayer with Preact

TypeScriptの設定

Intlayerはモジュール拡張を使用してTypeScriptの利点を活かし、コードベースをより強固にします。

Autocompletion

Translation error

TypeScriptの設定に自動生成された型が含まれていることを確認してください。

tsconfig.json

コードをコピー

コードをクリップボードにコピー

{  // ... 既存のTypeScript設定  "include": [    // ... 既存のTypeScript設定    ".intlayer/**/*.ts", // 自動生成された型を含める  ],}

{  // ... 既存のTypeScript設定  "include": [    // ... 既存のTypeScript設定    ".intlayer/**/*.ts", // 自動生成された型を含める  ],}

Git設定

Intlayerによって生成されたファイルは無視することを推奨します。これにより、Gitリポジトリへのコミットを避けることができます。

これを行うには、以下の指示を .gitignore ファイルに追加できます。

# Intlayer によって生成されたファイルを無視する.intlayer

VS Code 拡張機能

Intlayer での開発体験を向上させるために、公式の Intlayer VS Code 拡張機能 をインストールできます。

VS Code Marketplace からインストール

この拡張機能は以下を提供します：

翻訳キーの オートコンプリート。
欠落している翻訳の リアルタイムエラー検出。
翻訳されたコンテンツの インラインプレビュー。
翻訳を簡単に作成・更新できる クイックアクション。

拡張機能の使い方の詳細については、Intlayer VS Code 拡張機能のドキュメントを参照してください。

さらに進むために

さらに進むためには、ビジュアルエディターを実装するか、CMSを使ってコンテンツを外部化することができます。

Tanstack Start

React CRA