Keyboard shortcuts

Press or to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

ハンズオン(第2部): サンプルアプリの土台を作る

このハンズオンでは、本書を通して育てるタスク管理アプリ Relay の土台を作ります。ここではまだ Hotwire のカスタマイズはしません。通常の Rails CRUD が動き、以降の章で段階的に Hotwire 化できる状態を目指します。

各部のハンズオンは「到達状態 → 作る・変える → 完成条件 → つまずきやすい点 → Relay の現在地」の順で進めます。

この部の到達状態

このハンズオンを終えると、次の状態になります。

  • Rails 8.0 以上で Relay が起動する
  • ログイン・ログアウトができる(Rails 標準の認証機能)
  • ProjectTask を一覧・詳細・作成・編集・削除できる
  • CommentTagTagging はモデルと migration だけ用意してある(UI は後の部で作る)
  • seed データが入っていて、一覧に十分な件数が並ぶ
  • System Test を書く準備ができている

作る・変える

順番に進めます。各手順は「変更前 → 変更後 → 動作確認」で確認します。

  1. アプリを作成する
    • Rails 8.0 以上で新規アプリを作成します(importmap を使う標準構成)。
  2. 認証を追加する
    • Rails 標準の認証ジェネレータでログイン機能を入れます。
    • 生成された Useremail_addresspassword_digest だけを持つので、name を追加します。
    • 認証用の Session モデルも生成されますが、これは認証インフラなので Relay のドメインモデルとは区別します。
  3. モデルを作成する
    • Project / Task / Comment / Tag / Tagging を用意します(属性は第4章のモデル構成表のとおり)。
    • Task#statustodo / in_progress / done の enum にします。
  4. 通常 CRUD を生成する
    • ProjectTask の一覧・詳細・作成・編集・削除を作ります。
    • Comment / Tag / Tagging の UI はここでは作りません(コメントは第16章以降、タグは第23章以降)。
  5. seed データを入れる
    • プロジェクト 3 件、タスク約 150 件、タグ数種、コメントを散らして投入します。
    • ページネーションや検索を後の部で体感できるだけの件数にします。
  6. 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章で確認します。