面倒なお決まりファイルの追加作業をhygenでさよならしよう

2023/05の時点ではコードジェネレーターライブラリとしてPlopを推奨します。
理由は、hygenがESM対応が難しい一方で、PlopはESM対応が自然にできるからです。
特にViteの利用時には、ESM対応に迫られるためPlopを利用する利点が大いにあります。

私は業務でよくReactを書いているのですが、コンポーネントのファイル追加作業が多く大変苦痛でした
例えばButtonコンポーネントを一個作るのに、Buttonディレクトリ、index.ts、Button.tsx、Button.spec.tsx、Button.stories.tsx...と多くのファイルを作る必要があります
しかも一部ファイルは定型文であるのが困り物で、眠たくなるような作業でした
このようなつまらないファイルの追加作業とさよならできるのが、hygenです！

hygenを使えば

hygenのサンプルコードをGitHubに用意しております
https://github.com/mymactive/my-code-generator-templates

このサンプル内にあるhygenのテンプレートを使ってみます
まずコマンドラインで次を叩きます

npx hygen fc new

以下の3つの質問があるので、答えていきます

✔ どのディレクトリに作成しますか？(Where is tha directory?) ex: src/common/components/ · src/common/components
✔ コンポーネント名は何ですか？(What is the name of component?) ex: Button · Button
✔ Propsは持ちますか？(Is it have props?) (Y/n) · true

すると、次のファイルがsrc/common/components配下に生成されます

• src
  • common
    • components
      • Button
        • index.ts
        • Button.tsx
        • Button.spec.tsx
        • Button.stories.tsx
        • styles.module.css

そしてButton.tsxの中身は次のようになってます

import { type FC } from "react";
import style from './styles.module.css';

export type Props = {
};

export const Button: FC<Props> = (props) => {
  return (
    <div className={style.module}>
      <h1>Hello World</h1>
    </div>
  );
};

このようにコマンド一発で、コンポーネントを作る際に必要なファイルを用意できます！

hygenの導入方法

hygenをインストールします

npm install --save-dev hygen
または
yarn add -D hygen

ワーキングディレクトリのルートに移動して、次でhygenを初期化できます

npx hygen init self

コンポーネントを作成するテンプレートの初期化をできます
(ここでfcはfunction componentの略記です）

npx hygen generator new fc

現在以下のようなディレクトリ構成になっていると思われます

• _templates
  • generator
  • init
  • fc
    • new
      • hello.js

これでテンプレートを作成する準備ができました
テンプレートの詳細はサンプルを眺めるのが一番であると思いますので、下記の参照を推奨します

https://github.com/mymactive/my-code-generator-templates

謝辞

当記事は社内勉強会用に作成しました
公式ドキュメント並びに下記の記事を参考に作成しております
この場を借りてお礼申し上げます

https://www.hygen.io/
https://zenn.dev/takepepe/articles/hygen-template-generator
https://zenn.dev/a_da_chi/articles/8eb5b2e06ed54b