散らかったStorybookを整理する - Studyplus Engineering Blog

こんにちは。ForSchool事業部の石上(id:shgam)です。今回はStorybookの話です。

7/17にリニューアルしたStudyplus for Schoolでしたが、このとき導入したStorybookを活用できていませんでした。そもそも整備が足りてなかったので、1日もらってStorybookを整理しました。

社内esaとの重複もありますが改めてチームメンバーへの共有も兼ねて、このブログ記事を書いています。

f:id:shgam:20191015144104p:plain — Studyplus for School の Storybook

背景

コンポーネントカタログとして導入してあるStorybookでしたが、リリースに向けて忙しくなるうちに整理が後回しになり、ちゃんと活用できない状態になってしまっていました。

作業の話を始める前に、なぜコンポーネントカタログが必要か、そしてどんな問題があったかを整理しておきます。

そもそもなぜStorybookが必要なのか

Storybookのようなものがないと、画面を実装する際使えるパーツを探すのが難しく暗黙知に頼るしかなくなります。整理されたStorybookは、画面実装の助けになると思います。
Wikiみたいなところにテキストドキュメントで整理しようとすると、実装との乖離が発生しやすく整理するのは難しいです。Storybookなら実装したものをそのまま置く形になるので、現実のコンポーネントが確認できます。

問題と原因

以下のような問題がありました。

Storybookに追加されているけど使い回せないコンポーネントがある
- 原因：開発初期のコンポーネント分割のスキル不足(Atomic Designの理解が浅いままやってしまっていた)
Storybookに追加されてないコンポーネントがある問題
- 原因：いちいち追加するのが面倒
Storybookの認識が曖昧（何に使うものなのか、今どうなってるのか）
- 原因：ちゃんと整理されておらず、活用方法も特に共有していない

これらを解決するのをゴールに、修正をはじめました。

やったこと

Storybookに追加されているけど使い回せないコンポーネントがある

使い回せないコンポーネントがいくつかStorybookに存在してしまっていました。

本来なら適切にまとめる（たとえば無駄な分割がされたコンポーネントを親のコンポーネントに含める）ことが必要ですが、今回はStorybookの整理なので一旦Storybookから削除することにしました。

Storybookに追加されてないコンポーネントがある問題

いちいち追加するのが面倒だというのが明らかでした。そこで、コンポーネントをつくるときに必ずstoryが追加されるよう、コンポーネント生成コマンドを用意することにしました。

ただそれ以前に、各ストーリーがstories/index.stories.tsxにべた書きされていてファイルが分割できていませんでした。

// .storybook/config.ts
function loadStories() { require('../stories/index.stories.tsx'); }
configure(loadStories, module);

// stories/index.stories.tsx
storiesOf('atoms', module)
  .add('Hoge', () => <Hoge />)
  .add('Fuga', () => <Fuga />)
// これが延々と続く

これでは、コンポーネント生成のスクリプトからストーリーを追加するときに面倒です。

以下のように修正しました。

// .storybook/config.ts
import { configure } from '@storybook/react';
import "../src/styles/global.scss";

const loaderFn = () => {
const req = require.context('../stories', true, /\.tsx$/);
  req.keys().forEach(fname => req(fname));
};

configure(loaderFn, module);

// atoms/Tag.ts
 storiesOf('atoms', module)
  .add('Tag', () => {
    return (
      <Tag tag={{ id: "hogehoge", name: "タグ" }} />
    )
  })

stories以下はこうなりました。

$ tree stories/
stories/
├── atoms
│   ├── Card.tsx
│   ├── DoughnutChart.tsx
│   │_____ ...
└── molecules
    ├── EllipsisDropdown.tsx
    ├── SortLabel.tsx
    ├── ...

これなら、コンポーネントを作るときにストーリーファイルを生成するのも簡単です。atoms/Hogeを作るなら、stories下にも同じ名前で雛形ファイルを作ってあげればいいだけです。以下のスクリプトを用意しました。

const fs = require('fs');
const path = require('path')

const generateFile = (pathname, filename) => {
  const absolutePath = path.resolve(__dirname, pathname);
  const filePath = `${absolutePath}/${filename}`;

  if (!fs.existsSync(absolutePath)){
    fs.mkdirSync(absolutePath);
  }

  if (fs.existsSync(filePath)){
    console.log(`Error: ${filePath} already exists.`);
    return;
  }

  fs.appendFile(filePath, "// created by generator.", function(err) {
    if (err) { return console.log(err); }

    console.log(`${absolutePath}/${filename} generated.`);
  });
};

const generateComponent = (componentLevel, componentName) => {
  const filenames = ['index.tsx', 'styles.scss', 'styles.scss.d.ts'];

  filenames.forEach(filename => {
    generateFile(`../src/components/${componentLevel}/${componentName}`, filename);
  });
};
const generateStory = (componentLevel, componentName) => {
  generateFile(`../stories/${componentLevel}`, `${componentName}.tsx`);
}; 

const run = () => {
  const [processName, scriptName, ...options] = process.argv;
  const [componentLevel, componentName, ...undefinedOpts] = options;
  const validComponentLevels = ['atoms', 'molecules'];
  if (validComponentLevels.includes(componentLevel)) {
    generateComponent(componentLevel, componentName);
    generateStory(componentLevel, componentName);
  } else {
    console.log(`Error: コンポーネントレベルは${validComponentLevels.join(', ')}のいずれかにしてください`);
  }
}

run();

実行すると、必要なファイルが生成されるようになりました。

~/boron-web node scripts/componentGenerator.js atoms Hoge
/Users/gaaamii/boron-web/src/components/atoms/Hoge/styles.scss.d.ts generated.
/Users/gaaamii/boron-web/src/components/atoms/Hoge/index.tsx generated.
/Users/gaaamii/boron-web/src/components/atoms/Hoge/styles.scss generated.
/Users/gaaamii/boron-web/stories/atoms/Hoge.tsx generated.