💬

RAWGraphs 2.0 の日本語化

2025/12/03に公開

はじめに

データ可視化ツール RAWGraphs を日本語化し、公開しました。

https://rawgraphs-ja.vercel.app/

RAWGraphsは、複雑なデータを美しいビジュアライゼーションに変換できるオープンソースのWebアプリケーションです。コーディング不要で、CSVやJSONデータをドラッグ＆ドロップするだけで、様々なチャートを作成できます。

RAWGraphs日本語版のスクリーンショット

RAWGraphsとは

RAWGraphsは、イタリアのDensityDesign Research Labが開発したデータ可視化ツールです。

https://www.rawgraphs.io/

主な特徴：

コーディング不要: ブラウザ上でデータをペーストするだけ
多様なチャート: Alluvial Diagram、Treemap、Voronoi Tessellationなど30種類以上
SVGエクスポート: 作成したチャートをSVGやPNG形式でダウンロード可能
プライバシー保護: データはサーバーに送信されず、ブラウザ内で処理

使用ライブラリ

package.json

{
  "i18next": "^21.10.0",
  "react-i18next": "^11.18.6"
}

実装手順

1. i18nの初期化

src/i18n.js を作成し、多言語対応の基盤を構築しました。

src/i18n.js

import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'

import translationEN from './locales/en/translation.json'
import translationJA from './locales/ja/translation.json'

const resources = {
  en: { translation: translationEN },
  ja: { translation: translationJA }
}

const savedLanguage = localStorage.getItem('i18nextLng') || 'ja'

i18n
  .use(initReactI18next)
  .init({
    resources,
    lng: savedLanguage,
    fallbackLng: 'en',
    interpolation: { escapeValue: false }
  })

i18n.on('languageChanged', (lng) => {
  localStorage.setItem('i18nextLng', lng)
})

export default i18n

2. 翻訳ファイルの構造

src/locales/
├── en/
│   └── translation.json
└── ja/
    └── translation.json

翻訳ファイルは、セクションごとに整理しました：

src/locales/ja/translation.json

{
  "app": {
    "section1": "1. データを読み込む",
    "section2": "2. チャートを選択",
    "section3": "3. マッピング",
    "section4": "4. カスタマイズ",
    "section5": "5. エクスポート"
  },
  "dataLoader": {
    "paste": "データを貼り付け",
    "upload": "データをアップロード",
    "successMessage": "{{count}}行（{{cells}}セル）が正常に解析されました。チャートを選択してください！"
  }
}

3. コンポーネントへの適用

各コンポーネントで useTranslation フックを使用：

import { useTranslation } from 'react-i18next'

function DataLoader({ data, columns }) {
  const { t } = useTranslation()

  return (
    <div>
      <h2>{t('dataLoader.paste')}</h2>
      <p>
        {t('dataLoader.successMessage', {
          count: data.length,
          cells: data.length * columns
        })}
      </p>
    </div>
  )
}

4. 言語切り替えUI

ヘッダーに言語切り替えボタンを追加：

import { useTranslation } from 'react-i18next'

function LanguageSwitcher() {
  const { i18n } = useTranslation()

  return (
    <div className="language-switcher">
      <button
        onClick={() => i18n.changeLanguage('en')}
        className={i18n.language === 'en' ? 'active' : ''}
      >
        EN
      </button>
      <button
        onClick={() => i18n.changeLanguage('ja')}
        className={i18n.language === 'ja' ? 'active' : ''}
      >
        JA
      </button>
    </div>
  )
}

翻訳した箇所

以下のUIテキストをすべて日本語化しました：

カテゴリ	内容
ナビゲーション	ヘッダー、フッター
データ読み込み	ペースト、アップロード、SPARQL、URLからの読み込み
チャート選択	チャート一覧、フィルター
データマッピング	ディメンション、変数の説明
カスタマイズ	色、サイズ、アートボード設定
エクスポート	ダウンロードボタン
エラーメッセージ	パースエラー、型の不一致など
ツールチップ	各種ヒント表示

苦労した点

1. ライブラリの互換性

最新版のi18next（v23以降）を使用すると、ビルド時にエラーが発生しました：

Module parse failed: Unexpected token
You may need an appropriate loader to handle this file type.

2. 動的テキストの翻訳

「7 rows (35 cells) have been successfully parsed」のような動的な数値を含むメッセージは、i18nextの補間（interpolation）機能を使用：

// 翻訳ファイル
"successMessage": "{{count}}行（{{cells}}セル）が正常に解析されました"

// コンポーネント
t('dataLoader.successMessage', {
  count: data.length,
  cells: data.length * columns
})

3. 依存パッケージのバージョン固定

Vercelでのビルド時に、yarn.lock の再生成により依存パッケージがアップデートされ、CSSファイルが見つからないエラーが発生：

Error: Can't resolve '~react-data-grid/dist/react-data-grid.css'

package.json でバージョンを厳密に固定することで解決：