現役エンジニアが考える「jQueryとJSフレームワーク」について

CREATE:

【現役エンジニアが考える「jQueryとJSフレームワーク」についてのアイキャッチ画像

はじめに

数年前まで一世を風靡していたjQueryですが、最近ではJSフレームワーク(React、Vue.js、Angular)が、フロント開発シーンのスタンダートとなっています。

もちろん開発するものによっては、フレームワークを導入するまでもないケースもありますが、多くの現役フロントエンドエンジニアは、 JSフレームワークの習得をモダンな開発者になるための「必須条件」と捉えているのではないでしょうか。

それはある意味正解で「モダンな企業や、高い技術力が必要とされるようなプロダクトは高確率でJSフレームワークが使用されている」ため、モダンな開発環境であったり、技術力を高められるような場所へたどり着くには「JSフレームワークの習得が必須」になっているのが現状です。 ※ポテンシャル採用は除く

では、なぜjQueryではなくJSフレームワークが使われるようになったのか そして何故生み出されたのか?

技術が誕生した経緯を辿れば、それによって得られる本質的な恩恵が理解でき、 新規プロダクトの技術選定などの際にも、きっと役に立つことでしょう。

それでは、いってみましょう

jQueryのこれまで

jQueryは、ジョン・レシグ(John Resig)によって開発され 2006年にリリースされたJavaScriptライブラリです。 当時の人気ぶりは凄まじく、今日に至るまでWeb・開発者を支え続けてきました。

当時人気を博したのには、以下のような理由がありました。

① ブラウザ間の差異を吸収できる
  ※当時ブラウザ仕様が現在ほど標準化されてなく、同じコードでもブラウザごとに異なる解釈がされていた ② アニメーションや、ajax処理を簡潔に記述できる ③ 優秀なプラグインが多数存在

JSフレームワークの台頭

一時代を築いたjQueryですが、 近年ではJSフレームワークによってその座を明け渡す形となりました。

衰退の理由としては、「Web表現の高度(複雑化)」「フロントエンド責務の変化(BFF)」があげられるでしょう。

近年のWebは、よりインタラクティブな表現であったり、ユーザー属性や動作によってページ内の表示を切り替えるなど、よりリッチで複雑な実装が求められるようになってきました。 そして表示切り替えなど、これまでサーバー側で出し分け処理を担ってきたものを、クライアントサイドで処理するという時流もやってきてきました。

そこで「仮想DOM」「状態管理」という特徴を持ったJSフレームワークでもって、 これまで「サーバー側で行っていた重い処理や複雑な処理」をフロントエンドで解決する必要に迫られた背景があると考えられます。


FW 誕生 開発
React 2013年3月 Facebook
Vue.js 2014年2月 Evan You
Angular 2016年9月 Google

 3大JSフレームワークの概要  ※Angularの前身「AngularJS」は、2009年誕生

「仮想DOM」「状態管理」は何が嬉しいのか

仮想DOMの正体は「JavaScriptのオブジェクト」です。 ※対義語は、「DOM」「リアルDOM」


リアルDOMではなく、仮想DOMを何が嬉しいのか


① 仮想DOMを使うメリットはレンダリングコストを低くできる 以下の構造で処理させることによって、リアルDOMを操作するよりも効率良く処理するが可能となっています。

  1. 仮想DOM(Aとする)、仮想DOM(Bとする)を生成する
  2. Bの仮想DOMをJavascriptで操作
  3. AとBの仮想DOMの差分をみる
  4. 差分のみ、リアルDOMへ反映する



② リアルDOM操作の煩雑な実装から解放される 例えば「クリックした時に数値を1プラスする」という処理を作る場合 参考

jQuery
<div>
  <p id="counter">0</p>
  <button id="increment">+1</button>    
</div>

<script>
  const state = { count: 0 };
  const btn = document.getElementById('increment'); // DOM取得 其の1
  btn.addEventListener('click', () => {
    const counter = document.getElementById('counter'); // DOM取得 其の2
    counter.innerText = ++state.count;
  })
</script>
Vue.js
<template>
  <div>
    <p>{{ count }}</p>
    <button v-on:click="increment">+1</button>
  </div>
</template>

<script>
new Vue({
  data: {
    count: 0
  },
  methods: {
    increment() {
      this.count += 1;
    }
  }
})
</script>

DOM取得の実装が不要になったに加え、状態管理に関しても「データ(counterの数値)、処理(increment)が分離」されていたりと、より実装の処理の流れ・役割を認識しやすくなっていますね。

まとめ

今後はさらにJSフレームワークが普及し、jQueryが役目を終える日はそう遠くはない未来かもしれません。

とはいえ、現状はまだまだjQueryをメインで使用しているプロダクトもあるので、 「これからJavaScriptの勉強を始める、まずはjQueryから。」と考えている初学者の方は、そのまま勉強して問題ないと思います。

jQueryの学習コストの低さは、独学の最大壁「なんもわからん -> つまらん -> 自分には向いてない」を乗り越える大きな助けになるでしょう

”千里の道も一歩から”


Copyright © 2020 Frontendev. All rights reserved.