「Vanilla（バニラ） JavaScript」という言葉を聞いたことがありますか？ これは「純粋なJavaScript」のことを指し、「Pure JS」や「Native JS」と呼ばれることもあります。
かつてはjQueryのようなライブラリを使うのが当たり前でしたが、その風潮へのカウンターとして「Vanilla JS」という呼び名が（少し皮肉を込めて）使われ始めました。
この記事では、なぜ今「脱jQuery」の流れがきているのか、そしてjQueryを使わずにJavaScript（Vanilla JS）でどのように実装するのかを、Web制作を始めたばかりの方にも分かりやすく解説します。
目次
jQueryとは？
jQueryは、JavaScriptのコードをより簡単かつ簡潔に記述できるように設計された、非常に人気のあるJavaScriptライブラリです。
特にDOM（ドキュメントオブジェクトモデル）の操作やAjax（非同期通信）処理が簡単になり、リッチなアニメーションも手軽に実装できるため、現在でも多くのWebサイトで使用されています。
また、jQueryが登場した当時は、ブラウザ（Internet Explorer, Firefox, Chromeなど）ごとのJavaScriptの動作の差異が大きく、開発者を悩ませていました。jQueryはそうしたブラウザ間の互換性を吸収してくれるという側面もあり、Web制作の現場で重宝されていました。
jQuery不要論の高まり
多くのWebサイトで採用されているjQueryですが、近年は「jQueryを使わずにVanilla JSで実装しよう」という流れが強まっています。
その主な理由を見ていきましょう。
- モダンブラウザの進化: 現在の主要なブラウザ（Chrome, Firefox, Safari, Edge）は標準化が進み、ブラウザ間の動作の差異をjQueryで吸収する必要がほとんどなくなりました。
- 読み込み速度への影響: わずかなDOM操作やアニメーションのためだけに、jQueryライブラリ（数10KB）を読み込むのは、Webサイトの表示速度にとって非効率であるという考え方が広がりました。
- フレームワークの台頭: ReactやVue.jsといった、より効率的にUI（ユーザーインターフェース）を構築できる他のJavaScriptライブラリやフレームワークが主流になってきました。
- 学習上の側面: jQueryは非常に便利ですが、そのシンプルさゆえに、JavaScript本来のDOM操作の仕組みなどを深く理解しなくても使えてしまいます。Vanilla JSを学ぶことで、JavaScriptの基礎力がより身につくという側面もあります。
jQueryとVanilla JSのコード比較
idで要素を取得
// jQuery
$('#idName')
// Vanilla JS
document.getElementById('idName')
classで要素を取得
// jQuery
$('.className')
// Vanilla JS
document.getElementsByClassName('className')
Selectors API（セレクタAPI）で要素を簡単に取得
Vanilla JSでも querySelectorAll を使えば、jQueryのようにCSSセレクタで柔軟に要素を取得できます。
// jQuery
$('#idName .className')
// Vanilla JS (CSSセレクタがそのまま使えます)
document.querySelectorAll('#idName .className')
document.querySelectorAll('#idName > .className')
document.querySelectorAll('#idName , .className')
補足:
getElementsByClassNameとquerySelectorAllの違い
getElementsByClassNameが返すHTMLCollectionは「動的（live）」で、DOMの変更（要素の追加など）が自動的に反映されます。
一方、querySelectorAllが返すNodeListは「静的（static）」であり、取得した後のDOMの変更は反映されません。例：
querySelectorAllで要素の個数を取得した後、DOM上で要素を増やしても、取得した個数は変わりません。
classを追加
// jQuery
$('#idName').addClass('className')
// Vanilla JS
document.getElementById('idName').classList.add('className')
classを削除
// jQuery
$('#idName').removeClass('className')
// Vanilla JS
document.getElementById('idName').classList.remove('className')
classの存在を確認
// jQuery
$('#idName').hasClass('className')
// Vanilla JS
document.getElementById('idName').classList.contains('className')
スタイルを取得
// jQuery
$('#idName').css('background-color')
// Vanilla JS
document.getElementById('idName').style.backgroundColor;
スタイルを設定
// jQuery
$('#idName').css('background-color', '#fff');
// Vanilla JS
document.getElementById('idName').style.backgroundColor = '#fff';
実装例
jQueryでよく実装されるUIも、Vanilla JSだけで作成できます。
タブメニュー
モーダル
ページトップへ戻る
参考資料
より詳しく知りたい方は、こちらの資料もおすすめです。
よくある質問（FAQ）
Q1. jQueryを今から学ぶ意味はありますか？
A1. 意味はあります。現在も多くの既存WebサイトがjQueryを使用しており、それらの保守・改修案件ではjQueryの知識が必須です。また、jQueryの簡潔な書き方を知ることで、JavaScriptで何ができるのかを素早く学ぶ「とっかかり」にもなります。ただし、これからはVanilla JSやReact/Vue.jsなどのスキルも併せて習得していくことが重要です。
Q2. Vanilla JSはjQueryよりパフォーマンスが良いのですか？
A2. 一般的には「YES」です。Vanilla JSはブラウザに元々備わっている機能だけを使うため、追加のライブラリファイルを読み込む必要がありません。そのため、ページの初期読み込み速度が速くなる傾向があります。また、jQueryは汎用的に作られているため、特定の処理においてVanilla JSで最適化したコードを書く方が、実行速度が速くなるケースも多いです。
Q3. jQueryを使っている既存サイトも、すぐにVanilla JSに書き換えるべきですか？
A3. 必ずしもそうとは限りません。Webサイトが問題なく動作しており、パフォーマンスにも大きな問題がない場合は、無理に書き換える必要はないでしょう。書き換えにはコスト（時間と費用）がかかります。ただし、将来的に大きなリニューアルを予定している場合や、表示速度を大幅に改善したい場合は、そのタイミングでVanilla JSへの移行（脱jQuery）を検討するのが良いでしょう。