⚡

Hotwireをキャッチアップした

shoooout

2023/12/13に公開

こんにちは！
この記事はNE Advent Calendar2023 13日目の記事です。

はじめに

HotwireとはRails7から標準になったSPAライクなフロントエンドWebアプリケーションを構築できる技術です。
https://hotwired.dev/

一部の機能ではありますが、導入してみてとても良いなと感じました。
Hotwireの概要と、導入してみた所感について書こうと思います。

Hotwire概要

Hotwireは前述したようにフロントエンドを構築するためのもので、Turbo・Stimulus・Stradaの3つの技術から構成されています。
(Stradaはネイティブアプリを構築するための技術なのでココでは省略します)

Turbo

Turboを使うことでJavaScriptを書かずにHTMLだけでSPAライクなインタラクティブなアプリケーションを作ることができます。
Turboは以下の4つの技術から成っており、それぞれ用途に応じて使い分けます。(詳細は割愛)

Stimulus

JavaScriptのフレームワーク。カオスになりがちなJS周りで、HTMLとJavaScriptを適切に切り離して書くことができます。

「これ良い！！」ってなったやつ

すべてを使ったわけではないですが、使ってみて感動したやつらです。
今回はTurbo(の一部の機能)とStimulusを使ってみました。

Turbo Frames

画面内で指定した特定の要素の更新や遅延読み込みを行うことができる。
(サンプルコードではtailwindcssを使っています)

# 呼び出し元のviewの記述
<%= turbo_frame_tag :hoge, src: hoge_path, loading: :lazy do %>
    <%# ↓ローダーの表示 %>
    <div class="flex justify-center items-center">
        <div class="animate-ping h-2 w-2 bg-blue-500 rounded-full"></div>
        <div class="animate-ping h-2 w-2 bg-blue-500 rounded-full mx-4"></div>
        <div class="animate-ping h-2 w-2 bg-blue-500 rounded-full"></div>
    </div>
<% end %>

# 遅延読み込みするviewの記述
<%= turbo_frame_tag :hoge, target: "_top" do %>
    <p>ロード完了</p>
<% end %>

これだけの記述で↓のような遅延ローディングを実装することができます。
JSで頑張ってゴニョゴニョやる必要がないです。

Stimulus

コマンドで作成したcontrollerにJavaScriptを記述し、そのcontrollerをviewから呼び出すことで使うことができます。
huga_controller.jsを作成し、その中のhelloを使いたいとき以下の記述で呼び出すことができます。

<!-- 「data-controller」でhuga_controllerを指定する -->
<div data-controller='huga'>
    <!-- クリックアクションでhuga_controllerのhelloを発火 -->
    <button data-action="click->huga#hello">
        Hello!
    </button>
</div>

モノリスなRailsアプリにおいて、JavaScriptをゴリゴリ書いてカオスになることを防ぎたいと思ったのがstimulusを導入しようと思ったきっかけでした。

Railsで通常のJavaScriptやjQueryを使っているとき、viewにはDOMとJSの関係を明示するコードがないので、viewを見ただけではHTMLとJavaScriptの関わりを理解することができません。
しかし、Stimulusを使っているとdata-actionでclick->huga#helloという記述をするため、
「このDOMにはhuga_controllerが対応しており、クリックアクションでhelloが発火する」というのが見ただけでわかります。

所感

Hotwireのドキュメントや解説記事など見ていると、機能が多くハードルが高く感じますが、必要な機能のみを選んで使うことができるので案外スムーズに導入できました。
個人的にはRailsとは相性がよくとても使いやすく感じており、そこまで大規模ではなくReactやVueなどを使うまでもないが、ある程度リッチでモダンなフロントエンドにしたいようなときには選択肢に入ってきても良いなと思います。

下記の参考記事を読んでいただくと、Hotwireの思想やDHHの考えがわかるのでオススメです。
極端かもしれないですが、個人的には「フレームワーク(Rails)を使っているのならばフレームワークやその作者の思想に乗っかっていくのがbetterな選択になるのでは」という考えもあるのでこれからもっと使いこなしていきたいところです。

参考

NE株式会社の開発ブログPublication

NE株式会社のエンジニアを中心に更新していくPublicationです。 NEでは、「コマースに熱狂を。」をパーパスに掲げ、ECやその周辺領域の事業に取り組んでいます。 Homepage: ne-inc.jp/

はじめに

Hotwire概要

Turbo

Stimulus

「これ良い！！」ってなったやつ

Turbo Frames

Stimulus

所感

Discussion