【JavaScript】なんとか.jsのお話(Backbone.js、AngularJS、Node.js、altJS、Underscore.js、prototype.js....etc)

　jsって多すぎない？

今回は、JavaScriptってなんかよく分からないけどいっぱいあるよねってお話です。


エントリのタイトルにも入れましたが、
Backbone.js
AngularJS
Node.js
altJS
Underscore.js
prototype.js




などなど、"なんとか.js"というのはたくさんあります。


それぞれに技術の歴史的な文脈というのはあるんですが、
僕としてはSI業界に入ったときにはあふれんばかりにjsが現れて
ナニガナンダカです。


そこで、今回はJavaScriptの変遷を見て、
氾濫している（ようにみえる）JavaScriptを整理してみようという試みです。


まず、歴史的なところから、簡単に。

　なぜ"なんとか.js"は増えたのか

　　Ajaxの登場（2005年以降）

よくある話ではありますが、Ajaxという非道期通信処理技術が
発展するにつれて、JavaScriptは注目を集めるようになりました。


それ以前は、画面描画に関しても全てをサーバー通信に任せるような
（ボタンを押すたびにページのリロードを行う）スタイルが主流でした。
Ajaxの登場により、画面の処理に関してはJavaScriptで殆ど可能となりました。



Ajax以前はJavaScriptはサーバーサイドで出来ないことをやる
「おまけ」的な言語だったんじゃないでしょうか。
（プログラマーによってはその名残を感じる人はよくいます。）

　　RIAからSPAへ

RIAからSPAへという流れが起こっている昨今、JavaScriptは注目され
"なんとか.js"は次々と現れてきています。



RIAってなに？

RIA（Rich Internet Application）とは柔軟なインターフェースを持った
Webアプリケーションでユーザーエクスペリエンスや豊富な機能などを重視したうんぬんかんぬんです。
簡単に言うと、サイトにすんげー機能を入れようという感じです。
代表的なもので言うと「フラッシュ」や「Javaアプレット」などが分かりやすいと思います。
2000年代に一世を風靡し、今は廃れている感じにあります。
こればっかりは時代の流れなのでしょうがない。


SPAってなに？

SPA（Simple Page Application）とは、単一のページで全てが完結してしまうようなアプリケーションです。
最近の流行りで言うと、TwitterやFacebookなどもそうですね。


RIAからSPAへの流れは携帯端末の普及などの影響も大きいです。
RIAは確かに高機能ではありますが、端末への負荷が高く、ハイスペックなものが要求される傾向にあります。
一方でSPAは軽量で操作性が高い思想であるため、市場とマッチしていると言えます。
（ジョブズがFlashだせぇと言ったとかそういう影響もあるとは思います（笑））



ちょっと横道に反れましたが、SPAの影響で"なんとか.js"は増える原因になっていると思います。

　JavaScriptの種類

さて、ようやくですが。
具体的に"なんとか.js"をそれぞれ分類していきましょう。

　　MVCフレームワーク

AngularJS
Knockout.js
Sencha Touch2


Model - View - Controllerですね。
こういうものが出てくるというのは、完全にサーバーサイドでやっていた事が
クライアントサイドに移行してきているともとれます。前述したSPAの思想が
色濃く出ているところでもあります。
画面の処理がクライアント側だけで行えるようになってきたのです。


クライアント側で細かな状態管理、パラメータの受け渡し、UIやエレメントの操作などが行われる以上
必然と言えます。



※Knockout.jsに関しては、厳密にはMVVMです。大きい分類としてMVC枠に分けました。
けど、この分け方もなかなか雑い。。。

　　DOM操作ライブラリ

jQuery
prototype.js(Prototype JavaScript Framework)


などが代表的です。

イメージしやすい、クライアントサイドのJavaScriptです。
ただ、jQueryに関しては、ライブラリが広大すぎて、分類するのが難しいところではあります。
もっと広い範囲の機能を持っているという表現が正しいかもしれません。


そのあたりが、扱う上で危ない点というか。
jQueryで（限りなく）何でも出来てしまうがゆえに、jQueryで何でも解決しようとするというか。

　　GUIライブラリ

jQuery(Mobile)
Sencha Touch2
Dojo


など。リッチなユーザーインターフェースを提供するJavaScriptライブラリです。
HTML標準ではない、drag and dropやタイムピッカー、グリッド、フォルダツリー、アニメーションなどなど。
ユーザーの使いやすい？かっこいい？イケてる？ものを作るときに便利なものです。



2015/06/20追記
Date/Time picker とかはHTMLで使えると。。知らなかったー。


2015/06/22追記

Sencha Touch 2 は、独自のクラス機構を持ち MVC という標準のクラス構成が規定された Web アプリケーションフレームワークです。なので、MVC フレームワークに分類するのが適当かなぁ、と思いました。
（ここで言うクラス機構は、JS のクラス機構とは全く別のものです。）

そもそもGUIライブラリって分類に無理があったんじゃないか疑惑。
SenchaもDojoもMVCベースの部分がありますし。。

GUIとかのいい感じのやつを雑に分類してしまったけど、
それだけをフレームワークとして持ってるわけじゃないですからねぇ…。

　　テンプレートエンジン

Underscore.js
Handlebars.js
mustache.js


など。 テンプレートエンジンとはデータとテンプレートを合体させ、文字列を作る仕組みのことです。
JSONや配列などの操作を行うライブラリと言ったところでしょうか。


