VSCode拡張機能「 i18n Alliy 」を使って 多言語対応の開発生産性を劇的に飛躍させる

はじめに

近年はグロバール化が進んでおり、プロダクトに関してもグローバル対応が求められるケースが増えています。

グローバル対応を実現するにあたって基本的にはi18nなどを使って自前で実装するか、
外部のツールやサービスを利用するかの2択になると思います。

i18nを使って自前実装するにしろ、外部サービスを利用するにしろ、そのプロダクトが置かれている環境(フェーズや予算など)を考慮して最適な判断をするのが大切ですよね。

ちなみにそれぞれのメリットデメリットは下記のような感じかなと思います。

	i18nで実装	外部ツールを利用
メリット	費用を抑えられる。	開発工数を抑えられる。
デメリット	コードの可読性低下。開発運用が大変。	費用が高い(年間数十~数百万円)。

i18nを使ったことがある人なら共感いただけると思いますが、i18nのライブラリなどによる多言語対応はコードの可読性の低下や運用の面で色々と大変な部分がありますよね。
そこをボトルネックと感じる方も多いのではないでしょうか。

今回ご紹介する i18n Alliy はそのようなお悩みを解消し、開発生産性を高く維持したままノンストレスに多言語対応の導入や運用を手助けするツールになっています。

僕も実際に使ってみてもうこのツールを手放せなくなりました(笑)

i18n Alliy とは？

i18nを使った開発の手助けをしてくれるVSCodeの拡張機能です。
※Cursorでも問題なく使えます。

2024/11現在で600,000ダウンロード超えとなっており世界中で多く利用されています。

i18n Alliyのサポートフレームワーク

Svelteに限らず、Vue,React,Angularなど主要なフロントフレームワークがサポート対象となっています。

i18n Alliyのインストール方法

まずは i18n Allyをインストールしてください

i18n Alliyの主要機能3つ紹介

1. 何が表示されるのか一目でわかるようになる

jsonファイルまで飛ぶことなく一目で何が表示されるのかを確認できます。

拡張機能を入れる前はこんな感じ

{$t('UserForm.enterName')}で表示される言語は、en.jsonとja.jsonをそれぞれみに行く必要がある。。。。

{$t('UserForm.enterName')} の箇所で内部的にjsonファイルから該当するkeyのvalueを見つけてここで表示してくれる(便利!)

VSCodeの右下の表示言語設定で表示言語を変えると

ファイル上で表示する言語も変えてくれる。

2. ホバーで翻訳リスト表示とジャンプができる

{$t('UserForm.enterName')}の部分日本語と英語でそれぞれどのような表示になるか確認や編集したいケースありますよね。そんな時に便利な機能になります。

ホバーをするとその言語で設定されている内容を一目で確認することができます。

さらに英語だけちょっと表現を変えたいってきもありますよね。
そんな時は「↗︎」のマークをクリックすると下記のように該当のjsonファイルの定義箇所に直接ジャンプすることができます。

3. プロジェクト全体の翻訳の進捗や漏れを確認できる

サイドバーにて様々な機能を提供しています。
この後特に便利な機能だけをピックアップして説明します。

現在のファイル

こちらの箇所では現在開いているファイルに関して翻訳周りの内容の分析や確認が可能です。

• Key in use

  • どのような言語で、どのようなkey、どのようなvalueが定義されているか確認できます。

• keys not found

  • 表示ファイル上で参照しているが、jsonファイル上でそのkey/valueの実装が定義されていない場合にエラーとして表示されます
  • 今回の場合{$t('UserCreate.message')}という実装がされていますが、これにマッチする内容がen.json,ja.jsonともに定義されていないためにエラーとして教えてくれています

• Hard-coded strings [beta]

  • i18nを使っておらず、ハードコーディングされたままのstringを検知して教えてくれます
  • 今回の場合<div>新規作成</div>の箇所が翻訳対応漏れで、ハードコーディングされたままでそれを検知して教えてくれています。

使用状況レポート

ファイル単位だけではなく、システム(プロジェクト)全体の翻訳状況の確認ができます。

• 使用されている翻訳の全体像がわかる
  • 今回の場合現在22このkeyを使って翻訳していることがわかります。　

• 使用されていない翻訳がわかる
  • ja.jsonで"hoge": {"hoge": "hoge"}と定義しているがどこからも使われていないことがわかります

• 参照されているが定義されていない翻訳がわかる
  • svelteファイル上で{$t('UserCreate.messae')}と{$t('UserCreate.createForm')}を参照しているが該当するkey/valueが存在しないことがわかります。

最後に

今まではi18nでの多言語対応となるとコードの可読性低下や思わぬデグレのリスクなどがあり、「できれば使いたくないな・・」という感情が少なからずありました。

ただi18n Alliyを使うことで以前まで感じていたネガティブな部分が解消されノンストレスに多言語対応を進めることができています。

外部サービスは高くて使えない。MVP実装だから手軽に多言語対応したい。そんなケースでは i18n Alliyを使った多言語対応をしみてはいかがでしょうか。より気軽に多言語対応を進めめられるはずです。