コンテンツ一覧

Hotwire Anecdota

概要

1. このサイトについて
2. Hotwireの技術的特徴
3. HotwireとReactの違いを理解する
4. Reactアプリで不要だと感じるもの
5. HotwireのJavaScriptは簡単
6. JavaScriptは積極的に使おう！
7. Hotwireの歴史
8. Hotwireにまつわる誤った認識
9. Reactの「複雑なUI/UX」？
10. TypeScript vs. ERBの型安全性
11. Railsフロントエンド。何を選ぶ？
12. モダン化リプレイスのリスク
13. 新しいブラウザ機能とReactの必要性

技術選定

コード例

1. トグル
2. アコーディオン
3. ドロップダウン
4. サイドパネル
5. リアルタイム検索
6. サイドバーメニュー
7. カルーセル
8. 引き出し
9. クライアントサイドバリデーション
10. トースト
11. Optimistic UI (楽観的UI)
12. Apple Store模写（複雑なステート）
13. Chart.js埋め込み
14. Reactと一緒に使う
15. モーダル

考える手順

考え方

1. Hotwire, React, jQueryのアプローチの比較
2. HotwireはMPAから作る
3. なるべく<a>や<form>を使用すること
4. PartialとHelperを使用したコンポーネント
5. コンポーネント(UI部品)の考え方
6. Stimulusのコツ
7. Stimulusのコア・コンセプト
8. Stimulus ControllerはCSS classを変更するべきか？
9. Stimulus中のHTML生成を避ける理由
10. Stimulus Controllerの構造
11. Stimulusはコンポーネントではない
12. Stimulusが解決したjQueryの問題
13. TurboとStimulus: どっちを使う？
14. Turboとネットワーク遅延
15. POST/Redirect/GETパターンと高速化
16. サーバから見たTurbo FramesとTurbo Streamsの違い
17. Turboが速い理由

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

1. Sprockets, Webpacker後の世界

意見

付録