reactでコンポーネントの雛形を作るシェルスクリプトを書く

2022-05-31

目次（タップして移動）

# はじめに

# テンプレートの作成にシェルスクリプトを使うメリット

# 下準備

# 具体的なコード

# おわりに

はじめに

こんにちは、Tokyo Super Hits 大好きなこふです。

React での開発を楽にするためのシェルスクリプトを書いてみたので、メリットと書き方を解説したいと思います。

この記事で紹介するようなシェルスクリプトとファイルを用意すると、以下のように効率化をし、ヒューマンエラーを減らすことが可能です。

terminal
1❯ ./component.sh
2START
3Please input Component name: StopWatch
41) function
52) interface
63) model
74) Quit
8Please enter your choice: 1
9you chose function
10FIN

実際にファイルを生成します。

terminal
1❯ tree -L 2 src/components/function/StopWatch
2src/components/function/StopWatch
3├── StopWatch.stories.tsx
4└── StopWatch.tsx
5
60 directories, 2 files

テンプレートの作成にシェルスクリプトを使うメリット

単なる時短？と思われそうですが、次のような数多くのメリットを感じます。

新しいコンポーネントを作る繰り返し作業が減る
作業を減らし、別のことに時間を割くことができる
Storybook・テストコード・CSS Module のファイルを忘れることなくセットで用意できる（他にもたくさんあると思います）

それは開発効率に対してのメリットだけではなく、最終的には開発の質という本質的な部分にも関わってくると考えています。

下準備

下準備として、テンプレートとなるコンポーネントを準備する必要があります。

terminal
1❯ tree -L 2 src/templates
2src/templates
3└── components
4    ├── Base.stories.tsx
5    └── Base.tsx
6
71 directory, 2 files

Base.tsx
Base.stores.tsx
それぞれ独自の書き方があると思うので、コード例は示しません。
テストコード
- 書き方に決まりはないので各自にお任せです。そのため、本記事では省略します。
- /src/components/__tests__/Base.test.tsx
- cypress/integration/Base.spec.ts
etc...

具体的なコード

シェルスクリプトを使います。次の 2 パートに分けて解説します。

ファイル・コンポーネント名の入力
ディレクトリの指定

コード：ファイル・コンポーネント名の入力

ループさせて、「（大文字＋小文字 1 つ以上の一回以上の繰り返し」で正規表現をかけます。

通称、パスカルケースですね。

component.sh
1#!/bin/bash
2
3echo "START"
4
5# input file name with validation, repeat word start with upper case
6# ex: LinkButton.tsx
7while test true; do
8    read -p "Please input Component name: " component_name
9    if [[ ${component_name} =~ ^([A-Z][a-z]+)+$ ]]; then
10        break
11    fi
12done

コード：ディレクトリの指定

自分のプロジェクトではcomponents配下にinterface,model,functionという分類をしています。そのため、その選択肢を入力させます。

select を使うと非常に楽に書くことが可能です。

component.sh
1PS3='Please enter your choice: '
2options=("function" "interface" "model" "Quit")
3select opt in "${options[@]}"
4do
5    case $opt in
6        "function")
7            option="function"
8            echo "You chose function"
9            break;;
10        "interface")
11            option="interface"
12            echo "You chose interface"
13            break;;
14        "model")
15            option="model"
16            echo "You chose model"
17            break;;
18        "Quit")
19            break;;
20        *) echo "invalid option $REPLY";;
21    esac
22done
23

コード：ファイルのコピー

すでに同名のコンポーネントが存在していては上書きすることになります。

上書きを防ぐために、cpコマンドの-nオプションをつけます。

すでに存在する場合はコピーさせません。

component.sh
1dirname=src/components/$option/$component_name
2mkdir $dirname
3cp -n src/templates/components/Base.stories.tsx $dirname/$component_name.stories.tsx
4cp -n src/templates/components/Base.tsx $dirname/$component_name.tsx
5# cp test code
6
7echo "FIN"