【JavaScript】ライブラリ・フレームワーク 17選

EngineeringJavaScript, 備忘録

17選
写真:GIRLY DROP

入門というか、各機能を「始め方」として紹介し纏めてみた。 それだけでも勉強になったが、JavaScriptの関連技術はこんなにあることに関心し興味は尽きないし、そして英語とは比べられないほど日本語サイト数が甚小じんしょう(*)である格差の事実も、わかっちゃいたが今更ながら驚きだ。各項目はほんの初歩の導入部にすぎないが、まとめと確認と、けっこうしんどかった。
(甚大の反対語として軽微があるが、甚小という語を、辞書にも載っていないのだが、稀に見る。)

個人的には Create.JS と PixiJS が大注目だ。少しずつ深めていきたい。

 

 

 


【ライブラリ】

FireBase

・概要:モバイルアプリ作成をクロスプラットフォームでサポート。

・公式サイト:https://firebase.google.com/?hl=ja

・知識 – 環境:各種言語

・使い方:https://console.firebase.google.com/project/_/firestore/users?hl=ja → [プロジェクトを追加]

参照:https://dotinstall.com/lessons/basic_firebase/45902

 

 

 

 

jQuery

・概要:要素に fade in、fade out 、移動等の動きを受ける

・公式サイト:http://jquery.com/

・知識 – 環境:HTML、CSS、JavaScript、DOM要素、セレクタ、メソッド

・始め方:https://developers.google.com/speed/libraries/#jquery にある「jQuery」の「snippet:」にあるscript(”min”:ミニマイズ版)をbody閉じタグの直前にコピペ。

処理したい内容はその下からbody閉じタグまでの間に記述する。

【例】

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
    <script>
        $(function(){
            $('p').css('color', 'red').hide('slow');  //例:赤に指定した文字がゆっくりと消える
        });
    </script>
</body>

参照:https://dotinstall.com/lessons/basic_jquery_v2/25202

 

 

 

 

PixiJS

・概要:英Goodboy Digital社が開発する、マルチプラットフォームのオープンソース2D描画ライブラリ。ベンチマークテストにおけるパフォーマンスが高い。

・公式サイト:http://www.pixijs.com/

・知識 – 環境:JavaScript

・始め方:<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.4.3/pixi.min.js"></script> を<head>内に記述する。

var renderer = PIXI.autoDetectRenderer(256, 256);
document.body.appendChild(renderer.view);
var stage = new PIXI.Container();
renderer.render(stage);
//canvasを上記4行で生成

 

 

 

 

Create.js

・概要:Webのリッチコンテンツを作るためのフレームワーク。

・公式サイト:https://createjs.com/

・知識 – 環境:JavaScript

・始め方:<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script> を<head>内に記述する。

参考:https://ics.media/tutorial-createjs/quickstart.html 美しいページで丁寧な解説がある。
自サイトのヘッダーに適用したいアニメーションがあるが、仕組みを理解しないとやはり自由度も低い。記載の内容は難しい。

 

 

 

 

D3.js

・概要:データを多彩に可視化するツール。アニメーションも簡単に実装可。

・公式サイト:https://d3js.org/

・知識 – 環境:JavaScript

・始め方:公式サイト冒頭部のスクリプトを読み込む。

<body>
    <svg width="600" height="240">
      <circle/>
      <circle/>
      <circle/>
    </svg>

<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
    (function() {
      'use strict';

      const WIDTH = 600;
      const HEIGHT = 240;
      const data = [15, 21, 6];
      const circles = d3.select('svg').selectAll('circle').data(data);

      circles
        .attr('cx', function(d, i){  //i番目
          return i * 50 + 50;
        })
        .attr('cy', HEIGHT + 100)
        .attr('r', function(d){
          return d;
        })
        .attr('fill', 'pink')
        .transition()  //アニメーション
          .duration(800)  //0.8秒かけて
          .delay(function(d, i){  //i番目
            return i * 200;
          })
          .ease(d3.easeBounce)  //弾む表現
          .attr('cy', HEIGHT / 1.3)
        .transition()
          .attr('cy', -25);
    })();
</script>
</body>

サンプル:https://github.com/d3/d3/wiki/Gallery(眺めているだけでも楽しい)

参照:https://dotinstall.com/lessons/basic_d3js_v2/44005

参照:統計解析の言語 R言語(ベクトル、行列、リスト、データフレーム、欠損値等を簡単に扱える)

 

 

 

 

Chart.js

・概要:綺麗なグラフ描写がJavaScriptでできる。

・公式サイト:http://www.chartjs.org/

chartjs

・知識 – 環境:JavaScript

