TECH CAMP体験記⑪ 19日目 BEMとHamlとSass

TECH CAMP大阪の80期（2020年６月22日〜）としてプログラミングを学ぶ体験記です。これから受講する方や考えている方の参考になれば幸いです。
19日目、BEMとHamlとSass経ったので、その経過報告です。
前：TECH CAMP体験記⑩ 18日目 Rails勉強会と２次面談　
次：TECH CAMP体験記⑫ 22日目 Rubyドリル始まる

勉強内容

カリキュラムに沿って勉強を進めています。
今日は
・BEM
・Haml
・Sass
について勉強しました。

BEM

ベム

、、、、、、ってオイ😑

というのはさて置き、
BEMとはCSSの命名規則のことです。
書くときのルールを決めることによって、誰にでもわかりやすくするというものです。

ラーメン屋とかで伝票の書き方が決められてるようなモンでしょうか。

チャー定（チャーハン定食）
からS（から揚げセット）
OJ（オレンジジュース）

みたいな。

新人にも書き方が明確に伝わり、
お客さんも判別がつくような書き方。

B：ブロック
E：エレメント
M：モディファイヤ（修飾）

ブロック名__エレメント名--モディファイヤ名

わからなくなったらカリキュラムを見直すかググります😤

Haml（ハムル）

HTMLの記述の手間を減らしたものです。

例を挙げると

HTML記述
<html>
　<body>
　　<div>
　　　Hello World!
　　</div>
　</body>
</html>

に対し

Haml記述
%html
　%body
　　%div
　　　Hello World!

これだけでよくなるのがHamlを使うメリットです。
・＜　＞を使わない
・閉じタグもいらない
と、記述がかなり楽になりそうです😃

って、テキストエディタ使ってたらそういう面倒なことは勝手に処理されるじゃん😑

と思いそうですが、コードを読む人の目線でもかなり楽になりそうですよね。
コレ。

今までHTMLに慣れてきた分、違いを覚えるのは負担です。
ですが、それを補って余りあるメリットがありそうです。

Sass（サス）

HamlのCSS版です。
記述量を減らし、作業効率を高めます。

コードの使い回しもできます。
例えばハンバーガー屋で

・紙袋を用意して！
・転倒防止の紙トレイに商品をセットして！
・ナプキンを２枚いれて！
・ストローもいれて！
・紙袋の口を閉じて！
・お客さんに渡して！

と６回の指示を新人に出すのは面倒ですよね。
言われる方も面倒です。

ですので、一連の動作を「お持ち帰り」と名付けます。
すると

１番のお客様「お持ち帰り」
３番のお客様も「お持ち帰り」
みたいに指示を減らすことができます。