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

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

2022-05-31

2022-05-31

はじめに

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

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

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

terminal
❯ ./component.sh START Please input Component name: StopWatch 1) function 2) interface 3) model 4) Quit Please enter your choice: 1 you chose function FIN

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

terminal
❯ tree -L 2 src/components/function/StopWatch src/components/function/StopWatch ├── StopWatch.stories.tsx └── StopWatch.tsx 0 directories, 2 files

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

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

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

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

下準備

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

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

具体的なコード

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

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

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

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

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

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

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

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

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

component.sh
PS3='Please enter your choice: ' options=("function" "interface" "model" "Quit") select opt in "${options[@]}" do case $opt in "function") option="function" echo "You chose function" break;; "interface") option="interface" echo "You chose interface" break;; "model") option="model" echo "You chose model" break;; "Quit") break;; *) echo "invalid option $REPLY";; esac done

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

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

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

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

component.sh
dirname=src/components/$option/$component_name mkdir $dirname cp -n src/templates/components/Base.stories.tsx $dirname/$component_name.stories.tsx cp -n src/templates/components/Base.tsx $dirname/$component_name.tsx # cp test code echo "FIN"

さいごに

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

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

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

参考



アバター

こふ

情報通信を専攻している大学生です。大学(研究)・趣味・アルバイトでプログラムを書いています。ITツール・サービス・文章を創作することが好きです。

ぼくについて

共有する