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

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

反響について

私の想定を遥かに超える反響があり、戸惑いと共に、良い経験ができました。
5月5日に公開した本コンテンツのある記事が、1日で3万アクセスを超えています。
作業をしながら反応を見ていましたが、私が意図していない解釈で酷評が広がっていきました。

1. 勘違いされてしまう言葉の使い方。
2. マイノリティな主張を刺激的に使ってしまった。

この2つが今回のこの反響の原因だと思いました。
これは反省しなければならない。

勘違いされてしまう言葉の使い方

「ソースコード」「コーディング」という言葉をこのコンテンツでは頻繁に使用していますが、これは全てHTML言語のソースコード、コーディングを指していました。
本コンテンツの内容を読んでいただければ、理解できる内容だと思いますが、それでも勘違いされてしまったようです。
「私は、インデントを付けません」
と、記事で言っていますが、HTMLのソースコードに限定した話です。
しかし、酷評の中で最も多いと感じたコメントは

Pythonでも、インデント付けないのか・・・
JS,CSSにもインデント付けてなかったらやばい・・・

といったコメントです。
こういった内容のコメントのほとんどはプログラマーからでした。
プログラマーがこのコンテンツの記事をみて、すぐにHTML言語の話だとわからない記事だったようです。
ちゃんと読んでいただければわかる・・・というのは通用しないのだな、と。

もう1つは「美しい」という表現の言葉です。
美しいソースコードという言葉を今回問題になった記事で使っています。
この「美しいソースコード」について別の記事で説明していますが、それではダメでした。
今回問題になった記事だけを読めば、私が意図している「美しいソースコード」が伝わりません。
そのため、次のようなコメントが多かったです。

「美しさ」より「見やすさ」だろ・・・

私は「美しいソースコード」を、わかりやすさという意味も含めて使っていましたが、今回問題になった記事だけでは確かに伝わりません。
これは今回の反響で私が最も反省しなければいけない点だと思っています。

刺激的な言葉の使い方

あるアンケート調査で、インデントを付ける派と付けない派のアンケートをとっていただきました。
結果は、インデントを付ける派が9割以上。
この結果に関しては、私も想定していました。
その中で、「私は、インデントを付けません」と主張したコンテンツを展開したわけです。

インデント付けても見やすいだろ・・

というコメントは多くありました。
インデントを付ける派が9割ですから、想定できる反応です。

ただ、私が想定していなかった反応は、

インデント付けないとか、イかれてる・・
インデント付けないとか、正気じゃない・・
インデント付けないとか、こいつ大丈夫?・・

と言ったような反応です。
この反応は、おそらく、HTML言語に限った話として理解してもらえていなく、他の言語も含めた話だと認識したコメントだと思いますが、「インデント付けない」という言葉がコンテンツの内容に関係なく、刺激的な言葉として「正気じゃない」と反応してしまったんだろうな、と予想されます。

これは想定できなかった私の反省する部分です。
これを含め誤認識されないような内容の記事にすべきでした。

今回のこの反省を生かし、記事を更新できればと思っています。

その他、コメントにあった内容について

インデント付けないやつと一緒に仕事したくない・・・
クライアントのコーディングルールも無視ですか・・・

と言った内容のコメントもありました。
もちろん、柔軟に対応します。
当たり前ですが、コーディング業務に入る前に、クライアントのコーディングルールが定められているのであれば、守ります。
インデントも必要であれば、付けます。

案件の中には、サイト共通のヘッダー・フッターが既存であり、コンテンツ部分のみ構築するような案件もあり、ヘッダー・フッターの構築にインデントがついているのであれば、合わせます。
インデント無しで構築し、もし担当者から「インデント付けて」と言われれば、付けます。

私が担当するコーディングは、必ずインデントを付ける、というわけではありません。
プロジェクトのルールを無視し、迷惑をかけてまで私の推奨するコーディングルールで実装するわけではありません。

コメントにあった質問について

ある読者から次のような質問をいただきました。

もし普通のプログラミング言語ではブロックをインデントするなら、その差はどのような理由なのか興味があります。

私は普段、HTML言語のほか、TypeScript言語、SCSS言語を使用して実装をしています。
HTML言語には、インデントを付けません。
理由は、本コンテンツで解説中ですが、簡潔にいうとインデントを付けなくても見やすいソースコードを書くことができ、インデントを付けるより形状が美しいと考えるからです。
その他の言語、私であれば、TypeScript言語、SCSS言語になりますが、もちろんこれらの言語にはインデントを使用します。
理由は簡単です、インデントを付けなければ、見やすいコードにならないからです。

例えば、SCSS言語の場合、「要素を指定するコード」「プロパティを設定するコード」と、役割があります。
「要素を指定するコード」の中に、「プロパティを設定するコード」があるわけですが、やはり役割が分かれている以上、何かしらで見やすくしなければいけません。
さらに親要素・子要素の関係もある以上、インデントなしの改行だけで、これらを見やすくするのは限界があります。
TypeScript言語も同様です。
関数名を設定するコード、関数文を設定するコードなどなど、TypeScript言語のコードにも役割があります。
SCSS言語同様、インデントなしの改行だけで、これらを見やすくするのは限界があります。

また、補足として、解説すると、HTML言語に関しては、BEM設計で実装していますが、インデントを付けなくても見やすいソースコードにできるのは、このBEM設計で実装しているということが大きいです。
BEM設計のBlockの前後を改行し、1行の空きを作ることで、アウトライン構造が見やすくなります。
また、div要素の入れ子が多くならないようなマークアップのため、インデントを付けなくても複雑にはなりません。
以上の要因もあり、インデントを付けなくても、見やすい・美しいソースコードを作ることができます。

以上となりますが、今後はよりコンテンツの言葉の使い方に注意し、更新していければと思います。