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


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

What’s Hygen

https://www.hygen.io/

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」と入れました。適当ですみません。

$npx hygen generator components を実行します

生成されたファイル

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

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

<p>hoge component</p>
import HogeTemplate from './hoge.html';

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

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

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

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

Gaji-Laboでは、UIデザイナーを募集しています

弊社では手ざわりのいいUIを通して事業に貢献したいUIデザイナー、一緒にお仕事をしてくださるパートナーさんの両方を募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?

パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください!

求人応募してみる!

投稿者 Morita Sou

フロントエンドグループチームマネージャー。
適切な技術提案やプロジェクトを円滑に進めるコミュニケーションを心掛けています。
CMS構築や開発環境の構築・最適化などを得意としています。チームビルティングと採用と開発環境を快適にすることにいつも燃えています。