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

# はじめに

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

# `plop-create-remix-route`について

[`@soartec-lab/plop-create-remix-route`](https://www.npmjs.com/package/@soartec-lab/plop-create-remix-route)は[`Folders for Organization`](https://remix.run/docs/en/main/file-conventions/routes#folders-for-organization)構成で構築している`Remix`アプリケーションで`route component`を 簡単に作成するための[`plop`](https://plopjs.com/)ジェネレーターです。

# インストール

パッケージは[`npm`](https://www.npmjs.com/package/@soartec-lab/plop-create-remix-route)にホストされていますので、以下のコマンドでインストールします。

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

もし[`plop`](https://plopjs.com/)をまだインストールしていない場合は、一緒にインストールしてください。

```bash
npm install --save-dev plop
```

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

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

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

```bash
npx plop create-remix-route-component
```

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

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

```bash
$ 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`を入力した場合、以下のファイルが作成されます。

:::note
- `app/routes/users.$id.posts.$id/route.tsx`
- `app/routes/users.$id.posts.$id/route.test.tsx`
:::

### route from file path

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

:::note
- `app/routes/users._index/route.tsx`
- `app/routes/users._index/route.test.tsx`
:::

### feature

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

:::note
- `app/routes/users._index/user-list.tsx`
- `app/routes/users._index/user-list.test.tsx`
:::

# モチベーション

[`Remix`](https://remix.run/docs/en/main/file-conventions/routes)のルートは柔軟で一貫性がありますが、使いこなすには覚えることが多く単純に`route component`を増やしたいときにも知識が必要だと感じます。

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

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

# おわりに

今回出力する`route component`の形式である[`Folders for Organization`](https://remix.run/docs/en/main/file-conventions/routes#folders-for-organization)は[リファレンスのScaleセクション](https://remix.run/docs/en/main/file-conventions/routes#scaling)でも推奨されているので、このパターンでアプリケーションを構成するケースは少なくないと考えています。
このジェネレーターを使うことでよりスムーズな開発につながるケースが増えることを期待しています。