Reactでのスタートガイド
yarn でglotstackをインストール
yarn install glotstack
Reactアプリにglotstackプロバイダーを追加します
import * as React from 'react'
import { GlotstackProvider } from 'glotstack'

const importMethod = (locale: string) => {
  // バンドルサイズを抑えるために静的ディレクトリからfetch()を使用し、翻訳ファイルを静的パスに保存してください。
  return fetch(`/public/translations/${locale}.json`)
}
// // またはインラインrequireで組み込み翻訳を実装 — 動的インポート非対応環境で有効
const translations: Record<string, () => Promise<Translations>> = {
  'en-US': () => require('@/translations/en-US.json'),
  'pl-PL': () => require('@/translations/pl-PL.json'),
  'fr-FR': () => require('@/translations/fr-FR.json'),
};

const importMethod2 = (locale: string) => {
  return translations[locale]();
}

const Application = () => {
  const locale = 'en-US' // replace with your locale source
  return (
    <GlotstackProvider initialLocale={locale} importMethod={importMethod}>
      {/*<YourComponent />*/}
    </GlotstackProvider>
  )
}
fetchとimportの使い分け
fetch() はCDNなどの静的ホスティングからファイルを取得し、バンドルサイズを小さく保つことができます。Cloudflare Workersなどの小さなバンドル制限環境に最適です。動的インポート非対応環境では、require() が適しています。 小規模アプリやReact Nativeでは、require() を使ってアセットをバンドルに組み込むことを推奨します。
useGlotstack() をコンポーネント内で使用
import * as React from 'react'
import {useGlotstack} from 'glotstack'

function MyComponent() => {
  const {t} = useGlotstack()

  return (
    <div>
      {t('Quickstart.example', {assigns: {userName: 'JD'}})}
      {/* Icon can be a function reference or a node */}
      {t('Quickstart.example2', {assigns: {Icon: <Icon/>}})}
    </div>
  )
}
翻訳ソースファイルを作成する
母国語を使用できますが、Glotstackはデフォルトでen-US.json を使用します。./translations/en-US.json のような場所に保存することを推奨します。バンドルサイズが気になる場合は、./public/translations/en-US.json のようなパブリックファイルに分割することで、サイズを減らすことができます。
新機能
JSON編集が苦手な方へ
YAMLで翻訳ファイルを書いてみましょう(私たちも使っています)YAMLを使ったi18n
翻訳を取得
オプション1
: プロジェクト内に.glotstack.json を作成
設定のAPIキーは使用可能です。サインアップ前に10回翻訳を実行できます。
get-translations を実行
yarn glotstack get-translations
近日公開!yarn glotstack live-translate でライブ翻訳を取得
オプション2:
CLIで翻訳を取得
export GLOTSTACK_API_KEY="OvxngpvEeYZ21+VeIlfMO6rI92WdXUHZMRrfeDDqa0DWpHiKoqy9vjvUPFvex4Mc/r6xd6Hq04lA+5ImpHrdjQ==" 
yarn glotstack get-translations --source-path "./translations" --project-id "first-project" pl-PL fr-FR
ターミナルも使用できます!ただし、オプションは頻繁に変更されるため、保存コマンドの更新よりも設定のcodemod追加の方が簡単です。
© 2026 Glotstack.ai. 無断転載を禁じます。
GlotstackはReact向けの開発者主体のローカライズワークフローです。 YAML/JSONで翻訳管理、ロケールの同期、新言語の対応をAI支援で加速します。