avaScriptはどんなライブラリやフレームワークがあるのか理解すること。

ライブラリとは何か

「ライブラリ」とは、汎用性の高い複数のプログラムを再利用可能な形でひとまとまりにしたもので、他のプログラムに何らかの機能を提供するコードの集合体。
簡単に言うと、JavaScriptで開発を行うのを簡単にするツールです。 Rubyにおけるgemもそうである。

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

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

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

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

jQuery

jQuery（ジェイクエリー）は、DOM操作（DOM要素の取得や追加削除など）をもっと短く簡単に書くことができる。
現在やや下火傾向ではあるが、手軽扱えることができることから未だに根強い人気がある。
Webサイト制作などをやりたい場合は、jQueryの知識が必要になる。

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

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

React

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

書き方は、Javascriptと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

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

vue.jsの例

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

jQueryを学習する理由

理由は以下の3点。
① 歴史があるのでリファレンスが多くあり、学習を進めるのが容易
② 機能が限定的でとっつきやすい
③ まだまだ使われている現場が多い

jQueryを学ぶことで、JavaScriptよりも簡単にWebページ上で様々な動きを持たせる実装を実現できる。

hiyoko-programingの日記

プログラミングを勉強したてのひよっ子。　　　エンジニア目指して勉強中。

JavaScriptのライブラリ