scaffdogでロジックファイルとテストファイルをテンプレから生成してみた

yoshida

2024.04.17

Webフロントエンド

こんにちは！フロントエンドエンジニアのyoshidaです！
テンプレートからのファイルの自動生成ができるscaffdogというパッケージの存在を知り、ちょうどよく解決できそうな課題を見つけたので、使ってみました。

はじめに
- 対象読者
scaffdogとは
scaffdogを実際に使ってみる
- 基本的な使い方
- ロジックファイルとテストファイルを生成するテンプレートを作成
まとめ
ソニックムーブは一緒に働くメンバーを募集しています

はじめに

普段の開発時、以下の一連の流れが面倒だと課題に感じていました。

ロジックファイルを作成
ロジックファイル内の共通処理（ファイルと同名の関数のexportなど）を書く
ロジックファイルに対応するテストファイルの作成
テストファイル内の共通処理を書く

また、「ロジックを書いたらテストも書く」という意識を強めるために何か良い方法はないかと考えていました。

そこで、「ロジックファイルとテストファイルをテンプレートから自動生成する」というアプローチで上記の課題の解決を試みました。

対象読者

似た構成のファイルを何度も手動で作成している人
テストを書く意識を強制的に強めたい人

scaffdogとは

scaffdogとは、markdownファイルで設定を元に、ファイルを自動生成することができるパッケージです。

設定次第で、プロンプト入力を元にファイル名の指定や条件分岐など、柔軟なファイル生成を行うことができます。

似たようなパッケージにHygenもあるので、ご興味がある方はこちらも試してみてください。

scaffdogを実際に使ってみる

基本的な使い方

まずは公式ドキュメントに従ってセットアップを行います。

npm install --save-dev scaffdog

1	npm install --save-dev scaffdog

npx scaffdog init

1	npx scaffdog init

プロンプトに従ってファイル名を入力すると、設定ファイルとexample用のテンプレートファイルが生成されます。

scaffdogの初期コマンド

generateコマンドを実行し、

使用するテンプレート
出力先
テンプレートで設定されているquestions

に答えていくと、それに従って雛形ファイルが生成されます。

npx scaffdog generate

1	npx scaffdog generate

scaffdogでファイル生成した際のコマンド

これで、exampleのテンプレートから、ファイルを生成することができました????

プロンプトは、テンプレートファイルのquestionsで設定することができます。

以下の入力形式を受け取ることが可能です。

（参考：https://scaff.dog/docs/templates/attributes#questions）

text
boolean
choice
array

ロジックファイルとテストファイルを生成するテンプレートを作成

それでは、ロジックファイルとテストファイルを同時に作成してくれるテンプレートを作成していきます。

.scaffdog/templateに、createLogicWithSpec.md という名前でmarkdownファイルを作成します。

---
name: 'createLogicWithSpec'
root: '.'
output: './**/composables'
ignore: []
questions:
  fileName: 'Please enter file name.'
---

# `{{ inputs.fileName }}.spec.ts`

```typescript
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';

/**
* よく使うものはテンプレートに含めておくのも良い
**/

beforeEach(() => {
  vi.useFakeTimers();
  vi.setSystemTime(new Date());
});

afterEach(() => {
  vi.useRealTimers();
});

describe('test', () => {
  it('test', () => {});

  it.each([
    {
      data1: 1,
      data2: 2,
      expected: 3,
    },
  ])('data1:$data1,data2:$data2 -> $expected', ({ data1, data2, expected }) => {
    expect(data1 + data2).toEqual(expected);
  });
});
```

# `{{ inputs.fileName }}.ts`

```typescript
export const {{inputs.fileName}} = () => {
return {}
}
```