いよいよチュートリアルも5章に突入。
社会人で本業もありながらのプログラミング勉強はガチできつい。
きついけど、とりあえずちょっとづつでもいいので進めていく。
第5章 レイアウトを作成する
なにやら、レイアウトを追加したり修正したりするらしい。
5.1 構造を追加する
読み進めていると、文章の9割が聞いたこともない単語で構成されており、心が折れそうになる。
わからない単語は調べつつ、なんとなく理解していく。
ワイヤーフレームとは、webページのレイアウトを定める設計図のことです。
webサイトの制作現場で聞かないことがない、といえる単語であり、サイト制作において決して欠かせない要素です。
どうやらこの章ではWebサイトの見た目をきれいにしていくっぽい。ちょっと楽しそう。
ブログをちょいちょい書いたりしているので、headerやdivはまあなんとなくわかるレベル。
link_toでは、リンクを生成することができるっぽい。
演習。
Webページと言ったらネコ画像、というぐらいにはWebにはネコ画像が溢れていますよね。リスト 5.4のコマンドを使って、図 5.3のネコ画像をダウンロードしてきましょう8 。
コピペして実行すればok
mvコマンドを使って、ダウンロードしたkitten.jpgファイルを適切なアセットディレクトリに移動してください (参考: 5.2.1)。
mv ファイル名 移動先のパスでok
mvの構文はぐぐった。
image_tagを使って、kitten.jpg画像を表示してみてください (図 5.4)。
<%= link_to image_tag("kitten.jpg", alt: "hoge"), 'hoge' %>
でok
hogeの使い方ってこれでいいのかな。
そして、突然Bootstrapという単語が出てくる。
BootstrapはTwitter社が開発したCSSの「フレームワーク」です。通常CSSを書く場合、全てのスタイルを自分で作っていく必要がありますが、このフレームワークにはよく使われるスタイルがあらかじめ定義してあるので、ルールに沿って利用するだけで整ったデザインのページを作成できます。
Twitter社が開発したんか、という感じ。
Gemを書き換え、bundle installをする。
もしかして、bundle installってgemファイルに記載したものをインストールするための呪文なのか。
ちなみに、演習5.1.3はむずすぎたからすべてコピペした。
パーシャルがなにかもわかっていない。
5.2 Sassとアセットパイプライン
アセットパイプラインの最大のメリットの1つは本番のアプリケーションで効率的になるように最適化されたアセットも自動的に生成されることらしい。
Sassってなんのことかと思っていたけど、CSSの上位互換みたいなものっぽい。
ネストという構造でコードを書くと、より簡潔になる。
とにかくプログラミングは「重複」を嫌うようだ。
のちに出てくる「変数」という機能もコードの重複を避けるためにあるように思える。
5.3 レイアウトのリンク
この章ではリンクを書き換えることで、異なるページへの導線が確保できるようになる。
この章をやっているうちに「そういえば、routes.rbってなんのためにあるんだっけ」と思い始めた。
調べると、ルーティングを登録するファイルとのこと。
ルーティングとは、ブラウザからRailsアプリへ渡される情報をもとに、登録された動きを行わせるための振り分け設定のことらしい。
だから、rails sをしてlocalを開くと、勝手にHomeに飛ばされていたのか。という時代遅れの発見をした。
5.4 ユーザー登録:最初のステップ
この章では、ユーザー登録用のページを用意する。
そして、ホームページからユーザー登録用ページまではリンクから飛べるようにしておく。
ここまでチュートリアルをやってみて、なんとなくroutes.rbと各ページの関係を理解してきた感はあるけど、何周もやらないと完璧には理解できないだろう感がある。