リンクアンドモチベーションでフロントエンドエンジニアをしている菊池です。
最近Vueアプリケーションの多言語対応が必要になったのですが、少し前にvitesseを触った時に気になっていたi18n allyというVSCode拡張を試してみました。
実際にプロジェクトで使ってみて感触が良かったのでその紹介をしたいと思います。
この記事はモチベーションクラウドシリーズ Advent Calendar 2022の2日目の記事です。
i18n allyの説明
i18n allyは多言語まわりの便利な機能を提供するVSCodeの拡張です。
VueやReactでよく使われている多言語ライブラリは大体対応しているほか、バックエンドのi18nにも対応しています。
https://github.com/lokalise/i18n-ally/wiki/Supported-Frameworks
機能の1つである「Inline Annotations」は、t('common.error.text') のようなキーから言語ソースを辿り、翻訳文言をVSCode上でインラインで表示するようになります。
これが↓のように表示される
他にも、翻訳文言がない場合には警告を表示したり、
日本語にあって英語にない、みたいな翻訳ファイル毎の文言抜けを表示できたりします。
導入方法
導入は簡単で、VSCodeに拡張をインストールするだけです。
ただし、デフォルトでは以下のようなディレクトリ構成前提で翻訳ファイルを取得します。
locales # i18n, langs, locale are also acceptable
├── en.json
├── de-DE.json
├── zh-CN.yml # YAML
├── zh-TW.ts # You can mix different formats
├── ...
└── <country-code>.json
refs. https://github.com/lokalise/i18n-ally/wiki/FAQ#-directory-structure
これ以外の構成の場合は、設定でカスタマイズが必要になります。
使ってみての所感
個人的に使ってみて良いと感じたのが、「多言語置き換え作業の進捗が分かる」ことです。
今まで文言を t('title') とかに置き換えても、画面上でチェックするまで「これちゃんと置き換えられたのかな、、」という微妙な不安というか、作業実感が得られなかったのですが、
これはVSCode上で「置き換え出来た文言」「キーが見つかってない文言」「ハードコードされてるっぽい文言」が分かるので、これを100%にする = 完了という分かりやすい目印になります。
特に翻訳対応の初回は大量のハードコード文言を置き換えていく地道な作業になるので、その負担が減るだけでも十分効果があったなーと思いました。
さいごに
今年も弊社はアドベントカレンダー２つやってます。
明日は @naoki_kuhara と @Yakumo-0109 が投稿してくれるようです。お楽しみに！