HTML Web Components のレシピ - イメージスライダー編

先日公開した記事「HTML Web Components とは何か」では、HTML Web Components の概略について説明しました。

今回は、HTML Web Components のテクニックを使用してイメージスライダーを作成します。完成形は以下で、水平方向に画像が並び、スクロールバーとボタンでスクロール移動します。

前のスライド 次のスライド

HTML Web Components について簡単におさらいすると、Shadow DOM を使用しない Light DOM のカスタム要素で、HTML をベースに機能を積み増していく Progressive Enhancement の考え方に基づいたテクニックです。

今回作成するイメージスライダーは、この HTML Web Components の手法に基づき、以下の内容で実装していきます。

• 水平方向のスクロールは CSS で実装
• ボタンの機能は JavaScript で実装
  • 選択した方向にスクロール
  • 両端のいずれかに到達したら、対象となるボタンを非活性化
• JavaScript がオフでも最低限の機能を提供
• CSS 変数（カスタムプロパティ）で設定を変更できるようにする

それでは、HTML、CSS、JavaScript の順番で、具体的な実装内容を見ていきます。

まずは、基本となる HTML を以下に抜粋します。

<image-slider>
  <div class="c-inner">
    <!-- スライダー -->
    <div class="c-slider" data-slider>
      <div class="c-item">
        <img src="img-01.webp" alt="画像 1" width="400" height="400" loading="lazy">
      </div>
      <div class="c-item">
        <img src="img-02.webp" alt="画像 2" width="400" height="400" loading="lazy">
      </div>
      <div class="c-item">
        <img src="img-03.webp" alt="画像 3" width="400" height="400" loading="lazy">
      </div>
      <!-- ... -->
    </div>

    <!-- ナビゲーション -->
    <div class="c-nav">
      <button type="button" data-nav-btn="prev" class="c-nav-btn" aria-disabled="true">
        <svg viewBox="0 0 8 10" class="c-nav-svg" aria-hidden="true">
          <path d="M5.5,2 L1.5,5 L5.5,8" />
        </svg>
        <span class="sr-only">前のスライド</span>
      </button>
      <button type="button" data-nav-btn="next" class="c-nav-btn" aria-disabled="true">
        <svg viewBox="0 0 8 10" class="c-nav-svg" aria-hidden="true">
          <path d="M2.5,2 L6.5,5 L2.5,8" />
        </svg>
        <span class="sr-only">次のスライド</span>
      </button>
    </div>
  </div>
</image-slider>

カスタム要素 <image-slider> に、スライダーとナビゲーションの要素を含んでいます。

もし、このカスタム要素を複数箇所で使用する場合には、コードの一貫性やメンテナンス性の観点から、ナビの HTML は JS で動的に生成したほうがよいかもしれません。今回はレイアウトシフトが発生することを考慮し、HTML に直接記述する方法を選択しました。

<button> 要素には aria-disabled="true" を指定して、初期状態は無効であることを表しています。この状態は、後ほど JS で有効・無効を切り替えます。

続いて、少し長いですが CSS のコードを抜粋します。

image-slider {
  /* CSS 変数の定義とカスタム要素のスタイル */
  --slider-padding: 40px;     /* スライダーの外側の余白 */
  --show-items: 2;            /* 一度に表示するスライダーの数 */
  --glance: 0.5;              /* 次の要素が見切れるサイズ */
  --move: 1;                  /* ナビのボタンで移動する距離 */
  --gap: 20px;                /* 要素間の余白 */
  --item-min-size: 150px;     /* 要素の最小サイズ */
  --item-max-size: 300px;     /* 要素の最大サイズ */
  --scroll-snap-align: start; /* スナップする位置 */
  --scrollbar-margin: 20px;   /* スクロールバーとの余白 */
  --scrollbar-width: 12px;    /* スクロールバーのサイズ */

  display: block;
  padding: var(--slider-padding);
  background-color: #9296ab;
}
image-slider .c-inner {
  --item-size: calc((100% - var(--show-items) * var(--gap)) / (var(--show-items) + var( --glance)));

  display: grid;
  row-gap: 20px;
}

/* スライダー */
image-slider .c-slider {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  padding-block-end: var(--scrollbar-margin);
  scroll-snap-type: inline mandatory;
  scroll-behavior: smooth;
}
image-slider .c-item {
  flex: 0 0 clamp(var(--item-min-size), var(--item-size), var(--item-max-size));
  scroll-snap-align: var(--scroll-snap-align);
}
image-slider .c-item img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

