クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

トップ > Ruby on Rails > 【Rails】静的なページを作る（Railsチュートリアル第3章）

【Rails】静的なページを作る（Railsチュートリアル第3章）

Ruby on Rails Railsチュートリアル Ruby

Railsの続きです。前回はScaffoldでToyアプリケーションを作りました。次はRailsチュートリアルの第3章に入ります。静的なページをつくります。今回からはScaffoldは使わないようです。それではいきましょう！

【目次】

Ruby/Ruby on Railsを習得するためにやったこと まとめ
qiita.com

作ったもの

Railsチュートリアルの第3章の内容（チュートリアルを購入すると読むことができます）

※参考：第3章 ほぼ静的なページの作成 - Railsチュートリアル

ルートページにhomeの内容を表示

homeページ（ルートと共通）

helpページ

aboutページ

リポジトリ

※参考：GitHub - ryo-i/rails_sample_appp

ローカル環境構築

以前と同じくローカルにRails環境を構築したあとにGemfileをRailsチュートリアルのテンプレートの内容に変更。

※参考：GitHub - yasslab/codespaces-railstutorial: 🎓 Railsチュートリアルで採用しているクラウド開発環境『GitHub Codespaces』のテンプレートです。

bundle lock

ローカル環境を構築後にbundle lockを行った

% bundle lock --add-platform x86_64-linux

実行後、特に変更は起こらなかった模様

bundle lockはMacのCPUがいろいろ変わったりしているので、そこにインストール必要なものを追記してくれるようだ！

Gemfile.lockの PLATFORMS 欄に、bundle lock --add-platform xxxで指定したプラットフォームが追記され、そのプラットフォームで必要な gem の情報がGemfile.lockに追記されます。

※参考：Ruby BundlerでCPUアーキテクチャにあったgemをインストールする

ブランチを作成

今回からブランチを作成して作業する。gitのswitchコマンドを実行。

 % git switch -c static-pages

switchコマンドはcheckoutコマンドよりも新しい書き方のようだ

※参考：git checkout と git switch それぞれの使い方を比較する | エンベーダー

StaticPagesコントローラを生成

下記のコマンドを実行

rails generate controller StaticPages home help

実行するとhomeとhelpページのerbファイルなどが追加される。

前回のようにrailsジェネレーター生成を実行するが、scaffoldは使わない。

コントローラのジェネレータにはgenerate controller コントローラ名 アクション1 アクション2という形式でパラメータを渡します。

※参考：コマンドラインツール - Railsガイド

なお、rails generateはrails gと省略形でも実行できるようだ。他にも省略形の種類がいくつかある。

※参考：よく使うRailsコマンドの省略形一覧 #Rails - Qiita

クラスの中のメソッドが空の場合

StaticPagesControllerクラスの中のdefやhelpメソッドは内容がないが、ApplicationControllerクラスを継承しているために実際にはページは表示される

class StaticPagesController < ApplicationController
  def home
  end

  def help
  end
end

※参考：rails_sample_appp/app/controllers/static_pages_controller.rb at 2550e446fe20f2a890d822c3a7b5f62f88fa49d5 · ryo-i/rails_sample_appp · GitHub

/static_pages/homeを開いた時の画面

/app/views/static_pages/home.html.erbの内容になっている（静的なページ）

<h1>StaticPages#home</h1>
<p>Find me in app/views/static_pages/home.html.erb</p>

※参考：rails_sample_appp/app/views/static_pages/home.html.erb at 2550e446fe20f2a890d822c3a7b5f62f88fa49d5 · ryo-i/rails_sample_appp · GitHub

ページ内容を修正

/app/views/static_pages/home.html.erbの内容を修正するとページの内容も変わる

<h1>Sample App</h1>
<p>
  This is the home page for the
  <a href="https://railstutorial.jp/">Ruby on Rails Tutorial</a>
  sample application.
</p>

※参考：rails_sample_appp/app/views/static_pages/home.html.erb at f0e7fc64727dee96b802a764f829d7b7c2bc08d6 · ryo-i/rails_sample_appp · GitHub

コントローラテスト

テストを書きながら開発するテスト駆動開発（TDD）は、「Fake it」最初に失敗パターン（=赤）を書いてから成功（=緑）しながら進んでいく、などの方法。

※参考：TDDから僕が学んだことと最近考えてること - assertInstanceOf('Engineer', $a_suenami)

