JavaScriptとjQueryの違い｜関係・書き方・選び方を初心者向けに比較

JavaScriptとjQueryはどちらもWebページを動かすときに登場するため、「別の言語なの？」「どちらから学べばよいの？」と迷いますよね。

JavaScriptはプログラミング言語、jQueryはJavaScriptで作られたライブラリです。jQueryのコードも最終的にはJavaScriptとしてブラウザで実行されます。

この記事では、両者の関係、同じ処理の書き方、導入方法、向いている場面、学ぶ順番を実際に動く例で比較します。

JavaScriptとjQueryの違いを一言で説明

JavaScriptは、ブラウザが標準で実行できるプログラミング言語です。変数、関数、条件分岐、通信、DOM操作など、Webページの処理全体を書けます。

jQueryは、要素の選択、イベント、表示切り替え、通信などを短く書けるようにしたJavaScriptライブラリです。利用するにはjQuery本体を別途読み込みます。

同じ表示切り替えをコードで比較する

JavaScriptとjQueryで、ボタンを押すと文章を表示する同じ動作を作ります。どちらで実装しても、画面上の結果は次のようになります。

共通のHTMLは次のとおりです。

<button
  type="button"
  id="toggleButton"
  aria-expanded="false"
>内容を表示</button>

<p class="panel" id="panel">
  表示する内容です
</p>

CSSでは、通常は隠し、is-openが付いた場合だけ表示します。

.panel {
  display: none;
  padding: 20px;
  background: #eaf5ff;
}

.panel.is-open {
  display: block;
}

JavaScriptで書く場合

JavaScriptではquerySelector()で要素を選び、addEventListener()でクリック処理を登録します。

const button = document.querySelector('#toggleButton');
const panel = document.querySelector('#panel');

button.addEventListener('click', () => {
  const isOpen = panel.classList.toggle('is-open');

  button.setAttribute('aria-expanded', String(isOpen));
  button.textContent = isOpen ? '内容を閉じる' : '内容を表示';
});

classList.toggle()はclassを付け外しし、変更後にclassが付いていればtrueを返します。その値からボタンの状態と文字も更新しています。

jQueryで書く場合

jQueryでは$()で要素を選び、on()でクリック処理を登録します。

jQuery(function ($) {
  $('#toggleButton').on('click', function () {
    const isOpen = $('#panel')
      .toggleClass('is-open')
      .hasClass('is-open');

    $(this)
      .attr('aria-expanded', isOpen)
      .text(isOpen ? '内容を閉じる' : '内容を表示');
  });
});

jQueryは要素選択と操作をつなげて書けるため、DOM操作を簡潔に表現できます。一方で、コードを実行する前にjQuery本体の読み込みが必要です。

導入方法の違い

JavaScriptはscript.jsだけで使える

JavaScriptはブラウザに標準搭載されているため、自分のファイルを読み込めば実行できます。

<script src="script.js"></script>

jQueryは本体を先に読み込む

jQueryを使う場合は、jQuery本体の後に自分のファイルを読み込みます。

<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script src="script.js"></script>

jQueryがない状態で$()を実行すると、$ is not definedというエラーになります。

JavaScriptを選ぶ場面

• 新しいサイトやWebアプリを作る
• 外部ライブラリを増やさず、標準機能で実装できる
• ES Modules、非同期処理、フレームワークなどへ学習を広げたい
• jQueryに依存しない再利用可能なコードを書きたい

現在のブラウザでは、要素選択、class操作、イベント、通信を標準JavaScriptでも扱いやすくなっています。新規制作では、必要な処理が標準機能で十分かを先に検討します。

jQueryを選ぶ場面

• 既存サイトがすでにjQueryを利用している
• 保守対象のテーマやプラグインがjQueryへ依存している
• チームの既存コードと記述方法をそろえる必要がある
• 短いDOM操作を既存のjQuery構成へ追加する

jQueryが古いからという理由だけで、動いている既存コードを一度に書き換える必要はありません。対象ブラウザ、テスト範囲、依存プラグインを確認し、必要な単位で移行します。

初心者はどちらから学ぶべきか

長期的にはJavaScriptの基礎を先に学ぶのがおすすめです。jQueryのセレクター、イベント、メソッドが何を簡略化しているのか理解できるためです。

1. JavaScriptの変数、関数、配列、条件分岐を学ぶ
2. querySelector、addEventListener、classListを試す
3. 同じ処理をjQueryでも書いて違いを比べる
4. 担当するサイトに合わせて両方を読めるようにする

すでにjQueryを使う案件へ参加している場合は、jQueryで必要な修正を進めながらJavaScriptの基礎を並行して学んでも構いません。

よくある誤解

jQueryはJavaScriptとは別の言語

別の言語ではありません。jQueryのon()やtext()もJavaScriptで作られた関数です。

短いコードなら必ずjQueryの方が速い

コードが短いことと、実行速度や読み込み速度は別です。jQuery本体の転送量、処理回数、サイト全体の設計も影響します。

jQueryを使うサイトではJavaScriptを学ばなくてよい

変数、関数、条件分岐、配列、スコープはjQueryのコードでもJavaScriptの知識です。エラーを直し、複雑な処理を書くためにも基礎が必要です。

jQueryの基本構文を体系的に確認したい場合は、次の記事を参考にしてください。

まとめ

• JavaScriptは言語、jQueryはJavaScriptライブラリ
• jQueryはDOM操作を短く書けるが、本体の読み込みが必要
• 同じ画面の動作をどちらでも実装できる
• 新規制作では標準JavaScript、既存保守ではjQueryも有力
• 初心者はJavaScriptの基礎を学び、jQueryと比較すると理解しやすい

まずはこの記事の表示切り替えを両方で動かし、要素選択、クリック登録、class操作の対応関係を1行ずつ確認してみてください。