はじめに

前回に引き続き、JavaScript(以降JS)の復習をしていきます。
今回は、JSの便利なライブラリやフレームワークについてまとめていきます。
どんなライブラリやフレームワークがあるのかを学んでいきます。

ライブラリとは

汎用性の高い複数のプログラムを再利用可能な形でひとまとまりにしたもので、他のプログラムに何かの機能を提供するコードの集合体のこと。
簡単に言うと、JSで開発を行うのを簡単にするツールのことである。

どんなライブラリがあるのか

JSのライブラリは流行り、廃りの流れがとても速い。
代表的なライブラリだけではなく、JSで書けるフレームワークも用意されているので、どんなものがあるのか確認してみる。
また、JSで書いた時とそれぞれ書き方がどう違うのかも比較していく。

JSでクリックイベントを書く場合

let btn = document.getElementByID("title");
btn.addEventListener("click", function() {
  console.log("Hello world");
});

jQuery

前回学んだDOM操作(DOM要素の取得や追加削除など)をもっと短く書ける。
現在、やや下火傾向ではあるが、手軽に扱うことから未だに根強い人気を誇る。
webサイトを制作したい場合は、jQueryの知識が必要になる（らしい）。

jQueryでクリックイベントを書く場合

$(function() {
  $("#button").on("click", function() {
    console.log("Hello world");
  });
});

React

Facebookが開発したライブラリ。
仮装DOMの概念によって、より速い高速なアプリケーション実装が実現できる。
AndroidやiOSに対してもReact Nativeを使用すればReactを適用でき、柔軟性も高いことから、最近大きく人気が増している。
書き方は、JSとHTMLを合わせて書く。

Reactでクリックイベントを書く場合

class Hoge extends React.Component{
    render(){
        return (<div onClick={() => console.log('Hello world') }>
        </div>)
    }
}

仮装DOMとは？

jQueryの場合、データを更新したらDOMを操作してビューを更新する（クラスに追加や削除など）。
実は、DOMを直接操作するのは思っているよりも処理が遅い。
そこで、構造化した仮のDOMを作成し、新しくデータを更新したら仮装DOMの差分だけをDOMに反映されるのが、仮装DOMを使った基本的な考え方。
これにより、処理を早くすることができる。

Vue.js

近年JSのフレームワークとして使用される現場がとても増え、人気。
Reactと同様に仮装DOMの概念があり、冗長な記述を減らして、HTML、CSSを中心としたWebアプリ開発が可能。

Vue.jsでクリックイベントを書く場合

new Vue({
  el: '#button',
  methods: {onClick: function() {
    console.log('Hello world');
  }}
})

スクールではjQueryを学んだ。なぜ？

私が通ったスクールでは、上記の3つからjQueryが使用され以降の学習の中心となりました。
理由としては、以下の3つをあげていました。

1. 歴史があるのでリファレンス（参考文献）が多くあり、学習を進めるのが容易
2. 機能が限定的でとっつきやすい
3. まだまだ使われている現場が多い

近い将来は残りの2つの方が使われる頻度が多くなるかと思うのだが、まだ勉強できていないのが事実。
触って見た感想などを記事にできればいいかなと思います。

早く知りたい方は、他の方の記事を見ていただければと思います。

次回以降はjQueryの復習となります。

今回はここまで！

次回に続く（現在製作中）