１．画像のダウンロード

以下のようにcurlコマンドを使うことで、任意の場所に画像をダウンロードすることでできる。

curl -o app/assets/images/rails.svg -L https://cdn.learnenough.com/rails.svg

２．　BootstrapとカスタムCSS

Bootstrapは、HTML5アプリケーションに優れたWebデザインとユーザーインターフェイス要素を簡単に追加できるCSSフレームワークである。（Railsチュートリアル参照）
BootstrapのCSSを追加することで、navやnavbarを付与したタグにスタイルが自動的に適応される。

※注意：Codespaces（クラウドIDE）で開発される方へ
テキストではBootstrapをGemfileに追加したあと、bundle _2.3.14_ installでbundleをインストールするように記載してあるが、その通りに実行するとうまく反映されなかった。bundle -vでbundleのバージョンを調べ、それに合わせたbundleをインストールすることで、解決することができた。
（例）バージョンが2.4.12ならbundle _2.4.12_ installのように入力。

３．パーシャル（partial)

application.html.erbには、headerやfooterが同ファイル上に存在していてやや散らかっている。それらをヘッダー部分、コンテンツ部分、フッター部分とファイル単位で分ける機能がパーシャルである。３つを分けることで効率化を図ることができる

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title><%= full_title(yield(:title)) %></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
  </head>
  <body>
+    <%= render 'layouts/header' %>
   <mark> <div class="container"> <mark>
      <%= yield %>
    </div>
  </body>
</html>

app/views/layouts/_header.html.erb

<header class="navbar navbar-fixed-top navbar-inverse">
  <div class="container">
    <%= link_to "sample app", '#', id: "logo" %>
    <nav>
      <ul class="nav navbar-nav navbar-right">
        <li><%= link_to "Home",   '#' %></li>
        <li><%= link_to "Help",   '#' %></li>
        <li><%= link_to "Log in", '#' %></li>
      </ul>
    </nav>
  </div>
</header>

_header.html/erbのように先頭に_を付けることで識別できるようにしている。

４．Sass

ネスト

.center {
  text-align: center;
}

.center h1 {
  margin-bottom: 10px;
}

を次のように書くことができる。

.center {
  text-align: center;
+  h1 {
+    margin-bottom: 10px;
+  }
}

また、

#logo {
  float: left;
  margin-right: 10px;
  font-size: 1.7em;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -1px;
  padding-top: 9px;
  font-weight: bold;
}

#logo:hover {
  color: #fff;
  text-decoration: none;
}

を次のように書くこともできる。

#logo {
  float: left;
  margin-right: 10px;
  font-size: 1.7em;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -1px;
  padding-top: 9px;
  font-weight: bold;
+  &:hover {
+    color: #fff;
+    text-decoration: none;
+  }
}

変数

h2 {
+  color: #777;
}

footer {
+  color: #777;
}

上のように同じ値があった場合次のように変数を定義することで、効率化を図ることができる。

+$light-gray: #777;

h2 {
+  color: $light-gray;
}

footer {
+  color: $light-gray;
}

リンク

config/routes.rb

Rails.application.routes.draw do
+  root "static_pages#home"
+  get  "/help", to: "static_pages#help"
end

とすることで、次のように名前付きのルーティングが使用できる。

+ <%= link_to "sample app", root_path %>
+ <%= link_to "Help",    help_path %>