Hotwireとは（Rails初学者の備忘録）
Rails7からデフォルトで使えるようになった「Hotwire」について、自分用のメモ。
Hotwireとは？
JavaScriptを書かずに、SPA（シングルページアプリケーション）のような体験ができるRailsの仕組み。
JSをたくさん書かなくても、Railsでサクサク動くWebアプリを作れるらしい。
Hotwireは3つの技術で構成されている
- Turbo
- Stimulus
- Strada？(※初学者の私では、よくわかりませんでした。)
※今のところはTurbo + Stimulusを指すことが多いみたいです。
Turboとは？
JavaScriptをほぼ書かずに、インタラクティブなUIを実現するためのライブラリ。
Turboの中身は4つ
| 名前 | 機能概要 |
|---|---|
| Turbo Drive | 通常のリンクやフォームをSPAっぽく動かす |
| Turbo Frames | ページの一部分だけを差し替え・更新できる |
| Turbo Streams | サーバーからの変更をリアルタイムで反映 |
| Turbo Native | モバイルアプリ用（iOS/Android向け） |
- Webアプリ開発では、Turbo Native以外の3つを使うことが多いみたいです。
Stimulusとは？
最小限のJavaScriptで、HTMLに意味を持たせて動きをつけるライブラリ。
- 必要なときだけ、ちょっとしたJSを書く感じ
- Turboとの相性が良い
簡単な例
<div data-controller="hello">
<button data-action="click->hello#greet">Greet</button>
</div>
上記コードは、「hello」という名前のStimulusコントローラーを使って、ボタンがクリックされたときにgreetという関数を呼び出す、という意味。
対応するJavaScript（例：hello_controller.js)はこんな感じ
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
greet() {
alert("こんにちは。Stimulusです。");
}
}
クリックするとアラートが出る。HTMLとJavaScriptが分離されている。
Stradaとは？
モバイルアプリ（ネイティブ）向けのHotwire技術。
まだ情報が少ないみたいです。
まとめ（用語、ざっくり説明）
| 用語 | ざっくり説明 |
|---|---|
| Hotwire | モダンなWebをRailsで作るための仕組み |
| Turbo | JavaScriptほぼ書かずに高速な画面切り替えを実現 |
| Turbo Drive | ページ遷移を爆速にする |
| Turbo Frames | ページの一部だけを更新 |
| Turbo Streams | サーバーからの変更を即時反映 |
| Turbo Native | モバイルアプリ用（WebViewベース） |
| Stimulus | スッキリ書けるJavaScriptフレームワーク |
| Strada | モバイルアプリ用（未発表らしい） |
以上、自分用のHotwireメモでした📘
知識が浅いため、TurboやStimulusを少しずつ使ってみて、扱えるようにしたいです。