VSCode拡張機能を多言語対応で開発する方法

VSCode拡張機能開発に興味はあっても、どこから始めればいいかわからないですよね。特に多言語対応となると、さらにハードルが高く感じるかもしれません。

この記事では、VSCode拡張機能開発の初心者でも簡単に実装できる多言語対応の手順を詳しく解説します。

開発効率を上げながら、ユーザー体験を向上できる具体的な方法をご紹介しますので、ぜひ最後までお読みください。

VSCode拡張機能の多言語対応

VSCode拡張機能は大きく二種類の方法で多言語対応します。

package.jsonの多言語対応
ソースファイル（extension.jsなど）の多言語対応

PowerShell

└── プロジェクト
    ├── extension.js
    ├── package.json
    ├── package.nls.json
    ├── package.nls.ja.json
    ├── l10n
        └── bundle.l10n.ja.json
:

package.jsonの多言語対応

package.jsonとは、Node.jsプロジェクトの骨格となる設定ファイルです。VSCodeでも拡張機能の名前や作者を管理するために、大抵のプロジェクトで書くことになります。

JSON

// package.json
{
    "contributes": {
        "commands": [{
            "command": "test.helloWorld",
            "title": "%test.helloWorld%" // ここを多言語翻訳する
        }],
    },
}

この中で多言語対応することが多い箇所は「commands の title」です。「"title": "%test.hello-world%"」のように、“%” で囲まれています。

このまま拡張機能を実行すると、単に「%test.helloWorld%」という名のコマンドが登録されることになりますが、果たして何の意味があるのでしょうか？

実はこのように”%”で囲んだ箇所はキーとなり、pakage.nls.jsonで値とマッチングすることで任意の文章を出力できます。例えば「Hello World」という名前にしてみましょう。

JSON

// pakage.nls.json
{
    "test.helloWorld": "Hello World"
}

すると、先程とは異なりコマンド名が「Hello World」になりました。

次にpakage.nls.ja.jsonを作成し、今度は「ハローワールド」と表示されるようにしましょう。

JSON

// pakage.nls.ja.json
{
    "test.helloWorld": "ハローワールド"
}

ハローワールドの下部にHello Worldが表示され、英語から日本語に翻訳されたことが分かります。

試しにVSCodeの環境を英語に変えてみましょう。コマンドパレットを開き「表示言語を構成する」をクリックし、英語にしてみてください。

すると、今度はハローワールドから Hello World に変更されました。

package.nls.jsonとpackage.nls.ja.jsonを使用することで、「%test.helloWorld%」を日本語ユーザーには「ハローワールド」、日本語圏外のユーザーには「Hello World」と使い分けて表示できるようになりました。

このように、%キー%をそれぞれの言語でマッピングすることがVSCodeにおける多言語対応となります。

ソースファイルの多言語対応

ソースファイルは package.json のような設定ファイルとは異なり、プログラミングの処理そのものを記述したファイルです。

ソースファイルの中で特に多言語翻訳をしなければいけない箇所は、showInformationMessageです。

先ほどのコマンド「test.helloWorld」の中身は以下のようになっています。

JavaScript

// extension.js
let disposable = vscode.commands.registerCommand('test.helloWorld', function () {
    vscode.window.showInformationMessage(
        'Hello World !'
    );	
});

これは「コマンドをクリックすると、右下に Hello World ! と表示される」という意味です。

試しにクリックしてみましょう。

きちんと右下にメッセージが表示されました。

このメッセージを「ハローワールド！」に変更します。しかし、先程のpackage.nls.jsonを使った方法のように"%Hello World !%"と表記しても意味がありません。

extension.js等のソースファイルでは、「l10nフォルダ」を使用して多言語対応します。

ステップ1: package.jsonへの追記

その前にまず準備があります。

package.nls.jsonでは、ファイル作成後そこにキーと値を書くだけで多言語対応できました。l10nを使う方法では、package.jsonに使用するフォルダを設定する必要があります。

JSON

// package.json
{
    "l10n": "./l10n", // l10nを追記
    "contributes": {
        "commands": [{
            "command": "test.helloWorld",
            "title": "%test.helloWorld%"
        }],
    },
}

これで準備は完了です。

ステップ2: l10n の作成

プロジェクト以下に「l10n」フォルダを作成し、その中に「bundle.l10n.ja.json」を作ってください。

PowerShell

└── プロジェクト
    └── l10n
        └── bundle.l10n.ja.json

package.nls.json同様、キーと値をマッピングさせます。ただし%キー%のような形ではなく、英語の文章を直接キーとして日本語の文章を当てます。

JSON

// bundle.l10n.ja.json
{
    "Hello World !": "ハローワールド！"
}

ステップ3: メッセージを変更する

最後に、多言語対応したいメッセージをvscode.l10n.t("メッセージ")としましょう。

JavaScript

//extension.js
let disposable = vscode.commands.registerCommand('test.helloWorld', function () {
    vscode.window.showInformationMessage(
        vscode.l10n.t('Hello World !') // メッセージをvscode.l10n.t()で囲う
    );	
});

では先程と同様、コマンドを実行してみましょう。今度は「ハローワールド！」と表示されました。

もちろん、表示言語を英語に変更すると「Hello World !」に変わります。

まとめ

この記事では、VSCode拡張機能の多言語対応について説明しました。VSCode拡張機能の多言語対応は、主に2つの方法で実現できます。

package.jsonの多言語対応
ソースファイル（extension.jsなど）の多言語対応

package.jsonの多言語対応では、「package.nls.json」と「package.nls.ja.json」を使用して、コマンド名などを翻訳します。キーを%キー%の形式で指定し、各言語ファイルでそのキーに対応する翻訳を提供します。

ソースファイルの多言語対応では、「l10nフォルダ」を使用します。package.jsonに"l10n": "./l10n"を追加し、l10nフォルダ内にbundle.l10n.ja.jsonを作成して翻訳を提供します。ソースコード内ではvscode.l10n.t("メッセージ")を使用して多言語対応を実現します。

これらの方法を使用することで、VSCode拡張機能を日本語と英語で切り替えて表示できるようになります。ユーザーの言語設定に応じて適切な言語が表示されるため、より多くのユーザーに使いやすい拡張機能を提供できるでしょう。