Zenn
🐶

Reactのコンポーネントジェネレータ作った話

2022/01/02に公開
React
#
generator
#
component
tech

まえがき

こんにちは。Zennでの初の投稿になります。
普段は人材系事業会社でフロントエンドエンジニア（もどき）をしています。
おもにReactを使用して業務をしています。
拙い部分もあるかと思いますが、よろしければ最後まで読んでいただけると幸いです。

この記事で伝えたいこと

  • React用のコンポーネント生成CLIを作った（紹介）
  • あなたもCLIを自作して感じたメリット

この記事の読者

  • Reactのコンポーネントジェネレータを探していた
  • CLI作ってみたいけど、なにでどうやって作ればいいかわからない

なぜ

筆者はもともとAngularで開発をしていた身でしたので、Reactを始めた際にコンポーネント生成のCLIがないことにとても不便さを感じました。
ng g componentの体験の良さがとても気に入っていました。
なので同じ体験をReactでもしたいと思い探してみましたが、ちょうどいいCLIがない、ならば作ってしまおう！ということで自作することにしました。

本題

自作ジェネレータの紹介

こちらが私が作成したReactコンポーネントジェネレータ:cpooです。
（cpooという名前に深い意味はありません。響きが可愛いというだけでつけました:3）

内部ではoclifというNode.jsのCLIフレームワークを使用しています。

以下の手順で使用します。
まずは依存関係に追加してください。

yarn add -D cpoo

現在用意しているコマンドは2つです。

1つめは、初期設定コマンドです。

yarn cpoo init

cpooの設定ファイルを作成するコマンドで、設問形式のインターフェイスで簡単に設定することが可能です。
設問式のinitコマンド

初期設定では、

  1. コンポーネントファイルの拡張子（tsx | jsx | ts | js）
  2. どのファイルを生成するか（初期設定ではコンポーネントファイルのみ、追加でstorybookファイル、テストファイル、indexファイルを追加できます）
  3. テストファイルのtestMatch（test | spec）

を設定します。
設定完了

init設定後にはルートディレクトリに.cpoorcというファイルが生成されます。生成後に手動で編集も可能です。

{
  "extension": "tsx",
  "types": [
    "index",
    "storybook",
    "test"
  ],
  "testMatch": "test"
}

2つめは実際にコンポーネントを生成するコマンドです。

yarn cpoo generate ${componentName} ${path/to/component}

第一引数にはコンポーネント名を指定してください。
第二引数にはコンポーネントを配置するディレクトリを相対パスで指定してください。

生成コマンド

コンポーネントによってはテストファイルやstorybookファイルを生成したくないコンポーネントもあると思うので、除外フラグを指定することで特定のファイルを除外することが可能です。

yarn cpoo generate ${componentName} ${path/to/component} --excludeTest --excludeStory

CLIをプロダクトに導入して感じたメリット

実際にプロダクトに導入してみて感じたメリットは以下です。

  • コンポーネント新規実装時のめんどくささ（コピーや新規ファイル追加->書き換え）を軽減できる
  • そのプロジェクトでコンポーネントを作成する際の必要なファイルの共通認識を強制できる

プロダクト初期だと、特に新規コンポーネント作成の機会が多いですよね。その際に、既存のコンポーネントをコピーして、書き換えて、、となると意外と面倒です。
そのコストを軽減できるのは地味に嬉しいです。

また、新規でコンポーネントを作成したときに、工数が逼迫していてテストやstorybookのファイルは後回しで。。なんていうこともあるかと思います。
しかし、CLIで強制することでコンポーネントを実装する際はテストを書いて、storybookを更新してというのを自然の流れにできます。
一度コンポーネントを作成したあとに後回しにしたテストをあとから追加することよりも、作成時に同時に書けたほうが遥かに楽ですし、テストがあるのとないのでは保守性の面でもかなり変わってきます。

まとめ

今回はコンポーネントのジェネレータを題材にしてみましたが、日々の実装の中でCLIを作成することによって工数を削減できることは他にも多くあると思います。
以下に業務を楽にするかというのはエンジニアの命題でもあると思うので、テンプレ化できそうな作業があればCLIにしてみることを検討してみてはいかがでしょうか？

また、私の自作ジェネレータはまだまだ改善できる点も多いので、こういった機能がほしいであったり、こういうフラグがあったら嬉しいなどご意見頂戴できたらと思います。

ここまで読んでくださり、ありがとうございました！

GitHubで編集を提案

Discussion