Reactコンポーネントの雛形を生成するためにシェルスクリプトを書いたので公開します

公開日: 2020/03/17

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に書くより楽です。

面倒なタスクを自動化してアウトプットの価値を高めよう

エンジニアの三大美徳は「短期」「怠惰」「傲慢」。繰り返し作業を積極的に自動化させましょう。

価値の低い作業を自動化することは、立派な付加価値です。浮いた時間でより創造的なことに取り組むことができます。アウトプットの価値を上げていきましょう。

参考

引数を処理する | UNIX & Linux コマンド・シェルスクリプト リファレンス

Happy Coding 🎉