【Flutter】ARBのキーの命名規則を考えてみた

先日Flutterによるアプリ開発において多言語対応をしたのですが、その際各ワードに対応するキーの名称の付け方に悩んだので、整理してルールを定めました。ついては、この記事ではARBファイルのキーの名称の付け方のルールについて、一つの例として紹介して行きたいと思います。

English

https://medium.com/@dsk.osanai/flutter-establishing-rules-for-naming-arb-keys-flutter-establishing-rules-for-naming-arb-keys-f138f452e597

Flutterの多言語化の手順

軽く紹介しておきます。本記事では主に3の部分について説明いたします。

1. packageのインストール
2. 色々設定
3. arbの編集
4. UIに反映

詳しくはこちらをご覧ください
https://docs.flutter.dev/ui/accessibility-and-internationalization/internationalization

ARBの概要

Application Resource Bundleの略で、JSON形式で保存するローカライゼーションリソースフォーマットです。なんのこっちゃと思うかもしれませんが、多言語化のために使用するjson形式で書くファイルと思えば良いでしょう。
https://github.com/google/app-resource-bundle

実際に見ればイメージしやすいです。

こちらが英語用

app_en.arb

{
  "@@locale" : "en",
  "appName" : "Demo app",
}

こちらが日本語用

app_ja.arb

{
  "@@locale" : "ja",
  "appName" : "デモアプリ",
}

このようにキーに対して、各言語ごとの言葉を値として入力して使います。

引数を用いたり説明文を加えたりもできますが、これについても他の記事で詳しくまとまっているものがめておりますので、ここでは割愛させていただきます。

https://qiita.com/yukihiroK/items/d431036401ae5bbc06f9

なお、実際に自分のプロジェクトでは、シンプルな形式のみでほぼ足りています。
速さ優先ならシンプルに上記の形式だけで一旦進めても良いのでは、と思っています。

arbファイルにおけるキー名称のルール

ここからがメインの内容です。

過去の反省と基本方針

過去の開発では実際に実装していくと、こんなことがありました

• A画面とB画面で同じAccountという文言を使っていたのに、デザイン修正によってAcountと Userに文言が分かれていった（またはその逆）
• A画面ではRegister profileと言う文言をボタンに使用してたが、B画面では文章としてピリオドのついたRegister profile.だった。

上記のような状態になると、ローカライズした単語を使用する際にキーの選択で困惑したり、と作業が煩雑になります。

上記の反省を踏まえた結果、arbファイル作成時の基本方針として、完璧な統一を求めないことを大事にしつつルールを固め、次のような構成とすることにしました。

基本ルール

具体的なキー名称の構成について紹介します。次の3つの項目に基づき、1_2_3の形式でキー名を決めました。

1. 画面名またはWidget名（必須）
2. 画面内の詳細な使用箇所（必須）
3. 文言の中身（任意）

(どの画面の)_(どんなWidgetの)_(どんな文言) と言う形式です。各項目はローワーキャメルですが、それらを繋ぐ際にはスネークケースとしました。

記入例です。

app_en.arb

{
 "@@locale" : "en",
 "startScreen_appBarTitle_start" : "Start Screen"
 "startScreen_headline_account" : "Acount"
}

この書き方だと、場合よっては、A画面とB画面の2つの画面で同じような文言を使う場面もあるかもしれません。しかし、ここでは先ほどの基本方針に基づき、気にせず、基本はそれぞれ作成する、ことにしています。

頻繁に使用する単語

とは言え、主にボタンのCancelをはじめとして、流石に頻繁に使うし、統一して管理したい単語もあるかと思います。ついては、3〜4化箇所など、一定の箇所数以上で頻出するような短い単語であれば、basicText_{文言}といった形式のキー名にして登録するようにしました。

記入例です。

app_en.arb

{
 "@@locale" : "en",
 "basicText_cancel" : "Cancel"
}

ルールを定めて改善した結果

• 画面クラスを編集する際、どんなキー名で打てばいいか予測しやすい
• copilotがうまいこと予測してくれる（これでかい）
• コードからどんな文言が使われているのかイメージしやすい

arb編集用ツール

少し脱線しますが、arbファイルの編集ツールの話です。
arbファイルの編集は非常に面倒です。A言語では定義したけどB言語では定義し忘れた、といったことが発生し得ます。言語や単語が増えると余計に煩雑になります。

そこでSaasもあったのですが、お金かけるところではないしとツールを探したところ、VScodeのプラグイン、i18nが便利でした。参考までに。

https://x.com/osanaiks10512/status/1829772476399960449

https://marketplace.visualstudio.com/items?itemName=innwin.i18n-arb-editor

まとめ

今回紹介したキー名称の付け方はあくまで私が考えた一つの例です。正解はないですし、プロジェクトによっても答えは変わってくると思います。ただ、大事なことは一定のルールを定めることだと思います。

ここで紹介した例が、皆さんの作業の効率化に少しでもお役に立ったら幸いです。