AI時代のWeb制作。バニラJS・jQuery・フレームワークの選定基準と事例

ウェブ制作の現場では、長らく「jQuery」が標準とされてきましたが、近年の「表示速度の重視」や「AIによるコード編集」の普及により、選定基準が大きく変化しています。

jQueryは依然として「基本」の立ち位置にあります。圧倒的な工期短縮、豊富なプラグイン、そして蓄積されたノウハウ。しかし、現代では「AI運用のしやすさ」や「大規模開発の秩序」など、目的に応じてバニラJSやフレームワークを使い分ける判断が求められています。

プロジェクトの目的と運用体制に合わせた、3つの典型的な選定事例を紹介します。

技術選定の比較一覧

AIは「指定なし」ならバニラJSで回答する

AIを使ってコードを生成する際、実は大きなポイントがあります。AIは特に指定がない限り、最も汎用性が高く確実な「バニラJS」でコードを書き出すという性質を持っている点です。

• プロンプトの手間が減る: 「Reactで書いて」「jQueryを前提にして」と毎回補足する必要がなく、素の指示だけでそのまま使えるコードが返ってきます。

• 精度の向上: AIにとって標準JSは学習量が最も多いため、ライブラリ固有のバグやバージョン違いによるエラーを起こしにくくなります。

この「AIの標準言語がバニラJSである」という事実は、パイプコーディング（繋ぎ込み）のスピードを劇的に高める見えないメリットとなります。

事例1：AIと共創する「機動力重視」のメディアサイト

選定：バニラJS (Vanilla JS)

• プロジェクトの背景

  納品後、クライアント自身がAI（CursorやChatGPT等）を活用して頻繁にABテストや機能追加を行いたい。

• なぜバニラか？

  AIがコードを生成する際、ReactやVueの独自ルール（State管理など）があると、生成コードをそのまま貼り付けても動かない「構文エラー」が多発します。標準規格のバニラJSであれば、AIが出したコードをそのまま「パイプ」のように繋ぎ込むことができ、クライアントの試行錯誤を邪魔しません。

• 勘所

  「納品して終わり」ではなく、クライアントが自ら育てていくサイトに最適。

事例2：スピードとコストを両立する「標準的」な企業サイト

選定：jQuery

• プロジェクトの背景

  予算・納期がタイトで、スライダーやアニメーションなど、一般的なリッチ表現を盛り込みたい。

• なぜjQueryか？

  世界中に膨大なプラグイン資産があるため、ゼロから開発する必要がありません。検証済みのパーツを組み合わせることで、開発工数を大幅に圧縮できます。また、多くのコーダーが扱えるため、jQueryなら「誰でも触れる」という安心感があります。

• 勘所

  「定額・短期間・定番の動き」が求められる、安定感重視のプロジェクトに最適。

事例3：多人数で開発し続ける「成長型」Webサービス

選定：モダンフレームワーク (React / Vue.js 等)

• プロジェクトの背景

  複数のエンジニアがチームで開発し、複雑なユーザー登録やマイページ機能などが存在する。

• なぜフレームワークか？

  「コンポーネント指向」により、コードの書き方を統一できるため、大人数で触ってもコードが複雑化しにくいのが特徴です。大規模なシステムにおいて、長期間の品質管理を可能にします。

• 勘所

  「サイト」というより「システム（アプリ）」に近い、構造的な秩序が必要な開発に最適。

選定を左右する「5つのチェックリスト」

どれを選ぶべきか迷った際は、以下の3点を確認してください。

1. AIのデフォルトを活かすか？
   プロンプトに細かな条件を付けなくても動く環境を渡したいなら、重要箇所は「バニラ」

2. 「誰が」保守するのか？
   制作会社に任せるなら「jQuery」。クライアント自身がAIで自走するなら「バニラ」。

3. 「何のために」動かすのか？
   リッチなプラグインを楽に導入したいなら「jQuery」。

4. システム規模は？
   1枚のLPや中小サイトなら「jQuery」。巨大なサービスなら「フレームワーク」。

5. 「いつまで」使うのか？
   10年単位の寿命を求めるなら、ライブラリの廃止に左右されない「バニラ」。

まとめ

「どれか一つ」に固執するのではなく、「jQueryの効率」「バニラの自由度」「フレームワークの秩序」を、プロジェクトの性質に合わせて部位ごとに最適化する。

技術のトレンドに流されるのではなく、「納品後のクライアントが、いかにストレスなくサイトを改善し続けられるか」。その運用体験（DX）までを見据えた技術選定こそが、これからの制作現場に必要だと思います。