/* ナビゲーション */
image-slider .c-nav {
  display: grid;
  grid-template-columns: repeat(2, auto);
  column-gap: 16px;
  justify-content: end;
  transition: opacity 0.2s ease;
}
image-slider .c-nav-btn {
  --btn-size: 50px;
  --btn-color: #004d4d;
  --btn-color-hover: color-mix(in srgb, var(--btn-color) 80%, white);

  display: grid;
  gap: 4px;
  align-content: center;
  place-items: center;
  inline-size: var(--btn-size);
  block-size: var(--btn-size);
  padding: 4px;
  border: 2px solid var(--btn-color);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
image-slider .c-nav-btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: default;
}
image-slider .c-nav-svg {
  inline-size: 18px;
  margin-inline: auto;
}
image-slider .c-nav-svg path {
  fill: none;
  stroke: var(--btn-color);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1px;
  transition: stroke 0.2s ease;
}
@media (hover) {
  image-slider .c-nav-btn:not([aria-disabled="true"]):hover {
    background-color: var(--btn-color-hover);
  }
  image-slider .c-nav-btn:not([aria-disabled="true"]):hover path {
    stroke: #fff;
  }
}

@layer utilities {
  .sr-only {
    position: absolute;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    border-width: 0;
    white-space: nowrap;
  }
}

カスタム要素に CSS 変数を指定しており、子孫要素のスタイル指定で使用しています。

image-slider {
  --slider-padding: 40px;     /* スライダーの外側の余白 */
  --show-items: 2;            /* 一度に表示するスライダーの数 */
  --glance: 0.5;              /* 次の要素が見切れるサイズ */
  --move: 1;                  /* ナビのボタンで移動する距離 */
  --gap: 20px;                /* 要素間の余白 */
  --item-min-size: 150px;     /* 要素の最小サイズ */
  --item-max-size: 300px;     /* 要素の最大サイズ */
  --scroll-snap-align: start; /* スナップする位置 */
  --scrollbar-margin: 20px;   /* スクロールバーとの余白 */
  --scrollbar-width: 12px;    /* スクロールバーのサイズ */
}

この CSS 変数は、後述する JS での処理やスライダーの設定を変更するためにも使用します。

スライダーのスクロール機能を実装するために、まずは .c-slider に display: flex で子要素を横並びにし、overflow-x: auto で要素が収まらないときにスクロールバーが表示されるようにしています。

さらに、スクロールした後にスナップするように scroll-snap-type: inline mandatory を指定し、スムーススクロールを有効にする scroll-behavior: smooth を指定しています。

子要素の .c-item には flex のショートハンドプロパティでサイズを指定し、scroll-snap-align でスナップする起点を指定しています。

image-slider .c-slider {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  padding-block-end: var(--scrollbar-margin);
  scroll-snap-type: inline mandatory;
  scroll-behavior: smooth;
}
image-slider .c-item {
  flex: 0 0 clamp(var(--item-min-size), var(--item-size), var(--item-max-size));
  scroll-snap-align: var(--scroll-snap-align);
}

ナビのボタンは、aria-disabled="true" が指定されている場合には、非活性を表すスタイルを指定しています。

image-slider .c-nav-btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: default;
}

ここまでの HTML と CSS の実装で、以下のようなスライダーの UI が実現できます。

前のスライド 次のスライド

ナビのボタンは機能しませんが、スクロールバーを操作したり、タッチデバイスであればスワイプで水平方向にスクロールできるので、最低限の機能を有しているといえます。

@media not (forced-colors: active) {
  image-slider .c-slider {
    --color-track: #bde1e1;
    --color-thumb: #007373;
    --color-thumb-hover: color-mix(in srgb, var(--color-thumb) 80%, white);
  }
  @supports not selector(::-webkit-scrollbar) {
    image-slider .c-slider {
      scrollbar-color: var(--color-thumb) var(--color-track);
      scrollbar-width: var(--scrollbar-width);
    }
  }
  @supports selector(::-webkit-scrollbar) {
    image-slider .c-slider::-webkit-scrollbar {
      block-size: var(--scrollbar-width);
    }
    image-slider .c-slider::-webkit-scrollbar-track {
      border-radius: var(--scrollbar-width);
      background: var(--color-track);
    }
    image-slider .c-slider::-webkit-scrollbar-thumb {
      border-radius: var(--scrollbar-width);
      background: var(--color-thumb);
    }
    image-slider .c-slider::-webkit-scrollbar-thumb:hover {
      background: var(--color-thumb-hover);
    }
  }
  image-slider[style*="--scrollbar-width: 0"] .c-slider {
    --scrollbar-margin: 0;
    scrollbar-width: none;
  }
}

