Published on

Reactコンポーネントの雛形生成を自動化するスクリプトファイルを作る

Authors

エンジニアにとって無駄な作業はストレス。 繰り返しの作業を自動化したい。

という事でコンポーネントファイルを自動生成するスクリプトを書いた。

スクリプトファイルの使い方

まずは使い方から。 ルートディレクトリで

bash ./etc/scripts/make-component-template.sh components Layout

というように、ディレクトリ名とコンポーネント名を指定するだけ。


ルートディレクトリ直下にcomponentsディレクトリがある事を想定しています。 carbon (1).png

自動生成するファイル

./etc/scripts/make-component-template.sh components Layoutを実行すると以下のファイルを生成します。

components
└── Layout
    ├── Layout.jsx
    ├── index.jsx
    └── style.css

ファイルの中身

//[index.jsx]
export { default } from './Layout'
//[Layout.jsx]
import React, { memo } from 'react'
import PropTypes from 'prop-types'
import style from './style.css'

Component.propTypes = {}

const Component = memo(() => {
  return <div></div>
})

function Container(props) {
  return <Component />
}

Container.propTypes = {}

export default Container

style.css は空です。

コンポーネントを生成するためのシェルスクリプト

シェルスクリプト

#[etc/scripts/make-component-template.sh]
#!/bin/bash
if [ $# -ne 2 ]; then
  echo "指定された引数は$#個です。" 1>&2
  echo "実行するには2個の引数が必要です。" 1>&2
  echo "例: components(ディレクトリ名) Layout(コンポーネント名)" 1>&2
  exit 1
fi

DIR=$1
COMPONENT=$2
TARGET="$DIR/$COMPONENT"

if [ -e "$TARGET" ]; then
  echo "ディレクトリ'$TARGET'は既に存在します。" 1>&2
  exit
fi

mkdir "$TARGET"
touch "$TARGET/index.jsx"
echo "export { default } from './$COMPONENT'" > "$TARGET/index.jsx"

cp etc/scripts/component-template.txt "$TARGET/$COMPONENT.jsx"

touch "$TARGET/style.css"

React コンポーネントのテンプレート

#[etc/scripts/component-template.txt]

import React, { memo } from 'react'
import PropTypes from 'prop-types';
import style from './style.css'


Component.propTypes = {

};

const Component = memo(() => {
  return (
    <div>

    </div>
  );
});


function Container(props) {

  return <Component />
}

Container.propTypes = {

};

export default Container

補足

  • 生成される React コンポーネントの構成を変更したい場合は、component-template.txtファイルを書き換えてください。
  • eslint でエラーが出たり prettier で整形されないように、component-template の拡張子を txt にしています。

Enjoy Hacking!