学習[52]日目
本日の学習内容
BEMって何？
Hamlって何？
クラスとインスタンスの復習
BEMって何？
Block、Element、Modiferの3つの頭文字をとったものでBEMを使用して命名することで、クラス名だけでHTML要素の意味を伝えることができます。
Block ：ある要素の大元となるブロック要素で、命名には名詞を使用
1つ以上のElementによって、Blockが構成されている
Element：Blockに属する子要素で、命名には名詞を使用
Modifier：Blockまたは、Elementに特別な修飾をする要素で命名には形容詞を使用
また、BEMの命名規則は以下の2つになります。
- BlockとElementをつなぐ場合は、__(アンダースコア2つ)でつなぐ
- Modifierにつなぐ場合は、--(ハイフン2つ)でつなぐ
Hamlって何？
「HTML Abstraction Markup Language」の略称で、htmlよりもコードを早く、シンプルに作ることができます。
また、Rails使用しているerbと同じでrubyのコードを埋め込むことが出来るのですが、erbと比べて閉じタグやend不要であることやインデントで階層構造を表すことが特徴です。
実際に比較すると以下のような違いがあります。
#htmlによる記法
<!DOCTYPE html>
<html>
<body>
<div class='container'>
<header>
<h1>title</h1>
<h2>subtitle</h2>
</header>
<div class='contents'>
<div class='box'>
<h2 class='box-title'></h2>
<p class='box-discription'></p>
</div>
</div>
<footer>
</footer>
</div>
</body>
</html>
上記は見慣れたhtmlの形式です。
#hamlによる記法
!!! 5
%html
%body
%div.container
%header
%h1 title
%h2 subtitle
%div.contents
%div.box
%h2.box-title
%p.box-discription
%footer
一方、hamlでは非常に簡略化されていることがわかります。
しかし、注意しなければいけいない点もあります。
階層構造をインデントによって表しているため、htmlのように適当にインデントを入れてしまうとエラーが起きてしまうのでその点は気をつける必要があります。
クラスとインスタンスの復習
久しぶりに復習をしましたが、結構忘れてました。。
class Book
def initialize(author, title)
@author = author
@title = title
end
def author
@author
end
def title
@title
end
end
book = Book.new("本の作者", "本の名前")
puts "著者: #{book.author}"
puts "タイトル: #{book.title}"
上記のような感じで簡単なクラスとインスタンスを見てみた時にnewメソッドでインスタンスを生成した際にinitializeメソッドでインスタンス生成時に引数として定義した変数に任意の値を入力させることやインスタンスメソッドを定義してインスタンス変数を返り値とさせることなど単純ですが、忘れかけていたものを復習出来て良かったです。
以上で本日の学習内容は終わりになります。
最後までお読み頂きありがとうございます。
