Reactコンポーネントの雛形生成のシェルスクリプトを書いた
本記事のスクリプトファイルの使い方の説明
まずは使い方から紹介します。
ルートディレクトリで./etc/scripts/make-component-template.sh components Layoutというように、ディレクトリ名とコンポーネント名を指定するだけ。
このようなディレクトリ構造を想定しています。
.
├── README.md
├── components
├── etc
├── node_modules
├── package-lock.json
├── package.json
├── pages
├── public
└── tsconfig.json
すぐにコードが読みたいでしょうか。オブジェクト指向言語ではクラスを理解しようとすると、内部実装を読む前にインターフェースを見に行きますよね。それと同じです。まずは使い方から。
自動生成するファイル群
./etc/scripts/make-component-template.sh components Layoutを実行すると以下のファイルを生成します。
components
└── Layout
├── Layout.tsx
├── index.tsx
└── style.scss
[index.tsx]
export { default } from './Layout'
style.scssは空です。Layout.tsxは下記に内容を記載しています。
コンポーネントを生成するためのシェルスクリプト
シェルスクリプトは下記のように書いています。
[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.tsx"
echo "export { default } from './$COMPONENT'" > "$TARGET/index.tsx"
cp etc/scripts/component-template.txt "$TARGET/$COMPONENT.tsx"
touch "$TARGET/style.scss"
Reactコンポーネントのテンプレートは下記です。
[etc/scripts/component-template.txt]
import React from 'react'
import style from './style.scss'
type Props = {
}
const Component: React.FC<Props> = () => (
)
type ContainerProps = {
}
const Container: React.FC<ContainerProps> = () => {
return <Component />
}
Container.displayName = ''
export default Container
生成するReactコンポーネントの構成について
コンポーネントは「経年劣化に耐える ReactComponent の書き方」を参考にしています。この記事を読んだ時、自分が求めていたものはまさにこれなのだと感銘を受けました。
以来、実務や個人開発ではずっとこのように書いています。コンポーネントの責務を単一にできること、ロジックをview(jsx)から分離できること、viewに値と関数をインジェクトしている感覚が最高です。
「CSSを書く際は、Componentだけ見ればいいからわかりやすい」とデザイナーさんにも好評です。
なお、eslintでエラーが出たりprettierで整形されるのが面倒なので、component-templateの拡張子はあえてtxtにしています。わざわざignoreに書くより楽です。
面倒なタスクを自動化してアウトプットの価値を高めよう
エンジニアの三大美徳は「短期」「怠惰」「傲慢」。繰り返し作業を積極的に自動化させましょう。
価値の低い作業を自動化することは、立派な付加価値です。浮いた時間でより創造的なことに取り組むことができます。アウトプットの価値を上げていきましょう。
参考
Happy Coding 🎉
