Reactコンポーネントの雛形生成のシェルスクリプトを書いた

@Panda_Program

本記事のスクリプトファイルの使い方の説明

まずは使い方から紹介します。

ルートディレクトリで./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 🎉

パンダのイラスト
パンダ

記事が面白いと思ったらツイートやはてブをお願いします!皆さんの感想が執筆のモチベーションになります。最後まで読んでくれてありがとう。

  • Share on Hatena
  • Share on Twitter
  • Share on Line
  • Copy to clipboard