学ぶ、考える、書き出す。

学習し、自分なりに噛み砕いて、書き出すブログ。

ブログを国際化対応した

当ブログのUIで使う文言を国際化対応しました。

Introduce i18n by kubosho · Pull Request #933 · kubosho/blog.kubosho.com

国際化対応にはrosettaという軽量の国際化対応ライブラリーを使いました。

文言だけを各言語に対応させる分には必要なAPIが揃っていたのと、bundle sizeが426バイトだったのでJavaScriptのサイズが大きくならないのも良いと思い、rosettaを選択しました。

きっかけとしては、Androidアプリでの開発ではLintで文字列に都度IDを振って文字列リソースとして記載するよう指摘される旨のツイートを見て、Webでも同じ対応を入れていいはずと感じたためやりました。

正直あまり深く考えずにやれそうだからやりますわ~という感じでやりました。

感想としては、文言が特定のディレクトリに集約されたため、文言を変えるときに作業が楽になるなと感じました。

多言語対応という意味では現状日本語しか対応していないため、国際化対応によって何か得られたというのは無いです。

今後はブログの記事も多言語で書けるようになっていきたいです。

記事を共有する

関連記事

  1. Next.js + Vercel + microCMSなどを使ってほぼ無料でブログを運用する

    当ブログのシステム構成について紹介します。構成を真似することでほぼ無料(後述)でブログを運営できます。

  2. ブログ記事を投稿するためのフォームを作った

    はてなブログのMarkdownによる記事編集画面やesa - 自律的なチームのための情報共有サービスのように、本文の編集画面とリアルタイムプレビューが横並びになるような投稿フォームが個人的に好みです。

  3. eslint-plugin-importによってVitestの設定ファイル上でエラーが発生する場合がある

    vitest と eslint-plugin-import に依存している環境では、vitest.config.ts内で vitest/config をインポートすると Unable to resolve path to module 'vitest/config'. eslint(import/no-unresolved) というエラーが出る場合があります。

  4. ファミリーマート公式Twitterのツイートからより良い画像の代替テキスト(alt)を考える

    ファミリーマートの公式Twitterのツイートに、画像の代替テキストを改善できそうなツイートがありました。