[JavaScript vs jQuery]モーダル開閉でコードを比較してみる。

JavaScriptとjQueryってどっち使うのが良いの？

JavaScriptとjQuery。どっちを使っても同じ実装は実現できる。

ならどっちを使うのが結局良いの？？？

比較するまでもなく、
コードが短くなるのでjQueryの方が便利かなと思うのですが、
今日は改めてどれくらいコードが変わるのかを比較してみます！

JavaScriptで実装

まずはJavaScriptでの実装です。

See the Pen Untitled by 勇飛高松 (@ngcorrsc-the-solid) on CodePen.

次にjQueryでの実装です。

See the Pen jqueryボタンクリック by 勇飛高松 (@ngcorrsc-the-solid) on CodePen.

・要素の指定の仕方
要素指定がjQueryの方がかなり簡潔です。
JavaScript↓

// 要素の取得 (classを使用)
const modal = document.querySelector('.modal');

// モーダルを開く
document.querySelector('.btn-open').addEventListener('click', () => {
  modal.style.display = 'flex';
});

jQuery↓

 // モーダルを開く
  $('.btn-open').on('click', function() {
    $('.modal').css('display', 'flex');
  });

JavaScriptの「document.querySelector」という記述は長くて覚えるが大変だ。
一方jQueryは「 $」という一文字を使うだけで要素を取得できる。

これだけでも圧倒的便利さがわかる。

・cssの指定方法

JavaScript↓

const modal = document.querySelector('.modal');

modal.style.display = 'flex';

jQuery↓

$('.modal').css('display', 'flex');

これはどっちでも記述量は変わらないか。

ただやはり要素の取得方法がJavaScriptの方が面倒だなと思う。

まとめ

ということで今日は、JavaScriptとjQueryってどっち使うのが良いの？というテーマで、
コードを比較してみました。

どちらでも実装はできるのですが、
個人的には簡潔に書けるのでjQueryの方が直感的で好きです。

ただ案件によってはJavaScriptを使うものもあるので、
コードの違いは比較しておくと良いと思います。

もしも質問などあれば、コメント欄かXのDMよりお気軽にご連絡ください。

Tweets by yuhi1321