著者:

作成:2025-04-18最終更新:2026-05-31

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

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

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

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

バージョン履歴

"Solid の useIntlayer API の使用法を直接プロパティアクセスに更新"
v8.9.02026/5/4
"initコマンドを追加"
v7.5.92025/12/30
"履歴の初期化"
v5.5.102025/6/29

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

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

このドキュメントを編集

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

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

コピー

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

IntlayerでVite and Solidを翻訳する | 国際化（i18n）

Name: Intlayer
Author: Intlayer

www.youtube.com

代替手段ではなく Interlayer を使用する理由

@solid-primitives/i18n や i18next などの主要なソリューションと比較して、Intlayer は次のような統合された最適化を備えたソリューションです。

フルソリッドカバレッジ

Intlayer は、コンポーネントレベルのコンテンツスコープ、リアクティブ変換、および国際化のスケーリング (i18n) に必要なすべての機能を提供することで、Solid と完全に連携するように最適化されています。

バンドルサイズ

大量の JSON ファイルをページにロードするのではなく、必要なコンテンツのみをロードします。 Intlayer は、バンドルとページのサイズを最大 50% 削減するのに役立ちます。

保守性

アプリケーションのコンテンツのスコープを設定すると、大規模なアプリケーションの メンテナンスが容易になります。コンテンツコードベース全体を確認するという精神的な負担を負うことなく、単一の機能フォルダーを複製または削除できます。さらに、Intlayer は完全に型指定されており、コンテンツの正確性を保証します。

AI エージェント

コンテンツを同じ場所に配置すると、大規模言語モデル (LLM) によって 必要なコンテキストが削減されます。 Intlayer には、翻訳の欠落をテストする CLI、LSP、MCP などのツールスイートも付属しています。および エージェントスキル により、AI エージェントの開発者エクスペリエンス (DX) がさらにスムーズになります。

オートメーション

AI プロバイダーの費用で、選択した LLM を使用して CI/CD パイプラインで自動化を変換します。 Intlayer は、コンテンツ抽出を自動化する コンパイラー と、バックグラウンドでの翻訳を支援する Web プラットフォームも提供します。

パフォーマンス

大量の JSON ファイルをコンポーネントに接続すると、パフォーマンスと反応性の問題が発生する可能性があります。 Intlayer は、ビルド時のコンテンツの読み込みを最適化します。

非開発によるスケーリング

Intlayer は単なる i18n ソリューションではなく、自己ホスト型ビジュアルエディター と 完全な CMS を提供します。 リアルタイムで多言語コンテンツを管理できるようになり、翻訳者、コピーライター、その他のチームメンバーとのコラボレーションがシームレスになります。コンテンツはローカルおよび/またはリモートに保存できます。

ViteとSolidアプリケーションでIntlayerをセットアップするステップバイステップガイド

1
依存関係のインストール

npmを使って必要なパッケージをインストールします：
bash
コードをコピー
コードをクリップボードにコピー
npm install intlayer solid-intlayernpm install vite-intlayer --save-devnpx intlayer init
- intlayer
  
  国際化のための設定管理、翻訳、コンテンツ宣言、トランスパイル、およびCLIコマンドのツールを提供するコアパッケージ。
- solid-intlayer IntlayerをSolidアプリケーションと統合するパッケージです。Solidの国際化のためのコンテキストプロバイダーとフックを提供します。
- vite-intlayer IntlayerをViteバンドラーと統合するための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;
```
この設定ファイルを通じて、ローカライズされたURL、ミドルウェアのリダイレクション、クッキー名、コンテンツ宣言の場所と拡張子、コンソールでのIntlayerログの無効化などを設定できます。利用可能なパラメータの完全なリストについては、設定ドキュメントを参照してください。

Vite設定にIntlayerを統合する

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

vite.config.ts

コードをコピー

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

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import { intlayer } from "vite-intlayer";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), intlayer()],
});

3
Vite 設定に Intlayer を統合する

intlayer プラグインを設定に追加します。
vite.config.ts
コードをコピー
コードをクリップボードにコピー
```
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import { intlayer } from "vite-intlayer";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), intlayer()],
});
```
intlayer() は Vite プラグインで、Intlayer を Vite に統合するために使用されます。コンテンツ宣言ファイルのビルドを保証し、開発モードでそれらを監視します。Vite アプリケーション内で Intlayer の環境変数を定義します。さらに、パフォーマンス最適化のためのエイリアスも提供します。
4
コンテンツを宣言する

翻訳を格納するためのコンテンツ宣言を作成および管理します。
src/app.content.tsx
コードをコピー
コードをクリップボードにコピー
```
import { t, type Dictionary } from "intlayer";

tsx fileName="src/app.content.tsx" contentDeclarationFormat="typescript"
import { t, type Dictionary } from "intlayer";

