⚡
Rails + hotwireで簡単なモーダルCRUDアプリを作る
概要
hotwireの理解を深めるための練習用アプリです。
rails newした段階からgem等何も追加せずに簡単に進められる、をコンセプトに解説していきます。
ページ下部に、参考文献を載せてあるので、そちらで一通り勉強してから
こちらのアプリを作成すると理解が深まると思います。
私の場合、手を動かなさないと、全く頭に入ってこず、、
とにかく簡単なアプリで何回も練習することでようやく入り口に立てました！
以下の勉強法がおすすめ
(1). こちらをさらっと勉強（結構ボリューミーなので概要だけ学ぶ）
猫でもわかるHotwire入門 Turbo編
(2). こちらの動画をさらっと写経(英語ですが13分くらいなので簡単にできます)
Turbo Frame Modals (Popups) | Ruby On Rails 7 Tutorial
(3). この記事のモックを理解出来るまで写経する
(4). (1)をがっつりやるもよし、何か本格的に作ってみるも良し
仕様
- scaffoldのCRUDをSPAにする
- hotwireを使う
- 詳細ページへの遷移は無くす
- 一覧ページとモーダルのみのアプリ
完成画面
完成品(PR)
こちらのPRのコードに実装コメントを詳しく載せていますので、見ながら理解を深めていただけると！
解説
1) rails new
とりあえず、新規アプリケーションを作成
rails new . --skip-jbuilder --skip-action-mailbox --skip-action-mailer --skip-test --skip-active-storage --skip-action-text
2) scaffoldの作成
タイトルと本文をもつPostモデルの作成
rails g scaffold post title
rails db:migrate
3) stimulusでモーダル用のコントローラを作成
モーダル用のjsのControllerを作成
rails g stimulus modals
4) 開発スタート
localhost:3000 で開発スタート
rails s
5) こちらが完成品
こちらのコードを写経して勉強してみてください。
このPRにコード解説が詳しく書いてあります。
6) mainブランチをcloneして始める場合
mainブランチは、 4) までやってあるので、以下で開発を開始。
bin/setup
rails s
参考記事・動画
参考にさせていただいた記事
参考にさせていただいた動画
参考にさせていただいたコード
Discussion