今更ながら Ruby on Rails Tutorial をやってみた (その5)

この記事について…

普段はRuby on Railsと無縁なプログラマなんですが、今更ながら面白そうという単純な理由からRuby on Rails Tutorialをやってみようと思い立ちました。今回は前回の記事の続きで第5章をやっていきます。
尚、Rails 5.1に対応した第4版を用いて、かつVagrantを使用した環境で進めていきます。

第5章 レイアウトを作成する

この章ではBootstrapを使用してアプリケーションの見た目の部分を作成していきます。Bootstrapというとお洒落というイメージがありますが実際はどうなんでしょうか。

今回はerbファイルを修正する機会が多そうです。現在Windows上のVSCodeを使用してコーディングを行っていますが、残念ながら未だAutoCompleteが効かない状況です。というのもWindows上にはRubyのインストールをしていないのです。
RubyInstallerであれやこれややると思うのですが、どうにも気が進まない。rbenvも使えないからuruを使うとか、Vagrant上で設定するときと知識を共有できないのがちょっとやだなぁと感じています。ThinkPad辺りにUbuntuデュアルブートしてやるのが一番いいのかなぁ…。

とかなんとかボヤキながらチュートリアルを進めていきます。
幸いHTML/CSSは多少わかるので特に詰まることなく進めました。時折出てくるBootstrapのクラスについてはドキュメントを逐一参照するのが良さそうです。そろそろ英語文献も恐れずに読まなきゃいけないと思う今日この頃。

サイトロゴにCSSを追加する節で、次のコードについて特に説明がなかったですが、

app/assets/stylesheets/custom.scss

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

:hover擬似クラスは「マウスカーソルが乗っているが、クリックしていない状態」を指すので、マウスカーソルを乗せたときにテキストに下線が表示されないように調整しているという意味です。下線が表示されると途端にダサくなりますもんね。

また、途中Sassについてのチュートリアルがありますが、これはRailsに限らずCSSファイルを記述する機会があるのであれば使用するべきだなと感じました。

footer {
  margin-top: 45px;
  padding-top: 5px;
  border-top: 1px solid #eaeaea;
  color: #777;
  a { /* ネストして記述できるのはやっぱり便利 */
    color: #555;
    &:hover { /* &は親属性であるaを表す */
      color: #222;
    }
  }
  .
  .
  .
}

Windows環境でもRuby gemのsaasを使用すればコンパイルできるので、使っていきたいですね。
(冒頭のWindows上にRubyのインストールをする話に戻る。)

さて、チュートリアルも約1/3を消化しました。以降はユーザ登録・ログイン処理・メッセージ投稿・フォローと続いて発展的な内容を学習できるようなので、どんどん先に進めていきたいと思います。

それでは、次回 第6章から再開したいと思います。