Hotwire よもやま話

Anecdotes on
Hotwire

本サイトは、私がRuby on Railsのフロントエンド エンジニアを目指しながら、Hotwireについて感じたことを綴ったものです

コンポーネント一覧

概要

  1. このサイトについて
  2. はじめに
  3. Hotwireとは何か？
  4. Hotwireはどいういう時に向いているか？
  5. ウェブデザイナーも使うHotwire
  6. Hotwireの歴史
  7. Hotwireは学習しやすい
  8. あなたはHotwireを採用するべきか？

誤解

  1. Hotwireは複雑なUIに不向き？
  2. Hotwireは管理画面限定？

考える手順

  1. Hotwire思考の順番
  2. HotwireはMVPのMPAから作る
  3. TurboとStimulus: どっちを使う？
  4. Hotwire, React, jQueryのアプローチ

コンセプト

  1. Stimulus Controllerの粒度
  2. Turbo FramesとTurbo Streamsの違い
  3. Stimulusのコア・コンセプト
  4. Stimulus Controllerの構造
  5. JavaScriptは使おう！
  6. Stimulusの考え方
  7. Post/Redirect/Getパターンと高速化

コツ

  1. Stimulus中のHTML生成を避ける理由
  2. Stimulus Controllerの作り方
  3. なるべく<a>や<form>を使用すること

コード例

  1. リアルタイム検索
  2. モーダル
  3. サイドパネル
  4. 複雑なステート（ショップの例）
  5. アコーディオン
  6. ドロップダウン
  7. カルーセル
  8. トースト
  9. トグル
  10. サイドバーメニュー

Pending UI

パフォーマンス

他ライブラリとの組み合わせ

  1. ReactとHotwireの共存
  2. Chart.jsをStimulusから使う

開発用ツール

  1. Hotwire Dev Tools

他のフレームワークと一緒に使う

  1. Reactと一緒に使う

その他

  1. Inline JavaScript

意見

  1. Reactはなぜ習得が難しいか
  2. Stimulus controllerの再利用性
  3. モーダルダイアログをそこで使うべきか？
  4. バックエンドエンジニアだけでは不十分だ！
  5. CSRとSSRの長所短所

付録

  1. 用語集