【JavaScript】オブジェクト指向を意識したカルーセルスライダーの実装

これまでオブジェクト指向という言葉は知っていましたが、ほとんどその詳細について考えたり、勉強したりしたことがありませんでした。
しかしそれではいかんと思いいくつか入門記事を読んでみて、なんとなくオブジェクト指向がどういったものなのか、少し掴めてきたように感じました。

そのイメージを形にしてみようと、久しぶりに vanila.js でベーシックなカルーセルスライダーを実装してみました。
オブジェクト指向のプロの方たちから見たら全然かと思いますが、一応備忘録と、自分の頭の中の整理として。

完成物
カルーセルの仕様
実装の考え方
- プロパティとメソッドをちゃんと意識して考えると簡単かもしれない
アプリケーションをオブジェクトの集合として考える
実装ハマりポイント

完成物

https://kde-space.github.io/carousel/basic_carousel/

カルーセルの仕様

カルーセルに表示する画像パスと alt は、html上の .js-carousel の data-api-images 属性に記述されたapiから取得する
複数カルーセルを設置できる
初回は1枚目を表示する
カルーセルにオンマウスすることで、スライド切り替えボタンが表示される
- 先頭のスライド表示時は、左側の切り替えボタンを表示しない
- 末端のスライド表示時は、右側の切り替えボタンを表示しない
画像とインジケーターは連動する
現在表示されているスライドを示すインジケーター以外をクリックした場合、そのスライドに切り替える
- 現在表示されているスライドを示すオレンジ色のインジケーターをクリックした場合、何も起こらない
Tab キー でフォーカスを当てて enter キー で動作する（クリックと同じ挙動）
モジュールバンドラーやポリフィルを入れていないため、GoogleChome、Firefox、Edgeのみで動作します

実装の考え方

プロパティとメソッドをちゃんと意識して考えると簡単かもしれない

今回、ひとつのカルーセルをひとつのオブジェクト（クラス）として考えました。

よくJavaScriptの入門書などでは、「プロパティとは、オブジェクトの状態を表すもの」「メソッドとは、オブジェクトの状態を変化させる命令」というようなことが書かれています。

JavaScriptを学び始めたころはいまいちよく理解できていなかったのですが、その後なんとなく分かるようになり、オブジェクト指向に触れることでスッと腹落ちしました。

React.jsでStateパターンに慣れたことも理解する上での助けになったと感じています。
簡単にいうとReact.jsでのstateがプロパティみたいなもので、setState() を呼び出す処理がメソッドに近いように感じます。
つまりプロパティが、そのオブジェクトの現在の形を作るうえで必要な情報となり、そのプロパティを変更させるのがメソッドということになります。

たとえば今回のカルーセルでは、現在何番目のスライドが表示されているかを示す currentIndex というプロパティがあります。
そしてこのプロパティを変更させるメソッド moveAndUpdateProperties があります。
その他にも、スライダーを表現する上で必要な情報はほぼプロパティとして定義してあります。

基本この仕組みを理解できれば、あとは適宜、イベントに応じてプロパティを変更させるメソッドを定義していけばカルーセル程度であれば簡単に実装できると感じます。
細かいところはGitHubにコードを上げているので参照頂ければと思います。

https://github.com/kde-space/carousel/tree/master/basic_carousel

アプリケーションをオブジェクトの集合として考える

今回はカルーセルだけでしたが、実際のサイトやアプリケーションでは様々な要素が存在しています。

例えばモーダル機能に関してもひとつのオブジェクトとして考えると簡単だと思います。
モーダルのプロパティとして、例えば表示・非表示を表す isShow、モーダル内のテキストを表す text というあったとします。
そしてこのプロパティを変化させるメソッドして、toggleShow や addText などがあったとします。何かモーダルを表示したいときに、任意の処理の中で、toggleShow(); addText('ほげ') といった感じでそれを呼び出せば実行できることが想像できれば大丈夫だと思います。（このように toggleShow と addText はモーダルの外から呼び出して使うことが多いと想像できるので、このメソッドは外から呼び出せるように public にしておく必要があります）

このように要素をオブジェクトとして考えていくことをオブジェクト指向の基本なのかなと思います。
オブジェクト指向で考えることで変化に柔軟なアプリケーションが作れるように感じます。
世間ではオブジェクト指向よりも関数型プログラミングという声も聞かれますが、こういった設計パターンも知っておきたいと思います。