はじめに
この記事では、作成したパッケージ@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を作成してプロジェクトのルートパスに配置してください。
+ export default async function (plop) {
+ await plop.load("@soartec-lab/plop-create-remix-route");
+ }
-
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.tsxapp/routes/users.$id.posts.$id/route.test.tsx
route from file path
ファイルパスを指定してルートコンポーネントを作成したい場合に使用します。
例えば、users._indexを入力した場合、以下のファイルが作成されます。
app/routes/users._index/route.tsxapp/routes/users._index/route.test.tsx
feature
route componentではなくfeature componentを作成したい場合に使用します。
例えば、users._index/user-listを選択した場合、以下のファイルが作成されます。
app/routes/users._index/user-list.tsxapp/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セクションでも推奨されているので、このパターンでアプリケーションを構成するケースは少なくないと考えています。
このジェネレーターを使うことでよりスムーズな開発につながるケースが増えることを期待しています。