イヌケンの技術ブログ

私が学んだ技術について備忘録的に書いていきます。

Rails-Tutorial 5章の備忘録

本記事では第5章で気づいたことでの備忘録です。

1.現時点でのシステム構成の整理

いろいろプログラムができていって少々複雑になってきたので一度システムの外観を整理する。
f:id:inukenta:20190212001510j:plain
最初のシステムの処理はroutes.rbによってrootであるstatic_pages#homeに遷移する。
図からcontrollerを呼び出していることがわかるので、controller/concerns/static_pages_controller.rbのhomeメソッドを呼び出すことがわかる。
今回モデルは呼び出さないため、そのままviews/static_pagesのhome.html.erbの内容をブラウザに表示する。
ここで注意点としてhome.html.erbの中身はviews/layouts/application.html.erbのフォーマットに埋め込む形となる。
実行結果は以下のようになる。
f:id:inukenta:20190212002554p:plain

2.Bootstrap

Bootstrapってなんだろって調べてみたらWEBページでよく使われるボタンやフォームやメニューなどの部品がテンプレート化したWEBフレームワークで、
さらにデザイン性もある程度考慮してくれて、ユーザが見る媒体(スマホやPC)に応じて適切なデザインで配置してくれるという優れもの。

3.パーシャル

以下のようなコードを記述してviews/layouts/_shim.html.erbというファイルを配置することで該当の行が_shim.html.erbの内容に置換される。
これを用いることですっきりとしたコードが書けるようになる。

<%= render 'layouts/shim' %>
end

4.アセットパイプライン

アセットパイプラインは以下の3つの機能で構成されており、静的コンテンツの生産性と管理を大幅に強化することができる。
・アセットディレクト
マニフェストファイル
プリプロセッサエンジン
アセットディレクトリはapp,vendor,libのそれぞれのassets配下に画像用、javascripts用、CSS用のサブディレクトリがあり、目的に応じて必要なアセットを適切な場所に配置することで直感的なアセットの管理が可能になる。
マニフェストファイルはassets配下のサブディレクトリごと(画像ディレクトリを除く)にファイルの連結を行う。それぞれのサブディレクトリ配下のcssファイルが1つのファイルになるイメージ。これを実施することでファイル回数の呼び出しが少なくなりWebブラウザへの表示がはやくなる。
プリプロセッサエンジンはjavascriptcssよりもより人間的に理解のしやすいcoffeescrips、ERB、SASSを記載したものをjavascripsやcssに翻訳する機能。
アセットパイプラインを用いるメリットはRuby on Rails Tutorialに記載されている内容をそのまま引用する。

Asset Pipelineの最大のメリットの1つは、本番のアプリケーションで効率的になるように最適化されたアセットも自動的に生成されることです。従来は、CSSJavaScriptを整理するために、機能を個別のファイルに分割し、(インデントを多用して) 読みやすいフォーマットに整えていました。これは、プログラマにとっては便利な方法ですが、本番環境にとっては非効率です。それというのも、最小化されていないCSSJavaScriptファイルを多数に分割すると、ページの読み込み時間が著しく遅くなるからです (読み込み時間は、ユーザー体験の質に影響を与える重要な指標の1つです)。Asset Pipelineを使うと、この「開発効率と読み込み時間のどちらを重視するか」という問題について悩む必要がなくなります。開発環境ではプログラマにとって読みやすいように整理しておき、本番環境ではAsset Pipelineを使ってファイルを最小化すればよいのです。具体的には、Asset Pipelineがすべてのスタイルシートを1つのCSSファイル (application.css) にまとめ、すべてのJavaScriptファイルを1つのJSファイル (javascripts.js) にまとめてくれます。さらに、それらのファイルすべてに対して 不要な空白やインデントを取り除く処理を行い、ファイルサイズを最小化してくれます。結果として、開発環境と本番環境という、2つの異なった状況に対してそれぞれ最高の環境を提供してくれます。