👋

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

2022/08/10に公開


私は業務でよく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

GitHubで編集を提案

Discussion