BEMについて整理
フロントのclass設計の中で出てくる「BEM」という概念について、かなり時間を使って調べたので、自分なりにまとめたいと思います。
これを調べるに至った経緯は、TECH:EXPERTの教材でBEMを推奨してまして、最終課題を取り組んでいる中、フロントのclass名を考えるのに時間がかかり、時間が勿体無いっ！と強く思った為です。
BEMは、CSSと密接に関わっていますが、ここではあくまで「BEM」がどういうものなのか、について書いていきます。
<BEMについて>
BEMはBlock、Element、Modifierの略語 で、
class名、id名をつける際の命名ルールであり、BEMのルールに沿ったclass名をつけることによって、コードの再利用性、長期メンテナンスをしやすくすることを目的としています。またBEMはCSSが組み立てやすくなるという特徴があります。
下記公式ドキュメント
BEMは
- Block ⇒ 塊
- Element ⇒ 要素
- Modifier(keyとvalueで表す) ⇒ 状態（変化）
の頭文字をとってもので、命名ルールの考え方に利用していきます。
デザインを実装しようと考えた時、まずblock(まとまり)を考えます。
画像では全体をhead blockと定義し、そのhead blockの中には、4つのBlockが存在しています。
※ここでは、head blockの構成要素として「4つの要素」があるのではなく、あくまでhead blockの中に、「4つの大きなBlock」が存在すると理解してください。
▼head (一番大きいブロック)
・menu (タブ)
・logo (logo画像)
・sign in (ログインするための機能)
・search (検索するための機能)
それぞれのブロックの中には、
▼menu
・tab1
・tab2
・tab3
・tab4
▼logo (logo画像)
・画像
▼sign in (ログインするための機能)
・ID 入力窓
・password 入力窓
・sign inボタン
▼search (検索するための機能)
・検索窓
・searchボタン
上記のような関係が成り立ち、これらは各Blockに対してそれぞれ構成「要素」があると考えてください。
改めて同じ画像載せます。
作る手順として、大枠から作るのが基本なので
▼header (一番大きいブロック)
・menu (タブ)
・logo (logo画像)
・sign in (ログインするための機能)
・search (検索するための機能)
↓
※わかりやすくここでは全てdivを使います。
<div class ="head">
<div class = "menu"></div>
<div class = "logo"></div>
<div class = "sign-in"></div> (２つの単語からできているのでハイフンでつなぐ)
<div class = "search"></div>
</div>
のようになります。
次に各ブロックの中身のElementを記載します。
▼menu
・tab1
・tab2
・tab3
・tab4
↓
(※上記ではdivを使いましたが、上記の場合一般的にはulとliを使う為、ここからはul、liを使います。)
<ul menu>
<li class = "menu__tab></div>
<li class = "menu__tab></div>
<li class = "menu__tab></div>
<li class = "menu__tab></div>
</ul>
となります。
上記はBlockである「menu」にElement要素である「tab」を「__(アンダーバー2つ)」で組み合わせたclass名をつけています。
さらにここで、もし「tab1にだけ色をつけたい」など個別で状態を変化させたい場合。
「Modifier(keyとvalueで表す) ⇒ 状態（変化）」が登場します。
<ul class = "menu"
<li class = "menu__tab></div>
<li class = "menu__tab></div>
<li class = "menu__tab></div>
<li class = "menu__tab></div>
</ul>
↓
<ul class = "menu">
<li class = "menu__tab menu__tab__color-red"></div>
<li class = "menu__tab></div>
<li class = "menu__tab></div>
<li class = "menu__tab></div>
</ul>
上記の
<li class = "menu__tab menu__tab__color-red"></div>
のclass名はそれぞれ
・menu__tab (Block__Element)
・menu__tab__color-red (Block__Element__Modifer-key)
上記の命名ルールに従って記載しています。
ここまでをまとめますと、
<div class ="head">
<ul class = "menu">
<li class = "menu__tab menu__tab__color-red"></div>
<li class = "menu__tab></div>
<li class = "menu__tab></div>
<li class = "menu__tab></div>
</ul>
<div class = "logo"></div>
<div class = "sign-in"></div> (２つの単語からできているのでハイフンでつなぐ)
<div class = "search"></div>
</div>
となりました。
他同様の流れで作成していきます。
改めてですがBEMは「命名ルール」であり、その「ルールに沿って作成したclass名」を「構成しているタグのclass名」に設置する。
<設置方法>
・タグの親子関係の親(ブロック)にはBlock名
・子(要素には)でにはBlock__Element 、状況に応じてBlock__Element__Modifer
が一般的です。
※注意
BEMの話で出てくる「Block」という単語と
htmlの構造の「ブロック」の話とは切り分けて考えてください。
html構造の場合、divが1:多の関係で、入れ子になっている場合は、「ブロック、要素」のような単語で区別するのではなく、「親と子」という単語で区別されることが多く、BEMの命名ルールに従って決めたclass名を、CSSとの関係を見ながら、親と子のclassに設定していくようなイメージ。
<ポイント>
「menu」「tab」 のように単語を見た時に、直感的にどこの部分のことを指しているかわかることが重要です。直感的に誰もがイメージしやすいというところがミソです。自分だけわかれば良いってものでもないです。
(「menu」「tab」勝手に命名していたものであり、「navi」と「link」のような直感的に誰でもわかるような名前であれば何でもいいです。)
<まとめ>
命名ルールはBEMだけではなく、他にも多数あります。
もちろん自分のように１つどのルールを利用するのか決めて、進めていくことも大事ですが、プロが作成したサイトのソースコード見ながら、一般的にメニューやボタンなどはどういったclass名をつけられがちなのか具体例をいくつも見て置くことも大事です。
上記はあくまで自分なりに調べて、まとめた内容ですので内容に誤りがある可能性もありますので、正確に知りたい方は公式ページへ！
参考記事
オリジナルサービス作り方講座に参加
1ヶ月ぶりの更新。
inputばかり多く、outputが明らかに少ないと日々痛感しております。
でもこれではいけない！
ということで昨日参加したばかりの、TECH:CAMP主催「オリジナルサービス作り方講座」について簡単に話していきます！
<参加理由>
自分はTECH:CAMPではなくTECH:EXPERT入会しているのですが、理由として、「WEB周りの全体像知りたい」、「オリジナルサービス作りたい」という動機で入会しました。TECH:CAMPでもいいんじゃない？と思うかもしれませんが、エキスパートになりたかったんです！
TECH:EXPERT最終課題では自分の好きなサイトを模写するのですが(今はメルカリで固定)、模写ではなくオリジナルサービスの場合どういった設計を、どういった手順で行うのか具体的なイメージがつかめず、このセミナーが自分の知りたい箇所を知れる&実際に手を動かすワークショップ型であると知り参加を決めました。
<セミナー内容>
参加してみての感想としては、とても満足のいくセミナーでした！
ワークショップを大きくまとめると
１、自分のアイディアについて説明、意見交換。
２、ペーパープロトタイプの作成。
３、工数見積もり
の３つになります。(ブログ用にまとめると)
１、自分のアイディアについて説明、意見交換。
まず人に自分のアイディアを説明すること自体が初めてでかなり緊張しましたが、
人に伝えることを意識してから、急に考えの幅、深さが広がり、また１分で伝えるという時間制限があったので、ポイントをまとめる思考が働き、自分でも意識できていなかった重要な部分が急に明確になり始めました。
内容を相手にどう伝えるのか、相手がどう感じたのかを聞くという作業は、１人でアイディアを淡々と考えるだけの作業の何倍もの価値のある作業だと実感できます。
(もちろんアイディアを考えることは大事ですが、出来るだけ早い段階でフィードバックもらえる状況にする)
もし今１人でアイディアを考えている方がいたら、すぐにそのアイディアを人に伝える準備を！
あとは、セミナー参加する方は皆さんモチベーションが高く、人柄の良い人達ばかりですので安心です。
２、ペーパープロトタイプの作成。
ペーパープロトタイプとは、実際の紙にを落とし込んでいく作業です。
今回はiphone画面のデザインになった紙が配布され、シャーペンでデザインをガンガン書いていきました。
こんなイメージ。
必要な物は紙とペンだけ！ペーパープロトタイピングのススメ | Webクリエイターボックス
素人は独創せず、真似る！と教わり、自分が考えているサービスと近いサービスのアプリを参考にして、これもガンガン手を動かして進めて行きます。
シャーペンで記載したものを画面ごと撮影し、「POP」というアプリを利用することで、リンク先など設定することで画面遷移も表現することができ、サービスの完成状態を再現することができます。
設計の段階で完成イメージを持っておくことが大事だとわかってはいたのですが、実際にやってみると本当に便利。もし仕事を受注した際も、これでイメージを共有できるなーと思いテンション上がりながら作業を進めていました。
３、工数見積
これはもう全くの未知の世界で、こうやって計算するんだーと聞き入っていた。
2人日(読み方:ににんにち)、４人日、６人日、のような単語が出てくるのですが、これは機能やページごとに、「１人の人間が行うと何日かかるのか」を表した単語で、「２人日」であれば、1人の人間が実装するのに２日かかるというイメージ。
この作業はgoogleスプレッドシートで機能と画面を書き出し、経験のない自分は肌感で、自分なら何日でこの画面実装できる、と考えながら、機能、画面毎に「人日」記載。
配布されたスプレッドシートは人日を記載するだけで、自動的に金額が算出される関数が入っていたため、簡単に見積額(相場)がわかります。(便利！参加者特典)
経験がないので、感覚で人日と機能、画面を記載していったのですが、自分のサービスは300万円以上かかり、改めて人には依頼できないと実感しました。
(どこまで精度が高いかはわかりませんが)
またデザイナーと開発者での作業分担の考え方はWEBサービスとスマートフォンアプリとで異なっていて、
例えば、
WEBサービス：コーディング作業はデザイナーが行う
スマートフォアプリ：コーディングは開発者が行う
のような、慣習があるよう。
また機能の実装には、「設計」、「実装」、「テスト」作業があり、作業の時間配分として、設計は実装の20%、テストは実装の30%程度時間がかかる、という工程見積についての考え方について学んだ。
<まとめ>
セミナーの内容だけではなく、懇親会で講師の人や、参加者の方と話からの学びも多かった。皆さんオリジナルのサービス作成に興味があ流ので、自分の考えをしっかり持っている。
懇親会勝手に苦手なイメージあったんですが、今後参加できる懇親会は全て参加ぐらいの意識に変わった。
静岡からバスで片道3時間かけて参加したかいがあったなーと思うセミナーでした。
アプリケーションの開発を初めて１週間経過
tech:expertの最終課題に取り組み始めてから１週間たったので、１週間のまとめを書きたいと思います。
現在取り組んでいること
tech:expertでは自分で選んだサイトを１から制作することが最終課題となっていて、自分が選んだのが株式会社エニグモが運営するBUYMA。
理由は自分が買い手、売り手として利用したことがあり、どんな機能が実装されているのかが予めわかっていたことと、BUYMAサイトのデザインがとても好きだったから。
ただ、いくら4ヶ月近く学んでいたとは言え、１から取り組むのはかなり難易度が高め。。
結果として、コードを書き始める前までの段階で１週間経過してしまいました。
(予定では3日)
コードを書き始める前段階としては、
１、実装する機能の選定
２、選定した機能がどんな機能なのかを言語化
３、データベース設計(テーブル、カラム決め、ER図の作成や、readmeへの記載)
４、プロダクトバックログの記載
などなど、やることが盛り沢山。
twitterでも都度自分が疑問に思ったことをつぶやいていましたが、途中からtwitterに呟くことを忘れ、思ったこと感じたことをpagesにまとめるようになっていました。
(今週は忘れずにtwitterへつぶやくことが目標)
この１週間で特につまずいたのがデータベース設計。
具体的にデータベース設計をどういった手順で進めていったのかを、別記事に書いていきます。
ようやく本日からコードを書くフェーズに入りました。
今後の計画
明日BUYMAのトップページのフロント部分を完成。
会員機能の実装。
ブログの投稿に慣れていないので、ここまでかなり抽象的な内容になってしまいましたが、今後具体例挟みながら記事書いていく予定です。
twitterもぜひ見てください！