const appContent = {
  key: "app",
  content: {},
} satisfies Dictionary;

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

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

Intlayerをコードで利用する

アプリケーション全体でコンテンツ辞書にアクセスします：

src/App.tsx

コードをコピー

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

import { createSignal, type Component } from "solid-js";import solidLogo from "./assets/solid.svg";import viteLogo from "/vite.svg";import "./App.css";import { IntlayerProvider, useIntlayer } from "solid-intlayer";const AppContent: Component = () => {  const [count, setCount] = createSignal(0);  const content = useIntlayer("app");  return (    <>      <div>        <a href="https://vitejs.dev" target="_blank">          <img src={viteLogo} class="logo" alt={content.viteLogo.value} />        </a>        <a href="https://www.solidjs.com/" target="_blank">          <img            src={solidLogo}            class="logo solid"            alt={content.solidLogo.value}          />        </a>      </div>      <h1>{content.title}</h1>      <div class="card">        <button onClick={() => setCount((count) => count + 1)}>          {content.count({ count: count() })}        </button>        <p>{content.edit}</p>      </div>      <p class="read-the-docs">{content.readTheDocs}</p>    </>  );};const App: Component = () => (  <IntlayerProvider>    <AppContent />  </IntlayerProvider>);export default App;

Solidでは、useIntlayerはaccessor関数（例：`content.）を返します。リアクティブコンテンツにアクセスするには、この関数を呼び出す必要があります。

alt、title、href、aria-labelなどのstring属性でコンテンツを使用する場合は、関数の値を次のように呼び出す必要があります：
html
コードをコピー
コードをクリップボードにコピー
<img src="{content.image.src.value}" alt="{content.image.value}" /><img src="{content.image.src.toString()}" alt="{content.image.toString()}" /><img src="{String(content.image.src)}" alt="{String(content.image)}" />

コンテンツの言語を変更する

コンテンツの言語を変更するには、useLocaleフックによって提供されるsetLocale関数を使用できます。この関数により、アプリケーションのロケールを設定し、それに応じてコンテンツを更新できます。

src/components/LocaleSwitcher.tsx

コードをコピー

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

import { type Component, For } from "solid-js";import { Locales } from "intlayer";import { useLocale } from "solid-intlayer";const LocaleSwitcher: Component = () => {  const { locale, setLocale, availableLocales } = useLocale();  return (    <select      value={locale()}      onChange={(e) => setLocale(e.currentTarget.value as Locales)}    >      <For each={availableLocales}>        {(loc) => (          <option value={loc} selected={loc === locale()}>            {loc}          </option>        )}      </For>    </select>  );};

アプリケーションにローカライズされたルーティングを追加する

このステップの目的は、各言語に対して一意のルートを作成することです。これはSEOとSEOフレンドリーなURLに役立ちます。例：

plaintext

コードをコピー

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

- https://example.com/about- https://example.com/es/about- https://example.com/fr/about

アプリケーションにローカライズされたルーティングを追加するには、@solidjs/routerを使用できます。

まず、必要な依存関係をインストールします：

bash

コードをコピー

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

npm install @solidjs/router

次に、アプリケーションをRouterでラップし、localeMapを使用してルートを定義します：

src/index.tsx

コードをコピー

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

import { render } from "solid-js/web";import { Router } from "@solidjs/router";import App from "./App";const root = document.getElementById("root");render(  () => (    <Router>      <App />    </Router>  ),  root!);

src/App.tsx

コードをコピー

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

import { type Component } from "solid-js";import { Route } from "@solidjs/router";import { localeMap } from "intlayer";import { IntlayerProvider } from "solid-intlayer";import Home from "./pages/Home";import About from "./pages/About";const App: Component = () => (  <IntlayerProvider>    {localeMap(({ locale, urlPrefix }) => (      <Route        path={urlPrefix || "/"}        component={(props: any) => (          <IntlayerProvider locale={locale}>{props.children}</IntlayerProvider>        )}      >        <Route path="/" component={Home} />        <Route path="/about" component={About} />      </Route>    ))}  </IntlayerProvider>);export default App;

ロケール変更時にURLを変更する

ロケールが変更されたときにURLを変更するには、useLocaleフックによって提供されるonLocaleChangeプロップを使用できます。@solidjs/routerのuseNavigateとuseLocationフックを使用して、URLパスを更新できます。

src/components/LocaleSwitcher.tsx

コードをコピー

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

import { type Component, For } from "solid-js";import { useLocation, useNavigate } from "@solidjs/router";import { getLocalizedUrl } from "intlayer";import { useLocale } from "solid-intlayer";const LocaleSwitcher: Component = () => {  const location = useLocation();  const navigate = useNavigate();  const { locale, setLocale, availableLocales } = useLocale({    onLocaleChange: (loc) => {      const pathWithLocale = getLocalizedUrl(location.pathname, loc);      navigate(pathWithLocale);    },  });  return (    <select      value={locale()}      onChange={(e) => setLocale(e.currentTarget.value as any)}    >      <For each={availableLocales}>        {(loc) => (          <option value={loc} selected={loc === locale()}>            {loc}          </option>        )}      </For>    </select>  );};

HTMLの言語属性と言語方向属性を切り替える

アクセシビリティとSEOのために、<html>タグのlangとdir属性を現在のロケールに合わせて更新します。

src/App.tsx

コードをコピー

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

import { createEffect, type Component } from "solid-js";import { useLocale } from "solid-intlayer";import { getHTMLTextDir } from "intlayer";const AppContent: Component = () => {  const { locale } = useLocale();  createEffect(() => {    document.documentElement.lang = locale();    document.documentElement.dir = getHTMLTextDir(locale());  });  return (    // ... アプリケーションのコンテンツ  );};

ローカライズされたリンクコンポーネントの作成

内部URLを現在の言語で自動的にプレフィックスするカスタムLinkコンポーネントを作成します。

src/components/Link.tsx

コードをコピー

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

import { type ParentComponent } from "solid-js";import { A, type AnchorProps } from "@solidjs/router";import { getLocalizedUrl } from "intlayer";import { useLocale } from "solid-intlayer";export const Link: ParentComponent<AnchorProps> = (props) => {  const { locale } = useLocale();  const isExternal = () => props.href.startsWith("http");  const localizedHref = () =>    isExternal() ? props.href : getLocalizedUrl(props.href, locale());  return <A {...props} href={localizedHref()} />;};

11
Markdownをレンダリングする

Intlayerは、独自の内部パーサーを使用して、SolidアプリケーションでMarkdownコンテンツを直接レンダリングすることをサポートしています。デフォルトでは、Markdownはプレーンテキストとして扱われます。リッチHTMLとしてレンダリングするには、アプリケーションをMarkdownProviderでラップします。
src/index.tsx
コードをコピー
コードをクリップボードにコピー
import { render } from "solid-js/web";import { MarkdownProvider } from "solid-intlayer/markdown";import App from "./App";const root = document.getElementById("root");render( () => ( <MarkdownProvider> <App /> </MarkdownProvider> ), root!);
次に、コンポーネントで使用できます：
tsx
コードをコピー
コードをクリップボードにコピー
import { useIntlayer } from "solid-intlayer";const MyComponent = () => { const content = useIntlayer("my-content"); return ( <div> {/* MarkdownProvider経由でHTMLとしてレンダリング */} {content.markdownContent} </div> );};
1
コンポーネントのコンテンツを抽出する
オプション

既存のコードベースがある場合、数千のファイルを変換するのは時間がかかることがあります。

このプロセスを容易にするために、Intlayerは、コンポーネントを変換しコンテンツを抽出するためのコンパイラ / エクストラクタを提案しています。

セットアップするには、intlayer.config.ts ファイルに compiler セクションを追加します。
intlayer.config.ts
コードをコピー
コードをクリップボードにコピー
```
import { type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... 他の構成
  compiler: {
    /**
     * コンパイラを有効にするかどうかを指定します。
     */
    enabled: true,

    /**
     * 出力ファイルのパスを定義します。
     */
    output: ({ fileName, extension }) => `./${fileName}${extension}`,

    /**
     * 変換後にコンポーネントを保存するかどうかを指定します。これにより、コンパイラを一度だけ実行してアプリを変換し、その後削除することができます。
     */
    saveComponents: false,

    /**
     * 辞書キーの接頭辞
     */
    dictionaryKeyPrefix: "",
  },
};

