
reactでコンポーネントの雛形を作るシェルスクリプトを書く
2022-05-31
2022-05-31
目次(タップして移動)
はじめに
こんにちは、Tokyo Super Hits 大好きなこふです。
React での開発を楽にするためのシェルスクリプトを書いてみたので、メリットと書き方を解説したいと思います。
この記事で紹介するようなシェルスクリプトとファイルを用意すると、以下のように効率化をし、ヒューマンエラーを減らすことが可能です。
terminal1❯ ./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
実際にファイルを生成します。
terminal1❯ 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 のファイルを忘れることなくセットで用意できる(他にもたくさんあると思います)
それは開発効率に対してのメリットだけではなく、最終的には開発の質という本質的な部分にも関わってくると考えています。
下準備
下準備として、テンプレートとなるコンポーネントを準備する必要があります。
terminal1❯ 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.sh1#!/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.sh1PS3='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.sh1dirname=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"
おわりに
最後までお読みいただきありがとうございました。
これでコマンドを使って非常に楽に・安全に・効率よく開発をすることができるでしょう。
自分なりに工夫してみることをお勧めします。