Storybook のコンポーネントファイル一式の生成を楽する Hygen

こんにちは森田です。
前回の記事で Storybookの導入などの記事を書いたのですが、日々のUIコンポーネントカタログにコンポーネントを作成する作業では1コンポーネントごとに複数のファイルを追加する必要があり正直面倒です。
今回はそんな時にとても便利な Hygen を紹介します。

What’s Hygen

Hygen は決められたテンプレートからファイルを生成することができるコードジェネレーターです。

公式サイトには以下のように書かれています。

時間を節約するスケーラブルなコードジェネレーター。

The scalable code generator that saves you time.

まさにその通りの機能で、自由度が高くテンプレートを作成でき、強力な時間節約をできます。

インストールと設定

Hygen は homebrew か npm でインストールができます。
基本的にプロジェクトメンバーが使うことになるので npm でローカルインストールします。

$ npm install hygen

今回は npx hygen で実行しますが npm script などに設定しても良いでしょう。

テンプレート作成

まずはルート直下に _template ディレクトリを作成しテンプレートファイルを作成します。
今回は _templates/generator/components ディレクトリにテンプレートファイルを置いていきます。

prompt.js

prompt.js を設置することでコマンドラインを対話形式にすることができます。

コマンド実行時にコンポーネント名を指定するプロンプトを作ります。

module.exports = [
    {
        message: 'What is the name of component?',
        name: 'name',
        type: 'input',
        validate: (answer) => {
            if (answer !== '') {
                return true;
            }
        },
    },
];

今回は簡単なコンポーネント名を指定するのみのプロンプトにしましたが、選択式など複雑なプロンプトを指定することも可能です。

テンプレートファイル

続いてジェネレートされるベースになるコンポーネントのテンプレートファイルです。
今回は Storybook for HTML を想定しているのでstories.js ファイルと html ファイルを作成します。

まずは stories.js ファイルを作成します。
変数を受け取る場合は ejs 形式で作成するので stories.js.ejs.t という複雑な拡張子になっております。

プロンプトで受け取る name をコード内に配置します。
キャメルケースにする camelize など関数も用意されておりカスタマイズが可能です。

---
to: stories/components/<%= name %>/<%= name %>.stories.js
---
<% camelizedName = h.inflection.camelize(name) -%>

import <%= camelizedName %>Template from './<%= name %>.html';

export default {
    title: 'Components/<%= camelizedName %>s',
};

export const <%= camelizedName %> = () => {
    return <%= camelizedName %>Template;
};

htmlファイルは特に中身に指定はないので to: でジェネレート先をしてしておきます。

---
to: stories/components/<%= name %>/<%= name %>.html
---
<p><%= name %> component</p>

今回は以下のような3つのファイルを作成しました。

プロジェクトによってはこれにテストファイルやCSSファイルなどもっとファイルが必要になりかもしれません。
そうなるとより Hygen が必要になりますね。

ファイル生成

$npx hygen generator components コマンドを実行します。
コマンドはテンプレートを設置した階層名になります。

prompt.js で設定したコンポーネント名を入力するダイヤログが出るので入力します。
今回は仮で「hoge」と入れました。適当ですみません。

生成されたファイル

ジェネレートされたコード

以下のようなファイルが生成されました。
コードを見てみましょう。

<p>hoge component</p>

import HogeTemplate from './hoge.html';

export default {
    title: 'Components/Hoges',
};

export const Hoge = () => {
    return HogeTemplate;
};

テンプレートに指定した変数がちゃんと指定したコンポーネント名に変換されています。
これでコンポーネント追加も最初のファイル作成の煩わしさが省けて捗りますね。

Hygen はファイル生成が必要な様々な場面で使えるのでオススメのツールです。