Simple Icons の国際化 API 設計：多言語対応のアーキテクチャ実装

【無料ダウンロードリンク】simple-icons プロジェクト: https://gitcode.com/gh_mirrors/sim/simple-icons

プロジェクト背景と国際化ニーズ

オープンソースのアイコンライブラリである Simple Icons は、ブランド名を多言語環境で表示する必要性が増しています。現在、プロジェクトでは _data/simple-icons.json にアイコンのメタデータが保存されており、一部のアイコンには aliases.aka フィールド（例: .ENV アイコンには "Dotenv" の別名）が含まれていますが、体系的な多言語サポートの構造が欠けています。グローバルユーザーの増加に伴い、API レベルでの国際化はユーザーエクスペリエンス向上の鍵となっています。

国際化 API のコアアーキテクチャ

データ層設計

多言語サポートの基盤となるのは、異なる言語のブランド名を構造化して保存することです。推奨される方法は、_data/simple-icons.json のアイコンオブジェクト構造に新しい i18n フィールドを追加し、多言語タイトルを格納することです。

{
  "title": ".NET",
  "hex": "512BD4",
  "i18n": {
    "en": ".NET",
    "ja": "ドットネット",
    "zh": "点网"
  },
  "aliases": {
    "aka": ["Dotnet"]
  }
}

この設計により、後方互換性が保たれ、元の title フィールドはデフォルト言語（英語）として機能します。

コア変換関数の実装

国際化 API の主要な機能は、sdk.mjs 内の文字列処理関数によって提供されます。

1. タイトルの標準化処理

sdk.mjs の sanitizeTitleForHtml 関数（行 100-109）は、HTML 特殊文字のエスケープを既に実現しています。

export const sanitizeTitleForHtml = (brandTitle) =>
  brandTitle
    .replace(/&/g, '&amp;')
    .replace(/"/g, '&quot;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/[^\x00-\x7F]/g, (char) => `&#${char.charCodeAt(0)};`);

この関数は、中国語や日本語などの非 ASCII 文字を正しくレンダリングするために使用できます。

2. 国際化によるソートの実現

sdk.mjs 行 219-222 で定義されている collator オブジェクトを使用することで、現在の言語環境に基づいたタイトルのソートが可能です。

export const collator = new Intl.Collator('en', { usage: 'search', caseFirst: 'upper' });

この機能を拡張し、動的言語パラメータに対応させることで、多言語環境でのソートを実現できます。

export const createLocalizedCollator = (lang = 'en') =>
  new Intl.Collator(lang, { usage: 'search', caseFirst: 'upper' });

API インターフェース設計と使用例

多言語タイトル取得 API

sdk.mjs に fetchLocalizedTitle 関数を追加し、指定された言語コードでタイトルを取得できるようにします。

/**
 * アイコンのローカライズされたタイトルを取得
 * @param {IconData} icon - アイコンデータオブジェクト
 * @param {string} lang - 言語コード（例: 'ja'）
 * @returns {string} ローカライズされたタイトル
 */
export const fetchLocalizedTitle = (icon, lang = 'en') => {
  if (icon.i18n?.[lang]) {
    return sanitizeTitleForHtml(icon.i18n[lang]);
  }
  // デフォルトのタイトルまたは別名にフォールバック
  return sanitizeTitleForHtml(icon.title);
};

多言語ソートの例

ソート関数とローカライズタイトルを組み合わせて、地元言語に基づいて並べ替えたアイコンリストを生成します。

import { fetchIconsData, createLocalizedCollator, fetchLocalizedTitle } from './sdk.mjs';

async function sortIconsByLocale(lang) {
  const icons = await fetchIconsData();
  const collator = createLocalizedCollator(lang);

  return icons.sort((a, b) =>
    collator.compare(fetchLocalizedTitle(a, lang), fetchLocalizedTitle(b, lang))
  );
}

// 使用例：日本語でソートされたアイコンリストを取得
sortIconsByLocale('ja').then(icons => console.log(icons));

国際化ワークフローとツールチェーン

データ検証

scripts/lint/jsonlint.js を拡張して多言語データを検証し、次の要件を満たすことを確認します。

言語コードが ISO 639-1 標準に従っている
全ての i18n フィールド値が空ではない
最低限 en 言語定義が含まれている

翻訳ファイルのエクスポート/インポート

scripts/i18n/export-translations.js スクリプトを追加し、すべてのアイコンタイトルを PO ファイルにエクスポートすることで、コミュニティ翻訳を容易にします。

node scripts/i18n/export-translations.js --lang ja > translations/ja.po

翻訳が完了したら、scripts/i18n/import-translations.js を使って _data/simple-icons.json にマージします。

パフォーマンス最適化とキャッシュ戦略

言語パックの分離

大規模アプリケーションの場合、主 JSON から多言語データを分離し、言語パックファイル（例: i18n/ja.json）として構築し、必要に応じて動的にインポートします。

// 日本語言語パックを動的に読み込む
const loadJapaneseLocale = async () => {
  const japaneseTitles = await import('./i18n/ja.json');
  return japaneseTitles;
};

キャッシュの実装

Map オブジェクトを使用して既にロードされた言語パックをキャッシュし、重複するネットワークリクエストを避けることができます。

const localeCache = new Map();

async function fetchLocaleData(lang) {
  if (localeCache.has(lang)) {
    return localeCache.get(lang);
  }

  const data = await import(`./i18n/${lang}.json`);
  localeCache.set(lang, data);
  return data;
}

まとめと将来の拡張

Simple Icons の国際化 API は、構造化された i18n データフィールド、柔軟な言語切り替えメカニズム、および完全なツールチェーンサポートを通じて、グローバルユーザーにローカライズされた体験を提供します。今後の改善ポイントとしては：

RTL（右から左）言語のサポートを拡張
ブランド説明の多言語サポートを実装
Web Component を開発し、即プラグイン可能な多言語アイコンコンポーネントを提供

このアーキテクチャにより、Simple Icons は世界中の100以上の言語をシームレスにサポートし、オープンソースプロジェクトの国際的な影響力をさらに高めることができます。