@media not (forced-colors: active) {
  /* スクロールバーの CSS */
}

それでは仕上げに、JS でカスタム要素を定義します。

class ImageSlider extends HTMLElement {
  // クラスフィールド
  edge       = 'start';
  styles     = getComputedStyle(this);
  move       = parseInt(this.styles?.getPropertyValue('--move'), 10) || 1;
  gap        = parseInt(this.styles?.getPropertyValue('--gap'), 10) || 0;
  slider     = this.querySelector('[data-slider]');
  navBtns    = this.querySelectorAll('[data-nav-btn]');
  image      = this.slider?.querySelector('img');
  controller = new AbortController();
  timer;

  // 初期化
  constructor() {
    super();
  }

  // カスタム要素が追加されたときに実行
  connectedCallback() {
    if (this.slider) {
      this.detectScrollEdge();

      const { signal } = this.controller;

      this.slider.addEventListener('scroll', () => { this.debounce(this.detectScrollEdge, 50) }, { signal });
      window.addEventListener('resize', () => { this.debounce(this.detectScrollEdge, 50) }, { signal });

      this.navBtns.forEach((btn) => btn.addEventListener('click', () => {
        this.slider.scrollLeft = this.calcScrollLeft(btn);
      }, { signal }));
    }
  }

  // カスタム要素が削除されたときに実行
  disconnectedCallback() {
    this.controller.abort();
  }

  // `attributeChangedCallback` で監視する属性
  static get observedAttributes() { return ['edge']; }

  // カスタム要素の属性が変更されたときに実行
  attributeChangedCallback(name, oldValue, newValue) {
    if (this.navBtns && name === 'edge') {
      this.navBtns.forEach((btn) => btn.removeAttribute('aria-disabled'));

      if (this.navBtns[0] && newValue === 'start') {
        this.navBtns[0].setAttribute('aria-disabled', 'true');
      } else if (this.navBtns[1] && newValue === 'end') {
        this.navBtns[1].setAttribute('aria-disabled', 'true');
      }
    }
  }

  // スクロールの両端に到達したかを判定し、`edge` 属性を指定
  detectScrollEdge = () => {
    const scrollLeft  = this.slider.scrollLeft;
    const scrollRight = this.slider.scrollWidth - (scrollLeft + this.slider.clientWidth);

    if (scrollLeft <= 0) {
      this.edge = 'start';
    } else if (scrollRight <= 1) {
      this.edge = 'end';
    } else {
      this.edge = 'false';
    }

    if (this.getAttribute('edge') !== this.edge) {
      this.setAttribute('edge', this.edge);
    }
  }

  // スクロール量を計算
  calcScrollLeft = (btn) => {
    const dir = (btn.getAttribute('data-nav-btn') === 'prev') ? -1 : 1;
    const imageSize = this.image?.clientWidth ?? 300;
    const totalItemsSize = imageSize * this.move;
    const totalGap = this.gap * this.move;

    return this.slider.scrollLeft + dir * (totalItemsSize + totalGap);
  }

  // debounce で処理を間引く
  debounce = (fn, interval = 50) => {
    clearTimeout(this.timer)
    this.timer = setTimeout (() => fn(), interval);
  }
}
customElements.define('image-slider', ImageSlider);

こちらも CSS 同様に少し長いですが、順番に説明していきます。

まず、先頭でクラスフィールドを定義しています。ここで指定した値や取得した DOM 要素は、各メソッドで使用します。

class ImageSlider extends HTMLElement {
  // クラスフィールド
  edge       = 'start';
  styles     = getComputedStyle(this);
  move       = parseInt(this.styles?.getPropertyValue('--move'), 10) || 1;
  gap        = parseInt(this.styles?.getPropertyValue('--gap'), 10) || 0;
  slider     = this.querySelector('[data-slider]');
  navBtns    = this.querySelectorAll('[data-nav-btn]');
  image      = this.slider?.querySelector('img');
  controller = new AbortController();
  timer;
  // ...
}

