More than 5 years have passed since last update.

Railsチュートリアル第５章＜復習＞

Posted at 2019-10-09

第５章の復習メモです。
個人的に重要と思ったことを書きます。
調べたことや、知っていたことも含めて書きます。

#Bootstrap
Twitterが作成したフロントエンドのフレームワーク。
デザインが予め用意されているので、いい感じのデザインを素早く実装できる。

railsで使うには、Gemfileにbootstrap-sassを追加する。

source 'https://rubygems.org'

gem 'rails',          '5.1.6'
gem 'bootstrap-sass', '3.3.7'  # ←追加
.
.
.

追加後、$ bundle installを忘れずに実行する。

また、Bootstrapを読み込ませるため、
CSSファイルには以下を追記する。

～.scss

@import "bootstrap-sprockets";
@import "bootstrap";

補足
railsでは、generate controllerした時、
ビューと一緒に、対応するCSSファイルが作られる。
今回は、簡略化のため、全てのCSSを一つにまとめた物として、
app/assets/stylesheets/custom.scssを作成した。
（カスタムCSSというらしい）

##部分テンプレート
ビューファイルのコードの冗長化を防ぐため、
共通する部分を、別ファイルに記載できる。
これを部分テンプレートと呼ぶ。

ファイル名は、
app/views/layouts/_<任意の名前>.html.erb
の形式にする必要がある。

呼び出す際は、renderメソッドを用いて、
<%= render 'layouts/<任意の名前>' %>
と記載する。

＜例＞
部分テンプレート

app/views/layouts/_shim.html.erb

<!--[if lt IE 9]>
  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
  </script>
<![endif]-->

呼び出す側

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title><%= full_title(yield(:title)) %></title>
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag    'application', media: 'all',
                               'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application',
                               'data-turbolinks-track': 'reload' %>
    <%= render 'layouts/shim' %>  # ←ここで呼び出している
  </head>
・
・

以下も参考にさせていただきました。
https://qiita.com/taca10/items/dd4a0eae6864e2bdbf3a

#アセットパイプライン、Sass
##アセットパイプライン
以下を参考にさせていただき、学習しました。
https://qiita.com/hogehoge1234/items/9a94ebc93c5f937502cd

##Sass
CSSの強化版（？）で、

ネスト
変数の使用

ができるみたい。書き方等、詳細は省略。

#リンクの貼り方
ビューファイルでリンクを貼る場合、link_toメソッドを使う。

<%= link_to "文字列", "URL" %>

#ルーティングの変更、名前付きルート
##ルーティングの変更
generate controllerコマンドでコントローラ等を作成すると、
ルーティングが自動生成される。

config/routes.rb

Rails.application.routes.draw do
  get  'static_pages/about'
end

この場合、ルート/static_pagesにGETリクエストが来ると、
static_pagesコントローラの、aboutアクションにルーティングされる。
即ち、コントローラ名とアクション名に対して、URLが固定されている。

これを、以下のように書き換えることで、URLを自由に決めることができる。

config/routes.rb

Rails.application.routes.draw do
  get  '/about',   to: 'static_pages#about'
end

上の例では、ルート/aboutにGETリクエストが来ると、
static_pagesコントローラの、aboutアクションにルーティングされる。

##名前付きルート
railsでは、config/routes.rbに記載したURLに対して、
ルート以降の相対パス、ルートを含めた絶対パスを表す変数が
それぞれ用意され、格納される。
＜例＞

config/routes.rb

Rails.application.routes.draw do
  get  'static_pages/about'
end

の場合

相対パス（'/static_pages/about'）：変数 static_pages_about_path
絶対パス（'http://www.～.com/static_pages/about'）：変数 static_pages_about_url

ルーティングを変更すると、変数名も更新される。
＜例＞

config/routes.rb

Rails.application.routes.draw do
  get  '/about',   to: 'static_pages#about'
end

の場合

相対パス（'/about'）：変数 about_path
絶対パス（'http://www.～.com/about'）：変数 about_url

#統合テスト
テストについては、以下を参考にさせていただき、学習中です。
https://qiita.com/duka/items/2d724ea2226984cb544f

復習記事を書いてみると、理解不足がとても実感できます・・・

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

Railsチュートリアル 第５章＜復習＞

Railsチュートリアル第５章＜復習＞