# 多言語化対応(i18n) この章では多言語化対応を実施する背景やプロセス、具体的な実装方法について紹介します。 ## 想定読者 * フロントエンドエンジニア * モバイルエンジニア * その他翻訳を依頼する人 ## Why 2024 年時点でウォンテッドリーは日本語・英語の 2 ヶ国語をサポートしています。理由としてはシンガポールへの事業展開と国内利用における非日本語話者の存在が挙げられます。 そのため、新規・グロース問わずプロダクト開発を行う時には、基本的に多言語化対応を考慮する必要があります。 ## 現状と課題 多言語化対応に関する問題もいくつか存在します。これらはプロダクト開発チームや Frontend Chapter によって鋭意改善中です。 * 多言語化対応が追いついていない機能がある * フロントエンドでは推奨ライブラリである hi18n 以外の利用箇所が一部残っている ## プロセス 多言語化対応のプロセスは、以下のステップに分けられます。 #### 参考事例 実際で行われた翻訳プロセスの事例を置いておきます。 * [フロントエンド事例 (internal)](https://github.com/wantedly/translation-requests/issues/755) * [モバイルアプリ事例 (internal)](https://github.com/wantedly/translation-requests/issues/764) ### 1. 日本語の文言の確定 プロダクトデザイナーと連携して翻訳の基準となる日本語の文言を確定します。 この段階でプロダクト内での一貫性を保つための用語や特殊な意味を持つ言葉を選定し、その文脈を理解することが重要です。 ### 2. 翻訳依頼 翻訳は、[翻訳依頼リポジトリ](https://github.com/wantedly/translation-requests)を通じて行います。 翻訳対象となる画面の画像を添付し、次のような項目がある場合には issue に記載します。 * 特定の文言を通常とは異なる意味で伝えたい場合 * 既存の画面に文言の追加・変更があり、その中に意訳された文言が含まれる場合 * 英訳時に語順を変更したくない場合（変数として名前・アバターなどを渡す必要があり、語順が逆転することでデザイン差分が発生するなど） ### 3. 実装 ウォンテッドリーの翻訳プロセスは単なる機械翻訳ではなく、専門チーム(前述)がウォンテッドリーらしさを加味しながら作っているので数日のリードタイムが生じます。もし初めから多言語化対応した変更をリリースしたいのであれば早めに翻訳チームに依頼してください。 また、施策によってはスピード重視で日本語の文言のみ先にリリースすることもあります。 #### 実装方法 * フロントエンド実装では [hi18n](https://github.com/wantedly/hi18n/blob/master/docs/getting_started.md) を利用します。 * モバイルアプリ実装では、iOS/Android それぞれの OS 標準のローカライゼーション実装方法に従います。 * [iOS 公式ドキュメント](https://developer.apple.com/documentation/xcode/localization) * [Android 公式ガイド](https://developer.android.com/guide/topics/resources/localization) #### hi18n とは [hi18n](https://github.com/wantedly/hi18n)は、TypeScript/JavaScript 向けの翻訳テキスト管理ライブラリであり、以下のような特徴を持っています。 開発の動機や設計思想、詳細な特徴などは[別記事](https://github.com/wantedly/hi18n/blob/master/docs/getting_started.md)で紹介されていますが、主な特徴は以下の通りです。 * 翻訳 ID や翻訳の引数に対して型安全性を提供します。 * React などの宣言的なフレームワークとの統合が容易です。 * Webpack などの既存の JavaScript 開発環境に自然に統合でき、ホットリロードやモジュールバンドラーの機能を利用した翻訳データの分割ロードが可能です。 ## 参考 #### 話を聞きに行きたい * Slack: [#engineering](https://app.slack.com/client/T025XTPMG/C92AZFA2D) * Slack: [#frontend\_chapter](https://app.slack.com/client/T025XTPMG/CA46K091P) * Slack: [#mobile\_chapter](https://app.slack.com/client/T025XTPMG/C014VN3KKB9) #### もっと知りたい * [wantedly/hi18n: message internationalization meets immutability and type-safety](https://github.com/wantedly/hi18n) * [社内 Issue: I18n ライブラリを作る](https://github.com/wantedly/dx/issues/644) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.wantedly.dev/fields/dev-process/i18n.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.