概要

初めて Ruby on Rails で Web アプリ開発するための、入門編の記事。
Rails の基礎部分をなるべく絞って解説する。

手順	記事
#1	Rails の開発環境構築
#2	コントローラ・ビューの基本
#3	モデルとマイグレーションの基本
#4	DB のデータを画面に表示する（今回）
#5	画面から DB にデータを登録する
#6	画面から DB のデータをの更新・削除する

対象

Ruby on Rails で開発をしてみたい（しなければならない状況になった）方
HTML/CSS で簡単な Web ページを書いたことがある方
「DB」「SQL」という言葉の意味を何となく理解できる方
「REST API」や「GET」「POST」などを聞いたことがある方
Ruby もしくは、その他のオブジェクト指向のプログラミング言語に触れた方
- 変数、四則演算、if 文、for 文、などは書いたことある
- クラス、メソッド、インスタンス、などは聞いたことある

前提

macOS で作業する前提で書いてます。Windows の方は適宜、読み替えてください🙏

OS： macOS 13.12.1 "Ventura"
CPU： Intel
Ruby： v3.1.3
SQLite3： v3.39.5
Bundler： v2.4.9
Rails： v7.0.4

アクションの命名規約

Rails のアクション名は自由に設定可能だが、「基本的にこういうアクション名にしましょう」という規約がある。

アクション名	役割
index	リソースの一覧を表示する
new	リソースを新規作成する
create	リソースを新規作成して追加(保存)する
edit	リソースを更新するためのフォームを作成する
show	レコードの内容（詳細）を表示する
update	リソースを更新する
destroy	リソースを削除する

手順（DB データを一覧表示する画面を作る）

前回の記事までで作成したアプリケーションと DB データを利用します。

前回作成した「users テーブル」のデータ

id	name	age
1	佐藤	17
2	鈴木	21

Users ルーティング追加

User モデルに合わせて、/users というルーティングを追加する。

config/routes.rb

Rails.application.routes.draw do
    get "/", to: "top#index"
+   get "/users", to: "users#index"
end

Rails では、「（主に）一要素を扱う」観点から、モデルは "単数系" で命名するが、コントローラや DB テーブル等は「要素の集まりを扱う」観点から "複数形" で命名するルールになっている（前記事の Top コントローラは例外な書き方）。

Users コントローラを新規作成

こちらも User モデルに合わせて、Users のコントローラを新規作成する（ルーティングの追記はオプションでスキップ）。

rails g controller Users index --skip-routes

生成されたコントローラに、 User モデル を使って users テーブル のデータを全件取得し、変数にセットする処理を追記する。

app/controllers/users_controller.rb

class UsersController < ApplicationController
  def index
+   # users テーブルからレコード全件取得
+   @users = User.all
  end
end

画面テンプレート作成

取得したデータを一覧表示するように、画面テンプレートを以下の様に全て修正する。

app/views/users/index.html.erb

<h1>Users</h1>

<ul>
  <% @users.each do |user| %>
    <li>
      <%= user.name %> / <%= user.age %>
    </li>
  <% end %>
</ul>

画面で一覧表示

Rails サーバを起動して、ブラウザで localhost:3000/users にアクセスする。

手順（1 件のデータのみ表示する詳細画面を作る）

次は、複数のデータの中から、1 件だけ抽出して表示する画面を追加する。

ルーティングを追加する

config/routes.rb

Rails.application.routes.draw do
    get "/", to: "top#index"
    get "/users", to: "users#index"
+   get "/users/:id", to: "users#show"
end

👉 :id は、パスパラメータ（Path parameter） を意味する。この部分に数値や文字列などが当てはめられた場合、ルーディングに設定されたアクションで params[:id] 形式でその値を取得できる。
👉 今回の場合、 /users/1 にアクセスされた場合、Users コントローラ の show メソッド の中で、params[:id] と指定すると「 1 」が取得できることになる。

既存コントローラにアクションを追加する

Users コントローラに、ルーティングに設定した show アクション を追加する

app/controllers/users_controller.rb

class UsersController < ApplicationController
    def index
      @users = User.all
    end

+   # アクション追加
+   def show
+     @user = User.find(params[:id])
+   end
end

画面テンプレート作成

index.html.erb と同じディレクトリに show.html.erb を追加する

app/views/users/show.html.erb

<h1>User Detail</h1>

<ul>
  <li> ID：<%= @user.id %> </li>
  <li> 名前：<%= @user.name %> </li>
  <li> 年齢：<%= @user.age %> </li>
  <li> 作成日：<%= @user.created_at %> </li>
  <li> 更新日：<%= @user.updated_at %> </li>
</ul>

画面で一覧表示

ブラウザで localhost:3000/users/1 にアクセスする。

👉 DB の users テーブルから id: 1 のレコードを取得し、表示する画面ができた！

手順（ビューヘルパーを使ってリンクを作る）

URL 直接入力ではなく、リンクを表示して詳細画面に遷移できる様にする。
今回は、HTML の a タグではなく、Rails には用意されている「ヘルパー」という機能を活用する。
画面遷移でよく使われる「link_to　ヘルパー」と「URL ヘルパー」を利用する。

ルーティングに名前をつける

show アクションのルーティングの末尾に as で名前を追加する。

config/routes.rb

Rails.application.routes.draw do
-   get "/users/:id", to: "users#show"
+   get "/users/:id", to: "users#show", as: "user"
end

👉これで、show アクションのルーティングに user という 「ルーティング名（ルート名）」 が付与される。

ヘルパーを使って画面にリンクを追加する

一覧表示 /users の画面を以下の様に修正する

app/views/users/index.html.erb

<ul>
  <% @users.each do |user| %>
    <li>
      <%= user.name %> / <%= user.age %>
+     <%= link_to '詳細', users_path(user.id) %>
    </li>
  <% end %>
</ul>

👉 <%= link_to '表示する文字', リンク先 %> で追加できる。
👉 リンク先 部分には「URL ヘルパー」を利用する。 ルーティング名_path(変数) で変数をパラメータとして渡しながら、設定したルーティングを呼び出すことができる。

画面確認

「詳細」というリンクテキストが表示され、クリックすると各 id の画面に遷移できる。

詳細画面から一覧画面に戻るリンクも作る

show.html.erb に link_to ヘルパーを追加する

app/views/users/show.html.erb

  <ul>
    <li> ID：<%= @user.id %> </li>
    <li> 名前：<%= @user.name %> </li>
    <li> 年齢：<%= @user.age %> </li>
    <li> 作成日：<%= @user.created_at %> </li>
    <li> 更新日：<%= @user.updated_at %> </li>
  </ul>

+ <%= link_to '一覧', users_path %>

👉 一覧画面の場合、ルーティングにパラメータが無いため、パスには単純に usersが利用できる。そのため、link_to のリンク先には users_path が利用できる。

URL ヘルパーの考え方

link_to に利用する URL ヘルパーは、以下の動きになる様になっている（users というパスの例）。

users_path： /users を返す
user_path(:id)： /users/:id を返す（ただし、user というルーティング名の事前設定が必要）
new_photo_path： /photos/new を返す

まとめ

モデルから取得した値を、コントローラで変数にセットすることで、画面でも呼び出して表示できる
画面のリンクには link_to ヘルパーが利用できる
link_to のパス部分は「URL ヘルパー」が利用できる
- URL ヘルパーについては少し混乱するため、慣れが必要