RailsTutorial

【Ruby on Rails 独学】Railsチュートリアル 第3章ほぼ静的なページの作成

【RubyonRails独学記】Railsチュートリアル第3章

【目的別おすすめプログラミングスクール】
  • WebCampPRO
    |転職成功率98%!エンジニアとして転職したい人におすすめ
  • ポテパンキャンプ
    |Railsエンジニアとして自社開発企業に転職したい人におすすめ
  • テックアカデミー
    |オンラインでプログラミングを学びたい方におすすめ
  • Aidemy
    |AI(人工知能)分野特化のスクール。AIを学びたいならここ

この章から本格的なサンプルアプリケーションの開発スタート。

この章では近年のプログラミングで不可欠となっている「自動化テスト」の雰囲気を掴んでいくとのこと。

3.1 セットアップ

これまでの2つのプロジェクトと同じワークスペースにsample_appを追加。

$ cd ~/environment
$ rails _5.1.4_ new sample_app
$ cd sample_app/

次にGemfileを書き換え、[bundle install –without production]を実行。

$bundle install –without production

必要に応じて[bundle update]を実行してから再実行。

[bundle install]ができたらGitリポジトリの初期化。

$ git init
$ git add -A
$ git commit -m “Initialize repository”

README,mdファイルを更新し、変更をコミット

$ git commit -am “Improve the README”

bitbucketに新しいリポジトリを作成し、push

$ git remote add origin git@bitbucket.org:ユーザー名/sample_app.git
$ git push -u origin –all

Applicationコントローラとルートルーティングを変更し、Herokuへのデプロイを実行しておく。

3.2 静的ページ

ここからサンプルアプリケーションの開発へ。

Railsのアクションやビューを使って静的なHTMLのみのページを作成し、その後静的なページを動的なページへ作り変えていく。

Gitを使う場合は、masterブランチでずっと作業するのではなく、その都度トピックブランチを作成→作業→masterブランチへマージしていくのが○
[box class=”box27″ title=”Git(ギット)とは”]
プログラムソースなどの変更履歴を管理する分散型のバージョン管理システムのこと[/box]

参照:「そもそもGitって何?」、「GitとGitHubは何が違うの?」にシンプルに答えるよ

静的なページ用のトピックブランチをチェックアウト

$ git checkout -b static-pages

静的なページの生成

[rails generate]でコントローラを生成していく。
このとき複数のアクションを含ませたコントローラを一度に生成できる。

rails g controller StaticPages home help

Gitリポジトリに追加し、Bitbucketにもプッシュ。

$ git add -A
$ git commit -m “Add a Static Pages controller”
$ git push -u origin static-pages

別ターミナルで[rails server]を起動して[/static_pages/home]を開き、結果を確認。

3.2.2 静的なページの調整

viewsファイル内のstatic_pagesファイルからHomeとHelpのHTMLを修正。

3.3 テストから始める

HomeページやHelpページと同じように、Aboutページも追加していく。

ここではテストについて中心に。

3.3.1 最初のテスト

ルートディレクトリからtestファイルを開き、controllersファイル内にあるstatic_pages_controller_test.rbのコードを確認。

以下のコマンドでテストを実行。

$ rails test

3.3.2 Red

テスト駆動開発のサイクルは「失敗するテストを最初に書く」「次にアプリケーションのコードを書いて成功させる (パスさせる)」「必要ならリファクタリングする」

テストにまだcontrollerには追加していないaboutページについての記述を追加し、[rails test]を実行してエラーを確認。

3.3.3 Green

エラーを確認したらエラーメッセージを参考にAboutページを実装。
routes.rbにabout用のルートを追加し、再度テストを実行。

routes.rbにAbout用のルートを追加したため、

