Rails: Hotwire Nativeをデバッグする（1）Hotwire Nativeの理念を理解する
この間RailsWorldに参加したとき、「Debugging Hotwire Native」というタイトルで10分間のLTを行う機会に恵まれました。とても楽しい体験でしたが、私がHotwire Nativeアプリケーションのデバッグで得た知見をここで共有して、皆さんがいつでも参照できるようにしたらよいのではと思いついたのです。
今回の記事では個別の具体的なデバッグ手法について事細かには触れませんが、Hotwire Nativeがどのような仕組みであるかについて手短に概要を説明したいと思います。Hotwire Nativeの地盤は日ごとに確かなものに成熟しつつあるにもかかわらず、多くの開発者たちの知識はHotwire Nativeとギャップがあることを知りました。しかしそれも無理はありません。Hotwire Nativeを本当に理解するには、Hotwireそのものの理念を理解しなければならないからです。
🔗 Hotwireは"HTML Over the Wire"の略
ネイティブアプリを開発する場合、UI構築に使える幅広いテクノロジーの中からよりどりみどりで選べます。選択肢は本当に豊富です。SwiftUIの最新フレームワークを使って完全なネイティブアプリを構築するもよし、Android ViewsやUIKitのように昔からあるネイティブフレームワークを使うもよし、何ならそれらを好みに応じて混ぜたってよいのです。
選択肢はまだまだあります。React NativeもあればIonic、Xamarin、そしてFlutterだってあります。
どれを選ぶにしても、ネイティブアプリケーションのUIを構築する方法は千差万別です。
Hotwire Nativeは、それらすべてをえいやっと脇にのけて、代わりにアプリの中でWebブラウザを用い、HTMLで構築されたビューをレンダリングすると同時に、ネイティブならではのUI操作も可能にします。
理解すべきコンポーネントは「TurboJS」「ネイティブアダプタ」「ブリッジコンポーネント」の3つです。
ではそれぞれを見ていきましょう。
🔗 1: TurboJSとは
Hotwire NativeはTurboJSがなければ動きません。このことはRailsのエコシステムにいる人々にとっては自明なのですが、外部からはわかりにくいので、混乱が生じるのももっとももです。
そもそもTurboJSとは何をするものでしょうか。
手短に言えば、同一ドメイン内へのあらゆるユーザークリックをインターセプトすることでデフォルトのブラウザ操作を遮り、History APIを用いてURLを変更し、fetch APIを用いてページのコンテンツを変更します。
この処理はフォーム送信時に行われ、headタグとbodyタグのマージを処理します。従来なら面倒がつきものだったSPAのようなアプリも実に手軽に構築できます。
スタイルシートなどのアセットをブラウザでフェッチするよう指示するのはheadタグです。ここにTurboJS作者の実に巧妙なトリックが盛り込まれていますが、それなりの代償は求められます。
TurboJSを使う開発者は、どのようなケースがあるかを理解しておく必要がありますが、幸い優秀なドキュメントが揃っています↓。
参考: Turbo: The speed of a single-page web application without having to write any JavaScript.
Hotwire Nativeの気持ちを汲んでこれらを理解するうえで重要なのは、アプリケーションのVisitという概念です。ここから、iOSとAndroidのアダプタについて学習を進めましょう。
🔗 2: ネイティブアダプタとは
Turboの勘所を理解できれば、Hotwire Nativeアプリケーションのデバッグや構築がずっとやりやすくなります。
TurboJSは、ブラウザのイベントに応答するための低レイヤ機能を実装するために、文字通りAdapterパターンを採用しています。デフォルトのブラウザアダプタのコードは以下でご覧いただけます。
参考: turbo/src/core/native/browser_adapter.js at main · hotwired/turbo
Hotwire NativeはiOSとAndroidでそれぞれ固有のアダプタを実装しています。これらのネイティブアダプタは、JavaScriptが提供する関数のイミディエイト呼び出しで起動されると即座にWebビューで初期化されます。
これらのアダプタは、Railsアプリとネイティブアダプタの間を取り持つブリッジとして動作します。さて、ブリッジと言えば...
🔗 3: ブリッジコンポーネントとは
Hotwire Nativeアプリをデバッグするときの最後のピースは、ブリッジコンポーネントの仕組みを理解することです。
ここでは、ソースコードを掲載したり言葉を尽くして説明する代わりに、こちらの画像をご覧いただきたいと思います。
私の場合、Hotwire Nativeとはこの図のようにメッセージを送信したり返信したりする、いたってシンプルなシステムなのだということを理解できたおかげで、何か問題が起きたときにどこを調べればよいかについて自信が持てるようになりました。
今後の記事では、デバッグのときにどんな点を自問自答すべきかについて説明する予定です。
概要
元サイトの許諾を得て翻訳・公開いたします。
日本語タイトルは内容に即したものにしました。
従来Turbo NativeとStradaと呼ばれていたものは、現在はHotwire Nativeに統合されました。
参考: Hotwire Native: Hotwire Native is a web-first framework for building native mobile apps.