export default config;
```
コンポーネントを変換してコンテンツを抽出するためにエクストラクタを実行します

bash
コードをコピー
コードをクリップボードにコピー
npx intlayer extract

vite.config.ts を更新して intlayerCompiler プラグインを含めます。

vite.config.ts
コードをコピー
コードをクリップボードにコピー
import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [ intlayer(), intlayerCompiler(), // コンパイラプラグインを追加します ],});

bash
コードをコピー
コードをクリップボードにコピー
npm run build # または npm run dev

TypeScriptを設定する

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

tsconfig.json

コードをコピー

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

{  "compilerOptions": {    // ...  },  "include": ["src", ".intlayer/**/*.ts"],}

Git設定

Intlayerによって生成されたファイルは、Gitリポジトリにコミットしないように無視することを推奨します。

これを行うには、.gitignoreファイルに以下の指示を追加してください。

bash

コードをコピー

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

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

VS Code拡張機能

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

VS Codeマーケットプレイスからインストール

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

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

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

（任意）サイトマップと robots.txt（ビルド時生成）

Intlayer は generateSitemap と getMultilingualUrls により、クローラ向けに整形した多言語の sitemap.xml と robots.txt を public/ に自動で書き出せます。通常は Vite より前に小さな Node スクリプトを走らせます（例: npm の predev / prebuild）。

サイトマップ

Intlayer のサイトマップ生成はロケール設定を踏まえ、クローラ向けのメタデータを含めます。

生成されるサイトマップは xhtml:link（hreflang）をサポートします。単純な URL 列挙ではなく、各ページの言語版同士を双方向で結びます（例: /about、/fr/about、/about?lang=fr などルーティングに依存）。

Robots.txt

getMultilingualUrls で Disallow を、機微パスのすべての言語 URLに効かせます。

1. プロジェクトルートに `generate-seo.mjs` を置く

generate-seo.mjs

コードをコピー

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

import fs from "fs";import path from "path";import { fileURLToPath } from "url";import { generateSitemap, getMultilingualUrls } from "intlayer";const __dirname = path.dirname(fileURLToPath(import.meta.url));const SITE_URL = (process.env.SITE_URL || "http://localhost:5173").replace(  /\/$/,  "");const pathList = [  { path: "/", changefreq: "daily", priority: 1.0 },  { path: "/about", changefreq: "monthly", priority: 0.7 },];const sitemapXml = generateSitemap(pathList, { siteUrl: SITE_URL });fs.writeFileSync(path.join(__dirname, "public", "sitemap.xml"), sitemapXml);const getAllMultilingualUrls = (urls) =>  urls.flatMap((url) => Object.values(getMultilingualUrls(url)));const disallowedPaths = getAllMultilingualUrls(["/admin", "/private"]);const robotsTxt = [  "User-agent: *",  "Allow: /",  ...disallowedPaths.map((path) => `Disallow: ${path}`),  "",  `Sitemap: ${SITE_URL}/sitemap.xml`,].join("\n");fs.writeFileSync(path.join(__dirname, "public", "robots.txt"), robotsTxt);console.log("SEO files generated successfully.");

intlayer がインストールされている必要があります。本番では環境変数 SITE_URL を設定してください（CI など）。

Node の ESM では generate-seo.mjs を推奨します。generate-seo.js にする場合は package.json の "type": "module" などで ESM を有効にしてください。

2. Vite より前にスクリプトを実行する

package.json

コードをコピー

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

{  "scripts": {    "dev": "vite",    "prebuild": "node generate-seo.mjs",    "build": "vite build",    "preview": "vite preview"  }}

pnpm や yarn を使う場合はコマンドを読み替えてください。CI から呼び出しても構いません。

さらに進むために

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

NuxtおよびVue ViteおよびSvelte

バージョン履歴

IntlayerでVite and Solidを翻訳する | 国際化（i18n）

目次

代替手段ではなく Interlayer を使用する理由

ViteとSolidアプリケーションでIntlayerをセットアップするステップバイステップガイド

目次

依存関係のインストール

プロジェクトの設定

Vite設定にIntlayerを統合する

Vite 設定に Intlayer を統合する

コンテンツを宣言する

Intlayerをコードで利用する

コンテンツの言語を変更する

アプリケーションにローカライズされたルーティングを追加する

ロケール変更時にURLを変更する

HTMLの言語属性と言語方向属性を切り替える

ローカライズされたリンクコンポーネントの作成

Markdownをレンダリングする

コンポーネントのコンテンツを抽出する

TypeScriptを設定する

Git設定

VS Code拡張機能

（任意）サイトマップと robots.txt（ビルド時生成）

サイトマップ

Robots.txt

1. プロジェクトルートに `generate-seo.mjs` を置く

2. Vite より前にスクリプトを実行する

さらに進むために

バージョン履歴

IntlayerでVite and Solidを翻訳する | 国際化（i18n）

目次

代替手段ではなく Interlayer を使用する理由

ViteとSolidアプリケーションでIntlayerをセットアップするステップバイステップガイド

目次

依存関係のインストール

プロジェクトの設定

Vite設定にIntlayerを統合する

Vite 設定に Intlayer を統合する

コンテンツを宣言する

Intlayerをコードで利用する

コンテンツの言語を変更する

アプリケーションにローカライズされたルーティングを追加する

ロケール変更時にURLを変更する

HTMLの言語属性と言語方向属性を切り替える

ローカライズされたリンクコンポーネントの作成

Markdownをレンダリングする

コンポーネントのコンテンツを抽出する

TypeScriptを設定する

Git設定

VS Code拡張機能

（任意）サイトマップと robots.txt（ビルド時生成）

サイトマップ

Robots.txt

1. プロジェクトルートに generate-seo.mjs を置く

2. Vite より前にスクリプトを実行する

さらに進むために

1. プロジェクトルートに `generate-seo.mjs` を置く