このページとあなたの好きなAIアシスタントを使ってドキュメントを要約します
バージョン履歴
- "Solid の useIntlayer API の使用法を直接プロパティアクセスに更新"v8.9.02026/5/4
- "initコマンドを追加"v7.5.92025/12/30
- "履歴の初期化"v5.5.102025/6/29
このページのコンテンツはAIを使用して翻訳されました。
英語の元のコンテンツの最新バージョンを見るIf you have an idea for improving this documentation, please feel free to contribute by submitting a pull request on GitHub.
GitHub link to the documentationCopy doc Markdown to clipboard
IntlayerでVite and Solidを翻訳する | 国際化（i18n）
目次
このパッケージは開発中です。詳細はissueをご覧ください。Solid向けIntlayerに関心がある場合は、issueに「いいね」をして応援してください。
代替手段ではなく 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をセットアップするステップバイステップガイド
目次
依存関係のインストール
npmを使って必要なパッケージをインストールします：
bashコードをコピーコードをクリップボードにコピー
npm install intlayer solid-intlayernpm install vite-intlayer --save-devnpx intlayer initプロジェクトの設定
アプリケーションの言語を設定するための設定ファイルを作成します：
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()], });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 の環境変数を定義します。さらに、パフォーマンス最適化のためのエイリアスも提供します。コンテンツを宣言する
翻訳を格納するためのコンテンツ宣言を作成および管理します。
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()} />;};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> );};コンポーネントのコンテンツを抽出する
オプション既存のコードベースがある場合、数千のファイルを変換するのは時間がかかることがあります。
このプロセスを容易にするために、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
TypeScriptを設定する
TypeScript設定に自動生成された型が含まれていることを確認してください。
コードをクリップボードにコピー
{ "compilerOptions": { // ... }, "include": ["src", ".intlayer/**/*.ts"],}Git設定
Intlayerによって生成されたファイルは、Gitリポジトリにコミットしないように無視することを推奨します。
これを行うには、.gitignoreファイルに以下の指示を追加してください。
コードをクリップボードにコピー
# Intlayerによって生成されたファイルを無視する.intlayerVS Code拡張機能
Intlayerでの開発体験を向上させるために、公式のIntlayer 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 を置く
コードをクリップボードにコピー
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 より前にスクリプトを実行する
コードをクリップボードにコピー
{ "scripts": { "dev": "vite", "prebuild": "node generate-seo.mjs", "build": "vite build", "preview": "vite preview" }}pnpm や yarn を使う場合はコマンドを読み替えてください。CI から呼び出しても構いません。
さらに進むために
さらに進みたい場合は、ビジュアルエディターを実装するか、CMSを使用してコンテンツを外部化することができます。