新卒が教えるコンポーネント指向CSSと実感した3つのメリット

はじめに

はじめまして。EMCカンパニー所属の宮崎元希（みやざきもとき）です。
突然ですが皆さんは『コンポーネント』という概念を耳にしたことはお有りでしょうか？
私の業務はWebページの制作で、皆さんご存知の通りHTMLやCSSを用いてコーディングしていくわけですが、私の担当している案件では、コンポーネントという概念に基づきCSSを書いています。研修の時のような一般的なCSSの書き方とはやや異なり、自分自身戸惑いましたが、いざ書いてみると一般的な記述と比べ、たくさんのメリットがあるのだなと実感しました！

そこで本記事ではコンポーネント指向CSSとそのメリットを皆さんにお伝えしたいと思います！

コンポーネントとは？

詳しい説明に入る前にまずはコンポーネントという概念をしっかりと抑えておきましょう。

まずはコンポーネントという単語の意味を簡単にさらっておきましょう。
コンポーネントとは英語のcomponentに由来し、『部品』という意味になります。Webページを制作するにあたって再利用できそうなものを『コンポーネント（部品）』と見立て、そのコンポーネントをもとにページを構成していくことを『コンポーネント指向設計』と言います。

正直、上記の説明だけではイメージが湧かないと思いますので、早速具体例を用いながら更にコンポーネント指向CSSについて解説していきたいと思います！

具体例から理解するコンポーネント指向CSS

さてここではWebページを制作するにあたって欠かせない要素である『ボタン』を具体例に挙げて解説していきます！

例えばページ内に図のような2種類の『ログインボタン』『もっと見るボタン』があると想定しましょう。

やや極端な例にはなりますが、それらをHTMLとCSSで書くとこのようになったとします。

      <div class="login_btn">
       <span class="btnText_1">ログイン</span>
      </div>

      <div class="more_btn">
       <span class="btnText_2">もっと見る</span>
      </div>
    

      .login_btn {
       width: 250px;
       padding: 20px 0px;
       margin: 300px auto 0;
       text-align: center;
       border: 1px solid #333333;
       border-radius: 20px;
       background-color: #337aed; /* 背景色を青 */
      }

      .btnText_1 {
       color: #ffffff; /* 文字色を白 */
       font-weight: bold;
      }

      .more_btn {
       width: 250px;
       padding: 20px 0px;
       margin: 50px auto 0;
       color: #000000; /* 文字色を黒 */
       text-align: center;
       font-weight: bold;
       border: 1px solid #333333;
       border-radius: 20px;
       background-color: #ffffff; /* 背景色を白 */
      }

      .btnText_2 {
       color: #000000; /* 文字色を黒 */
       font-weight: bold;
      }
    

どうでしょうか？皆さんはこんな記述に心当たりがあるでしょうか？
私は入社してすぐの研修では、ページの上から順にコードを記述していたため、このようになっていました。

二つのボタンの違いは文字色と背景色のみであるのに、それらを書き分けるためにwidthやpaddingなど同じ記述を何回もしないといけないのです。またクラス名も重複しないように気を遣ったがために、イマイチな命名になっているのがお分かりかと思います。

それらを解決してくれるのがコンポーネントです。
では先程説明した通り、ボタンを一つのコンポーネントと捉えてみましょう。

分かりやすくするためにHTML・CSSを以下のように書き換えてみます。

      <div class="btn">
       <span class="btn_text">ログイン</span>
      </div>

      <div class="btn">
       <span class="btn_text">もっと見る</span>
      </div>
    

      .btn {
       width: 250px;
       padding: 20px 0px;
       margin: 50px auto 0;
       text-align: center;
       border: 1px solid #333333;
       border-radius: 20px;
      }

      .btn_text {
       font-weight: bold;
      }
    

HTMLについてはクラス名を分かりやすく統一し、CSSでは両者に共通するスタイルのみを記述しました。

これをブラウザで表示したものがこちらです。