・始め方:[GetStarted]→[Installation]→CDN https://cdnjs.com/libraries/Chart.js の圧縮版スクリプトを使う。

    <canvas id="my_chart">
        Canvas isn't supported...  //Canvas非対応ブラウザのためのメッセージ
    </canvas>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script> 
    <script>
        (function(){
            'use strict';

            var type = 'line';  //折れ線グラフ
            var data = {
                labels:[2015, 2016, 2017, 2018],
                datasets:[{
                    label: '@qawaiii', data: [100, 145, 127, 176]
                }]
            };
            var options;
            var ctx = document.getElementById('my_chart').getContext('2d');
            var myChart = new Chart(ctx, {
                type: type, data: data, options: options
            });
        })();  //即時関数の締メ
    </script>
</body>

参照:https://dotinstall.com/lessons/basic_chartjs/43803

 

 

 

 

Three.js

・概要:ブラウザで3Dグラフィックスを実行。

・公式サイト:https://threejs.org/

Threejs

・知識 – 環境:JavaScript

・始め方:[download]からダウンロード→展開。

    <div id="stage"></div>
    <script src="js/three.min.js"></script> 
    <script>
        (function(){
            'use strict';

            var scene; // scene ステージ
            var width = 500;
            var height = 250;
            var box; // mesh 物体
            // - geometry 形状
            // - material 材質
            var camera; // camera
            var renderer; // renderer

            scene = new THREE.Scene();

            box = new THREE.Mesh(
                new THREE.BoxGeometry(80, 70, 50), //幅, 高さ, 奥行
                new THREE.MeshLambertMaterial({ color: 0xE5004F })
            );
            box.position.set(0, 0, 0); //x, y, z
            scene.add(box);

            camera = new THREE.PerspectiveCamera(37, width / height, 1, 1000);
            camera.position.set(170, 80, 100);
            camera.lookAt(scene.position);

            renderer = new THREE.WebGLRenderer({antialias: true});
            renderer.setSize(width, height);
            renderer.setClearColor(0xefefef);
            renderer.setPixelRatio(window.devicePixelRatio);
            document.getElementById('stage').appendChild(renderer.domElement);

            renderer.render(scene, camera);

            })();
    </script>
</body>

参照:https://dotinstall.com/lessons/basic_threejs_v2/36905

 

 

 

 

p5.js

・概要:Proccessing(ビジュアルコーディングツール) を JavaScript に移植したもの。

・公式サイト:https://p5js.org/

・知識 – 環境:JavaScript

・始め方:CDN(Contents Delivery Network);https://cdnjs.com/libraries/p5.js にあるリンクアドレス(”min”:ミニマイズ版)のうちの一つをbody閉じタグの直前にコピペ。

    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js"></script> 
    <script>
            function setup(){  //ps5初期化_1
            }
            function draw(){  //ps5初期化_2
            }
            $(function(){
                $('p').css('color', 'red').hide('slow');  //例:やりたい処理
            });
    </script>
</body>

・例:https://p5js.org/examples/

 

 

 

 

dat.GUI

・概要:アニメーションのパラメーターを対話的に変化させることができる

・公式サイト:https://github.com/dataarts/dat.gui

チュートリアル http://workshop.chromeexperiments.com/examples/gui/#1–Basic-Usage

・知識 – 環境:JavaScript

・始め方:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js"></script>  //アニメーション併用
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.2/dat.gui.min.js"></script> 
    <script>
        'use strict';  //厳密なエラーチェック

        var myBox;  //宣言

        function MyBox() {  //オブジェクト
            this.w = 100; this.h = 100; this.d = 100;
        }
        function setup(){  //ps5初期化_1
            createCanvas(400, 300, WEBGL);  //WEBGL - 3D画像
            myBox = new MyBox();  //インスタンス
        }
        function draw(){  //ps5初期化_2
            background(180);  //グレー
            rotateX(frameCount * 0.01);  //回転させる X軸
            rotateY(frameCount * 0.01);  //回転させる Y軸
            noFill;  //塗り無し
            stroke(255);  //白線
            box(myBox.w, myBox.h, myBox.d);  //3D
        }
    </script>
</body>

参照:https://dotinstall.com/lessons/basic_datgui/43703

 

 

 

 

enchant.js

・概要:国産のゲーム開発フレームワーク。PCでもスマホでも動作するマルチプラットフォーム。

・公式サイト:http://enchantjs.com/

・知識 – 環境:HTML5、CSS、JavaScript

・始め方:http://enchantjs.com/download/ からダウンロードを施行・展開してフォルダを作成するのが手始め。

[main.js]

enchant();
window.onload = function() {
    var core = new Core(320, 320);  //Coreオブジェクト 描く空間
    core.preload('chara1.png');  //画像ファイルの中の左上の画像から読み込む
    core.fps = 11;  //フレーム数
    core.onload = function() {
        var bear = new Sprite(32, 32);  //キャラ部品オブジェクト
        bear.image = core.assets['chara1.png'];
        bear.x = 0;
        bear.y = 0;

        bear.addEventListener('enterframe', function() {
            this.x += 10;  //x座標移動
            if (this.x > 320) this.x = 0; //描写のループ
        });

        core.rootScene.addChild(bear);
    }
    core.start();  //ゲームスタート フレームカウントアップ
};

