ハンズオン(第2部): サンプルアプリの土台を作る
このハンズオンでは、本書を通して育てるタスク管理アプリ Relay の土台を作ります。ここではまだ Hotwire のカスタマイズはしません。通常の Rails CRUD が動き、以降の章で段階的に Hotwire 化できる状態を目指します。
各部のハンズオンは「到達状態 → 作る・変える → 完成条件 → つまずきやすい点 → Relay の現在地」の順で進めます。
この部の到達状態
このハンズオンを終えると、次の状態になります。
- Rails 8.0 以上で Relay が起動する
- ログイン・ログアウトができる(Rails 標準の認証機能)
ProjectとTaskを一覧・詳細・作成・編集・削除できるComment、Tag、Taggingはモデルと migration だけ用意してある(UI は後の部で作る)- seed データが入っていて、一覧に十分な件数が並ぶ
- System Test を書く準備ができている
作る・変える
順番に進めます。各手順は「変更前 → 変更後 → 動作確認」で確認します。
- アプリを作成する
- Rails 8.0 以上で新規アプリを作成します(
importmapを使う標準構成)。
- Rails 8.0 以上で新規アプリを作成します(
- 認証を追加する
- Rails 標準の認証ジェネレータでログイン機能を入れます。
- 生成された
Userはemail_addressとpassword_digestだけを持つので、nameを追加します。 - 認証用の
Sessionモデルも生成されますが、これは認証インフラなので Relay のドメインモデルとは区別します。
- モデルを作成する
Project/Task/Comment/Tag/Taggingを用意します(属性は第4章のモデル構成表のとおり)。Task#statusはtodo/in_progress/doneの enum にします。
- 通常 CRUD を生成する
ProjectとTaskの一覧・詳細・作成・編集・削除を作ります。Comment/Tag/Taggingの UI はここでは作りません(コメントは第16章以降、タグは第23章以降)。
- seed データを入れる
- プロジェクト 3 件、タスク約 150 件、タグ数種、コメントを散らして投入します。
- ページネーションや検索を後の部で体感できるだけの件数にします。
- System Test の準備をする
- System Test が動く環境を整え、最初の 1 本を書けるようにします。
完成条件
- ログインして
Taskを作成・編集・削除できる Taskの一覧に seed のタスクが多数並ぶ- 無効な入力で作成しようとするとバリデーションエラーが表示される
Comment/Tag/Taggingのテーブルが存在する(UI はまだない)
つまずきやすい点
- 認証ジェネレータの
Userにはnameが無いので、追加を忘れると一覧やコメントで表示できません。 Task#statusの enum 値と seed の値がずれると、後の絞り込み(第23章)で破綻します。- seed の件数が少なすぎると、ページネーション(第24章)や検索(第23章)の体感が薄くなります。
Relay の現在地
素の CRUD が Turbo Drive で動く状態。Hotwire のカスタマイズはまだ何もしていない。 次の第3部で、この土台に対して Turbo Drive の挙動を契約どおりに整えます。
なお Rails 7 以降は
turbo-railsが標準で入るため、この時点で既にページ遷移は Turbo Drive 経由になっています。これは第5章 5.10 / 第7章で確認します。