`Remix`の`route component`を簡単に生成するgeneratorをnpmパッケージとして公開しました🎉

はじめに

この記事では、作成したパッケージ@soartec-lab/plop-create-remix-routeのパッケージのインストール方法、使い方、生成できるコンポーネントの種類について解説します。

plop-create-remix-routeについて

@soartec-lab/plop-create-remix-routeはFolders for Organization構成で構築しているRemixアプリケーションでroute componentを 簡単に作成するためのplopジェネレーターです。

インストール

パッケージはnpmにホストされていますので、以下のコマンドでインストールします。

npm install --save-dev @soartec-lab/plop-create-remix-route

もしplopをまだインストールしていない場合は、一緒にインストールしてください。

npm install --save-dev plop

使い方

1. plopの設定ファイル作成

@soartec-lab/plop-create-remix-routeをplopの設定ファイルにロードして使用します。
以下のplopfile.jsを作成してプロジェクトのルートパスに配置してください。

plopfile.js

+ export default async function (plop) {
+  await plop.load("@soartec-lab/plop-create-remix-route");
+ }

1. plopコマンドでジェネレーターを起動

npx plop create-remix-route-component

コマンドジェネレーターのインタラクションが始まるので後述する作成可能なコンポーネントの種類と 必要な入力時に合わせて進めていくとコンポーネントファイルが生成されます。

以下は、URL形式からroute componentを生成する際のインタラクションです。
ここでは、route from URL pathを選択し、users/:id/posts/:idと入力することで、URLに一致するルートコンポーネントを生成しています。

$ npx plop create-remix-route-component

? Which type of component do you want to create? route from URL path
? What is the URL path?

  ex)

  | URL you need to input | route file path    | create component name |
  |-----------------------|--------------------|-----------------------|
  | /users                | users._index       | UsersRoute            |
  | /users/posts          | users.posts._index | UsersPostsRoute       |
  | users/:id             | users.$id          | UserRoute             |

  ? users/:id/posts/:id
✔  ++ /app/routes/users.$id.posts.$id/route.tsx
✔  ++ /app/routes/users.$id.posts.$id/route.test.tsx

作成可能なコンポーネントの種類

route from URL path

URLパスからルートコンポーネントを作成したい場合に使用します。
例えば、users/:id/posts/:idを入力した場合、以下のファイルが作成されます。

• app/routes/users.$id.posts.$id/route.tsx
• app/routes/users.$id.posts.$id/route.test.tsx

route from file path

ファイルパスを指定してルートコンポーネントを作成したい場合に使用します。
例えば、users._indexを入力した場合、以下のファイルが作成されます。

• app/routes/users._index/route.tsx
• app/routes/users._index/route.test.tsx

feature

route componentではなくfeature componentを作成したい場合に使用します。
例えば、users._index/user-listを選択した場合、以下のファイルが作成されます。

• app/routes/users._index/user-list.tsx
• app/routes/users._index/user-list.test.tsx

モチベーション

Remixのルートは柔軟で一貫性がありますが、使いこなすには覚えることが多く単純にroute componentを増やしたいときにも知識が必要だと感じます。

route componentを増やす際に、キャッチアップから始めファイルのパターンを規約に沿うように形で作成していくことになるので、より直感的なURL形式でroute componentが作成可能になるようにジェネレーターを作成しました。

合わせて、規約に沿った形式でファイルパスを入力することによりroute componentとテストの雛形の生成と、route componentから使用するfeature componentとテストの雛形とを作るジェネレーターも活用シーンが想定されたため、生成するコンポーネントの種別として選ぶことで生成できるようにしています。

おわりに

今回出力するroute componentの形式であるFolders for OrganizationはリファレンスのScaleセクションでも推奨されているので、このパターンでアプリケーションを構成するケースは少なくないと考えています。
このジェネレーターを使うことでよりスムーズな開発につながるケースが増えることを期待しています。