More than 5 years have passed since last update.

javascript　基本その4 ライブラリ

Last updated at 2019-12-03Posted at 2019-12-02

今日は発展形であるライブラリについて書きます。

ライブラリ

Rubyにおいてgemにあたります。

汎用性の高い複数のプログラムを再利用可能な形でひとまとまりにしたもの
他のプログラムに何らかの機能を提供するコードの集合体です。

JavaScriptで開発を行うのを簡単にするツールです。

色々種類があるので
それぞれ紹介していきます。

まず大元のjavascriptを例文として紹介します。

javascript

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

DOM操作（DOM要素の取得や追加削除など）をもっと短く簡単に書くことができます。
Webサイト制作などをやりたい場合は、jQueryの知識が必要になります。

jquery

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

Facebookが開発をしたライブラリです。

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

書き方は、JavascriptとHTMLを合わせて書きます。

React

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

jQueryの場合、データを更新したらDOMを操作してビューを更新します（クラスの追加や削除など）。

実は、DOMを直接操作するのは思っているよりも処理が遅いです。
そこで、構造化した仮のDOMを作成し、データ更新したら
仮想DOMの差分だけをDOMに反映させるのが基本的な考え方です。

これで処理を速くすることができます。

Reactと同様に仮想DOMの概念があり
記述を減らして、HTML,CSSを中心にしたWebアプリ開発が可能です。

Vue.js

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