Storybookとvue-i18nで多言語確認を容易にしよう
はじめに
こんにちは、株式会社スタディスト 開発部Webグループの笹木です。
先日、スタディスト開発部合宿(下記記事参照)の一環で、 Storybook 上で表示言語を切り替えられるようにし、UIの多言語検証を容易にする取り組みを行ったのでご紹介しようと思います。
背景
弊社が開発、運用しているTeachme Biz のフロントエンドはVue.jsで実装されており、UIコンポーネントをカタログ化するStorybookでの開発を基本としています。
弊社でのStorybookの活用例として、以下のような記事もありますので、ご興味がありましたら、ぜひご覧頂ければ幸いです。
現状の問題点
Storybookの活用は、プロダクトであるアプリケーションを起動すること無く、UIコンポーネント単体での動作確認を可能とする上、UIコンポーネントのデザインをチーム間で共有する上で強力な武器となっていました。
しかし、デザインを共有する上で、痒いところに手が届かない問題が一つ見つかりました。それは多言語化です。
Teachme Bizでは、現在(2019/06) 日本語、英語、そしてタイ語の３言語をサポートしています。それぞれの言語は、同じ意味を表す文言でも、一つの単語で表現できなかったり、文字数が大きく異なったりするなど、デザインにも大きな影響を与えます。
また、Teachme Bizでは、多言語化にVueI18nを使用しており、以下のようにブラウザの言語設定を元に、言語設定の切り替えを行います。
そのため、言語ごとのデザイン崩れが生じていないか、適切な翻訳文が設定されているかなどを確認するためには、都度ブラウザの設定画面を開き、言語設定を切り替えた上でリロードする必要がありました。
これではスマートではありません。せっかくのstorybookがあっても、一々ブラウザの設定を変えて画面をリロードしてを言語数分やって、翻訳の確認をしていたら日が暮れてしまいます。
Storybook上で動的に言語を切り替える
そこで、Storybook上では、ブラウザの言語設定に関係なく、画面上から言語を切り替えられるような仕組みづくりを行うことにしました。
完成形からお見せしますと、以下の通りです。
言語の切り替えには、Storybookのaddonである、Knobs を活用しました。Knobsの本来の役割は、画面上からUIコンポーネントのプロパティなどを動的に変更し、UIコンポーネントの振る舞いを検証することが出来る優れたアドオンです。もちろん本来のKnobsの用途としても日々活用しているので、今回は既存の仕組みに言語の切り替え機能を追加したという形になります。
ベースとなるコードは以下になります。(実際はもう少し複雑なので簡略版となってます)
addDecoratorは、Storybookで表示するコンポーネントをラップするDecoratorを追加する関数です。これによって、Storybook上の全てのコンポーネントを、<story>というラッパーコンポーネントでラップして描画します。
<story> には、storybookLocale という、現在選択中の言語情報(ja, en, th)をpropsでも持たせます。storybookLocaleの設定値は、Knobsのselectを使うことで、画面上のセレクタから指定できるようにします。
そして、storybookLocaleの変更をwatchし、変更があるごとに、VueI18nのローケル設定を動的に変更します。propsが変更されることによって、コンポーネントの再描画が走り、新しく設定された言語でコンポーネントが描画されます。これによって、画面上が動的に言語を切り替え、素早く多言語のデザイン検証を行えるようになりました。
最後に
現在スタディストではマニュアル作成・共有プラットフォームTeachme Bizを一緒に開発していくエンジニアの仲間を募集しています。
Storybookを活用した開発にご興味がある方、お待ちしております！(サーバサイドやネイティブアプリの人も大募集中です)
