はじめに
こんにちは、 STORES でエンジニアをやっている yuta07 です。
すでに1年のうち12分の1が終わりそうなことに絶望を感じています。
今回は UX 改善の一環として、 STORES 予約で長らく放置してしまっていた i18n 対応の翻訳作業を GitHub Copilot を用いて対応したことについて書いています。
背景
STORES 予約の管理画面では、以前より i18n 対応を進めていました。 日本語以外に英語での利用も可能にはしていましたが、歴史的な経緯もあり、i18n 対応が十分とは言えない状態が続いていました。 *1
その結果、言語設定を外国語に切り替えても、多くの箇所で日本語のまま表示（フォールバック）されてしまったりと i18n 対応ができているとは言えない状況でした。
そんな折、ビルドプロセスの高速化に伴い、i18n 周りの改善やライブラリのアップデートが行われました。
これは i18n 対応を完遂する絶好の機会だと感じ、腰を据えてしっかりと対応することにしました。
翻訳作業の進め方
作業自体は、日本語ファイルにあるキーに対応する翻訳文を、それぞれの言語ファイルに記述していくというシンプルなものです。
通常 react-intl では JSON ファイルでキーと値を管理して効率的に i18n 対応を行いますが、STORES 予約では少し事情が異なります。
*2
まず現状の把握として、一体どれほどのテキストが翻訳されずにフォールバックされているかを確認してみました。
grep -c ": ''" /Users/yuta07/~~~/src/locales/en.yml 2424
結果は2424件。かなりのテキストが未翻訳のまま表示されている状態でした 😇
これをすべて手作業で埋めるのは現実的ではないため、GitHub Copilot に協力を仰ぎ、一括で対応してもらうことにしました。
今回の作業は「単に翻訳するだけ」というシンプルなものだったため、特に instruction ファイルは用意せず、まずは普通に翻訳の依頼を投げました。
en.yml のファイル内で hogehoge: '' のようにja.ymlでは定義されているにもかかわらず、en.ymlには英語での定義がされていないケースが多くあります。 こういった空文字になっている箇所をja.ymlと照らし合わせて翻訳した形で埋めてください。
当初は、一気に変換されることで途中経過の翻訳ミスが見つけにくくなる懸念がありましたが、Copilot 側が自動的にセクション（機能や画面）ごとのまとまりで翻訳を提案してくれました。 そのため、1セクションずつ着実に翻訳を進めてもらう方針をとりました。
ここで言う「セクションごとの翻訳」とは、ファイルのディレクトリ構造に基づいた翻訳単位のことです。
STORES 予約では、例えば /calendar ページに対する画面レイアウトを描画するため、ファイルを下記のように配置しています。
- templates
- calendar
- IndexTemplate
- index.tsx
- messages.ts
- components
- hooks
つまり、/templates/calendar 以下のテキストファイルをまとめて翻訳していく形になります。
STORES 予約のコンポーネント粒度に関しては コンポーネント粒度と依存関係チェック feat. STORES予約フロントエンド - STORES Product Blog をご参照ください。
Copilot がこの粒度で処理してくれたおかげで、あとは翻訳の品質を目視で確認しながら作業を進めるだけで済みました。
作業中、以下のような文脈にそぐわない翻訳が提案される場面もありました。
// ja.yml heading: かんたん予約アカウント // en.yml heading: Heading
こうしたケースでは適宜プロンプトで修正指示を出しましたが、それ以外ではこちらの意図から大きく外れることもなく、スムーズに進めてくれました。
結果とまとめ
すべての翻訳作業にかかった時間は 1 時間ほどでした。想定より時間がかかりましたが、2424件という翻訳量と結果を確認しつつ進めたことを考えると致し方ないかなという印象です。
また、当初の目的である i18n 対応による最低限のUXは担保できたので、概ね満足できる結果を得ることができました。
一方で、AI による翻訳作業であるため、STORES 予約のサービスとして最適な表現になっていない箇所が残っている可能性もあり、引き続き改善の余地はあります。
今後もユーザーの皆様に安心してご利用いただけるよう、継続的なUX改善に取り組んでいきたいと思います。
