はじめに#
データ可視化ツール RAWGraphs を日本語化し、公開しました。
https://rawgraphs-ja.vercel.app/
RAWGraphsは、複雑なデータを美しいビジュアライゼーションに変換できるオープンソースのWebアプリケーションです。コーディング不要で、CSVやJSONデータをドラッグ＆ドロップするだけで、様々なチャートを作成できます。
RAWGraphsとは#
RAWGraphsは、イタリアのDensityDesign Research Labが開発したデータ可視化ツールです。
https://www.rawgraphs.io/
主な特徴：
- コーディング不要 : ブラウザ上でデータをペーストするだけ
- 多様なチャート : Alluvial Diagram、Treemap、Voronoi Tessellationなど30種類以上
- SVGエクスポート : 作成したチャートをSVGやPNG形式でダウンロード可能
- プライバシー保護 : データはサーバーに送信されず、ブラウザ内で処理
使用ライブラリ#
!
最新版のi18nextではなく、互換性のある旧バージョンを使用しています。RAWGraphsのビルド環境（react-scripts 4.x）がオプショナルチェーニング（?.）構文を完全にサポートしていないためです。
実装手順#
1. i18nの初期化#
src/i18n.js を作成し、多言語対応の基盤を構築しました。
2. 翻訳ファイルの構造#
翻訳ファイルは、セクションごとに整理しました：
3. コンポーネントへの適用#
各コンポーネントで useTranslation フックを使用：
4. 言語切り替えUI#
ヘッダーに言語切り替えボタンを追加：
翻訳した箇所#
以下のUIテキストをすべて日本語化しました：
| カテゴリ | 内容 |
|---|
| ナビゲーション | ヘッダー、フッター |
| データ読み込み | ペースト、アップロード、SPARQL、URLからの読み込み |
| チャート選択 | チャート一覧、フィルター |
| データマッピング | ディメンション、変数の説明 |
| カスタマイズ | 色、サイズ、アートボード設定 |
| エクスポート | ダウンロードボタン |
| エラーメッセージ | パースエラー、型の不一致など |
| ツールチップ | 各種ヒント表示 |
苦労した点#
1. ライブラリの互換性#
最新版のi18next（v23以降）を使用すると、ビルド時にエラーが発生しました：
!
新しいi18nextがオプショナルチェーニング構文を使用しており、古いBabel設定と互換性がないためです。解決策として、互換性のある旧バージョン（v21系）を指定しました。
2. 動的テキストの翻訳#
「7 rows (35 cells) have been successfully parsed」のような動的な数値を含むメッセージは、i18nextの補間（interpolation）機能を使用：
3. 依存パッケージのバージョン固定#
Vercelでのビルド時に、yarn.lock の再生成により依存パッケージがアップデートされ、CSSファイルが見つからないエラーが発生：
package.json でバージョンを厳密に固定することで解決：
!
キャレット（^）を削除することで、semverによる自動アップデートを防ぎます。
デプロイ#
Vercelを使用して自動デプロイを設定しました。GitHubリポジトリにプッシュするだけで、自動的にビルド・デプロイされます。
まとめ#
react-i18nextを使用することで、RAWGraphsの日本語化を実現できました。
!
ポイント
- ライブラリ選定 : 互換性を確認し、適切なバージョンを選択
- 翻訳ファイルの構造化 : セクションごとに整理して保守性を確保
- 動的コンテンツ対応 : 補間機能を活用
- ユーザー設定の永続化 : localStorageで言語設定を保存
日本語版RAWGraphsをぜひお試しください！
https://rawgraphs-ja.vercel.app/
リポジトリ#
https://github.com/nakamura196/rawgraphs-app
参考リンク#