hygenで雛形Reactコンポーネントを作成する

こんにちは、株式会社スタメンでフロントエンドエンジニアをしている @0906kokiです。 今回はhygenで雛形のReactコンポーネントを生成する方法を書きたいと思います。 hygenとは hygenとはnode.jsベースで作られた、CLIでの対話型コード生成ライブラリです。 予めテンプレートを作成しておき、CLIでhygenを起動することで対話的にコードを生成することができるので、毎回同じコードを書く必要がなくなります。 Reactコンポーネントをhygenで生成してみる それぞれのプロジェクトでコード規約や設計が異なっているので、プロジェクトに合ったテンプレートを記述する必要がありますが、今回はあくまでサンプルとしてAtomic Designに沿ったReactコンポーネントの生成とそれに付随するStorybook用のファイルを生成する方法を書きたいと思います。 最終的なイメージ