ruby

【Ruby on Rails】railsで画面を動的に表示する（超ミニマム）

 
Contents
  1. この記事のスコープ
  2. 1. controllerを作成する
  3. 2. views配下のhtmlファイルを編集
  4. 3. htmlファイルに変数を渡す。
  5. 終わり

この記事のスコープ

  • railsで平文の画面を出す。
  • 画面に変数を渡して動的に処理を動かす。
名前 ver
ruby 3.3.0
Rails 7.1.3.2

1. controllerを作成する

下記コマンドを叩く。

rails generagte controller {コントローラー名} {アクション名}

今回は{users}コントローラーで{index}アクションを生成してみます。
（以下「users」と記載部分はコマンドで入力した「コントローラー名」、「index」と記載のある部分は「アクション名」と読み替えてください。）

% rails generate controller users index
      create  app/controllers/users_controller.rb
      route  get 'users/index'
      invoke  erb
      create    app/views/users
      create    app/views/users/index.html.erb
      invoke  test_unit
      create    test/controllers/users_controller_test.rb
      invoke  helper
      create    app/helpers/users_helper.rb
      invoke    test_unit

作成されるファイル

% git status
On branch master
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   config/routes.rb

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        app/controllers/users_controller.rb
        app/helpers/users_helper.rb
        app/views/users/
        test/controllers/users_controller_test.rb

 

generate controller コマンドで実際に行われていること

config/routes.rb

ルーティング（url）を追加している。

Rails.application.routes.draw do
  get 'users/index' # ここを追加

 

app/controllers/{controller名}_controller.rb

メインのコントローラーの処理を記述されるファイル。
下記クラスが自動で生成されるのでindex関数をよしなに変更してコントローラーを作成する。

class UsersController < ApplicationController
  def index
  end
end

app/helpers/{コントローラー名}_helper.rb

controllerで呼び出す実装の詳細を書くためのもの。
自動で空の関数が生成されるのでよしなに作成する。

module UsersHelper
end

 

app/views/{コントローラー名}/{アクション名}.html.erb

画面に反映されるhtmlファイル。

※erbファイル: embedded ruby の略、htmlファイルにruby を記述して動的に画面を記述することができる。pythonでいうjinjaテンプレートにあたるもの？

<h1>Users#index</h1>
<p>Find me in app/views/users/index.html.erb</p>

 

test/controllers/{コントローラー名}_controller_test.rb

app/controllers/{コントローラー名}_controller.rbのテストコード。

require "test_helper"

class UsersControllerTest < ActionDispatch::IntegrationTest
  test "should get index" do
    get users_index_url
    assert_response :success
  end
end

 

現状でサーバーを起動してみる。

rails sコマンドを叩いてサーバーを起動。
その後、url/{コントローラー名}/{アクション名}を叩いてみると下記のような表示に。

現状はテンプレのまま。

2. views配下のhtmlファイルを編集

現状のままでも画面が表示されるが、テンプレのFind me in app/views/users/index.html.erbしか出ない。

app/views/users/index.html.erbを下記のように変更してみる。

hello

 

再びサーバーを起動

helloと出た。

3. htmlファイルに変数を渡す。

helloと出たが、これだけだと味気ないので変数を渡してみる。

下記のように「@変数名」つけて渡す。

  • controller側: 「@変数名」で作成されたメソッドの中に定義
  • view側: 「<%= @変数名 %>」の形式でhtmlの中に記述

試しに現在の日付を渡してみる。

app/controllers/users_controller.rb

class UsersController < ApplicationController
  def index
    @now_month = Time.now.month.to_s
    @now_day = Time.now.day.to_s
  end
end

app/views/users/index.html.erb

hello　今日は<%= @now_month %>月<%= @now_day %>日です。

 

再びサーバーを起動

日付が渡せた！

終わり

超ミニマムで画面を動的に表示してみました。
少しでも画面を動かしてみるとちょっとわかってきたかも感。

ディレクトリ名でMVCがくっきりわかれてて処理の責任が明確なのがいいなって思いました。

今回はこれで。(´∀｀)ﾉｼ

ruby Ruby on Rails
RELATED POST