---

こんにちは！制作担当のフロントエンドエンジニアです。

突然ですが、同業の方と話しているとき、「普段は主にJavaScriptを書いてます！」と自己紹介すると、高い確率でこう聞き返されませんか？

今の時代、「JavaScriptが書ける」と一言で言っても、素のJavaScriptである「Vanilla JS」、従来型の便利ツール「jQuery」、そしてモダン開発の主役「React」や「Vue.js」など、その実態はあまりにも多様です。

この記事を書こうと思ったのは、自分自身のちょっとした危機感がきっかけでした。

最近、保守案件でjQueryをゴリゴリ書く日々が続いていたのですが、

ふと「今の自分、Vanilla JSでちゃんと書けるか？」と焦りを感じたんです。改めてVanilla JSを学び直し、各ライブラリとの違いや強みを整理してみたところ、「やっぱり今の時代、Vanilla JSの基礎がないと絶対に生き残れない」と確信しました。

JSを学び始めたばかりで「結局どれから手をつければいいの？」と迷っている方に向けて、フロントエンドエンジニアの視点から「今の時代、どの技術をどう使い分けるのが正解なのか」を解説していきます。

---

①まずは結論！それぞれを比較してみよう

まずは比較表から。現在Web制作や開発の現場で主に使われているJavaScript関連技術の特徴をまとめました。

	習得難易度	規模感	表示速度	こんな人向け
Vanilla JS	★★★☆☆ JSの基礎理解が必要	小〜中規模 （LPやコーポレートサイトのUI）	爆速 余計なファイルの読み込みゼロ	JS基礎を固めたい人
jQuery	★☆☆☆☆ 直感的にすぐ書ける	小〜中規模 （WP案件、既存サイトの保守）	普通〜やや遅い ライブラリ本体の読み込みが必要	WordPress案件に入る人
Vue.js	★★☆☆☆ HTML/CSSの知識から入りやすい	中〜大規模 （管理画面、中規模Webアプリ）	初回ロードはやや重いが、操作後の画面切り替えは速い	中規模アプリを作りたい人
React	★★★★☆ 特有の概念が多く学習コスト高	大規模 （複雑なWebアプリ、世界規模のサービス）	初回ロードはやや重いが、操作後の画面切り替えは速い	大規模サービスを作りたい人

※ReactとVue.jsはSPA（シングルページアプリケーション）として動作するため、初回ロードにはJSファイルの読み込みコストがかかります。「速い」という評価は、あくまで画面遷移や状態更新のスムーズさを指しています。

フロントエンドエンジニアとして長く活躍するためのベストな学習順序と使い分けは、ズバリ以下の通りです。

1. まずは「Vanilla JS（素のJS）」から学ぶ

これがすべての基礎。ここを理解していれば、他のどのツールにも応用が効きます。

2. 保守案件やWordPress環境なら「jQuery」に合わせる

既存のプロジェクトがjQueryで動いているなら、柔軟に活用しましょう。

3. 新規の大型プロジェクトなら「Vue.js」や「React」を視野に入れる

複雑な画面操作が求められる案件では、モダンな技術を採用します。

軸となる「Vanilla JS」のスキルを持ちつつ、案件に合わせて柔軟に対応していけるのがベストな立ち回りです。

---

② 実際に書いて比較！Vanilla JS vs jQuery

「Vanilla JSが大事なのはわかったけど、jQueryみたいにサクッと書けないんでしょ？」と思っている方も多いのではないでしょうか。

実は、近年のJavaScript（ES6以降）は劇的に進化しており、とてもシンプルに書けるようになっています。実務で頻繁に登場する3つのシーンで書き方の違いを比べてみましょう。

1：要素を取得する

最も基本となる「HTMLの中から特定の要素を見つけてくる」処理です。

▼ jQueryの場合

// クラス名で取得 
var $btn = $('.js-btn');

▼Vanilla JSの場合

// クラス名で取得
const btn = document.querySelector('.js-btn');

// 複数ある場合はこちら
const btns = document.querySelectorAll('.js-btn');

かつての素のJSは document.getElementById などを使い分ける必要がありましたが、今は querySelector 一発で、jQueryと全く同じようにCSSセレクタ（. や #）を使って取得できます。

2：クラスの付け外し（トグル）

ハンバーガーメニューなどで「クリックしたら is-active クラスを付け外しする」という超定番の処理です。

▼ jQueryの場合

$('.js-btn').on('click', function() {
  $('.js-menu').toggleClass('is-active');
});

▼ Vanilla JSの場合

const btn = document.querySelector('.js-btn');
const menu = document.querySelector('.js-menu');
btn.addEventListener('click', () => {
  menu.classList.toggle('is-active');
});

Vanilla JSの方が記述量はやや多いですが、やっていることはほぼ同じです。classList.toggle という便利なメソッドが標準搭載されたことで、自力でif文を書く必要もなくなっています。

3：複数の要素に対して同じ処理をする（ループ）

▼ jQueryの場合

$('.js-list-item').each(function(index, element) {
  console.log(index + '番目の要素です');
});

▼ Vanilla JSの場合

const listItems = document.querySelectorAll('.js-list-item');
listItems.forEach((element, index) => {
  console.log(`${index}番目の要素です`);
});

