Web開発ログ | エンジニアに役立つ情報 | 開発の中での気づきを発信

高卒Devlog

Reactボイラープレートを【scaffdog】で一括生成してみた

thumbnail

こんにちは! RYOTAです!

当記事をご覧くださりありがとうございます!

Reactのコンポーネント作成時に必要なファイルを一括生成してみたので、簡単にやり方をまとめていきます。

はじめに

Reactコンポーネントの新規開発をしていて「毎回同じ構成でファイル作ってんじゃん。めんどくさ。」と感じることが多く、「一括でボイラープレート作れんかなぁ」とずっと思っていました。

これまで

今までReactコンポーネントを新規作成する場合は下記のファイル群を新規に作成して、内容をコピペしたりスニペットでペタッと張っていたんですよね。はい、面倒。

/src
  ├─ components
  │   └─ {モジュール名}
  │        └─ {コンポーネント名}
  │            └─ index.tsx
  │            └─ style.tsx
  ├─ stories
  │    └─ components
  │        └─ {モジュール名}
  │            └─ {コンポーネント名}
  │                └─ index.stories.tsx
  │                └─ mock.ts

要はこれらをコマンド一発で生成しちゃおうってことです。
そんな中、知り合いが良いライブラリを教えてくれました。
その名も【scaffdog】!!!

scaffdogとは

scaffdogとは複数のボイラープレート生成を一括で行なってくれるツールです。
マークダウンファイルにテンプレートを記述することが出来て設定がとても簡単。
しかもCLIで対話形式にテンプレートを選択し、変数設定も容易に出来るのでとても使い勝手が良いです。
使い方は下記のREADMEに載っているので実際に触ってみましょう。
GitHub - scaffdog/scaffdog: :dog: scaffdog is Markdown driven scaffolding tool. :dog: scaffdog is Markdown driven scaffolding tool. - GitHub - scaffdog/scaffdog: :dog: scaffdog is Markdown driven scaffolding tool. GitHub

scaffdogを使ってみた

早速、公式を見ながら触っていきましょう!

scaffdogセットアップ

インストール

$ yarn add --dev scaffdog

初期化

READMEに書いてある通りscaffdog initを実行してみます。

$ yarn scaffdog init

ファイル名を聞かれるので今回はReactComponentと入れてみます。

完了すると.scaffdogディレクトリとその配下に2つのファイルが生成されているようです。

module.exports = {
  files: ['./*'],
};
---
name: 'ReactComponent'
root: '.'
output: '**/*'
ignore: []
questions:
  value: 'Please enter any text.'
---

# `{{ inputs.value }}.md`

```markdown
Let's make a document! See more detail scaffdog repository.
https://github.com/cats-oss/scaffdog/#templates
```

テンプレート編集

ではテンプレートとなるマークダウンファイルを修正してみましょう。
一つのマークダウン内に複数ファイルの定義をすることで一括生成をしてくれます。
今回は4つのテンプレートの記述をします。
引数には親ディレクトリのmoduleとコンポーネント名のnameの2つを設定します。

---
name: "ReactComponent"
root: "src/"
output: "**/*"
ignore: []
questions:
  module: "ディレクトリ名を入力"
  name: "コンポーネント名を入力"
---

# `components/{{ inputs.module | lower }}/{{ inputs.name | pascal }}/index.tsx`

```tsx
import React from "react";
import type { FC } from "react";
import { Container } from "./style"

type T{{ inputs.name | pascal }} = {};

/**
 * {{ inputs.name | pascal }}コンポーネント
 * @module Components/{{ inputs.module | pascal }}/{{ inputs.name | pascal }}
 */
const {{ inputs.name | pascal }}: FC<T{{ inputs.name | pascal }}> = ({}) => {
  return <Container>{{ inputs.name | pascal }}</Container>;
};

export default {{ inputs.name | pascal }};
```

# `components/{{ inputs.module | lower }}/{{ inputs.name | pascal }}/style.tsx`

```tsx
import style from "styled-components";

export const Container = style.div`
`;
```

# `stories/components/{{ inputs.module | lower }}/{{ inputs.name | pascal }}/index.stories.tsx`

```tsx
import React from 'react'
import { ComponentMeta } from '@storybook/react'
/* components */
import {{ inputs.name | pascal }} from '../../../../components/{{ inputs.module | lower }}/{{ inputs.name | pascal }}'
/* mocks */
import { {{ inputs.name | lower }} } from './mock'

/**
 * Stories/{{ inputs.module | pascal }}/{{ inputs.name | pascal }}
 * @package Stories
 */
export default {
  title: 'MyApp/{{ inputs.module | pascal }}/{{ inputs.name | pascal }}',
  component: {{ inputs.name | pascal }},
} as ComponentMeta<typeof {{ inputs.name | pascal }}>

const Template = () => (
  <{{ inputs.name | pascal }} />
)

export const Default = Template.bind({})
Default.args = {{ inputs.name }}
```

# `stories/components/{{ inputs.module | lower }}/{{ inputs.name | pascal }}/mock.ts`

```ts
export const {{ inputs.name | lower }} = {}
```

ボイラープレート生成

scaffdog generate

$ yarn scaffdog generate

上記コマンドを叩くと対話式にステップ実行してくれます。

テンプレート選択

第1引数入力

第2引数入力

自動生成


作られてるっぽい!!!

生成されたファイルを確認

import React from "react";
import type { FC } from "react";
import { Container } from "./style"

type TScaffdog = {};

/**
 * Scaffdogコンポーネント
 * @module Components/Tests/Scaffdog
 */
const Scaffdog: FC<TScaffdog> = ({}) => {
  return <Container>Scaffdog</Container>;
};

export default Scaffdog;
import style from "styled-components";

export const Container = style.div`
`;
import React from 'react'
import { ComponentMeta } from '@storybook/react'
/* components */
import Scaffdog from '../../../../components/tests/Scaffdog'
/* mocks */
import { scaffdog } from './mock'

/**
 * Stories/Tests/Scaffdog
 * @package Stories
 */
export default {
  title: 'MyApp/Tests/Scaffdog',
  component: Scaffdog,
} as ComponentMeta<typeof Scaffdog>

const Template = () => (
  <Scaffdog />
)

export const Default = Template.bind({})
Default.args = Scaffdog
export const scaffdog = {}

完璧!!!これがやりたかった!!!

さいごに

無事にボイラープレートの一括生成が出来ましたね!
しかも導入、設定が簡単!
効率的だし楽!控えめに言ってめっちゃ良い!
やはり自動化って良いですね!!!
ということで今回はボイラープレートの一括生成を【scaffdog】を使って行なってみました!
簡単なまとめとなりますが、少しでも参考になれば幸いです♪
最後までご覧いただきありがとうございました!