いくつか補足すると、styles フィールドは、getComputedStyle(this) によってカスタム要素自身のスタイル情報を格納しています。これは、続く move と gap で CSS 変数の値を取得するときに使用しています。

controller フィールドは、AbortController のインスタンスを格納しています。これは、disconnectedCallback でカスタム要素を削除したときにイベントを破棄するために使用します。

timer フィールドは、スクロールイベントやリサイズイベントの処理を間引くために用意している debounce メソッドで使用します。

constructor() は、クラスをインスタンス化したときに実行されますが、初回に実行したい処理やイベントの設定は connectedCallback() でおこなっているので、ここでは super() のみ記述しています。

// 初期化
constructor() {
  super();
}

ライフサイクルコールバックでは、カスタム要素の状態が変更されるタイミングでメソッドを呼び出すことができます。以下の 4 つのメソッドが用意されています。

今回は adoptedCallback() を除く、3 つのメソッドを使用しています。

まず、connectedCallback() では、スクロールの端に到達したかどうかを判定する detectScrollEdge メソッドを、以下のタイミングで呼び出しています。

• カスタム要素が追加されたとき（初期化）
• スライダーのスクロール
• ウィンドウリサイズ

加えて、ナビのボタンをクリックしたときに、スライダーの scrollLeft を変更してスクロールするようにしています。スクロール量は calcScrollLeft メソッドで算出しています。

// カスタム要素が追加されたときに実行
connectedCallback() {
  if (this.slider) {
    this.detectScrollEdge();

    const { signal } = this.controller;

    this.slider.addEventListener('scroll', () => { this.debounce(this.detectScrollEdge, 50) }, { signal });
    window.addEventListener('resize', () => { this.debounce(this.detectScrollEdge, 50) }, { signal });

    this.navBtns.forEach((btn) => btn.addEventListener('click', () => {
      this.slider.scrollLeft = this.calcScrollLeft(btn);
    }, { signal }));
  }
}

なお、addEventListener の第三引数には、クラスフィールドで生成した AbortController の signal を渡しています。

disconnectedCallback() では、 AbortController の abort() を呼び出すことによって、カスタム要素が削除されたときに connectedCallback() で追加したイベントを破棄しています。

// カスタム要素が削除されたときに実行
disconnectedCallback() {
  this.controller.abort();
}

attributeChangedCallback() で監視する属性は、static get observedAttributes() にリスト形式で指定します。

ここでは edge 属性をチェックし、スクロールの端に到達したときに指定される start や end の値に応じて、ナビのボタンに aria-disabled="true" を指定しています。

// `attributeChangedCallback` で監視する属性
static get observedAttributes() { return ['edge']; }

// カスタム要素の属性が変更されたときに実行
attributeChangedCallback(name, oldValue, newValue) {
  if (this.navBtns && name === 'edge') {
    this.navBtns.forEach((btn) => btn.removeAttribute('aria-disabled'));

    if (this.navBtns[0] && newValue === 'start') {
      this.navBtns[0].setAttribute('aria-disabled', 'true');
    } else if (this.navBtns[1] && newValue === 'end') {
      this.navBtns[1].setAttribute('aria-disabled', 'true');
    }
  }
}

最後に、以下の 3 つのメソッドを定義しています。

対象となるコードは以下のとおりです。

// スクロールの両端に到達したかを判定し、`edge` 属性を指定
detectScrollEdge = () => {
  const scrollLeft  = this.slider.scrollLeft;
  const scrollRight = this.slider.scrollWidth - (scrollLeft + this.slider.clientWidth);

  if (scrollLeft <= 0) {
    this.edge = 'start';
  } else if (scrollRight <= 1) {
    this.edge = 'end';
  } else {
    this.edge = 'false';
  }

  if (this.getAttribute('edge') !== this.edge) {
    // 属性を変更すると `attributeChangedCallback()` が呼び出される
    this.setAttribute('edge', this.edge);
  }
}

// スクロール量を算出
calcScrollLeft = (btn) => {
  const dir = (btn.getAttribute('data-nav-btn') === 'prev') ? -1 : 1;
  const imageSize = this.image?.clientWidth ?? 300;
  const totalItemsSize = imageSize * this.move;
  const totalGap = this.gap * this.move;

  return this.slider.scrollLeft + dir * (totalItemsSize + totalGap);
}

