【JavaScript】ステップバーの作成方法

2022年4月12日JavaScript

JavaScriptでステップバーを作成する方法を紹介します。

ステップバーのデモ

See the Pen
ステップ by Sosak (@Sosak2021)
on CodePen.

ステップバーのJavaScript

HTML、CSS、JavaScriptのソースコードは上を参照してみてください。

const progress = document.querySelector('.js-progress');
const prev = document.getElementById('prev');
const next = document.getElementById('next');
const circles = document.querySelectorAll('.step-circle');

let currentActive = 1;

// 進むボタン
next.addEventListener('click', () => {
    currentActive++

    if(currentActive > circles.length) {
        currentActive = circles.length
    }

    update();
});
// 戻るボタン
prev.addEventListener('click', () => {
    currentActive--

    if(currentActive < 1) {
        currentActive = 1
    }

    update();
});

function update() {
    circles.forEach((circle, index) => {
        if(index < currentActive) {
            circle.classList.add('is-active')
        } else {
            circle.classList.remove('is-active')
        }
    })

    const actives = document.querySelectorAll('.is-active')

    progress.style.width = (actives.length - 1) / (circles.length - 1) * 100 + '%'

    // ボタンのdisabledを制御
    controlBtn();
}

// ボタンのdisabledを制御
function controlBtn() {
    if(currentActive === 1) {
        prev.disabled = true;
    } else if(currentActive === circles.length) {
        next.disabled = true;
    } else {
        prev.disabled = false;
        next.disabled = false;
    }
}

全体の流れ

動きとしては、ボタンをクリックするたびにupdate()が実行されます。
そして、progressに指定したwidthを伸ばしたり縮めたりして線を表現します。
その長さは、現在のステップのナンバーをステップの数で割ってパーセントに変換することで表現できます。
ステップのサークル部分は、is-activeクラスを付与すると完了を意味します。

ボタンの動き

現在activeなステップを把握するために、currentActive変数を作成します。
このcurrentActive変数の数値を戻るボタンで減らして、進むボタンで増やします。
これだけでは、どんどんプラスにもマイナスにも進んでしまうので、上限と下限をif文で制御しています。

ボタンのcurrentActive変数を動かしたあとに、update()を実行します。

update()後、上限や下限にいるときは押せないようにしたいので、それらのときはdisabledをtrueにして押せないようにします。

バーやステップ部分の動き

currentActive変数を基準に変化したいので、それを軸にして条件分岐して、is-activeクラスを付与します。

その後、is-activeクラスが付与されている要素の数を取得して、ステップ全部の数で割ることで、進捗を算出することができます。