2014/08/19 このエントリーをはてなブックマークに追加 はてなブックマーク - 【JavaScript】なんとか.jsのお話(Backbone.js、AngularJS、Node.js、altJS、Underscore.js、prototype.js....etc)

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









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


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




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


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


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


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









  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"は増える原因になっていると思います。





さて、ようやくですが。
具体的に"なんとか.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



    6 件のコメント:

    1. var value = false;
      if ( value ) {
      は通りませんよ

      返信削除
      返信

      1. >匿名さん

        あ、ホントですね(笑)
        一応、動作確認して書いたつもりだったんですが、間違えてしまいましたorz

        内容修正させていただきましたー。

        削除
    2. Javascript とか JQuery とか色々気になる表記が沢山ありますが…。

      それはさておき、テンプレートエンジンに Underscore.js 入れるのは無理があるような…。確かに template という関数はありますが、それはあくまでも一部であってメインはそれじゃない…。
      それからテンプレートエンジンの説明が怪しい。 JavaScript なら Jade とかは静的な HTML をデータとテンプレートから生成しますし、 Ruby 界隈なら Haml/Slim といった実行時にテンプレートとデータを結びつけるものがありますけど( Java にもありますよね! )、少なくとも JSON や配列を操作/走査するものではないような。

      jQuery で全部出来るとして jQuery で全部やるのがダメな理由がよく分からないので、もう少し説明が欲しいかも。なんとなく jQuery ダメって言ってるように聞こえます。

      GUI の部分は HTML5 になってから Date/Time picker とか標準で使えるので一部誤りがありますね。「HTML 標準ではない」。

      「(静的型付けに慣れてないだけかもしれないですが)」動的?
      あと「皆さんが想像するJavaScriptというのは、代替がクライアントサイドのモノです。」タイポですね。代替。

      これはどっちも同じなので通りますよね…。
      if ( boolObj ) {
      // 通ります
      }
      if ( boolObj ) {
      // 通りません
      }

      個人的な感覚値としては node.js 以降、 "なんとか.js" 増えたという印象があるんですが( npm でライブラリを簡単に配布出来るようになった)、人によって感じ方が違うんですかねー。昨今の MVC フレームワークの乱立という意味なら間違いなく SPA ですけど。
      あと "なんとか.js" で名前に js が入ってなくてもいいならテスティングフレームワークとかそのへんが完全に度外視されてる気がする。Jasmine とか。
      phantom.js とかも "なんとか.js" の名前規則に当てはまるんですが、 alt.js があるならこの子も入ってて良さそうな気もする。

      返信削除
      返信
      1. >あやぴーさん
        なんだかコメントもらってばかりですみません^^;

        >Javascript とか JQuery とか色々気になる表記が沢山ありますが…。
        ですよね〜。。。ずっと気になってはいたんですが。直しました!出来るだけ!

        >それはさておき、テンプレートエンジンに Underscore.js 入れるのは無理があるような
        >テンプレートエンジンの説明が怪しい
        僕もそう思います。なんで、この記事書いた時なにも疑問を持たなかったんだろう、、、馬鹿だなぁッて感じです(><)
        そして、自分の記憶を辿ると、この記事を見てそのまま鵜呑みにしたんだなぁと思いだしました。
        http://www.buildinsider.net/web/popularjslib/2015
        しかも僕の独自解釈が激しい。

        >jQuery で全部出来るとして jQuery で全部やるのがダメな理由がよく分からないので、もう少し説明が>欲しいかも。

        最後に追記しました。僕自身あんまり良い印象持ってないから
        そういうニュアンスが出てしまってるかもしれません。
        ただ、ダメなものとは思ってないんですが、、
        そこらへんをなんかフェアに表現する文章能力がほしいですね。




        >GUI の部分は HTML5 になってから Date/Time picker とか標準で使えるので一部誤りがありますね。
        マジですか。訂正入れときました。

        >「(静的型付けに慣れてないだけかもしれないですが)」動的?
        >タイポですね。代替。
        そうですね。どっちも間違えちゃってました…!
        こっそり直しました。

        >これはどっちも同じなので通りますよね…。
        これは完全に僕馬鹿ですね。なんか書き間違えてる。。。
        直しましたが一応動作確認したし大丈夫なはず!(混乱中)

        >個人的な感覚値としては node.js 以降、 "なんとか.js" 増えたという印象がある
        あー、たしかに。そこの流れも大きいですよね。あまり追いかけられてる訳でもないので
        微妙なんですがなんとなく分かる気がします。

        >昨今の MVC フレームワークの乱立という意味なら間違いなく SPA ですけど
        そうですね。乱立したところってなんなんだろ、ところがこの記事書く動機だったような気がします。

        >"なんとか.js" で名前に js が入ってなくてもいいならテスティングフレームワークとかそのへんが完全に度外視されてる気がする。Jasmine とか。

        あえて末尾が.jsとかJSなもの縛りにしてますw
        ちょっとネタっぽく書き始めたのもあって、、というとなんか怒られそうですが。

        テスティングフレームワークは確かに無かったですねー。
        一応追記しました。

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

      返信削除
    4. >cocoatomoさん

      たしかにSencha Touch 2はMVCベースのようですねぇ。
      公式サイトで確認しなおしたらそう書いてありました。
      勉強不足でしたー(* *)
      この記事にも追記をしておきました!

      返信削除