JavaScriptのアプリ実装パターン~プログレスバーの状態変更~

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

今回は、プログレスバーの状態変更をJavaScriptで操作しようと思います。

demoは、「こちら」で確認できます。

環境構築

最初に、簡単な環境構築をお願いします。

必要なファイルは、以下の通りです。

開発

ページの作成

最初にページの作成をしましょう。index.htmlに次のコードを記述してください。

このHTMLをブラウザ上で表示すると以下のようになります。

スタイルの追加

次にスタイルをstyle.cssに記述してきましょう。

ここまで実装すると以下のようになります。

CSSは、本当に難しいですね^^;ここまでできるんだっていう感じです。

JavaScriptの実装

さて、いよいよJavaScriptを実装しましょう。scripts.jsに書き込んでいきます。

要素を取得する

JavaScriptで制御すべき要素が4つのあります。最初にこれらの要素を取得しましょう。

クリックイベントの登録

次にprev/nextボタンのクリックイベントの登録を行います。

これでボタンを押下した時には、イベントが発生します。

プログレスの状態を更新する

activeクラスを付与することで、サークルの周りが青く縁取られるようになります。

試しにnextボタンを押下してみましょう。

idxは、要素数(index)を表していて、この要素が現在Activeになっているべき数(currentActive)より小さい場合はその要素にactiveクラスをつけます。

プログレスバーのスタイル制御

プログレスバーのスタイルは、以下のように定義していました。

現在は、width:0%になっていますが、この値を変更するとプログレスバーのスタイルが変化します。例えば、width: 100%にしてみましょう。

プログレスバーが青く縁取られましたね。JavaScriptでこの値を操作して状態を変化させてみましょう。

update関数に以下のプログラムを追加します。

「progress.style.width」のように要素のスタイルを直接指定すると値を変更できます。便利ですよね。

また、このプログラムだとサークルとサークルの間をだいたい33%に指定するといい感じになるので、それぞれの要素を-1しています(1/3*100=33.333…)。

ボタンの活性制御

最後にボタンの活性制御を実装して、終了しましょう。

現状、prevボタンは非活性状態になっていますが、これは要素にdisabledを指定しているからです。

先ほど取得した要素から状態を変更できることを学んだように(progress.style.width)、ボタンの活性状態も「prev.disabled = true(or false)」と指定して操作します。

このプログラムは、以下の条件分岐を表しています。

  • active数が1(最小)の場合は、prevボタンを非活性
  • active数が4(最大)の場合は、nextボタンを非活性
  • active数が最大・最小以外は、prev/nextボタンを活性

試しに、nextボタンを押下してみるとprevボタンが活性状態になることがわかります。

おわりに

JavaScript自体はそれほど難しくないはずです。一番難しいのは、CSSですかね^^;

もっと簡単にプログレスバーを実装したいという方は、BootStrapの「Progress – Bootstrap」の導入を検討してみてはいかがでしょうか?かなり便利ですよ。

それでは、また!

JavaScriptまとめ

JavaScript ソースコード

コメントを残す