はじめに

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

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

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

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

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

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

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

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

i18n Alliy とは？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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>の箇所が翻訳対応漏れで、ハードコーディングされたままでそれを検知して教えてくれています。

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

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

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

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

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