こんにちは。Enabling team の山本です。
2023年6月1回目は、Remix の Flat Routes についてです。
Remix については、以前から注目していました。
特に、サーバーサイド JavaScript を用いずに構築できる点に魅力を感じます。学習コストの面で 👍
そして、昨年、Shopify に買収されたことにより、Remix は、しっかりした企業による力強い support を得られる状況になりました 💪
今回話をする Routing について、v2 では、Flat Routes を用います。
Routing is possibly the most important concept to understand in Remix. Everything starts with your routes: the compiler, the initial request, and almost every user interaction afterward.
Remix の「最も重要な概念」である Routing について、学びます。
TL;DR
- 階層を分ける必要がありません。
Routing の違い
v1
.
├── app
│ ├── entry.client.jsx
│ ├── entry.server.jsx
│ ├── root.jsx
│ ├── routes
│ │ ├── top20 # ここ
│ │ │ ├── index.jsx # ここ
│ │ │ └── $id.jsx # ここ
│ │ ├── _index.jsx
│ │ └── top20.jsx
│ ├── style
│ │ ├── article.css
│ │ └── top20.css
│ └── utils
│ └── hackerNews.server.js
├── .eslintrc.js
├── .gitignore
├── package.json
├── package-lock.json
├── public
│ └── favicon.ico
├── README.md
├── remix.config.js
└── tsconfig.json
v2
- このように書き換えることができます。
.
├── app
│ ├── entry.client.jsx
│ ├── entry.server.jsx
│ ├── root.jsx
│ ├── routes
│ │ ├── _index.jsx
│ │ ├── top20.$id.jsx # ここ
│ │ ├── top20._index.jsx # ここ
│ │ └── top20.jsx
│ ├── style
│ │ ├── article.css
│ │ └── top20.css
│ └── utils
│ └── hackerNews.server.js
├── .eslintrc.js
├── .gitignore
├── package.json
├── package-lock.json
├── public
│ └── favicon.ico
├── README.md
├── remix.config.js
└── tsconfig.json
Summary
Remix の Flat Routes について、書きました。
こういう変化を見ていると技術選択の重要さを感じます。
数ヶ月前の code が使えなくなる可能性もある。
開発言語や Framework の選択を広げれば、いろいろなことができる一方、それをどうやって管理・開発していくのか。
職業として Engineer をやる以上、deploy してからが本当の始まりです。