テストの種類

  • 機能テスト（対象：コントローラ）
  • 単体テスト（対象：モデル）
  • 統合テスト（対象：モデル・コントローラ・ビュー）

※参考：【初学者向け】単体テスト・機能テスト・統合テストを書こう【Rails Tutorial】 #Ruby - Qiita

テストの関数は先ほどのrails generate controllerコマンドを実行した時にすでに生成されている。

test/controllers/static_pages_controller_test.rbのファイル。このファイルに「about」ページのテストを追記

test "should get about" do
    get static_pages_about_url
    assert_response :success
    assert_select "title", "About | Ruby on Rails Tutorial Sample App"
  end

※参考：rails_sample_appp/test/controllers/static_pages_controller_test.rb at static-pages · ryo-i/rails_sample_appp · GitHub

テストを実行するコマンド

% rails test

※参考：Rails テスティングガイド - Railsガイド

最初はエラーになる

3 runs, 2 assertions, 0 failures, 1 errors, 0 skips

エラーを修正する内容を追記すると最終的にエラーがなくなった！

3 runs, 3 assertions, 0 failures, 0 errors, 0 skips

※参考：テスト&aboutページ設定追加 · ryo-i/rails_sample_appp@e6ab318 · GitHub

ERBファイルの内容の一部を動的にする

ERBはRubyのテンプレートエンジン。<% ～ %>で囲うのはEJSに似ている（ERBの方が先にあったようだ）。

※参考：ERBとは | Railsドキュメント

データの整理をDRY（Don't repeat yourself）に従って重複している部分を共通化する。

※参考：Don't repeat yourself - Wikipedia

/app/views/static_pages/home.html.erbなどの各ページのタイトル部分をprovide()で共通化

例：修正前

<h1>Sample App</h1>
<p>
  This is the home page for the
  <a href="https://railstutorial.jp/">Ruby on Rails Tutorial</a>
  sample application.
</p>

例：修正後

<% provide(:title, "Home") %>
<h1>Sample App</h1>
<p>
  This is the home page for the
  <a href="https://railstutorial.jp/">Ruby on Rails Tutorial</a>
  sample application.
</p>

※参考：rails_sample_appp/app/views/static_pages/home.html.erb at 6a399c1c83f833b439f13bcf80ef7a510ac69883 · ryo-i/rails_sample_appp · GitHub

また、/app/views/layouts/application.html.erbではyield()でtitleを読み込んでいる

<!DOCTYPE html>
<html>
  <head>
    <title><%= yield(:title) %> | Ruby on Rails Tutorial Sample App</title>
    （中略）
  </head>
  <body>
    <%= yield %>
  </body>
</html>

provideはビュー側からレイアウトに値を送り、yieldはレイアウト側からビュー側の値を呼び出す関係のようだ。

※参考：Railsのprovideとyieldの関係 #Rails - Qiita

ブランチをmainにマージ

ブランチをmainに切り替え

% git switch main

static-pagesブランチをmainにマージ

% git merge static-pages

テスト機能の拡張

最後に今後のテストがしやすくなる下記の機能の拡張を行った。

minitest reportersでテスト結果に色をつける（赤、緑など）

※参考：sample_apps/7_0/ch03/test/test_helper.rb at main · yasslab/sample_apps · GitHub

minitest reportersについて

※参考：メモ：minitest-reporters導入方法 #Ruby - Qiita

Guardによるテストの自動化（railsにあらかじめ組み込まれているようでGuardfileで設定を追加する）

※参考：sample_apps/7_0/ch03/Guardfile at main · yasslab/sample_apps · GitHub

Guardについて

※参考：【Guard】自動生成されるGuardfileで監視・実行されるファイルは結局どこなのか、ソースコードから読み解いてみた #Ruby - Qiita

終わりに

ということでRailsチュートリアルの3章を走破しました。今回からsample_appを作り込んでいく内容になっていくようです。3章では静的なページを作り、その中の一部（title部分）を動的に作り替えました。

Railsはあらかじめフォルダ構成が用意されていて、その中にファイルを追加していく構成のようです。Reactなどは割と自由にフォルダが作れちゃう反面、この形が正解なのか確証が持てない感じでした。それに比べると迷いが少なく作成ができるような気がしますね。

さて、4章は「Rails風味のRuby」というタイトルです。Rails風味のRuby？はて？どういう内容なのか、楽しみです。それではまた！

Ruby/Ruby on Railsを習得するためにやったこと まとめ
qiita.com