jsのクラスを勉強してモーダル表示ライブラリを作ってみた

javascriptでフロント側の実装をおこなう機会が増えてきました。

日々コードを書く中で、同じような記述が多かったり、再利用性が低いことを課題に感じていたため、クラスについて勉強し、簡単なライブラリを作成してみました。

クラスの書き方はなんとなくわかるけど、具体的にどんな風に使うんだろう？という方の参考になれば幸いです。
#クラスって何？
javascriptのクラスについてサイ本で調べてみると、下記のように説明されています。

JavaScriptでは、同じプロトタイプオブジェクトからプロパティを継承する一連のオブジェクトをクラスと呼びます。
引用元：「JavaScript 第6版」

JavaScriptのクラスではプロトタイプベースの継承を行います。2つのオブジェクトが同じプロトタイプオブジェクトからプロパティを継承している場合、この2つのオブジェクトは同じクラスのインスタンスになります。
引用元：「JavaScript 第6版」

初めて聞いて理解するのは難しい気がします。僕もとても理解に苦しみました。
それで、さらにいろいろ調べてみて腑に落ちた表現がこれです。

『クラス』は、『共通の変数や関数を格納した変数』を作るための仕組みです。
型、オブジェクト、クラス/マンガでわかるjavascriptプログラミング講座

クラスを用いると、同じような記述を何度も書いたりせず、簡潔なコードを書くことができるようになるということですね。（基本的な書き方は上記の紹介サイトで詳しく説明されています。）

##モーダルライブラリーを作ってみた

クラスについて勉強したアウトプットとして、業務の中でもよく使うモーダル表示のライブラリを作成してみました。

イベントのトリガーと要素と、モーダルで表示したい要素のIDを指定してするだけで、簡単にモーダル表示を作れるライブラリです。（jQuaryに依存しています）

サンプルとして下記のようなhtmlファイルを用意しました。
イベントのトリガーとなる3つのボタンとモーダル表示させたいimage画像のパスが記述されています。

<div class="button-container">

  <div id="button-left">
  サンプルボタンA
  </div>
  <div id="content-left">
  <img src="img/photo01.jpg" alt="">
  </div>

  <div id="button-center">
  サンプルボタンB
  </div>
  <div id="content-center">
  <img src="img/photo02.jpg" alt="">
  </div>

  <div id="button-right">
  サンプルボタンC
  </div>
  <div id="content-right">
  <img src="img/photo03.jpg" alt="">
  </div>

</div>

scriptファイルの記述をみていきます。

まず、モーダル表示で使う、overlayの要素をファイル読み込み時に生成し、hide()で非表示状態にしておきます。

$(document).ready(function(){
  $('<div id="js-overlay" class="overlay"></div>').appendTo("body");
  $('#js-overlay').hide();
});

そして、コンストラクタ関数でクラスを定義。

第一引数のtargetにはイベントのトリガーとなる要素のID,第二引数にはモーダル表示させたい要素のIDが入ります。

さらにモーダル表示させたい要素の横幅と高さを取得するprotoypeを用いた関数を作成し、その値を元にイベントが発火した際に中央表示されるようにcssの内容を指定。

function Modal(target, content) {
  this.target = $(target);
  this.content = $(content);
  this.width = this.getContentWidth();
  this.height = this.getContentHeight();
  this.content.css({
  zIndex: '999',
  position: 'absolute',
  top: '50%',
  left: '50%',
  display: 'none',
  marginTop: '-' + this.height / 2 + 'px',
  marginLeft: '-' + this.width / 2 + 'px',
  });
}

Modal.prototype.getContentWidth = function() {
  var width = this.content.width();
  return width;
}

Modal.prototype.getContentHeight = function() {
  var height = this.content.height();
  return height;
}

最後にoverlay要素とモーダル表示させる要素を出し分けする関数を作ります。

Modal.prototype.show = function() {
  this.content.show();
  $('#js-overlay').show();
  var self = this;
  $("#js-overlay").on('click', () => {
  self.hide();
  });
}

Modal.prototype.hide = function() {
  this.content.hide();
  $('#js-overlay').hide();
}

あとはhtmlファイルのbody閉じタグの直前に下記scriptを記述。
インスタンスを生成と、イベント実行のタイミングと関数の呼び出しを実行しています。

<script>
  var modalLeft = new Modal('#button-left', '#content-left');
  var modalCenter = new Modal('#button-center', '#content-center');
  var modalRight = new Modal('#button-right', '#content-right');

  $('#button-left').on('click', function(){
  modalLeft.show();
  });

  $('#button-center').on('click', function(){
  modalCenter.show();
  });

  $('#button-right').on('click', function(){
  modalRight.show();
  });
</script>

#まとめ
クラスについて学習し、そのアウトputとしてモーダル表示ライブラリを制作しました。
実業務で使うにはもう少し作りこむ必要がありますが、ライブラリの制作を通して、クラスの概念、書き方の理解を深めることができました。

最後にクラスの勉強にあたり参考にした記事をまとめておきます。どれもわかりやすい記事で理解を深めるのに助かりました。

【参考サイト】
最強オブジェクト指向言語 JavaScript 再入門！
プロパティとメソッドについて
や...やっと理解できた！JavaScriptのプロトタイプチェーン
JavaScript オブジェクト指向 プロトタイプなどのまとめ
Javascriptでオブジェクト指向(クラス,オーバーライド,カプセル化)
lynda.com - 仕事・趣味に活かせるオンライン動画学習サイト