【Ruby on Rails】Web表示のカスタマイズ

はじめに

Progate | プログラミングの入門なら基礎から学べるProgate[プロゲート]
でRubyとRuby on Railsを無料枠の範囲で、
ざっと学習コースを受講してみました。
前提知識はそれだけです。

blue-38.hatenablog.com

で作ったRuby on Rails環境のWeb表示を 少しずついじってみようと思います。

基本要素

Webの外観をいじるにあたって、
まず、抑えておくべき基本要素は、以下の3点

• view：ブラウザに返すHTMLみたいなファイル(.html.erbファイル)
• controller：viewをブラウザに返す設定を定義するファイル(xxx_controller.rbファイル)
• routing：viewとcontrollerの対応表(routes.rb)

触りながら、どんな動きするのか見ていきます。

view

トップページを作ってみます。

> rails generate controller home top
      create  app/controllers/home_controller.rb
       route  get 'home/top'
      invoke  erb
      create    app/views/home
      create    app/views/home/top.html.erb
      invoke  test_unit
      create    test/controllers/home_controller_test.rb
      invoke  helper
      create    app/helpers/home_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    scss
      create      app/assets/stylesheets/home.scss

上記コマンドで、homeというcontroller、付随するアクションtopを作成しました。
railsがなにやら自動でファイルを生成してくれたようです。
Viewのファイルは、app/views/home/top.html.erbです。

ここで外観をいじっていく感じですね。
ファイルを見てみます。

• app/views/home/top.html.erb

<h1>Home#top</h1>
<p>Find me in app/views/home/top.html.erb</p>

controller

viewのHTMLをブラウザに返すのが、controllerの役割です。
コマンドで生成された以下のファイルで、設定します。

• app/controllers/home_controller.rb

中身はこんな感じ。

class HomeController < ApplicationController
  def top
  end
end

topに紐づくHTML(app/views/home/top.html.erb)を返すんだよって、
設定してある状態です。

routing

routingの設定で、、ブラウザとcontrollerを紐づけています。
対応表みたいなものです。

• config/routes.rb

Rails.application.routes.draw do
  get 'home/top'
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end

'home/top'はURLのパスです。

home/topにアクセスしたら、
homecontrollerのtopアクションをしてくれよって設定を追記してみます。

• config/routes.rb

Rails.application.routes.draw do
  get 'home/top' => "home#top"
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end

=> "home#top"を追記しました。
=> "(controller)#(アクション)"って感じですね。

http://localhost:3000/home/topにアクセスしてみると、
app/views/home/top.html.erbが表示されました。

中間まとめ

これで以下の流れが成立したことになるようです。
①ブラウザからのURL(http://localhost:3000/home/top)指定
②routing(/home/topが来たんで、homecontrollerのtopアクション呼びます)
③controller(topに紐づくHTMLを呼びます)
④viewをブラウザに返す(app/views/home/top.html.erbがブラウザに表示される)

viewをアレンジ

どこをいじればいいか、なんとなくわかってきました。
手始めに、viewをカスタマイズしてみます。

• app/views/home/top.html.erb

<h1>Personal Finance</h1>
<h2>貯蓄管理</h2>
    <p>
        目標貯蓄額 ¥----- <br>
        現在の貯蓄額 ¥----- <br>
        達成率 --% <br>
    </p>
<h2>生活費管理</h2>
<h3>変動費</h3>
    <p>
        今月分 ¥----- <br>
        現在 ¥----- 使用 <br>
        残り ¥----- 使用可能 <br>
    </p>
<h3>固定費</h3>
    <p>
        電気代 ¥----- <br>
        水道代 ¥----- <br>
        ガス代 ¥----- <br>
        携帯代 ¥----- <br>
    </p>

個人用家計簿アプリを作ってみようと思うので、
それっぽいハリボテを作りました。

おしゃれにする作業は別途やります。
いじるべきファイルは、以下のファイルです。

• app/assets/stylesheets/home.scss

リンクを作ろう

viewをいじる

HTMLの要領で、リンクを作ります。
<a href="/(path)">リンクにする文字列</a>

• app/views/home/top.html.erb

<h1>Personal Finance</h1>
<h2>貯蓄管理</h2>
<a href="/saving_setting">設定</a>
    <p>
        目標貯蓄額 ¥----- <br>
        現在の貯蓄額 ¥----- <br>
        達成率 --% <br>
    </p>
<h2>生活費管理</h2>
<h3>変動費</h3>
<a href="/variable_cost_setting">設定</a>
    <p>
        今月分 ¥----- <br>
        現在 ¥----- 使用 <br>
        残り ¥----- 使用可能 <br>
    </p>
<h3>固定費</h3>
<a href="/fixed_cost_setting">設定</a>
    <p>
        電気代 ¥----- <br>
        水道代 ¥----- <br>
        ガス代 ¥----- <br>
        携帯代 ¥----- <br>
        ------------------
        合計   ¥----- <br>
    </p>

リンク先のviewも作らないといけないですね。
以下の3つのファイルを作りました。

• saving.html.erb
• variable.html.erb
• fixed.html.erb

現時点ではただのハリボテです。
このレベルです。

• saving.html.erb

<h1>貯蓄管理</h1>
<a href="/">home</a>

routingいじる

URLに対してcontrollerとアクションを紐づけるために、
routes.rbを更新しました。
ついでにトップページを/にしてみました。

• config/routes.rb

Rails.application.routes.draw do
  get '/' => "home#top"
  get '/saving_setting' => "home#saving"
  get '/variable_cost_setting' => "home#variable"
  get '/fixed_cost_setting' => "home#fixed"
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end

controllerいじる

アクションを定義しないといけないので、
home_controller.rbを更新しました。

• app/controllers/home_controller.rb

class HomeController < ApplicationController
  def top
  end
  def saving
  end
  def variable
  end
  def fixed
  end
end

できました。

まとめ

• Ruby on Rails初心者はまず、以下の3要素の役割・対応しているファイルを理解するべし
  • view
  • controller
  • routing

まだハリボテですが、
Rubyの学習しつつ、リッチでスマートなWebアプリにしていこうと思います。

参考

maeharin.hatenablog.com