Skip to content

i18n.md

Latest commit

 

History

History
124 lines (80 loc) · 5.99 KB

i18n.md

File metadata and controls

124 lines (80 loc) · 5.99 KB
Raw

英語対応（i18n）の方針

このプロジェクトでは Astro の i18n ルーティング を使い、日本語（ja、デフォルト）と英語（en）を提供します。設定は astro.config.mjs、ユーティリティは src/utils/i18n.ts を参照してください。

英語対応を追加・変更するときは、次の 3 パターン（ページ → コンポーネント → 分岐の判断）に沿って実装します。

1. ページ（src/pages）

デザインが日英で大きく変わらないなら、できる限りページを共通化する。

  • 日本語用: src/pages/...
  • 英語用: src/pages/en/...（en は Astro の locale プレフィックス）

両方のページファイルは薄いラッパーに留め、ロジックと UI は共有コンポーネントに寄せます。

参考: ニュース記事

src/pages/news/[slug].astro と src/pages/en/news/[slug].astro は、どちらも同じ NewsArticlePage を呼び出すだけです。

---
import NewsArticlePage from "../../components/news/NewsArticlePage.astro";
import { getNewsArticleStaticPaths } from "../../components/news/newsArticle";

export async function getStaticPaths() {
  return getNewsArticleStaticPaths();
}

const { article } = Astro.props;
---

<NewsArticlePage article={article} />

（英語側は import パスが ../../../ になる以外、実質同じです。）

getStaticPaths などのルート固有の処理は、可能なら src/components/... や src/utils/... に切り出し、日英のページから同じ関数を import します。

2. コンポーネント内の表示内容

レイアウトが大きく変わらないなら、locale に応じてコンポーネント内で文言を切り替える。

  • 現在の locale は Astro.currentLocale（未設定時は "ja" を想定）
  • リンクは getRelativeLocaleUrl（astro:i18n）や getLocaleUrlForPage（src/utils/i18n.ts）を使う

まずフロントマターで currentLocale を定義します。

const currentLocale = Astro.currentLocale || "ja";

文言の切り替えは、次のどちらか（または併用）で行います。

フロントマターで変数にまとめる（NewsArticlePage.astro）

テンプレートで何度も使う文言や、props に渡す文字列向けです。

const sectionTitle = currentLocale === "ja" ? "ニュース" : "News";
const backLinkText = currentLocale === "ja" ? "ホームに戻る" : "Back to Home";

テンプレート内で三項演算子（SponsorRecruitment.astro）

その場で一度だけ出す短文は、マークアップ内に直接書いても構いません。

<span>
  {
    currentLocale === "ja"
      ? "Go Conferenceへのスポンサー応募は以下リンクからできます。"
      : "You can apply to sponsor Go Conference from the link below."
  }
</span>

見出しの装飾（先頭文字の色付け）や、段落の塊ごとに markup が違う場合も、同様に { currentLocale === "ja" ? (...) : (...) } で分岐します。

文言が増えてきたら、同ファイル内の定数オブジェクトや小さな辞書にまとめても構いません。プロジェクト全体で翻訳を一元管理する必要が出てきた段階で、別の仕組みを検討します。

3. レイアウトが大きく変わる場合

日英でレイアウトや構成が大きく異なるなら、英語用コンポーネントを別ファイルにする。

例: コンポーネント Hoge について、日本語は Hoge.astro、英語は HogeEn.astro を別々に作成する。

ただし 二重管理になりやすいため、可能な限り避ける 方針です。次の順で検討してください。

  1. 文言だけ違う → §2 のとおり同一コンポーネント内で locale 分岐
  2. 一部ブロックだけ違う → 差分部分だけ子コンポーネントに切り出し、ページ側で locale に応じて差し替え
  3. 全体の構造が違う → 最後の手段として Foo.astro / FooEn.astro のように分離

分離した場合は、スタイルやロジックの重複に注意し、共通化できる部分（データ取得、型、小さな UI 部品）は共有します。

判断の目安（まとめ）

層 条件 方針
ページ デザインがほぼ同じ pages と pages/en は薄いラッパーで、同一コンポーネントを利用
コンポーネント レイアウトがほぼ同じ Astro.currentLocale で文言・リンクを切り替え
コンポーネント レイアウトが大きく違う 英語用コンポーネントを別途作成（極力避ける）

関連ファイル

ファイル 役割
astro.config.mjs defaultLocale: "ja"、locales: ["en", "ja"]
src/utils/i18n.ts locale 定数、言語切り替え URL のヘルパー
src/components/Header.astro 言語切り替え UI
src/pages/news/[slug].astro ページ共通化の例
src/components/news/NewsArticlePage.astro フロントマターでの locale 分岐の例
src/components/top/SponsorRecruitment.astro テンプレート内での locale 分岐の例

方針や実装パターンを変えたときは、このドキュメントも更新してください。