普段はJQueryを使っているのですが、プロジェクトによっては素のJavascriptで書いてくれと指定があったりします。僕も過去このような経験があってJQueryだったらもっと簡単に・・・なんて思いながらcodeingしたりしたことがあります😅
なので今回はある機能を題材にコードの比較をしていきます。是非参考にしていって下さい。
ちなみにJQueryは、モダンなフレームワークにどんどんシェアを奪われているのでそろそろreactやvueあたりに手をつけたいと思っています。
Javascriptとは
webアプリケーションに対して動的コンテンツを盛り込むためのプログラミング言語です。
webサイトを例とると、スライダーやスクロール時のフェードインなど動きのあるコンテンツを作成する事ができます。
JQueryとは
javascriptのライブラリーです。
簡単に言ってしまうと、JQuery側が用意してる独自のコードを使うことでjavascriptを容易に使用する事ができます。
よく勘違いされてるかたがいるのですが、フレームワークではありません。フレームワークはアプリの半完成品ですのでこの時点でJQueryのコンセプトとはズレてます。
コード比較
さて今回の本題です。実際にjavascriptとJQueryでどれだけコード量が変わるでしょうか？今回はモーダルウインドウという機能を作ってみましたので比較してみます。
JQueryのモーダルはこちらを参考にさせて頂きました。
動き的にはこんな感じになります。ページ遷移せずポップアップのような別の画面を表示することが出来ます。
ではコード記載していきます。
<body>
<div class="content">
<a class="js-modal-open" href="" data-target="modal01">クリックでモーダル1を表示</a><br>
<a class="js-modal-open" href="" data-target="modal02">クリックでモーダル2を表示</a>
</div>
<div id="modal01" class="modal js-modal">
<div class="modal__bg js-modal-close"></div>
<div class="modal__content">
<p>1つ目モーダルウィンドウです。ここにモーダルウィンドウで表示したいコンテンツを入れます。モーダルウィンドウを閉じる場合は下の「閉じる」をクリックするか、背景の黒い部分をクリックしても閉じることができます。</p>
<a class="js-modal-close" href="#">閉じる</a>
</div><!--modal__inner-->
</div><!--modal-->
<div id="modal02" class="modal js-modal">
<div class="modal__bg js-modal-close"></div>
<div class="modal__content">
<p>2つ目モーダルウィンドウです。ここにモーダルウィンドウで表示したいコンテンツを入れます。モーダルウィンドウを閉じる場合は下の「閉じる」をクリックするか、背景の黒い部分をクリックしても閉じることができます。</p>
<a class="js-modal-close" href="#">閉じる</a>
</div><!--modal__inner-->
</div><!--modal-->
</body>
</html>
/* modal window */
.content{
margin: 0 auto;
padding: 40px;
}
.modal{
display: none;
height: 100vh;
position: fixed;
top: 0;
width: 100%;
}
.modal.open{
display: block;
}
.modal__bg{
background: rgba(0,0,0,0.8);
height: 100vh;
position: absolute;
width: 100%;
}
.modal__content{
background: #fff;
left: 50%;
padding: 40px;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
width: 60%;
}
$(function(){
$('.js-modal-open').each(function(){
$(this).click(function(){
var target = $(this).data('target');
$("#" + target).addClass("open");
return false;
});
});
$('.js-modal-close').click(function(){
$('.js-modal').removeClass("open");
return false;
});
});
JQueryだと10行ちょっとで実装出来ました。
Javascriptだとどうでしょうか。
Javascriptの場合。
window.onload = function () {
var $openModal = document.getElementsByClassName("js-modal-open");
let $closeModal = document.getElementsByClassName("js-modal-close");
for( var $i = 0; $i < $openModal.length; $i++ ) {
$openModal[$i].onclick = function (event) {
event.preventDefault();
var $target = this.dataset.target;
var $modal = document.getElementById($target);
$modal.classList.add('open');
}
}
for( var $i = 0; $i < $closeModal.length; $i++ ) {
$closeModal[$i].onclick = function (event) {
event.preventDefault();
this.closest(".js-modal").classList.remove('open');
}
}
}
機能や動きは同じです。
どうでしょう？あなたならどっちを使って開発を進めたいですか？大半の人はJQueryを選ぶでしょう。スピードや将来性を見込んでjavascriptを選ぶ人もいるかも知れませんが、コード量がやはり決め手になるかと思います。
個人的な意見ですがJQueryの魅力はセレクタの指定方法でしょうか。
JavascriptだとgetElementByXXXと書くところを、JQueryでは$("xxx")で済ませることが出来ます。今回の場合でいうとeach文を使えるのも魅力でしょう。
最後に
今回は比較だけで内容が非常に薄くなってしまいましたが、今後は何か知らの機能の実装など紹介できたらなと思います。
補足
@il9437 さんよりご指摘を頂き、以下でも実装出来ることが分かりました。本当にありがとうございました。
window.onload = function () {
var $openModal = document.querySelectorAll(".js-modal-open");
var $closeModal = document.querySelectorAll(".js-modal-close");
$openModal.forEach(function(openItem){
openItem.onclick = function (event) {
event.preventDefault();
var $target = this.dataset.target;
var $modal = document.getElementById($target);
$modal.classList.add('open');
}
});
$closeModal.forEach(function(closeItem){
closeItem.onclick = function (event) {
event.preventDefault();
this.closest(".js-modal").classList.remove('open');
}
});
}
確かにこちらの方が綺麗ですね。結構昔にJSをちょっと学んでJQueryに切り替えたのでまだまだ知らないことたくさんありそうですね😅ご指摘頂いた方には本当に感謝です。