👋

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

2022/08/10に公開

Node.js

React

hygen

tech

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

hygenを使えば

hygenのサンプルコードをGitHubに用意しております

このサンプル内にある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://www.hygen.io/

GitHubで編集を提案

hygenを使えば

hygenの導入方法

謝辞

Discussion