BT

最新技術を追い求めるデベロッパのための情報コミュニティ

寄稿

Topics

地域を選ぶ

InfoQ ホームページ ニュース Inertia.JSでAPI不要のモノリシックReact/Vue/Sevlteアプリケーションが記述可能に

Inertia.JSでAPI不要のモノリシックReact/Vue/Sevlteアプリケーションが記述可能に

ブックマーク

原文(投稿日:2020/12/04)へのリンク

Inertia.jsは、従来のサーバサイドルーティングとコントローラを使ったシングルページアプリケーション(SPA)の記述を可能にする。Inertiaがバックエンドとフロントエンドをしっかり結んでくれるので、APIを書く必要はない。開発者は、十分に実績を積んだサーバサイドフレームワーク(Laravel、Ruby on Rails、DangoAspNetCoreなど)を使用することができる。クライアント上では、React、Svelte、Vueなどを使ったユーザインタフェースの実装が可能だ。

Inertia.jsは、完全クライアントサイドSPAとMPA(マルチページアプリケーション)に挟まれたSPAソリューション空間内において、独自の位置を占める。Inertia自身はアプローチについて、次のように説明している。

Inertiaは従来型のサーバ駆動Webアプリ構築における新たなアプローチです。私たちはこれをモダン・モノリス(modern monolith)と呼んでいます。

Inertiaは、完全にクライアント側でレンダリングされるシングルページアプリケーションを、最新のSPAのような複雑さを伴わずに開発可能にします。そのために、既存のサーバサイドフレームワークを活用しています。

クライアントサイドのルーティングはなく、APIも必要としません。これまでと同じように、コントローラとビューを構築すればよいのです!

Inertiaは3つのクライアントサイドアダプタ(React、Vue.js、Svelte)と2つのサーバサイドアダプタ(Laravel、Rails)を公式に提供しているが、その他にも、コミュニティの開発したアダプタが、AspNetCoreCakePHPColdBoxDjangoGoMasoniteMithril.jsNode.jsPhoenixSymfonyYii2など、さまざまなフレームワーク用に提供されている。

Inertiaを使えば、MPAアーキテクチャを採用した場合と同じように、Webアプリケーションを開発することが可能になる。ルーティングや認証、承認、データフェッチなどにはサーバサイドのWebフレームワークを使用するが、ビューはSPAと同じくクライアント側が担当する。資料には次のような説明がある。

[MPAの場合と]唯一違うのはビューレイヤです。ビューはサーバサイドレンダリング(BladeやERBテンプレートなど)ではなく、JavaScriptページコンポーネントで構成されています。これによってReactやVue、Svelteなどを使った、完全なフロントエンドの構築が可能になるのです。

最初にクライアントがページを要求すると、Inertiaは完全なHTML応答を返す。以降の要求に対しては、サーバサイドのInertiaが、ビューを実装したJavaScriptコンポーネントを含むJSON応答(名称とpropが含まれる)を返送する。そしてクライアントサイドのInertiaが、現在表示されているページを新たなコンポーネントによって返された新しいページに置き換えて、履歴状態を更新するのだ。

クライアント側での要求の処理は、独自の<inertia-link>コンポーネントで通常のアンカーリンクをラップすることによって実装される。これによってリンクをインターセプトして、ブラウザの既定の動作(フルページリフレッシュ)をサーバへのXMLHttpRequest(XHR)要求に置き換えるのだ。

Inertiaの要求では、ページリフレッシュと部分的なリフレッシュを区別するために、特別なHTTPヘッダが使用される。X-Inertiaが未設定あるいはfalseのヘッダは、Inertiaクライアントの生成した要求が通常のフルページ移動であることを示している。

サーバ側では、X-Inertia要求ヘッダがtrueにセットされた要求によって、要求されたページを表示するコンポーネントの名称、そのコンポーネントのprops、要求されたURL、バージョン番号を含むJSON応答がトリガされる。

資料には要求に対応する応答オブジェクトとして、以下のような例が紹介されている。

REQUEST

GET:  http://example.com/events/80
Accept:  text/html, application/xhtml+xml
X-Requested-With:  XMLHttpRequest
X-Inertia:  true
X-Inertia-Version:  6b16b94d7c51cbe5b1fa42aac98241d5
RESPONSE

HTTP/1.1 200 OK
Content-Type:  application/json
Vary:  Accept
X-Inertia:  true
{
  "component": "Event",
  "props": {
    "event": {
      "id": 80,
      "title": "Birthday party",
      "start_date": "2019-06-02",
      "description": "Come out and celebrate Jonathan's 36th birthday party!"
    }
  },
  "url": "/events/80",
  "version": "c32b8e4965f418ad16eaebba1d4e960f"
}

バージョンパラメータはアセットのバージョニングのためのもので、要求されたアセットが変更された場合に、サーバが完全なHTML応答を返すことを保証するために使用される。

資料では、一般的に発生するケース(スクロール管理、フォーム、エラー処理、クロスサイト要求強要(CSRF)対策、プログレス表示、ローカル状態のキャッシング、コード分割など)を取り上げている。認証および承認の処理は、選択したサーバフレームワークによってサーバ側で行われる。デモアプリ(Laravel + Vue)がオンラインで公開されている。

Inertiaがターゲットとするのは、自身のスキルや既存コードベースの再利用を望む開発者たちだ。資料には次のようにある。

Inertiaは、LarvelやRuby on Rails、Djangoといったフレームワークを使って、サーバ側レンダリングアプリケーションを構築する開発者のために設計されました。

SPAの代替を提案した記事("If not SPAs, what?"といタイトル)に関するHackernewsでの議論の中で、Ruby on Railsのベテラン開発者のひとりが、Inertiaについて肯定的な意見を述べている

Ruby on RailsをVue.jsとInertia.jsと合わせて使っていますが、実際に生産性がとてつもなく高くなりました。フロントエンド用にAPIを書く必要も、フロントエンドで独立したルータをメンテナンスする必要も、状態管理をする必要もありません。

このスタックのおかげで、高度にリアクティブなアプリを最小の作業量で構築できます。

その一方で、サーバサイドレンダリングがサポートされていないことを危惧する声もある。

Interia.jsを使ったプロジェクトで開発作業をしていて、近々運用に移るところです。注意しなければならないことのひとつは、Nuxtで可能なようなSSRのサポートがないことです。そのためには、prerender.cloudやprerrender.ioのようなサービスを別途セットアップする必要があります。比較的規模の大きなプロジェクトを考えているのであれば、この点を考慮しておかなくてはなりません。すべての検索エンジンやSEOツールでJavaScriptが動作する訳ではないからです。

Danny Moerkerte氏は、"Your Single-Page App Is Now A Polyfill"と題した自身の記事で、HTMLストリームと、すべてのページ遷移のプロキシとキャッシュを行うサービスワーカを使用することで、より短時間にSPAを記述するテクニックを提案した。新しいページはすべて全ページリロードが行われるが、変化したコンテンツのみをサーバからフェッチする。Inertiaと同じく、こちらもクライアントサイドのルーティングは必要ない。

InertiaはMITライセンスの下で提供される、オープンソースソフトウェアである。フィードバックとコントリビューションは歓迎されるが、Inertiaのコントリビューションガイドラインに従う必要がある。

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

BT