【ITニュース解説】Generating Localised Price Tables From One JSON Source
2026年10月31日に「Dev.to」が公開したITニュース「Generating Localised Price Tables From One JSON Source」について初心者にもわかりやすく解説しています。
ITニュース概要
複数言語で異なる料金表の問題を解決するため、全ての料金情報を一つのJSONデータとして管理し、そこから各国語の料金ページを自動生成する。これにより、情報の不整合を防ぎ、地域ごとの正確な価格表示と一貫した情報提供が可能になる。
ITニュース解説
多言語に対応したウェブサイト、特に料金プランを紹介するページでは、多くの企業が共通の課題に直面している。それは、各言語版で価格情報が微妙に異なってしまうことだ。例えば、英語ページで料金プランの内容が更新されても、日本語ページでは更新が忘れられ、結果として顧客やAIアシスタントが古い、あるいは誤った価格情報を引用してしまう事態が発生する。これは企業の信頼性を損なうだけでなく、顧客に混乱をもたらす原因となる。
この問題を根本的に解決する方法は、価格に関する情報を単なるテキストではなく「データ」として扱い、すべての言語版をたった一つの情報源から生成することである。これを「単一の情報源(One Source of Truth)」と呼ぶ。価格やプランの詳細といった重要な情報は一箇所にまとめて管理し、そこから必要に応じて各言語のページを自動的に作り出すことで、情報の不一致を防ぐことが可能となる。
具体的な実装では、JSON(JavaScript Object Notation)というデータ形式がよく用いられる。JSONは、人間が読み書きしやすく、機械が解析しやすい軽量なデータ交換フォーマットで、ウェブアプリケーション開発において広く利用されている。例えば、このニュース記事では、以下のようなJSONデータ構造が提示されている。
まず、currency_by_localeという項目で、各ロケール(国や言語の組み合わせ)に対応する通貨が定義されている。例えば、「en」(英語圏)なら「USD」(米ドル)、「ja」(日本語圏)なら「JPY」(日本円)といった具合だ。次に、plansという配列には、それぞれの料金プランに関する情報が格納されている。「starter」や「growth」といったプランIDごとに、各通貨での価格、利用できる座席数、機能リストなどが含まれている。さらに、updatedという項目で、これらの情報がいつ更新されたかを示す日付が記録されている。
ここで重要なのは、各通貨の価格がリアルタイムの為替レートで自動変換されるのではなく、明示的に設定されている点だ。例えば、米ドルで29ドル、ユーロで27ユーロ、日本円で4300円、ブラジルレアルで149レアルというように、それぞれの地域に適した価格があらかじめ決められている。これは、リアルタイム変換だと為替レートの変動によって価格が頻繁に変わってしまい、顧客に不安定な印象を与える可能性があるためだ。あらかじめ設定された丸められた現地価格は、意図的な価格設定に見え、信頼感を与える効果がある。
この一元化されたJSONデータを使って、実際に多言語の料金テーブルをウェブページに表示するには、JavaScriptのIntl(Internationalization API)という組み込みオブジェクトが非常に便利だ。Intlは、数値、日付、時刻、文字列の比較など、多言語対応の国際化処理を行うための機能を提供する。
具体的には、pricing.jsonというファイルから価格データを、i18n.jsonというファイルから多言語対応のテキスト(「月ごと」「座席」といったラベル)を読み込む。そして、renderTableという関数に表示したいロケール(例えば「ja」)を渡すと、そのロケールに合わせた料金テーブルが生成される仕組みだ。
この関数の中で、まず指定されたロケールに対応する通貨をJSONデータから取得する。次に、Intl.NumberFormatというオブジェクトを生成する。これは、数値を指定されたロケールの書式で表示するためのもので、通貨記号の位置、小数点以下の桁数、桁区切り文字などを自動的に適切に処理してくれる。例えば、ユーロでは「€27,00」と表示される地域もあれば、「27,00 €」と表示されるドイツのような地域もあり、ブラジルでは「R$ 149,00」となるなど、国や地域によって表記ルールは多岐にわたるが、Intl.NumberFormatがこれらを吸収してくれる。日本円の場合、小数点以下は通常表示されないため、桁数を0に指定するといった細かい制御も可能だ。
その後、JSONデータ内の各プランをループ処理し、Intl.NumberFormatを使ってそのロケールに対応する価格を整形し、多言語対応テキストと組み合わせてHTMLのテーブル行を生成していく。最終的に、これらの行をまとめてHTMLのテーブルとして返す。さらに、更新日もtoLocaleDateStringというメソッドを使って、そのロケールに合った形式で表示される。
このようなシステムを構築する上で、もう一つ非常に重要なのが「データの検証」だ。すべてのロケールとプランについて、価格情報や多言語対応のテキストが欠けていないかを確認するテストを導入することが推奨される。例えば、すべてのロケールに対して、各プランの価格が定義されているか、あるいは「Starter」プランの日本語訳がi18n.jsonに存在するか、といったチェックを行う。もし一つでも情報が欠けていれば、ビルドプロセス(プログラムを動かせる形に変換する作業)を失敗させるように設定する。これは、不完全な情報が顧客に届いてしまうのを防ぐ最も安価で確実な方法であり、システムの信頼性を高める上で不可欠だ。
この「単一の情報源」からの多言語価格テーブル生成のアプローチは、単にウェブページの整理整頓にとどまらない、より大きな意味を持つ。まず、すべての言語バージョンで一貫性があり、かつ更新日も明記された価格情報を提供することで、顧客にとって非常に信頼性の高い情報源となる。検索エンジンやAIアシスタントがウェブページを読み込む際も、複数の言語バージョンで同じ事実が示されるため、正確な情報を取得しやすくなる。また、複数の通貨を比較する購買者にとっても、価格が為替変動に左右されない意図的なポリシーとして映り、企業の透明性と誠実さを印象付けることができる。さらに、このような一貫性のあるデータ管理は、専門の翻訳ツールと連携させることで、多言語サイト全体の翻訳ワークフローを効率化する基盤ともなる。