LoginSignup
0
0

More than 3 years have passed since last update.

Ruby on Railsのチュートリアル ~第5章レイアウトを作成する~

Posted at

はじめに

webアプリケーションを作るための学習記録
(マッチングアプリを作る予定)

こちらのチュートリアルを片っ端から進めていく
【Ruby on Rails チュートリアル】
https://railstutorial.jp/

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

まとめ

  • HTML5を使ってheaderやfooter、logoやbodyといったコンテンツのレイアウトを定義しました
  • Railsのパーシャルは効率化のために使われ、別ファイルにマークアップを切り出すことができます
  • CSSは、CSSクラスとidを使ってレイアウトやデザインを調整します
  • Bootstrapフレームワークを使うと、いい感じのデザインを素早く実装できる
  • SassとAsset Pipelineは、(開発効率のために切り分けられた) CSSの冗長な部分を圧縮し、本番環境に最適化した結果を出力する
  • Railsのルーティングでは自由にルールを定義することができ、また、その際に名前付きルートも使えるようになる
  • 統合テストは、ブラウザによるページ間の遷移を効率的にシミュレートする

所感

  • パーシャル初めて知った、確かにキレイになった。HTMLやCSSも早く慣れたい
  • ルーティング改めてわかりやすいなと思った。どのリクエストをどのURLに送るとどのコントローラのメソッドを呼び出してくれるか

途中参考にしたページ

・HTMLでアンカータグを使う方法【初心者向け】
https://techacademy.jp/magazine/5796

・スタブ【テスト】 (stub)
https://wa3.i-3-i.info/word14933.html
スタブ:テスト対象から呼び出される代用品
ドライバ:テスト対象を呼び出す代用品

・よく使うcurlコマンドのオプション
https://qiita.com/ryuichi1208/items/e4e1b27ff7d54a66dcd9
curl -o app/assets/images/rails.png -OL railstutorial.jp/rails.png
-OLでURL先のファイルをリダイレクト有効でダウンロード
それを-oのファイルに出力

・CSSがもっと効率的に書ける!LESSの使用方法について。
https://www.qam-web.com/?p=11278
動的スタイルシート言語(CSSの拡張メタ言語)
これで書いたものをコンパイルするとCSSになる

・これからはcssはSassで書こう。
https://qiita.com/m0nch1/items/b01c966dd2273e3f6abe
構文的にイケてるスタイルシート。LESSの別バージョン

・タイポグラフィとは?基本ルールと作り方 37の要点
https://saruwakakun.com/design/tips/typography2
要するに文字のデザイン

・【CSS初心者入門】hoverとは何?使い方も解説!
https://web-camp.io/magazine/archives/10923
リンクにカーソルが乗った時のデザイン

・【Rails入門】yieldとcontent_forを使ってページ毎にタイトルを変更
https://www.sejuku.net/blog/75657
共通レイアウトで個別レイアウトを展開するのがyield
共通レイアウトの一機能をくくり出すのがパーシャル?

・Sprocketsの仕組み
https://qiita.com/ttaka66/items/991a52081a92cb6c2738
アセットファイルにアクセスするためのパスを管理する(アセットパス)

・bootstrapで原因不明のエラー(File to import not found or unreadable: bootstrap-sprockets)
http://www.eggineer.info/entry/2018/01/31/165612
なんか知らんけど「custom.css」というファイルができていた、消したらエラー解消

・Sassの記法(SCSS構文)
https://qiita.com/takeshisakuma/items/1c40c42f61c6e751c0e3

・LESS変数一覧
https://getbootstrap.com/docs/3.4/customize/

・yieldについて
https://qiita.com/sanstktkrsyhsk/items/e7d27c6717b430302967
他のviewにあるものを引っ張ってくる

・AWS 別名(エイリアス)と初期リージョン
https://qiita.com/qt6hy/items/3539bc2fc7caef0d0755
AWSのアカウントエイリアスとデフォルトのリージョンを変更

・URLとURIの違いとは? パーツの構造・名称・意味も大解説!
https://webtan.impress.co.jp/e/2010/03/09/7539
URIが場所/名前を識別する大カテゴリ、URLは小カテゴリでいわゆる「http://~」

使用したコマンド

git checkout -b filling-in-layout
curl -o app/assets/images/rails.png -OL railstutorial.jp/rails.png

curl -o app/assets/images/kitten.png -OL cdn.learnenough.com/kitten.jpg

bundle install
touch app/assets/stylesheets/custom.scss

touch app/views/layouts/_shim.html.erb
touch app/views/layouts/_header.html.erb
touch app/views/layouts/_footer.html.erb
touch app/views/layouts/_rails_default.erb

ls app/assets

rails generate integration_test site_layout
rails test:integration
rails t

touch test/helpers/application_helper_test.rb
rails t

rails generate controller Users new

git add -A
git commit -am "Finish layout and routes"
git checkout master
git merge filling-in-layout

rails test

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0