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

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

2022-05-31

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"

おわりに

最後までお読みいただきありがとうございました。

これでコマンドを使って非常に楽に・安全に・効率よく開発をすることができるでしょう。

自分なりに工夫してみることをお勧めします。

参考


評価、感想をお願いします!

いただいたご意見を参考に記事を改善しますので、お気軽に入力ください!




共有する