NameError: undefined local variable or method `static_pages_about_url’

は解消されたが、次に

AbstractController::ActionNotFound: The action ‘about’ could not be found for StaticPagesController

というエラーが。

「StaticPagesコントローラにaboutアクションがない」という意味のエラーが出たため、StaticPagesコントローラからAboutアクションを追加する。

追加したら再度テスト。

ActionController::UnknownFormat: StaticPagesController#about is missing a template for this request format and variant.

すると再度エラー。
「テンプレートが見つかりません」とのこと。
Railsにおいて、「テンプレート=ビュー」ということらしく、viewsのstatic_pagesディレクトリにabout.html.erbというファイルを作成。

作成したら指示通りに内容を書きかえ、テストの実行。

ここでようやく成功。

3.3.4 Refactor

[box class=”box27″ title=”リファクタリングとは”]
プログラムの外部仕様(入力と出力)を変えずに,内部構造を安全に改善するテクニック
引用:誰でもわかる リファクタリング入門より[/box]

普段は数百行にも及ぶようなアプリケーションなどでより重要になるが、sample_appでは3.4.3から始める。

3.4 少しだけ動的なページ

Homeページ、Helpページ、Aboutページをそれぞれ編集し、最終的にページごとに異なるタイトルを表示する。

3.4.1 タイトルをテストする(Red)

Homeページなど各ページのタイトルについてのテストを書く。
[assert_select]メソッドで特定のHTMLタグが存在するかどうかテストする。

assert_select “title”, “Home | Ruby on Rails Tutorial Sample App”

このコードでtitleタグ内に「Home | Ruby on Rails Tutorial Sample App」という文字列があるかどうかをチェックする。

同じ要領でstatic_pages_test.rbからテストを書き換えて実行。

まだviewファイルのほうを書き換えていないからエラーが出る。

Expected at least 1 element matching “title”, found 0..

3.4.2 タイトルを追加する(Green)

各ページにタイトルを追加し、テストをパスするように修正する。

修正したらテスト再実行。
エラーなどでなければクリア。

3.4.3 レイアウトと埋め込みRuby(Refactor)

Rubyには「DRY」という原則があり、同じコードを繰り返すことはこの原則に反することになるそうです。
DRY = Don’t Repeat Yourself:繰り返すべからず

そこでビューでもRubyが使えるテクニックを使って修正する。

Railsチュートリアルのリストに沿って各HTMLファイルを変更しテスト。

各ページで重複している部分をapplication.html.erbで記述し重複をなくす。

application.html.erbで記述した箇所でまだHomeページなどと重複している部分を各ページから削除。

3.4.4 ルーティングの設定

ルーティングを設定しなおして終了。

3.5 最後に

3.2でトピックブランチで作業していたものをコミットし、masterブランチにマージしておく。

$ git add -A
$ git commit -m “Finish static pages”
$ git checkout master
$ git merge static-pages

マージしたら[git push]でリモートリポジトリにアップロード。

$ git push

Herokuにもデプロイ。

$ rails test
$ git push heroku

デプロイ前にテストしておく習慣をつける。

3.6 高度なセットアップ

テスト用設定について。
・minitest reporters
・Guard

現時点では高度なもののため、流し読み程度で、

3.6.1 minitest reporters

test/test_helper.rbにリスト3.44に書き換え。
こうすることでテスト時のerrorやsuccessがREDもしくはGreenで表示される。

3.6.2 Guardによるテストの自動化

[box class=”box27″ title=”Guardとは”]
Guardは、ファイルシステムの変更を監視し、例えばstatic_pages_test.rbファイルなどを変更すると自動的にテストを実行してくれるツールです。具体的には、「home.html.erbファイルが変更されたらstatic_pages_controller_test.rbを自動的に実行する」といったことをGuardで設定することができます。
引用:Railsチュートリアルより[/box]

リスト3.2で既にGemfileでguard gemを取り込んでいるということで、初期化して動かす。

$ bundle exec guard init

自動的に適切なテストが実行されるように生成されたGuardfileを編集。

リスト3.45をコピペし、.gitignoreファイルにspringディレクトリを追加。

設定が完了したら新しいターミナルを開き、以下コマンドを実行

$ bundle exec guard

第3章は以上。

第2章:【Ruby on Rails 独学】Railsチュートリアル 第2章 Toyアプリケーション|scaffold使ってアプリを作る
第4章:【Ruby on Rails 独学】Railsチュートリアル 第4章Rails風味のRuby Rubyに関する知識を学ぶ

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

error: Content is protected !!