generate-react-cliでコンポーネント作成のストレスを無くした

はじめに

2月中旬から０⇨１のEC開発に携わることになり、絶賛スタートアップで開発しています。
今回はNext.js（React）を使用して開発を進めていく上で、コンポーネント生成を行なっていく中でディレクトリ内がコンポーネントやStorybook、テストといった三つで構成させている場合、一つ一つ丁寧に作るのがストレス&手間だったので今回はCLIライブラリの generate-react-cliを導入してコマンド一つでStory、テスト、ファイルを含んだコンポーネント作成してみました！

generate-react-cliとは??

コンポーネントをCLI（Command Line Interface）で生成することができるReactのライブラリツールです。
またコンポーネント生成時にCSS、StoryBook、lazy、testファイルも同時に生成やディレクトリ配下の指定、TSの変更やSCSS指定、テストツール指定をOptionで設定することができます。

ドキュメント generate-react-cli

ライブラリ導入

npm install --save-dev generate-react-cli

インストール時にはまだ設定が行えるgenerate-react-cli.jsonは存在しません。

設定手順・コンポーネント作成

Configの設定方法は、以下の通り、、

When you run GRC within your project the first time, it will ask you a series of questions to customize the cli for your project needs (this will create a "generate-react-cli.json" config file).

とあるので、generate-react-cliのコマンドをプロジェクト内で初めて実行した時に設定を行うためいくつか質問されるとあるので実行してみましょう。

以下を実行してみます。

npx generate-react-cli component Box

すると、下記のようなコマンドライン状でTSを使用するかといった質問のような形でCSSを追加するか、StoryBookを導入するかなどを順に応えてきます。

例えば、

• TS：有
• CSS module：無し
• スタイル：CSS
• テストツール：React Testing Library
• 生成時のディレクトリ指定： src/components
• CSSファイルの作成：無し
• Storybookファイルの作成：有
• テストファイルの作成：有
• lazyファイルの作成：無し
  と以下のコマンドラインで質問を応えていきます。

すると以下のgenerate-react-cli.jsonが作成され、src/components配下にBoxコンポーネントが作成されました。

generate-react-cli.json

{
  "usesTypeScript": true,
  "usesCssModule": false,
  "cssPreprocessor": "css",
  "testLibrary": "Testing Library",
  "component": {
    "default": {
      "path": "src/components",
      "withStyle": false,
      "withTest": true,
      "withStory": true,
      "withLazy": false
    }
  }
}

Boxコンポーネント

Box.tsx

import React, { FC } from 'react';


interface BoxProps {}

const Box: FC<BoxProps> = () => (
  <div data-testid="Box">
    Box Component
  </div>
);

export default Box;

Box.stories.tsx

/* eslint-disable */
import Box from './Box';

export default {
  title: "Box",
};

export const Default = () => <Box />;

Default.story = {
  name: 'default',
};

Box.test.tsx

import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import Box from './Box';

describe('<Box />', () => {
  test('it should mount', () => {
    render(<Box />);
    
    const box = screen.getByTestId('Box');

    expect(box).toBeInTheDocument();
  });
});

それぞれのBoxコンポーネントのディレクトリ内に、デフォルトのファイルが生成されました。
なので、コマンドに
npx generate-react-cli component Card
とすれば、テストやStoryを含んだCardコンポーネントが作成されます。

これらのファイルを一つひとつ作るより、コマンド一つで全部作れるのがエモいですよね〜（語彙力。。）

Path指定でコンポーネント生成も可能

Atomic Designなどコンポーネント設計を行なっていると、atomsやmoleculesなどのディレクトリ構造が多岐になると思います。
そういった場合は、それぞれのpathを指定してその配下にコンポーネントを作ることも可能です。

設定ファイルに以下の記述を追加します。

generate-react-cli

{
  ///////
   👇 追加
    "atoms": {
      "path": "src/components/atoms",
      "withStyle": false,
      "withTest": true,
      "withStory": true,
      "withLazy": false
    },
    "molecules": {
      "path": "src/components/molecules",
      "withStyle": false,
      "withTest": true,
      "withStory": true,
      "withLazy": false
    },
    "layout": {
      "path": "src/components/layout",
      "withStyle": false,
      "withTest": true,
      "withStory": true,
      "withLazy": false
    },
  }
}

この設定で、
npx generate-react-cli component Header --type=layoutを実行すると、

layoutディレクトリ配下にHeaderコンポーネントが作成されました。

他にも色々〜

customTemplatesオプションでそれぞれの独自ファイル名でコンポーネント名を作成することが可能です。

まとめ・感想

• generate-react-cliは、CLI状でコンポーネントの作成が可能。
• 作成する時はnpx generate-react-cli component コンポーネント名 （オプション名）。
• Configファイルで、cssやtest、Storybookのファイル群生成の設定。

今回、スタートアップのプロジェクトでReact（Next.js）周りをごりごり作成するにあたって、コマンド一つでさくさくコンポーネントのファイル群が作成でき開発効率向上とストレスが下がりました。