JavaScriptイベントでReact.jsとStimulusJSをシームレスに統合する方法

私たちAppSignalは最近、「はじめに(Getting Started)」ページを追加しました。ここには、新規ユーザーがAppSignalを最大限に活用できるよう、おすすめのステップがまとめられています。

初めての利用で手厚いガイドを歓迎するユーザーもいれば、自分のペースで製品を探索したい方や、すでにAppSignalに精通している方もいます。

そこで私たちは、すべてのユーザーがガイド付きでも独力でも快適に使えるよう、「はじめに」ページの表示・非表示を切り替えられるトグル機能を設計しました。

課題

一見簡単そうに見えますが、ユーザーが個人設定メニューから「はじめに」ページを切り替えられるようにするのは、予想以上に難しい課題でした。その理由は、「はじめに」ページがReact.jsで構築されている一方で、個人設定メニューはReactアプリの外側でレンダリングされるRails生成テンプレートだからです。

つまり私たちは、Rails側とReact側の両方のメニューでトグルの状態を同期する方法を見つける必要がありました。しかも可能な限り、現在の状態を取得するためにサーバーへポーリングを行わない形で実現したいと考えました。

解決策

React以外のインタラクションについては、AppSignalでは「Rails流」のアプローチでStimulusJSを採用し、アプリケーション全体にさりげないインタラクティブ性を加えています。

StimulusJS(バニラJS)を選んだのは、標準化された構造を持ち、ドキュメントも整備されており、多少のJavaScript経験があるRails開発者なら誰でも容易に導入できるからです。

React.jsとStimulusJSの状態を同期するために、私たちはdocument(body要素)上でディスパッチされるカスタムイベントを作成しました。そしてReact側とStimulusJS側の両方の設定を、hide_getting_startedイベントに接続してリッスンするように構成しました。

StimulusJS側の実装

StimulusJSでは、コントローラーがconnectしたタイミングでdocument上のイベントをリッスンします。コードを清潔に保つため、disconnect時には必ずイベントリスナーを削除します。これにより、メモリリークや意図しない二重登録を防ぐことができます。

React.js側の実装

React.jsでも基本的には同じことを行います。document上のイベントをリッスンし、コンポーネントのアンマウント(disconnect)時にイベントリスナーを削除します。

トグルのオン・オフ

この仕組みにより、それぞれ独立したReact.jsとStimulusJSの実装のどちらからでもカスタムイベントを発行できるようになり、両者が相互にやり取りしながら常に正しい状態を反映できるようになりました。

JavaScriptの素晴らしいところは、今回のように複数のフレームワークを併用するケースでも、イベントを活用すればReact.jsやStimulusJSのコンポーネントやコントローラーの外側で発生した変化を柔軟に扱える点です。

このシンプルで直接的なソリューションのおかげで、DOMを直接書き換えたり、フロントエンドとバックエンドの間でリクエストを往復させる複雑な仕組みを構築したりすることなく、異なるJavaScript実装間の状態を管理できます。

AppSignalでフロントエンドのJavaScriptを監視しよう

「開発者による、開発者のためのツール」でアプリケーションのJavaScriptフロントエンドを監視してみませんか?多くの開発者にAppSignalのモニタリングを愛用いただいている理由は次のとおりです。

• 直感的で迷わず操作できるインターフェース
• シンプルで予測しやすい料金体系
• 開発者による開発者向けサポート

AppSignalを初めてご利用になる方は、無料のストロープワッフルをお願いするのもお忘れなく!アプリケーションのあらゆるメトリクスをいつでも手元で確認できるあの感覚に負けないくらい美味しいですよ 😉🍪

Connor James(コナー・ジェームズ)

AppSignalのデベロッパーマーケティングマネージャー。ポッドキャストが大好きで、カンノーリへの愛が強すぎて名前を「Connoli」に変えようか本気で検討中。「color」には「u」が入るべきだと信じているイギリス派。オフの日はマイクの前かステージの上、あるいはソファでくつろいでいるかもしれません。

Connor Jamesのその他の記事はこちら

Robert Beekman(ロバート・ビークマン)

共同創業者の一人であり、AppSignalの最初のコミットを書いた人物。サポートチームの模範的な存在で、コードの細部まで熟知しています。旅と写真撮影を同時に楽しむのが得意です。

Robert Beekmanのその他の記事はこちら