blog.mahoroi.com

WebフロントエンドフレームワークのDynamic Routing実装経緯が気になった

-

Next.js などの Web フロントエンドフレームワークにはファイル・ディレクトリ構造に基づいた自動ルーティング "File Based Routing" 機能が導入されているものがあります。File Based Routing にはファイルと URL の 1 対 1 の関係だけではなく、動的パラメータを含む 1 対多 URL の関係を扱う機能も存在します。このような動的パラメータを扱う場合を本記事では Dynamic Routing と表記します。

この Dynamic Routing ですが、使用するフレームワークによって表記方法が異なります。各フレームワークがなぜこの表記を使っているのか気になったので、Dynamic Routing 実装までの経緯について調べてみました。調査したフレームワークは 4 つです。

  • Next.js
  • Nuxt.js
  • Gatsby
  • Sapper

Next.js

2019/01/19：RFC

Dynamic Routing の RFC が GitHub 上で公開されました。ここでは次の内容について議論されていました。

表記欠点
$post.jsshell で使われる。rm $post.js の実行などにて紛らわしい。
_post.js_document.js や _app.js のようにプライベート記号として広く使われている。
__post.js2 文字になる
=post.jszsh の '=' Expansion
@post.jsPowerShell の Splat Operator
{post}.jsShell の Brace Expansion
[post].jszsh や Jest のパターンマッチ
:post.jsWindows のファイルシステムで禁止
&post.jsBash のパラメータ拡張記号
example@.js
example~.js
example=.js		欠点コメントなし(直感的でない？)

2019/03/05：実装 PR

当初の Dynamic Routing では pages/$post.js のようにプレフィックス $ が提案されていました。

2019/06/21：[Brackets]に変更

最終的に [post].js へ変更されました。決定的な理由は不明です。

2019/07/08：Next.js 9 リリース

Dynamic Routing が導入された Next.js v9 が正式リリース。

Nuxt.js

Next.js からフォークされて誕生したプロジェクト。

2016/12/20：Dynamic Routes 導入

Nuxt.js v0.9.0 へ Dynamic Routing が追加されました。プレフィックスの理由は不明です。

2017/02/10：Wildcard route 導入

Wildcard route: _.vue will now create a route { path: '/*', name: 'all' }

Nuxt.js v0.9.8 ではワイルドカードルートも。

2021： [Brackets]に変更予定

Routing

A powerful routing system based on Vue Router 4

・pages/\_slug.vue becomes pages/[slug].vue
・Catch sub paths with pages/blog/[...all].vue
・Support pages/404.vue and pages/\_error.vue
・Ignore prefix is now underscore: pages/\_ignored.vue
・Add routes at runtime with plugins
・<nuxt/> and <nuxt-child/> become <nuxt-page/>

Nuxt.js v3 では Dynamic Routing の書き方が [page].vue に変更予定とのこと。

Gatsby

React と GraphQL を使った静的サイトジェネレータ。

2020/05/26：RFC

File System Routing Improvements の RFC が公開されました。

Gatsby には Collection Routes と Client Side Routes があり、前者は {MarkdownRemark.fields__slug}.js、後者は src/pages/foo/[bar].js => /foo/:bar の表記ルールが使用されます。表記ルールの経緯は不明。

2020/08/11：実装 PR

2020/11/12：Gatsby v2.26 正式リリース

Sapper

Svelte を使ったフレームワーク。React と Next.js、Svelte と Sapper のような関係性。ちなみに Sapper v1 の公開予定はなく、今後ずっと v0 のままです。

2017/12/11：initial commit

* Instead of route masking, we embed parameters in the filename. For example `post/%id%.html` maps to `/post/:id`, and the component will be rendered with the appropriate parameter.

Sapper の GitHub リポジトリ上で確認できる first commit によると、当初の Dynamic Routing 表記は post/%id%.html でした。

2017/12/12：[Brackets]に変更

そして翌日の 7th commit で現在の post/[id].js へ変更されています。理由は不明。

まとめ

Dynamic Routing の表記ルールに関する決定的な理由はどのフレームワークからも明らかになりませんでした。しかし実装までの流れやトレンドに関してはぼんやりとですが分かったように思います。

  1. File Based Routing は Next.js から始まった
  2. Next.js をフォークした Nuxt.js のおかげで Dynamic Routing が広まった
  3. Sapper が導入した [Brackets] 表記が各フレームワークでも使用されはじめた

※ 各フレームワークが及ぼした影響はあくまでも個人的な考察・見解に過ぎません。