// debounce で処理を間引く
debounce = (fn, interval = 50) => {
  clearTimeout(this.timer)
  this.timer = setTimeout (() => fn(), interval);
}

これらのコードを組み合わせることで、イメージスライダーが完成します。

前のスライド 次のスライド

ここから発展させて、CSS 変数を経由してスライダーの設定をアレンジしていきます。CSS コードの先頭では、以下のように CSS 変数を指定していました。

image-slider {
  --slider-padding: 40px;     /* スライダーの外側の余白 */
  --show-items: 2;            /* 一度に表示するスライダーの数 */
  --glance: 0.5;              /* 次の要素が見切れるサイズ */
  --move: 1;                  /* ナビのボタンで移動する距離 */
  --gap: 20px;                /* 要素間の余白 */
  --item-min-size: 150px;     /* 要素の最小サイズ */
  --item-max-size: 300px;     /* 要素の最大サイズ */
  --scroll-snap-align: start; /* スナップする位置 */
  --scrollbar-margin: 20px;   /* スクロールバーとの余白 */
  --scrollbar-width: 12px;    /* スクロールバーのサイズ */
}

このとき、カスタム要素の style 属性で CSS 変数を直接上書きすることで、コンポーネントごとに個別に設定を変更することができます。

例えば、以下のように --scrollbar-width: 0; と指定することで、スライダーのスクロールバーを非表示にできます。

<image-slider style="--scrollbar-width: 0;">
  <!-- ... -->
</image-slider>

前のスライド 次のスライド

続いて、表示される要素数や余白、ナビのボタンで移動する距離を変更する例です。

<image-slider style="--show-items: 3; --move: 3; --gap: 1px;">
  <!-- ... -->
</image-slider>

前のスライド 次のスライド

最後に、表示される要素数を 1 点のみに変更する例です。

<image-slider style="--show-items: 1; --glance: 0; --gap: 1px; --item-max-size: 100%;">
  <!-- ... -->
</image-slider>

前のスライド 次のスライド

このように、CSS 変数を介して、さまざまなバリエーションで表示することが可能になります。

@property --show-item {
  syntax: "<number>";
  inherits: false;
  initial-value: 2;
}
@property --glance {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.5;
}
@property --move {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}
@property --gap {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 20px;
}
@property --scroll-snap-align {
  syntax: "start | center | end";
  inherits: true;
  initial-value: start;
}
@property --scrollbar-width {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0;
}

<image-slider style="--move: none;">
  <!-- ... -->
</image-slider>

<image-slider style="--scrollbar-width: 0;">
  <!-- ... -->
</image-slider>

image-slider[style*="--scrollbar-width: 0"] {
  .c-slider {
    --scrollbar-margin: 0;
    scrollbar-width: none;
  }
}

/* 基準となるコンテナを指定 */
image-slider {
  container-type: inline-size;
}

/* Style Queries */
@container style(--scrollbar-width: 0) {
  .c-slider {
    --scrollbar-margin: 0;
    scrollbar-width: none;
  }
}

この記事では、HTML Web Components のテクニックを使用して、Progressive Enhancement の思想をベースにしたイメージスライダーを作成しました。

今回は必要最小限の機能ですが、例えばマウス（ポインティングデバイス）のドラッグでスクロールできるようにする、スクロールバーのデザインを完全にカスタマイズする、ドットインジケータを付けるといったことも、JS や CSS を追加することで可能になります（実装するのは大変ですが）。

また、カスタム要素に style 属性を指定して CSS 変数を上書きすることで、柔軟にスタイルや振る舞いを変更できる点も確認できました。この特徴を利用することで、コンポーネントの再利用性を高めることができそうです。

本記事を作成していくにあたり、個人的には多くの学びがありましたので、また新たな題材があれば記事にしていければと考えています。

本記事の作成にあたり、以下のウェブページを参考にしました。

• CSS Scroll Snapping Aligned With Global Page Layout: A Full-Width Slider Case Study | Smashing Magazine （外部リンクを開く）
• Web Components | 12 Days of Web （外部リンクを開く）
• ウェブコンポーネント | MDN （外部リンクを開く）
• クラス | JavaScript Primer （外部リンクを開く）