このページとあなたの好きな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）
目次
このパッケージは開発中です。詳細はissueをご覧ください。Solid向けIntlayerに関心がある場合は、issueに「いいね」をして応援してください。
Intlayerとは何ですか？
Intlayerは、最新のウェブアプリケーションにおける多言語対応を簡素化するために設計された革新的なオープンソースの国際化（i18n）ライブラリです。
Intlayerを使うと、以下が可能です：
- コンポーネントレベルで宣言的な辞書を使って翻訳を簡単に管理できます。
- メタデータ、ルート、コンテンツを動的にローカライズできます。
- 自動生成された型によりTypeScriptのサポートを保証し、オートコンプリートやエラー検出を向上させます。
- 動的なロケール検出や切り替えなどの高度な機能を活用できます。
ViteとSolidアプリケーションでIntlayerをセットアップするステップバイステップガイド
目次
ステップ1: 依存関係のインストール
npmを使って必要なパッケージをインストールします：
コードをクリップボードにコピー
npm install intlayer solid-intlayernpm install vite-intlayer --save-devnpx intlayer initintlayer
solid-intlayer IntlayerをSolidアプリケーションと統合するパッケージです。Solidの国際化のためのコンテキストプロバイダーとフックを提供します。
vite-intlayer IntlayerをViteバンドラーと統合するためのViteプラグイン、およびユーザーの優先ロケール検出、クッキー管理、URLリダイレクト処理のためのミドルウェアを含みます。
ステップ 2: プロジェクトの設定
アプリケーションの言語を設定するための設定ファイルを作成します：
コードをクリップボードにコピー
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: Vite設定にIntlayerを統合する
intlayerプラグインを設定に追加します。
コードをクリップボードにコピー
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 プラグインを設定に追加します。
コードをクリップボードにコピー
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: コンテンツを宣言する
翻訳を格納するためのコンテンツ宣言を作成および管理します。
コードをクリップボードにコピー
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}）に一致している必要があります。
詳細については、コンテンツ宣言のドキュメントを参照してください。
ステップ5: Intlayerをコードで利用する
アプリケーション全体でコンテンツ辞書にアクセスします：
コードをクリップボードにコピー
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)}" />
（オプション）ステップ6: コンテンツの言語を変更する
コンテンツの言語を変更するには、useLocaleフックによって提供されるsetLocale関数を使用できます。この関数により、アプリケーションのロケールを設定し、それに応じてコンテンツを更新できます。
コードをクリップボードにコピー
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> );};（オプション）ステップ7: アプリケーションにローカライズされたルーティングを追加する
このステップの目的は、各言語に対して一意のルートを作成することです。これはSEOとSEOフレンドリーなURLに役立ちます。 例：
コードをクリップボードにコピー
- https://example.com/about- https://example.com/es/about- https://example.com/fr/aboutアプリケーションにローカライズされたルーティングを追加するには、@solidjs/routerを使用できます。
まず、必要な依存関係をインストールします：
コードをクリップボードにコピー
npm install @solidjs/router次に、アプリケーションをRouterでラップし、localeMapを使用してルートを定義します：
コードをクリップボードにコピー
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!);コードをクリップボードにコピー
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;（オプション）ステップ8: ロケール変更時にURLを変更する
ロケールが変更されたときにURLを変更するには、useLocaleフックによって提供されるonLocaleChangeプロップを使用できます。@solidjs/routerのuseNavigateとuseLocationフックを使用して、URLパスを更新できます。
コードをクリップボードにコピー
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> );};（オプション）ステップ9: HTMLの言語属性と言語方向属性を切り替える
アクセシビリティとSEOのために、<html>タグのlangとdir属性を現在のロケールに合わせて更新します。
コードをクリップボードにコピー
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 ( // ... アプリケーションのコンテンツ );};（オプション）ステップ10：ローカライズされたリンクコンポーネントの作成
内部URLを現在の言語で自動的にプレフィックスするカスタムLinkコンポーネントを作成します。
コードをクリップボードにコピー
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でラップします。
コードをクリップボードにコピー
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!);次に、コンポーネントで使用できます：
コードをクリップボードにコピー
import { useIntlayer } from "solid-intlayer";const MyComponent = () => { const content = useIntlayer("my-content"); return ( <div> {/* MarkdownProvider経由でHTMLとしてレンダリング */} {content.markdownContent} </div> );};TypeScriptを設定する
TypeScript設定に自動生成された型が含まれていることを確認してください。
コードをクリップボードにコピー
{ "compilerOptions": { // ... }, "include": ["src", ".intlayer/**/*.ts"],}Git設定
Intlayerによって生成されたファイルは、Gitリポジトリにコミットしないように無視することを推奨します。
これを行うには、.gitignoreファイルに以下の指示を追加してください。
コードをクリップボードにコピー
# Intlayerによって生成されたファイルを無視する.intlayerVS Code拡張機能
Intlayerでの開発体験を向上させるために、公式のIntlayer VS Code拡張機能をインストールできます。
この拡張機能は以下を提供します：
- 翻訳キーのオートコンプリート。
- 欠落している翻訳のリアルタイムエラー検出。
- 翻訳されたコンテンツのインラインプレビュー。
- 翻訳を簡単に作成・更新するためのクイックアクション。
拡張機能の使い方の詳細については、Intlayer VS Code 拡張機能のドキュメントを参照してください。
(オプション) ステップ 1 : コンポーネントのコンテンツを抽出する
既存のコードベースがある場合、数千のファイルを変換するのは時間がかかることがあります。
このプロセスを容易にするために、Intlayerは、コンポーネントを変換しコンテンツを抽出するための コンパイラ / エクストラクタ を提案しています。
セットアップするには、intlayer.config.ts ファイルに compiler セクションを追加します。
コードをクリップボードにコピー
import { type IntlayerConfig } from "intlayer";
const config: IntlayerConfig = {
// ... 他の構成
compiler: {
/**
* コンパイラを有効にするかどうかを指定します。
*/
enabled: true,
/**
* 出力ファイルのパスを定義します。
*/
output: ({ fileName, extension }) => `./${fileName}${extension}`,
/**
* 変換後にコンポーネントを保存するかどうかを指定します。これにより、コンパイラを一度だけ実行してアプリを変換し、その後削除することができます。
*/
saveComponents: false,
/**
* 辞書キーの接頭辞
*/
dictionaryKeyPrefix: "",
},
};
export default config;コンポーネントを変換してコンテンツを抽出するためにエクストラクタを実行します
コードをクリップボードにコピー
npx intlayer extract（任意）サイトマップと 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を使用してコンテンツを外部化することができます。