こんにちは、アソビューでフロントエンドエンジニアを担当している村井です。 今回はScaffdogの導入について紹介したいと思います。
Scaffdogとは
Scaffdogは、テンプレートを基にコードのスニペットを自動生成するツールです。例えば、コンポーネントやhooksなどを作成することが可能で、 単調なファイル作成の時間を短縮し、よりコーディングに注力できます。
Scaffdog導入手順
今回は、Next.jsとTypeScriptの構成のプロジェクトにScaffdogを導入してみましょう。 まずは、Next.jsとTypeScriptのプロジェクトを作成します。
npx create-next-app my-next-app --use-npm --example with-typescript cd my-next-app
プロジェクトでScaffdogを使えるようにしましょう。
npm install -D scaffdog
initコマンドを使って簡単にセットアップできます。 例: component.md
npx scaffdog init
この例はcomponentsディレクトリに生成させるようにしました。 また、テンプレートのファイル名は、component.mdとしました。 directoryとnameの質問で入力した値は、テンプレート内で使用することができます。 あとは、生成先のパスに組み込むことで、指定のパスに生成が可能です。 今回は説明を省略しますが、質問の回答を元に分岐もできるので、より柔軟なテンプレートを作成することができます。
上記の様なテンプレートを作成後に、以下のコマンドを実行します。
(※gistの拡張子をmdにすると、プレビューでソースが展開できなくなるため、txtにしています。)
npx scaffdog generate
実行すると、以下のように質問が表示されます。 回答していくと、自動でファイルやフォルダが作成されます。
? Please select a document. component
ℹ Output destination directory: "."
? Please enter directory path. input
? Please enter a component name. input
🐶 Generated 2 files!
✔ components/Input/Input.tsx
✔ components/Input/index.ts
import type { FC } from 'react';
type Props = {
text: string;
};
export const Input: FC<Props> = ({ text }) => {
return <>{ text }</>;
};
export { Input } from './Input';
Scaffdogでできること、できないこと
できること
- 設定したテンプレートに基づいてコンポーネントやhooksを自動生成
- フォルダ構造を整えることで、レビューなどのコミュニケーションコストの削減
できないこと
- フォルダやファイル以外の部分（状態管理、API呼び出し、デザインの設定など）の自動生成
実際に導入してみて
Scaffdogの導入により、開発時間とコミュニケーションコストが削減でき、テンプレートを使った自動生成により、コードの一貫性が保たれ、レビューも効率化されました。もちろん、複雑なコンポーネントの作成や既存コードの更新など、手作業が必要なケースもありますが、Scaffdogを活用することでエンジニアが複雑な問題に集中できる環境が整いました。
最後に
アソビューでは一緒に働くメンバーを大募集しています！ カジュアル面談もありますので、少しでも興味があればお気軽にご応募いただければと思います！