どうでしょう？随分シンプルな見た目になりましたよね。これがコンポーネント化したボタンです。

今回であればボタンのように、ページ内で同じ働きをするものを分類し、それらの共通項をまとめて記述することでコンポーネントとし、ページ内の各所でデザインを派生させて再利用します。

では実際にこのコンポーネントから派生させていきましょう。
まずはコンポーネントのベースのスタイルから、独自のスタイルに派生させるために『login』『more』という新たなクラス名をそれぞれに付与します。

      <div class="btn login">
       <span class="btn_text login">ログイン</span>
      </div>

      <div class="btn more">
       <span class="btn_text more">もっと見る</span>
      </div>
    

そしてCSSではそれぞれのクラスに派生のスタイル、今回では文字色・背景色を記述していきます。

      .btn {
       width: 250px;
       padding: 20px 0px;
       margin: 50px auto 0;
       text-align: center;
       border: 1px solid #333333;
       border-radius: 20px;
      }

      .btn.login {
       background-color: #337aed;
      }

      .btn.more {
       background-color: #ffffff;
      }

      .btn_text {
       font-weight: bold;
      }

      .btn_text.login {
       color: #ffffff;
      }

      .btn_text.more {
       color: #000000;
      }
    

これで最初にお見せした通りの2種類のボタンをコンポーネントを用いて実装することができました。

コンポーネント指向CSSのメリット

さてここで改めて、私が実際に案件で制作してみて実感したコンポーネント指向でCSSを設計する三つのメリットをまとめたいと思います。

① 無駄なCSSの記述を減らすことができる

まず一つ目の大きなメリットです。先程上で実践した中でも感じていただけていると幸いですが、同じページ内で何度も出てくるスタイルをその度に記述していては、コードが冗長になり作業時間が延びてしまいます。

どこの部署でも同じかとは思いますが、繁忙期は特に作業効率も重視しないと案件を遂行できないと思います。共通する記述はコンポーネントとしてまとめてしまうことで、無駄な時間は削減してしまいましょう。

私自身コンポーネントという概念に慣れない内はやや作業に時間を要してしまいましたが、一度理解すれば作業効率が上がるのを体感しました。

② コードのメンテナンス性が上がる

これが二つ目のメリットです。例えば先程のボタンを例に挙げますが、デザインの修正の依頼が来て、border-radiusをかけていた部分をなくして四角いボタンにデザインを変更したいという状況になったとしましょう。そのような際にボタンのスタイルをそれぞれで記述していては、一つ一つ該当箇所を探し当て、修正をかけなければいけません。

しかし上の例のようにスタイルをコンポーネントとして管理しておけば、コンポーネント内のスタイルを一箇所だけ変更すれば、ページ内のボタン全てに修正を反映することが可能です。このように修正が容易になるという面でメンテナンス性が上がるわけです。

また単純に同じ記述を一まとめにすることでコード全体がスッキリし、可読性が上がり目的のコードを探しやすいという点でも効果があります。

③クラス名の衝突が起きにくい

三つ目のメリットはクラス名に関してです。コンポーネントのスタイルを付与した同じクラスをコード内で使い回すことで、新たなクラスを命名することが減ります。それにより新たにクラスを命名する時に、うっかり同じクラス名をどこかで既に命名してしまっているなんてことが起こりにくいです。

私自身、研修の時はとにかく上から順にコードを記述していたので後半になるとクラスの命名に頭を悩ませていました。ですがコンポーネントを用いるようになってから、クラスの命名に時間を割くことが格段に減ったと感じています。

最後に

コンポーネントの良さは文字で読むよりも、とにかく自分で書いてみる方が実感できると思います。コンポーネントは学習コストもそこまで高くないので、私のようにこれからフロントエンドを学ぶ方は一度勉強してみることをお勧めします！
近年人気が高まっているReactなどのフレームワークでもコンポーネントという概念が重要になっていることもあり、一度学べば今後のキャリアで役立つこと間違いなしです。
最後まで読んでいただきありがとうございました。