haml(25日目)

どうもこんにちは24ブロです。

今日はとにかく、BEMと戦いました。

画面実装は基本的になんでも好きなのですが、完全にBEMの繊細さにやられました。

BEMとは
・Block ⇒ 塊
・Element ⇒ 要素
・Modifier(keyとvalueで表す) ⇒ 状態（変化）

という概念のもと、記述されるフロントエンドの命名方法です。

BEMのルールとしては

・BlockとElementの区切りはアンダーバー×２（__）

・BlockまたはElementとModifierの区切りはハイフン×２（--）

・ModifierのKeyとValueの区切りはアンダーバー×１(_)

・BlockやElementを2つ以上の単語で表す時はハイフン×１(-)

そしてこれは私が、本格派チャットアプリで画面実装の時BEMを取り入れた一部

こんな感じで書きます↓ こっちは html.haml

こっちは scss

BEMは、どこの要素に所属するブロックなのか、どの階層にいるのかなどははっきり分かるのですが、インデント一個でもエラーがでる繊細さ。

でも、完成するととても整理されたコードになりますよ（≧∇≦）

そして、フロント実装が終わったと同時に、

改めて今日の学び

①「n+1」問題と

②renderでのインスタンス変数の取得

これの理解が大きな収穫でした。

①は今更ですがrenderなどで取得するレコード数分だけSQLを発行するので、includeなどを用いて重くならないようにしてあげる対策が必要だということ

②は複数形のインスタンス変数を部分テンプレートに渡したい場合

・インスタンス変数の名前を単数形

・部分テンプレートの名前が同じ

この条件が整えば「render インスタンス変数」と記述するだけで部分テンプレートを読み込むことができること。

Railsのこの概念が復習できたのはいい機会でした。

まだまだ知らないことばかり

勉強あるのみ

おしまい