TECH EXPERT 22日目

TECH::EXPERT
2019.08.03

11時に出席して12時に帰るという何しにいったんだろう状態。
ちょっと不意な予定ができて、外に出てしまったらもう教室戻る気がなくなったんだ。なんていうか、応用は本当に教室でやる意味がない気がする。
ちょっと今日は勉強が進んでないので深夜にちくちく進めます。

ruby

print puts

  • print 改行なし
  • puts 改行あり

%記法

”や’、\(エスケープ)の記述を省略し、可読性をあげる記法

%Q %q

文字列用の記法
%Q(“aaa”)
\”aaa\”

%W %w

配列を作成する記法。
%Wは式展開あり。%wは式展開なし。

%w(日 月 火 水 木 金 土)
["日", "火", "水", "木", "金", "土"]
require 'date'

a = Date.today.wday
arr = %w(日 月 火 水 木 金 土)
print "今日は#{arr[a]}曜日"
puts "da!!" if a==6

SASS

.sassと.scssがある。scssを用いる。

&

&(アンパサンド)は、適用されているセレクタを指す。

パーシャル

分割したSassファイル
ファイル名を_（アンダースコア）をつける。
読み込むには、@import ファイル名と記述。

@import "reset";  /* _reset.scssを読み込む */
@import "header"; /* _header.scssを読み込む */

mixin

スタイルを定義する。
_clearfix.scssのような別ファイルで管理する。

@mixin clearfix() {
  &:after {
    content: '';
    display: block;
    clear: both;
  }
}

mixinしたい要素はincludeを用いて記述する。

.menu {
  @include clearfix();
}

リセットCSS

ブラウザごとにCSSの初期値を持つため、ブラウザ間で差が生じる場合がある。
これを解消するために別の初期値を当てたCSSのこと。
以下のようなメジャーなものがある。

  • YUI 3
  • Eric Meyer’s
  • HTML5 Doctor
  • normalize.css

フォルダ管理

以下のようなサブフォルダで管理することが多い。

  • config
  • mixin
  • module
  • vendor ・・・　ライブラリを管理
  • oberride

BEM

Block、Element、Modifierの頭文字
CSSのクラスの命名規則を考える。

要素説明
Block大元となるブロック要素
ElementやModifierは、このBlockを起点に命名する。
ElementBlockに属する子要素。
1つ以上のElementにより、Blockは構成されています。
Modifier上記に特別な修飾をする要素です。
Modifierの命名には形容詞を用いる。
  • BlockとElementは、アンダースコア2つでつなぐ
  • Modifierは、ハイフン2つでつなぐ
  • 単語を繋ぐ場合はハイフン1つ。
<ul class='menu'>
    <li class='menu__list'>hogehoge</li>
    <li class='menu__list menu__list--black'>fugafuga</li>
</ul>

Haml

HTMLを簡単に記載する方法。
Railsではhaml-railsというGemがある。

%でタグ付け
インデントで子要素
変数が使えるので#{}で式展開
= でerbで使う式を記述

GEMの管理

＃いずれの環境でも必要
gem 'devise'

＃開発環境にのみ必要
group :development do 
     gem 'rspec'
end

＃テスト環境にのみ必要
group :test do 
     gem 'rspec'
end

＃本番環境にのみ必要
group :production do 
     gem 'unicorn'
end

新規プロジェクトの始め方haml/scss

rails new NewProject
rails db:create
gemファイルに
gem "haml-rails", "~> 2.0"
bundle install
rails haml:erb2haml
rails g controller hogehoges
hogehogez/index.html.hamlを作成
routes.rb
root 'hogehoges#index'
application.css削除
application.scss追加し@import "hogehoges";と記載
hogehoges.scssを_hogehoges.scssへリネーム
_reset.scssを作成し、リセットCSS内容をコピペ
application.scssに@import "reset";と記載

rake db:create　と　rails db:create

rails5からはrakeではなくrailsコマンドを使うように変更された。
rakeコマンドも使えるが、あえて使う意味はない。
rails4以前ではバージョン情報をgemファイル内に記載していたため、bundle exec rake db:**としていたが、rails5からはbundle execは不要となり、単にrails db:**でよくなった。

第2章 Toyアプリケーション - Railsチュートリアル
SNS開発やWebサイト制作が学べる大型チュートリアル。作りながら学ぶのが特徴で、電子書籍や解説動画、質問対応、社員研修、教材利用にも対応しています。
railstutorial.jp

コラム 2.1. Rakeについてを参照。

fontawesome

gemfile
gem font-awesome-rails

bundle install

application.scss
@import "font-awesome";

関連記事

コメント