吉本式BEM設計(BEM設計ベース)

美しいコーディングをするためのガイドラインコンテンツです。

吉本式BEM設計(BEM設計ベース)とは

私はフロントエンドエンジニアとして活動し、10年以上の実務経験を積んできています。
現在も、JavaScript(TypeScript)+HTML+CSS(SCSS)での構築をメインに受託制作をしています。

Web業界では、コーダー、マークアップエンジニア、フロントエンドエンジニアなどの職種に携わっている人を総称して実装者と呼びますが、これらの職種で共通することは、なんらかの言語を使って実装し、ソースコードを納品することです。

実装者の皆さん、ソースコードにどの程度の拘りがあるでしょうか。

このコンテンツでは、HTML+CSS(SCSS)を使用した実装の解説をしていきますので、主にコーダー、マークアップエンジニア向けになります。
HTML+CSS(SCSS)を使用して実装する、いわゆるコーディング作業において、大事なこと(求められること)は次の4つです。

1. デザインを忠実に再現する
2. 作業スピード
3. 柔軟な修正対応
4. 正しいマークアップ

これらのスキルがあれば、実務レベルで通用すると思いますが、まだまだ十分ではありません。
マークアップエンジニアとして、よりレベルを上げたいのであれば、前の4つに加え、次の2つのスキルが必要です。

5. 美しいソースコード
6. わかりやすいファイル設計

この2つのスキルを持っているマークアップエンジニアはなかなかいません。
厳しい見解かもしれませんが、これができていてようやくマークアップエンジニアと言えるのではないでしょうか。
現実的には、ソースコードやファイル設計をあまり意識しないマークアップエンジニアがほとんどです。
マークアップエンジニアを含めた実装者の仕事は、自身が書いたソースコードを納品することです。

ソースコードに拘りを持ってください。

また、ファイル設計もどんなファイル設計がよいか、常に意識してください。
それが僕ら実装者にとって大事な仕事です。

私は、常に「美しいソースコード」「わかりやすいファイル設計」を追求してきました。
そして、ある程度カタチになり、それを実装のルールとして決め、忠実に従い実装することで、クライアントからも評価を受けています。
まだ向上できる部分はあると思っていますが、自信を持って公開できる内容ですので、「吉本式BEM設計(BEM設計ベース)」と称し、このコンテンツで解説できればと思っております。

美しいソースコードとは

美しいソースコードとは、実装者が個人的に美しいと思うソースコードではなく、クライアントが満足するソースコードです。
ここで使っているクライアントとは、技術的な知識を持っていないお客様は含めていません。
例えば、受託先のWeb制作会社のディレクターや、システム担当者などのソースコードを理解できる人間を指します。
最もわかりやすい評価の例として、コーディング作業後にそのデータをシステムに引き継ぐ案件で、納品したデータを見たシステム担当者が「とてもわかりやすいコードで助かりました。」と評価してくれる場合があります。
これはソースコードを意識して書かなければここまで評価してくれません。
では、評価してくれるソースコードとは、具体的にどんなソースコードでしょうか。
細かいところまで言い始めるとたくさん出てきます。これらを全て独自でルール化し、そのルールに従って実装すると、ソースコードに無駄がなくなり、統一された美しいソースコードになります。設けるルールの大きな項目として、次の4つが挙げられます。

1. ソースコードの形状ルール(インデント・改行・コメント)
2. マークアップルール
3. クラス名(クラス設計)ルール
4. ファイル名(ファイル設計)ルール

これらについて、このコンテンツでは細かく解説していきます。