2015/06/15追記
テンプレートエンジンって言ったらテンプレートエンジンですよね。。。
なぜ1年ぐらい前の僕はUnderscore.jsをここに分類してしまったのか。。
Underscore.jsは詳しく見れてないですけどユーティリティーとかかなぁて感じですね。
コレクションの操作とかとか。関数型っぽい
mapとかfilterとかその辺りの関数が提供されています。
雑な説明しかできない…！
かなり強力そうなUnderscore.js。
http://underscorejs.org/

　　altJS

なんたら.jsの話からは少し離れますが、
JavaScriptを分類する上で含めておきたい概念です。

簡単に言えば、altJSとはJavaScriptの代替となるJavaScript拡張言語というところでしょうか。
Alt = Alternative（代替の、代わりとなる）という意味です。


CoffeeScript
TypeScript
Dart
などがあげられます。



JavaScriptというのはなかなか軟弱というか、良い意味で言うと自由度が高い。
言語仕様をよーく理解していないとバグを出しやすいし、使いにくかったりするワケです。
そういう部分をaltJSは賄ってくれます。

これは、JavaScriptで苦労した経験のある人しか分からない事かもしれません。
特にクラスや型のサポートという点では
JavaScriptには弱さがある印象です（動的型付けに慣れてないだけかもしれないですが）。


個人的にJavaScriptで迷ったところというか、以下のプログラムとかです。
こういうのをaltJSでなんとかなったりしないかなぁとか。
思ってるだけでまだ細かく調べてはないですね。

var boolObj = new Boolean(false);

if ( boolObj ) {
    // 通ります
}
if ( boolObj  == true ) {
    // 通ります
}

if ( boolObj  === true ) {
    // 通りません
}

var primitiveBool = false;

if ( primitiveBool  ) {
    // 通りません
}

if ( primitiveBool == true ) {
    // 通りません
}

一瞬、「ん？」ってなりますね（笑）

　　サーバーサイドjs

皆さんが想像するJavaScriptというのは、大体がクライアントサイドのモノです。
document.getElementByIdでエレメントを取得して、サブミットするとか。
それとは全く異なるのがサーバーサイド.js。


サーバー側の操作をJavaScriptでやるわけですね。
代表的なのは、Node.js。


だから、「JavaScriptが得意だからNode.jsも大丈夫でしょ。」とか言われても、
決して安請け合いしてはいけません（笑）
今回のエントリではスルーしておきます。

　　テスティングフレームワークとか

2015/06/20あやぴーさんのコメント引用

あと "なんとか.js" で名前に js が入ってなくてもいいならテスティングフレームワークとかそのへんが完全に度外視されてる気がする。Jasmine とか。
phantom.js とかも "なんとか.js" の名前規則に当てはまるんですが、 alt.js があるならこの子も入ってて良さそうな気もする。

あー、たしかにphantome.jsとかはそうですよね。
JavaScriptにも当然ながらテスティングフレームワークはあります。
"なんとか.js"的なものとしてはPhantomJSがあります。
が、PhantomJS自体はテスティングフレームワークとは別みたいですね。
hidariさんとか書いてたりするので、そこ参照ということで。ぼく要勉強。
JavaScriptのテスティングフレームワーク周りを非常に簡単に眺めてみる - HIDARI日記（右）


JavaでいうところのSelenium WebDriver的なものかな？
E2Eテストとか出来そうですね。
WebDriverとGeb比べると利点ってなんかあるんだろうなぁ。気になってきた。

　まとめ

今回の話のまとめです。

AjaxとSPAが注目され、JavaScriptは流行り、"なんとか.js"も増える要因となった

Node.jsだけは別物

JavaScriptは覚えておく必要がある。今後さらにそのスキルは求められる

勉強にはなるが、ムリヤリ"なんとか.js"を使おうとするのはナンセンス

JavaScriptの方針をベースとして"なんとか.js"は使うべき。
ライブラリ独自のものとJavaScript標準の境界線が分からなくなると、バグ解析が難しくなる。

全てをjQueryとオレオレ関数でやろうとするのは大変危険です

"なんとか.js"の種類と特性を理解し、必要に応じてプロジェクトに採用すべき

altJSを使うのであればJavaScriptの初級レベルぐらいは理解する方が良いと思われる。

ざっとこんな感じです。


Backbone.jsとかAngularJSとか使いやすくて面白いんですが、
その話は別エントリとしたいと思います。



2015/06/20追記

jQueryについてなんか漠然と避難しているようにみえるってコメントもらいました。
ので補足としてちょっと個人的な偏見を書いておきます。

先に言っておくと、jQuery自体ダメだとは思ってないです。


ただ、僕としては以下の点が気になります。

・独自の記法とかを持ちすぎている
$とかpropとか、個人的に好きじゃないってだけですねこれは（笑）
JavaScriptは書き方知らないけど、jQueryなら書けますみたいな小話を
見たことがあって、なんか独自路線な気がして。
例えば、pureなJavaScriptと混ざると（例えばコンポーネントごとで使う/使わないとか。ちゃんぽんじゃなくて）
疲れそうだなとか思います

なんか上手く説明できないですけど、jQueryに僕は特殊さを感じています。

・機能が多いため、もしかしたら別のライブラリを利用する機会を逃すのではないか
「jQueryで出来るから良いでしょ？」って安易になってないかなぁっていう懸念です。
自分自身に対しても周りに対しても。もしかしたらもっと良いライブラリや機能を見逃すかもしれないかなぁと。

あと、最近だとここらへんみて僕の感じてることは近いかなぁと思いました。
jQueryは有害なのか - POSTD