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


# はじめに

![](https://raw.githubusercontent.com/arminbro/generate-react-cli/master/docs/assets/generate-react-cli.svg?raw=true)

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](https://www.npmjs.com/package/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を導入するかなどを順に応えてきます。

![スクリーンショット 2022-04-23 14.38.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/924294/b59b062e-9a3b-603d-763e-bb775c386d7e.png)

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

![スクリーンショット 2022-04-23 14.50.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/924294/551b9f02-ea20-bdf9-5361-f2bf104dd6ed.png)

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

```json: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コンポーネント**

```typescript:Box.tsx
import React, { FC } from 'react';


interface BoxProps {}

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

export default Box;
```

```typescript:Box.stories.tsx
/* eslint-disable */
import Box from './Box';

export default {
  title: "Box",
};

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

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

```

```typescript: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を指定してその配下にコンポーネントを作ることも可能です。

設定ファイルに以下の記述を追加します。
```json: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`を実行すると、
![スクリーンショット 2022-04-24 11.21.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/924294/4727052b-dd1f-53a8-cf6f-ac31c9b065cd.png)
layoutディレクトリ配下にHeaderコンポーネントが作成されました。

### 他にも色々〜

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

## まとめ・感想

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

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