Published on

Add Script to generate new component and storybook

Authors

エンジニアになって 3 年目に入りまして、改めて Linux だったりその辺りを学び直しているのですが、その一環で本職での不便を解消するシェルスクリプトを書いてみました。 本職ではフロントエンドの開発に React を採用していて、その中で Storybook も使用しています。

storybook の置き場としては個人的には作成するコンポーネントと同じ階層に component_name.stories.tsx のような形式で置くことが多いのではないかと思います。あんまり他のプロジェクト知らないですけど。

ただ本業のプロジェクトでは別途 /stories というディレクトリを用意して、そこに storybook を置く形になっています。 そのためコンポーネント追加時に storybook も作成することが面倒な感じになっています。

現在の作業としては以下の流れです

1. component を作成
2. component のベースを書く(export const XXXX = () => {} 的な)
3. storybook を /stories 配下の任意の場所に作成
4. sotrybook のベースを書く

単純に列挙しただけで 4 つ工程がありますし、ボイラープレート的なものを 2 つ書かないといけないのが面倒です。 それを自動化するようなシェルスクリプトを書いて、 generate xxxx 的なコマンドで上記工程を完了できるようにしました。

効果的な記法だったり、そもそもの書き方自体もまだ全然キャッチアップできてないので稚拙な感じのスクリプトになってますが、とりあえず動いているので良しとします。

component と storybook を自動生成するスクリプト

まずは作成したシェルスクリプトを。

#!/bin/bash

component=$1
if [ "$2" ]; then
  directory=$2
else
  directory="components"
fi
baseDir="./src/${directory}/${component}"
baseComp="${baseDir}/${component}"
sbDir="./src/stories/${component}"
sbComp="${sbDir}/${component}"

CURRENT=$(cd $(dirname $0);pwd)
mkdir -p $baseDir
mkdir -p $sbDir
cp $CURRENT/component_temp.tsx "${baseComp}.tsx"
cp $CURRENT/component_storybook.stories.tsx "${sbComp}.stories.tsx"

sed -i '' "s/Template/${component}/g" "${baseComp}.tsx"
sed -i '' "s/Template/${component}/g" "${sbComp}.stories.tsx"

別途テンプレートとする component_temp.tsx と storybook_temp.stories.tsx を用意しています。

// component_temp.tsx
export const Template = () => {
  return <></>
}

// storybook_temp.stories.tsx
export default {
  component: Template,
} as ComponentMeta<typeof Template>

export const Default = {}

シェルスクリプト内容

ここからはざっくり解説です。

if [ "$2" ]; then
  directory=$2
else
  directory="components"
fi

引数の 1 つ目に作成するコンポーネント名を、引数 2 つ目にコンポーネントを置きたいディレクトリを指定します。 引数 2 つ目が与えられない場合には /components 配下に置くようにしています。

baseDir="./src/${directory}/${component}"
baseComp="${baseDir}/${component}"
sbDir="./src/stories/${component}"
sbComp="${sbDir}/${component}"

CURRENT=$(cd $(dirname $0);pwd)
mkdir -p $baseDir
mkdir -p $sbDir

コンポーネントと Storybook を置く場所がそれぞれ異なるので、引数に合わせて必要であればディレクトリを作成します。 $ mkdir -p xxx と -p を置くことで再帰的にディレクトリを作成できるようにしています。

cp $CURRENT/component_temp.tsx "${baseComp}.tsx"
cp $CURRENT/component_storybook.stories.tsx "${sbComp}.stories.tsx"

用意していたテンプレートをベースに作成したディレクトリ配下に各種ファイルを追加します。

sed -i -e "s/Template/${component}/g" "${baseComp}.tsx"
sed -i -e "s/Template/${component}/g" "${sbComp}.stories.tsx"
rm "${baseComp}.tsx-e"
rm "${sbComp}.stories.tsx-e"

テンプレートで置換したい部分を Template としているので、 sed コマンドで置換しています。

このシェルスクリプトをプロジェクト内において、package.json の script にコマンド追加してあげることで、任意のコマンドを実行することで作成したいファイルが生成されるようになりました。

初めてシェルスクリプト書いた気がしますが、便利ですね。 面倒な作業が消されていくのは気持ちも良いし、今後も積極的に自動化できるものは自動化していきたいです。

Discuss on Twitter • View on GitHub