参照:https://dotinstall.com/lessons/basic_enchant_js_v2/11504

 

 

 

 

Underscore.js

・概要:JavaScriptの簡易な書法。

・公式サイト:https://underscorejs.org/

Underscorejs

・知識 – 環境:JavaScript

・始め方:[GitHub Repository]→[Clone or download]からダウンロードを施行・展開してフォルダを作成するのが手始め。

    <script>
        (function(){
            var = x;
            x = _([2, 8, 10, 3]).shuffle();  //この1行だけでシャッフルを実現
            console.log(x);
        })();  //即時関数の締メ
    </script>
</body>

参照:https://dotinstall.com/lessons/basic_underscorejs/22302

 

 

 

 

Arctic.js

・概要:スマートフォンブラウザ向けのゲームを作るためのフレームワーク。スマートフォンのアプリは作れない。

・公式サイト:http://arcticjs.com/

・知識 – 環境:JavaScript、HTML5

・始め方:公式サイト[Download]から Arctic.js をダウンロードし、htmlファイルにて取り込む。

 

 

 

 

React

・概要:Facebookが開発する、UI(User Interface)を作るためのJavaScriptライブラリ。DOM操作を通して画面の見た目を変えることに特化。

・公式サイト:https://reactjs.org/

・知識 – 環境:JavaScript

・始め方:「react developer tools」で検索 → Chrome拡張機能を追加。

公式サイト[DOCS] → [INSTALLATION] → [Try React] → 「Minimal HTML Template」 → 「download this HTML file」 →  雛形をコピペ。

    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>  //React本体
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>  //演算結果をDOMに反映させる
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>  //JavaScriptの新しい文法
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        (() => {
            const name = 'toyotomi';
            ReactDOM.render(
                <p>Hello React!!! {name.toUpperCase()}!</p>,  //第1引数
                document.getElementById('root')  //第2引数 表示させる場所
            );
        })();

    </script>
</body>

参照:https://dotinstall.com/lessons/basic_reactjs/44403

 

 

 

 

 


【フレームワーク】

Node.js

・概要:軽量で効率的に動作する非同期型のイベントループモデル。Apache等のスレッドモデル thread model よりもリクエストを大量に捌ける。

・公式サイト:https://nodejs.org/en/

Node.js

・知識 – 環境:HTML、JavaScript、MongoDB、Linux commands

Grunt:Node.jsを利用した、cssやJavaScriptの圧縮等のタスクスクリプト化ツール。

LESS:Node.jsのパッケージマネージャーで提供される、CSSを効率的に記述するツール。

EXPRESS:Node.js用のWebアプリケーションフレームワーク。

Socket.IO:Node.jsで動く、WebSocket(サーバーとブラウザ間の双方向通信)周辺の技術を便利に扱うためのライブラリ。

 

 

 

 

Angular

・概要:Googleが開発する、サーバーと連携する機能もあるJavaScriptフレームワーク。自動処理や双方向データバインディングによってより少ないコードでマルチプラットフォームで機能実現が図れる。

・公式サイト:https://angular.io/

Angular

・知識 – 環境:Node.js 6.9.0以上

・始め方:Node.js、Angular CLIをインストール。

sudo apt install -y curl
curl -sL https://deb.nodesource.com/setup_7.x | sudo -E bash -
sudo apt install -y nodejs
npm install -g @angular/cli

(jQueryとAngularは同じJavaScriptではあるが、考え方が違う部分があり、同時使用時に干渉するケースがある。)

参照:https://www.sejuku.net/blog/9019

 

 

 

 

Vue.js

・概要:JavaScriptでUI部品を作る。UIとの双方向データバインディングができる。

・公式サイト:https://jp.vuejs.org/index.html

・知識 – 環境:JavaScript

・始め方:body閉じタグの直前に<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>を記述する。

参照:https://dotinstall.com/lessons/basic_vuejs_v2/43901

 

 

 

 

layer.js

・概要:アニメーションを伴ったさまざまなUIが実装できるスクリプト。スクリプトやスタイルシートに依存性はなく、React、jQuery、VueJS、Angularのライブラリやフレームワークと共に利用できる。

・公式サイト:https://layerjs.org/?gclid=Cj0KCQjw37fZBRD3ARIsAJihSr3rCgpd1jQ6R3zCfGlYFxdu-PH0nvpgdu1hkWrqz8TKo6NP1B6NMAoaAvJTEALw_wcB

・知識 – 環境:JavaScript

・始め方:headタグ内に<script src="http://cdn.layerjs.org/libs/layerjs/layerjs-0.5.2.min.js"></script>
<link href="http://cdn.layerjs.org/libs/layerjs/layerjs-0.5.2.css" type="text/css" rel="stylesheet" /></code>
を記載。HTMLにdata属性を与える。

参照:https://coliss.com/articles/build-websites/operation/javascript/ui-composition-animation-in-pure-html.html

 

 

 

 


CodeCamp

EngineeringJavaScript, 備忘録

Posted by Qawai