SocialDog Growthチームエンジニアの小久保です。
この記事では、実装したStorybook上でi18n対応しているコンポーネントの表示言語を切り替える方法について説明します。
この記事のコードは以下のリポジトリに置いてあります。
実際にできたもの
画面上部のツールバーから表示したい言語を指定することで、言語が切り替えられます。
またparameters.languageに言語を指定することで、デフォルトで表示する言語を指定できます。
デフォルトで表示する言語を指定できると、Visual Regression Testing(VRT)を行う際に、任意の言語でテストできます。
export const Japanese: Story = {
parameters: {
// ツールバーで言語を指定していないときは日本語で表示する
language: "ja",
},
};
export const English: Story = {
parameters: {
// ツールバーで言語を指定していないときは英語で表示する
language: "en",
},
};
表示言語を切り替える仕組みを実装する
StorybookのToolbarsとDecoratorsを使って仕組みを実装します。
実装
まず、Toolbarsの設定です。
この設定により、上部のツールバーから言語を選択できるようになります。
// .storybook/preview.ts
const preview: Preview = {
globalTypes: {
// Toolbarの設定
language: {
description: "表示する言語",
toolbar: {
icon: "globe",
dynamicTitle: true,
items: [
{ value: "ja", title: "Ja" },
{ value: "en", title: "En" },
{ value: undefined, title: "Default" },
],
},
},
},
};
export default preview;
次に、Decoratorを実装します。
ctx.globals.languageにToolbarsで指定した言語が、ctx.parameters.languageにStoryで指定した言語が入っています。
ここではContextを使っていますが、使っているi18nライブラリに応じて実装を変えてください。
const defaultLanguage = "ja";
/**
* ContextからStoryに適用する言語を取得する
**/
function getLanguageFromContext(ctx: StoryContext) {
const params = ctx.parameters?.language;
const selected = ctx.globals.language;
/**
* 言語の優先順位
* 1. Toolbarで指定した言語
* 2. parametersで指定した言語
* 3. デフォルトの言語(ja)
*/
return selected ?? params ?? defaultLanguage;
}
/**
* LanguageContextをStoryに適用するDecorator
*/
export function languageProviderDecorator(): DecoratorFunc {
return (Story, ctx) => {
const language = getLanguageFromContext(ctx);
return (
<LanguageContext.Provider value={language}>
<Story />
</LanguageContext.Provider>
);
};
}
最後に、実装したDecoratorをpreview.tsに追加して完了です。
// .storybook/preview.ts
const preview: Preview = {
+ decorators: [languageProviderDecorator()],
globalTypes: {
// Toolbarの設定
language: {
description: "表示する言語",
あとがき
Storybookで表示言語を切り替える方法について紹介しました。
SocialDogでは、コンポーネント開発の効率化や共通コンポーネントの共有、レビュー時の動作確認などを目的として、Storybookを利用しています。
しかし、運用上の課題として、言語の表示に関する決まりがなく、Storyによって言語を切り替えられないものがあったり、切り替え方法の実装がバラバラだったりしました。
今回はその課題を解決すべく、Storybookで表示言語を切り替える統一した仕組みを実装しました。
SocialDogのプロダクトビジョンである「世界中で使われるSNSマネジメントプラットフォーム」を実現するため、これからもi18n対応の取り組みを続けていきます！
Discussion