さいとブログ

コンポーネントを新しく作るとき、他のコンポーネントから
import文とかをコピーしてくるのは手間なので、
CLIを自作して、コマンド一発で出来るようにします。

こちらの記事を参考にやったら少し詰まったので、記事にしておこうと思います。

目標

• Node.jsで自作コマンドを作る
• コマンド一発でコンポーネントを作成できるようにする

今回使用するVersion

node 14.4.0
react 17.0.1

ディレクトリ構成

├── README.md
├── package.json
├── src
│  ├── App.css
│  ├── App.test.tsx
│  ├── App.tsx
│  ├── components
│  ├── index.css
│  ├── index.tsx
│  ├── logo.svg
│  ├── react-app-env.d.ts
│  ├── reportWebVitals.ts
│  └── setupTests.ts
├── tools
│  ├── componentTemplates
│  │  └── component.tsx
│  └── createComponent.js
├── tsconfig.json
└── yarn.lock

手順

1.テンプレートの作成

まず、コピーして使い回すテンプレートを作成します。
ディレクトリ構成によって変わりますが、./tools/componentTemplates/の下に
ファイルを配置します。

参考までにテンプレートファイルを載せておきます。

import React from 'react';

type Props = {
 // Defines the type of props.
}

export const Component: React.FC<Props> = (props: Props) => {
 return (
  <>
   {/* Please describe tsx */}
  </>
 );
}

2.scriptの作成

コマンドライン引数 オプション -c で、コンポーネントの粒度とコンポーネント名を受け取ります。
以下はコマンドのhelpです。

Usage: create-component [options]

Options:
 -c, --component [dir/Component] The name of the component to be created (ex) atoms/Button
 -h, --help            display help for command

コードは以下です。

const { program } = require("commander");
const fs = require("fs");

program
 // option設定  例: -c atoms/button で作成するコンポーネント名を指定する
 .option(
  "-c, --component [component name]",
  "The name of the component to be created (ex) atoms/Button"
 )
 .parse(process.argv);

// オプションをつけ忘れるとヘルプを表示
if (!program.component) {
 program.help();
}

// '/'ごとに分けて配列にする  例:[coponents, atoms, originalComponent]
const argument = program.component.split("/");
const dir = argument[0];
const component = argument[1];

// atoms, molecules, organisms のみ許可
if (!["atoms", "molecules", "organisms"].includes(dir)){
 console.error(
  "ERROR: For components, only 'atoms', 'molecules', and 'organisms' can be specified."
 );
 return;
}

// ディレクトリがなかったら作る
if (!fs.existsSync(`./src/components/${dir}`)) {
 fs.mkdirSync(`./src/components/${dir}`);
}

// コピー元となるファイル
const template = "./tools/componentTemplates/Component.tsx";
// コピー先のディレクトリ
const dests = `./src/components/${dir}/${component}.tsx`;

// 既にファイルが存在する場合は上書きしないようにリターンする
if (fs.existsSync(dests)) {
 console.log(`There are already files in that ${dests}`);
 return;
}

// コンポーネントを作成
fs.copyFileSync(
 template,
 dests
);
console.log(`✨ Create component template ${dests}`);

3.scriptをpackage.jsonに登録

package.jsonのscriptsに"create-component": "node ./tools/createComponent.js"を記述します。

4.CLIで実行する

実行します。

yarn run create-component -c organisms/Header

✨ Create component template ./src/components/organisms/Header.tsx

これで楽にコンポーネントを追加することができます。

エラー発生

commander.jsをインストールしていなくてエラーが出ました。
当たり前ですねw
なので、npm install commanderを実行します。

最後に

Node.jsに関して、無知の状態でやったのでしょうもないエラーにハマってしまいましたw
自作コマンドを初めて作って感動したので、これからもどんどん自動化コマンド作っていけたらいいなと思います。

参考

• [React]コンポーネントを作るときに他からコピーしてくる作業を自動化するCLIツールを作る