Hotwire超入門：Turbo Drive / Turbo Frames / Turbo Streams を一気に理解【Rails 7 / Rails 8】

1. Railsの基本・概要（Railsとは何か）

1. Railsの基本・概要（Railsとは何か）

Railsは、Webアプリケーションを効率よく作るためのフレームワークです。フレームワークとは、最初から便利な道具箱が用意されている開発環境のことです。Railsでは「同じ書き方をすれば同じ動きをする」というお約束が多く、初心者でも迷いにくい特徴があります。

Hotwireは、このRailsの考え方にぴったり合う仕組みで、画面の更新を最小限にして、まるでアプリのような操作感を実現します。

2. 開発環境とインストール（Hotwireは標準装備）

2. 開発環境とインストール（Hotwireは標準装備）

Rails 7以降では、Hotwireは最初から組み込まれています。特別なインストール作業は不要です。これは「新しい家に最初からエアコンが付いている」ような状態です。

TurboやStimulusを意識しなくても、Railsアプリを作るだけでHotwireの恩恵を受けられます。

3. プロジェクト作成と構成（rails newとHotwire）

3. プロジェクト作成と構成（rails newとHotwire）

Railsでプロジェクトを作成すると、Hotwire関連の設定も自動で用意されます。特に重要なのがTurboです。Turboは画面の更新方法を賢く制御します。

rails new hotwire_sample

このコマンドだけで、Turbo Driveが有効な状態になります。

4. ルーティング入門（Turbo Driveの動き）

4. ルーティング入門（Turbo Driveの動き）

Turbo Driveは、ページ遷移を高速化する仕組みです。リンクをクリックしたとき、画面全体を再読み込みせず、必要な部分だけを更新します。

Rails.application.routes.draw do
  resources :posts
end

このルーティングだけで、Turbo Driveは自動的に働きます。

5. コントローラ基礎（Turboと通常処理）

5. コントローラ基礎（Turboと通常処理）

コントローラは、画面に何を表示するかを決める司令塔です。Turboを使っても、基本的な書き方は変わりません。

class PostsController < ApplicationController
  def index
    @posts = Post.all
  end
end

Hotwireは裏側で動くため、初心者はまず通常のRailsとして理解すれば問題ありません。

6. ビューとテンプレート（Turbo Frames）

6. ビューとテンプレート（Turbo Frames）

Turbo Framesは、画面の一部分だけを差し替える仕組みです。例えるなら、新聞の一部だけを新しい記事に入れ替えるイメージです。

<turbo-frame id="post_list">
  <%= render @posts %>
</turbo-frame>

このように囲むだけで、指定した部分だけ更新できます。

7. モデルとActive Record基礎（データとHotwire）

7. モデルとActive Record基礎（データとHotwire）

モデルはデータを扱う役割です。Hotwireはデータの保存方法を変えません。あくまで画面表示を賢くする仕組みです。

class Post < ApplicationRecord
end

このシンプルなモデルでも、Turbo Streamsと組み合わせると画面が自動更新されます。

8. マイグレーションと画面更新の関係

8. マイグレーションと画面更新の関係

マイグレーションは、データベースの設計図です。Hotwireはデータ構造には影響しません。

create_table :posts do |t|
  t.string :title
  t.timestamps
end

データが変わった結果を、Turbo Streamsが即座に画面へ反映します。

9. バリデーションとTurbo Streams

9. バリデーションとTurbo Streams

バリデーションは入力チェックです。エラー表示もTurbo Streamsでスムーズに更新できます。

validates :title, presence: true

画面全体を更新せず、エラーメッセージだけを表示できます。