はじめに

私は初心者であり独学です。自分なりの学習なので間違いなどありましたら、ご指南のほどお願いいたします。

BEMにたどり着いた経緯

WEBホームページの開発において、全ての要素を一から作成し公開する作業に取り組んでいました。
html/css/jsの記述を進める中で、idやclass属性の命名が複雑になり、自分でさえ追いかけるのが難しくなる状況に陥ってしまいまいた。

命名の混乱は単なる自分の問題だけではなく、将来他のエンジニアにコードを引き継ぐ際やクライアントがコードを理解する必要が生じた時に、大きな障壁になると気づきました。

そうした課題を解決するための手段として、BEM（Block Element Modifier）という命名規則に辿り着きました。この方法を用いることで、コードの構造を一貫して、かつ他者にも理解しやすい形で表現することが可能になるはずです。

このBEM記法への変遷は、単にコードを書くプロセスを改善するだけでなく、チーム内での共通理解を深め、クライアントとのコミュニケーションを円滑にできるかと思いました。

BEM（Block, Element, Modifier）命名規則とは

Block
意味: 機能的に独立しており、再利用可能な部品。WebページはBlockの集まりといえる。
単独の名前で表現されることが一般的。
例) header、footer
Element
意味: Blockに含まれる構成要素。inputやbuttonなどが該当。
表記: Block名に「__（二重アンダースコア）」で区切る。
例) header__logo、header__menu
Modifier
意味: BlockやElementの外観、状態、動作を変更する属性。
表記: BlockまたはElement名に「--（二つのハイフン）」で区切る。
例) button_large、button_red

上記のBEM記法を使ってローダーを作成

index.html

<body>
    <div id="loader" class="loader">
      <p class="loader__text">Loading...</p>
      <p class="loader__percentage">0%</p>
      <div class="loader__ring loader__ring--black"></div>
      <div class="loader__ring loader__ring--orange"></div>
      <div class="loader__ring loader__ring--green"></div>
      <div class="loader__progress-container">
        <div class="loader__progress-bar"></div>
      </div>
    </div>
    <script src="script.js"></script>
    </body>
  <script src="script.js"></script>
</body>

style.css

/* ベーススタイル */
body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #333;
  overflow: hidden;
  font-family: sans-serif;
}

/* ローダーのコンテナ */
.loader {
  position: relative;
  width: 200px;
  height: 200px;
  perspective: 1000px;
}

/* テキストとパーセンテージのスタイル */
.loader__text, .loader__percentage {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 20px;
  text-shadow: 0 0 10px #fff;
}
.loader__text { top: 45%; }
.loader__percentage { top: 55%; }

/* リングの共通スタイル */
.loader__ring {
  width: 200px;
  height: 200px;
  border: 0 solid transparent;
  border-radius: 50%;
  position: absolute;
  transform-style: preserve-3d;
}

/* 各リングの固有のスタイルとアニメーション */
.loader__ring--black { border-bottom: 8px solid #000; animation: rotate1 2s linear infinite; }
.loader__ring--orange { border-bottom: 8px solid #ff7300; animation: rotate2 3s linear infinite; }
.loader__ring--green { border-bottom: 8px solid #73ff00; animation: rotate3 4s linear infinite; }

/* プログレスバーのコンテナ */
.loader__progress-container {
  position: absolute;
  top: 230px;
  width: 100%;
  height: 20px;
  background-color: #ddd;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 10px #000;
}

/* プログレスバー */
.loader__progress-bar {
  height: 100%;
  width: 0;
  background: #ff7300;
  border-radius: 10px;
}

/* アニメーション */
@keyframes rotate1 { from { transform: rotateZ(0deg); } to { transform: rotateZ(360deg); } }
@keyframes rotate2 { from { transform: rotateZ(360deg); } to { transform: rotateZ(0deg); } }
@keyframes rotate3 { from { transform: rotateZ(0deg); } to { transform: rotateZ(-360deg); } }

script.js

document.addEventListener('DOMContentLoaded', function() {
  // プログレスバーとパーセンテージテキストの要素を取得
  var progressBar = document.querySelector('.loader__progress-bar');
  var progressPercentage = document.querySelector('.loader__percentage');

  // 進行状況の初期値を設定
  var progress = 0;

  // 進行状況を更新する関数
  function updateProgress() {
    // 進行状況を少し増やす (この値を調整して、進行の速度を制御)
    progress += 0.05; // ここで進捗の増加量を調整

    // 進行状況のバーとテキストを更新
    progressBar.style.width = progress + '%';
    progressPercentage.innerText = Math.floor(progress) + '%';

    // 進行状況が100%に達したらインターバルをクリア
    if (progress >= 100) {
      clearInterval(interval);
    }
  }

  // 一定間隔で進行状況を更新 (この値を調整して、更新の頻度を制御)
  var interval = setInterval(updateProgress, 5); // ここで更新の間隔を調整
});

[Loading...]の周りを回転する、進歩バーと数字付きのローダーが完成

※自分のこれまでの学習の知識をフル活用し、より実践に近づけるようにしました。

最後に

BEM（Block, Element, Modifier）命名規則は、一貫性と可読性を高め、将来の保守を容易にします。
コードの構造と意図を明確に表現するための有用なツールであり、開発者間のコミュニケーションを促進するかもしれません。

最後までお読みいただき、ありがとうございました。

参考