Vanilla JSも forEach を使ってスッキリ書けます。ちなみに、jQueryの each とVanilla JSの forEach では引数の順番（index と element）が逆になります。jQueryからVanilla JSへ移行する際、これが一番のトラップになるので要注意です。

結論：もう「jQueryがないと不便」ではない

コードを見比べると、確かにjQueryの方が数文字分短いですが、Vanilla JSも負けず劣らず直感的に書けます。「これくらいの差なら、重たいjQueryライブラリ（数万行のコード）をわざわざ読み込ませる必要はない」というのが、現代のフロントエンド開発でVanilla JSが再評価されている最大の理由です。

---

③ 現場のリアル：じゃあ「jQuery」はもうオワコンなの？

ネット上では「jQueryはオワコン」という言葉を見かけることもありますが、現役のフロントエンドエンジニアとして言わせてもらうと、jQueryは適材適所でバリバリ現役です。

実際の現場での「使い分けの基準」を紹介します。

1：jQueryを使うべき現場

「すでにjQueryが読み込まれている環境」や「過去の資産を活かす場合」は迷わずjQueryを使います。

• WordPressが絡む案件

システム自体や人気プラグインがjQueryに依存しています。「どうせ最初から読み込まれているなら、恩恵にあずかろう」というのが現場のリアルな判断です。

• 既存システムの保守・改修

過去の数千行のjQueryコードをVanilla JSに書き換えるのはバグのリスクしかありません。「動いているものは保守する」のが鉄則です。

• 特定の便利なプラグインを使いたい時

Slickスライダーなど、クライアントの要望を満たすプラグインがjQuery依存の場合、無理に自作せずに素直にjQueryを採用します。

2：Vanilla JS（素のJS）を選ぶべき現場

「ゼロから新しく作るWebサイト」であれば、圧倒的にVanilla JSが推奨されます。

• LPやコーポレートサイト

「メニューの開閉」「ページトップへのスクロール」程度のUIであれば、Vanilla JSで十分です。

• 表示速度を極限まで高めたい時

スマホアクセスが主流の現在、ページの読み込み速度はSEO上でも超重要です。重いライブラリを読み込まずに済むVanilla JSは、パフォーマンス面で最強の選択肢です。

3：ReactやVue.jsなど「モダンライブラリ」を選ぶべき現場

Vanilla JSやjQueryは「HTMLの要素を直接操作する」のが得意ですが、画面の状態がコロコロ変わる複雑な機能になると、コードがスパゲッティのように絡まって地獄を見ます。そこで登場するのがReactやVue.jsです。

• 中〜大規模なWebアプリケーション
• ECサイトのカート機能や複雑な絞り込み検索
• 管理画面（ダッシュボード）

「データと画面の表示を常に一致させないといけない」システム開発の領域では、モダンフレームワークの独壇場です。

---

④ まとめ：これからJSを学ぶ人へ

もし「今からフロントエンドエンジニアを目指すなら、どの順番で勉強すればいいですか？」と聞かれたら、間違いなくこう答えます。

「いきなりReactとか流行りのやつからやっちゃダメなの？」と思うかもしれませんが、これには明確な理由が2つあります。

理由1：ライブラリの知識は風化するが、Vanilla JSは裏切らない

Webフロントエンドの歴史は、流行り廃りの歴史です。10年前は「jQueryが書ければ一生食っていける」と言われていましたが、今はReactやVue.jsが台頭し、さらにNext.jsといった新しい概念が次々と生まれています。

「Reactの書き方」から覚えてしまうと、そのライブラリが廃れた瞬間にスキルがリセットされてしまいます。しかし、jQueryの裏側で動いているのも、Reactの裏側で動いているのも、すべてはVanilla JSです。

Vanilla JSの基礎（変数のスコープ、配列の操作、非同期処理など）をしっかり理解していれば、新しい技術が登場するたびに「あ、あの概念と同じだ」と素早くキャッチアップできます。学習速度そのものが上がるのです。

理由2：AI時代の「Vibe Coding」にはコードの読解力が不可欠

最近注目されている「Vibe Coding（バイブコーディング）」、つまり自然言語でAIに指示を出してコードを書かせる開発スタイルですが、「AIにコードを書かせるなら、もう自分でJSを書けなくてもいいのでは？」と思うのは危険です。

AIが生成したコードが意図通りに動かなかった時、出力されたコードを読んでデバッグする力がないと、そこで完全に手が止まってしまいます。Vibe Codingを使いこなすためにも、ベースとなるVanilla JSの読解力は必須です。

これからのフロントエンジニアとしての歩み

これからの時代を生き抜くフロントエンドエンジニアのロードマップはシンプルです。

1. Vanilla JSを学び、Webの基礎体力と「コードを読む力」をつける
2. 案件の都合でjQueryが必要になったら、公式リファレンスを見て対応する（Vanilla JSが分かっていれば、英語を日本語に翻訳する感覚で読めます）
3. 基礎が固まったら、モダンな開発（ReactやVue.js）やAI活用（Vibe Coding）に挑戦して市場価値を高める

「どれか一つしか使わない」のではなく、「基礎という強力な武器を持った上で、状況に応じて道具を持ち替える」こと。これが、流行り廃りの激しいフロントエンド界隈を生き抜く、一番確実な進め方です。

• 前へ
• 記事一覧へ戻る
• 次へ

---