フロントエンドエンジニアとして6ヶ月働いてコードレビューで指摘されたこと3つ

1. クラス名を統一する

どういうコードを書いたか...

同じ意味を持つクラス名が、コンポーネント¹ごとに異なる名称になっていた。
「小さい」バリエーションクラス：is-small, is-minimum
「強調する」バリエーションクラス：is-active, is-on
など...

どういう指摘をされたか

クラス名がバラバラでわかりにくいので統一したほうが良い。名称の違いに意味はあるのか？

それはなぜか

単純に英語翻訳で調べたそれっぽい名前や他のサイトで使われていた名前などをつぎはぎして使ってしまい、自分の作っているWEBサイト内でのルールの統一を意識できていなかったため。
意味のない名称のばらつきがあると、保守の際にコードを見る相手への負担を増やしてしまう可能性がある。

どのように直したか

どの名称がより適切・わかりやすいかを再度考え、同じ意味を持つクラス名は統一するようにした。
また、似たようなバリエーションはコンポーネントごとにバラバラに考えるのではなく、共通した名称を使えないか検討するようにした。

2. コンポーネント単位を意識する。

どういうコードを書いたか...

以下の図のような構成を持つデザインに対し、

このようなコードを書きました。

<ulclass="service-list"><liclass="service-list-item"><divclass="service-heading-bg"><h3class="service-heading"></h3></div><imgclass="icon"/><divclass="service-textbox"><pclass="service-title"></p><p></p></div></li><!-- <li></li>が複数続く --></ul>

どういう指摘をされたか

どこまでが1つのコンポーネントなのか分からない。

それはなぜか

見た目的なHTML構造の切り分けばかりを考え、コンポーネント単位での切り分けを意識できていなかったため。
コンポーネントを「見た目的に近い塊」くらいのふんわりしたものとして捉えていた。
特にこのコードではservice-で続くクラス名が多々あるにも関わらず、そのコンポーネントの基準となるserviceというクラス名がなかったため、より一層「どこまでが１つの...」と思わせてしまった。

どのように直したか

コンポーネントの意味を考え直し、クラス名の命名や構造の切り分けを行った。（実際は例を出してもらったのだが...。）特に今回の場合、以下のような意味付けを再認識しクラスの切り分けを改めて行った。

service-list：serviceが複数ある場合のリスト全体
service-list-item：serviceのリストの中の1つの要素(リストとして並ぶ際の余白などを決める)
service：serviceというコンポーネント本体。serviceで囲まれたHTML構造があればこのコンポーネントが成り立つ。

修正結果

<ulclass="service-list"><liclass="service-list-item"><divclass="service"><divclass="service-heading-bg"><h3class="service-heading"></h3></div><imgclass="service-image"/><divclass="service-textbox"><pclass="service-title"></p><p></p></div></div></li><!-- <li></li>が複数続く --></ul>

今だったらこう直すかな...。

<ulclass="service-list"><liclass="service-list-item"><divclass="service"><divclass="service-heading"></div><divclass="service-body"><imgclass="service-image"/><divclass="service-textbox"><pclass="service-title"></p><p></p></div></div></div></li><!-- <li></li>が複数続く --></ul>

3. コンポーネント間に依存関係を持たせない

これはscssについてのレビューです。

どういうコードを書いたか...

aというコンポーネントの中にbというコンポーネントが入る際に、bに余白を持たせたい。
という状況で、以下のような記述を行っていました。

.a{// aのスタイルを指定する記述.b{margin-left:8px;}}

どういう指摘をされたか

コンポーネントに関するスタイルの指定が分散してしまっており、保守性が下がる。
別のコンポーネントクラスで指定を重ねるのではなく、aのクラス内にバリエーションを持たせる方が良い。

それはなぜか

今のコーディングにしか目が行っていなかったため。
bのスタイルの指定は基本的には近しい場所に書いてあるはずなのに、aというコンポーネント内にbの記述を混ぜることで、bに関わるスタイルの記述をまとめて把握しづらくなる。また、指定を重ねることで、スタイルがどんどん複雑化してしまう。

どのように直したか

複数のコンポーネントを組み合わせてスタイルを指定しない、ことを念頭に置くようにした。
改めて、コンポーネントの間の切り分けを意識するようになった。

修正結果

.a{// aのスタイルを指定する記述.a-item{margin-left:8px;}}

まとめ

今回「指摘されたこと」を振り返っていて思ったのは「正解」の書き方をしようとして
逆に表面的な部分に捉われていることが多いかな、ということでした。
そういうときほど、レビューできれいにメスが入ります。

しっかり考えつつも、考え込まない！が大事ですね。