Ruby on Rails チュートリアル 12日目（5章）
- はじめに！
- アセットパイプライン
- Missing :controller key on routes definition, please check your routes.の対処法
- undoの演習
- jquery-railsを導入
- まとめ
はじめに！
Ruby on Rails チュートリアルの5章が終わりました！
5章では、フロントエンド寄りであるレイアウトを作り、見た目を綺麗にしたり、urlから画面遷移する機能を作ることを主におこないました。
本題に入る前に少し無駄話。
WSL2 ってご存知でしょうか？
現在、私はチュートリアルをLinux環境で実行しておりますが、これはWindowsのvirtual boxという仮想化ソフトを使って仮想OS上で動かしています。
初めは、すぐにmacbook proの13インチを購入しようと思っていました。
理由はmacbookがOS Xと呼ばれるUnixベースのOSを採用しており、Unixが使えるからです。（あとスタバで…）
しかし、バタフライキーボード廃止の新型が出るかもと噂を聞き、買うのを渋っておりました。それにやっぱ高い
しかし、つい最近にwsl2と呼ばれるWindows内で完全なLinuxを実行できる仕組みが近々一般リリースされるというニュース記事をみました。（しかもwsl2はdocker対応）詳しい仕組みは割愛しますが、
独自のLinuxカーネルがプログラム中に含まれており、専用のVM（仮想マシン）ユーティリティのなかでこれを実行することで、完全なLinux対応を果たしているそうで
これによって仮想OSを立てるより高速に作業ができるんだとか…もしかしてmacいらない？
一般提供されたら使ってみようと思います！
皆さんも興味がありましたら是非調べてみてください。
アセットパイプライン
アセットパイプラインについてが、いまひとつ理解できなかったので以下のサイトを参考にさせていただきました。
www.transnet.ne.jp
「人に分かり易く」かつ「機械にも分かり易く」という目的でRailsはどんどん進化しているということなのですね。
Missing :controller key on routes definition, please check your routes.の対処法
rails t（テスト）を実行したら、いつものRed画面ではなく、謎の結果が…
Missing :controller key on routes definition, please check your routes.
どうやらテストのエラーではなく、コンパイルエラー？に引っかかって怒られたみたいです。
以下のQiitaの記事からヒントをもらい、
qiita.com
Rails.application.routes.draw do root 'static_pages#home' get '/help', to: 'static_pages#help' get '/about', to: 'static_pages#about' get '/contact', to: 'static_pages#contact' end
のところを
Rails.application.routes.draw do root 'static_pages#home' get '/help', to: 'static_pages#help' get '/about', to: 'static_pages#about' get '/contact', to: 'static_pages/contact' ←#ではなく、/にしていた。 end
ことが原因と判明しました。
（おまけ）
..., to:'static_pages#help' , as : 'helf' でもエラーが発生
正しくは
..., to:'static_pages#help' , as: 'helf'
勝手にスペースを入れたのが間違い
vimでも変色しなっかったことに気が付くべきでした。スペース混入のエラーは見つけにくいですね。
ちなみにリスト 5.28のテスト作成後時点に $ rails routes で確認すると
Prefix Verb URI Pattern Controller#Action root GET / static_pages#home helf GET /help(.:format) static_pages#help about GET /about(.:format) static_pages#about contact GET /contact(.:format) static_pages#contact
となります。
undoの演習
チュートリアルでなぜか急にundoの演習です。
vimではescを押してノーマルモードにし、
:uで 元に戻す(undo)
ctrl + r (=:^r) やり直し(redo)
操作をおこないます。
jquery-railsを導入
これはチュートリアルには無い内容になります。
チュートリアルの一環でブラウザを使った結果を表示させる際に、ブラウザの大きさ自体を変えると以下の画像のような現象が起こります。
これだと少し見にくくなりますね。
jquery-railsを導入することで改善されるようなので試してみました。
まず、
gem 'jquery-rails' , '4.3.1'
をGemfileに追加して
$ bundle install
を実行します。
続いてapp/assets/javascripts/application.jsのファイルに
//= require jquery
と
//= require bootstrap
を追記します。
あとはヘッダー(app/views/layouts/_header.html.erb)の修正をおこないます。
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<!-- 追記ここから-->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- 追記ここまで-->
<%= link_to "sample app", root_path, id: "logo" %>
<!-- 追記ここから-->
</div>
<!-- 追記ここまで-->
<nav>
<!-- ulタグ内に「id="navbar"」を追記、classに「navbar-collapse collapse」を追記 -->
<ul id="navbar" class="nav navbar-nav navbar-right navbar-collapse collapse">
<li><%= link_to "Home", root_path %></li>
<li><%= link_to "Help", help_path %></li>
<li><%= link_to "Log in", '#' %></li>
</ul>
</nav>
</div>
</header>
