こんにちは。きんくまです。

前回各ライブラリの感想を書く前に終わってしまいましたが、今回はようやく本編でございます。
>> [JavaScript] Vue.js / React / AngularJS の個人的な感想 – 前編

概要

Vue.js
・html/css/js のファイルを分けられる
・トランジション（アニメーション）が柔軟に書ける
・親子関係以外のイベントの受け渡しが可能 – (new Vue()).$emit
・ES6で書く
・cssはグローバル、スコープと分けて定義できる
・webpackの設定で詰まった時があった（これをこうして書き出したいのに！！みたいのをするのに時間がかかった）

React
・jsx の中にテンプレート（html部分）とjs部分を同時に書く
・ES6で書く
・関数型プログロミングの影響が強い
・3つの中では一番機能を絞っているのでシンプル。わりとすぐに使える
・cssは扱わない

AngularJS
・html/css/js のファイルを分けられる
・htmlの記法でちょっと見慣れないところがあるが（ ()や[]のバインディング ）、慣れると一目でデータの方向がわかるので便利
・3つの中では一番巨大なライブラリ。全部入り
・TypeScriptで書く
・cssはコンポーネント単位で閉じている

プログラム言語について
ES6だったり、TypeScriptというのは、ライブラリ側が基本プランとして想定している言語です。
ReactをTypeScriptで書いたりすることもできますが、とても面倒くさかったです。
基本的に、ライブラリで想定している言語をそのまま使ってあげた方が良いかと思います。

私は前からTypeScriptを使っていたので、当初ReactやVueをTSで書こうとしましたが、いろいろと設定が難しくあきらめました。
ES6はTSからちょうど型定義を抜かしたような形になっているので、移行も簡単です。

ライブラリの大きさ順に並べると
React < Vue.js << 壁 << AngularJS

という感じです。

これだけ書いてもよくわからないと思うので、ここからは個人の感想でございます。
好き嫌いが多分に含まれるので、気分を悪くした方がいれば申し訳ございません。

この投稿の続きを読む »

Tweet

Pocket

後編かきました
[JavaScript] Vue.js / React / AngularJS の個人的な感想 – 後編

—–

こんにちは。きんくまです。

今回は以下の3つのライブラリの個人的な感想です。

・Vue.js
・React
・Angular2

一通りチュートリアルが終わって、簡単なTodoアプリを作ってみたぐらいの理解度です。
全てをがっつり使い込んだわけではないので、それぞれのマスタークラスの人だとまた違った感想が出てくると思います。

そもそも何をするライブラリなの？

これらのライブラリはいろいろと機能はありますが、自分的にざっくりいってしまうと「コンポーネントを作れる」というのが一番のポイントだと思っています。
コンポーネントって何なのかといいますと、「ある機能をもつhtmlの独自タグ」みたいな感じです。

この投稿の続きを読む »

Tweet

Pocket

こんにちは。きんくまです。

前回はCanvasに書きだしたアニメーションの再生・停止をおこないました。

>> [Animate|Flash] Flashで作ったものをAnimateのCanvasで書き出して、再生・停止をplay/stopで制御したい

今回は複数のアニメーションのきりかえをしたいです。

結論からいいますとできました。
fla1, fla2 ボタンできりかえます。

パブリッシュ設定の namespace 部分がポイントで、各flaファイルごとに別々となるようにこれを変更してあげれば、ライブラリのシンボル名が同じであっても書き出した後にぶつかる（置き換わってしまう）ことがありませんでした。

あとは、普通に new してあげれば大丈夫です。

	fla1Button.addEventListener('click', function(){
		stage.removeChild(exportRoot);
		exportRoot = new lib.flash1_Canvas();
		stage.addChild(exportRoot);	
	});
	fla2Button.addEventListener('click', function(){
		stage.removeChild(exportRoot);
		exportRoot = new lib2.flash2_Canvas();
		stage.addChild(exportRoot);	
	});

>> ファイル一式です

そんな感じでした。

Tweet

Pocket