フロントエンドをモダンにするための用語まとめ（４）大好評だけど、ごめんね最終回なの
こんばんは。ベル子です。
フロントエンドをモダンにするための用語まとめシリーズの最新号です。
今回はいつもに増して、長いっす。
そして一番おもしろいパートに来ました。
今までのはまとめは、実はちょっとした前菜だったのです！！
そして、フロントエンドは、さながら群雄割拠の戦国の世だということを改めて思い知りました。
ちなみに私は無双ではガラシャ推しで、三国では大喬使いです。
このシリーズのバックナンバーをご覧になりたい方は、
下のリンクより、よーよーちぇけらっちょしてみて下さい。
フロントエンドをモダンにするための用語まとめ（１）
フロントエンドをモダンにするための用語まとめ（２）
フロントエンドをモダンにするための用語まとめ（３）
フロントエンドをモダンにするための用語まとめシリーズの最新号です。
今回はいつもに増して、長いっす。
そして一番おもしろいパートに来ました。
今までのはまとめは、実はちょっとした前菜だったのです！！
そして、フロントエンドは、さながら群雄割拠の戦国の世だということを改めて思い知りました。
ちなみに私は無双ではガラシャ推しで、三国では大喬使いです。
このシリーズのバックナンバーをご覧になりたい方は、
下のリンクより、よーよーちぇけらっちょしてみて下さい。
フロントエンドをモダンにするための用語まとめ（１）
フロントエンドをモダンにするための用語まとめ（２）
フロントエンドをモダンにするための用語まとめ（３）
【MVVM】
(Model View ViewModel)
モデル、ビュー、ビューモデルからなるMVCの派生デザインパターンのこと。MVVMの特徴は、ビューとビューモデルの双方向データバインディング。
双方向データバインディングとはビューのデータとビューモデルのデータを結びつけて、どちらかが変更されたら、もう一方も更新するという仕組みのこと。
【MVW】
(Model View Whatever)
モデル、ビュー、その他の何かしらの構造を持つアプリケーションデザインパターンのこと。
Angularの開発者がMV*というフレームワークが世の中に溢れ、議論が絶えないことから、Angularはビューとモデルと何かしらで成り立つMVWフレームワークだと宣言したことに由来。
余談だが、アメリカ人は「どうでもいい」と言いたいときに"Whatever"と独特のリズムをつけて言う。長々と彼氏の自慢をされたときに「つーか、どーでもいいんだけど」というニュアンスで使う。もちろんケンカを売る言葉だが、非常によく使われる。
【underscore.js】
JavaScriptユーティリティライブラリ。JavaScriptでコーディングする際に、あったら便利な関数を拡張するライブラリ。jQueryと被っているメソッドも。
またunderscore.jsを使うことによりJavaScriptで関数型プログラミング的なコードを書くことができるらしい。
【Backbone.js】
JavaScript MV*フレームワーク。JSフレームワークの先駆けにして愛用者多数。
underscore.jsに依存。部分的にjQueryに依存。
標準では双方向データバインディングがない。
【Marionette.js】
Backbone.jsのViewまわりの機能を拡張するプラグイン。
【Stickit.js】
Backbone.jsのデータバインディング機能を強化するプラグイン。
これを使うことで双方向データバインディングができるようになる。
【Knockout.js】
先発のJavaScript MVVMフレームワーク。宣言型双方向データバインディングが特徴。
シンプルで学習コスト低め。レガシーブラウザーをサポート。
【AngularJS】
Googleが開発しているJavaScript MVWフレームワーク。
JavaScriptフレームワークと言えばAngularのことを指すと言っても過言ではない最も有名なフレームワーク。フルスタックで機能は豊富だが、学習コストが高いことで知られる。レガシーブラウザーにも対応している。1.x系と全く互換性のない2系がリリース予定という衝撃展開。
【React.js】
facebook社製で、UIに特化したJavaScriptライブラリ。MVCのViewに特化したライブラリで一方向データバインディングが特徴。コンポーネント指向。
仮想DOMの採用で、差分のみをレンダリングするため、高速な処理が可能と言われている。大規模アプリケーションのVeiw部分に使用されることを想定して作られている。
React自体はシンプルで学習コスト低めだが、Flux実装しようとすると学習コストが高くなる。ViewだけのフレームワークなのにAngularと同等のファイルサイズがある。
当初はBackboneなどのMV*フレームワークと組み合わせて使われることが多かったが、最近ではオレオレFlux実装かFluxフレームワークと組み合わせて使うのが一般的になってきた。
仮想DOMを採用しているため、DOMを直接触りに行くjQueryとの共存には、コツが要る、というよりやめたほうがいい気がする。
【仮想DOM】
Reactが採用したことで話題になった。仮想的なDOMをJSオブジェクトで構築し、そのツリーの差分を検出することで、実際のDOMでは差分のみを書き換える。こうすることによりDOMの更新や書き換える際のコストが大幅に減る。仮想DOMのみの専用ライブラリも存在する。また、レンダリング速度の問題だけでなく、素のJSでDOMを構築するためサーバーサイドでも利用できる。
Angular2では仮想DOMが採用される予定らしい。
【JSX】
XMLに似ているJavaScriptの文法拡張。Reactはテンプレート部分にこのシンタックスを使うことを推奨している。HTMLに似ているため、分かりやすい。JSXで書いた場合はJSXTransformer.jsを読み込ませるか、プリコンパイルする必要がある。JSXTransformer.jsを読み込ませるほうは変換にコストがかかるためプロダクション環境では推奨されていない。
【Flux】
MVCと比較されるfacebookの人が提唱しはじめたwebアプリケーションのアーキテクチャ概念のこと。
アプリケーションの処理フローが一方向のみに流れるデザインパターンにカッコいい名前をつけてみたということ。いわゆるObserverパターン！！
名前がカッコいいので、みんな言ってみたくなったしやってみたくなった。たぶんそんな感じで、いろんなフレームワークやオレオレ実装が氾濫した。
【Redux】
後発のFluxフレームワーク。乱立するFluxフレームワークの中で後から登場し、人気を得た。現在、Fluxフレームワークの中で一番スタンダード。だが、触ってみた人のレビューを読むと、「これってFluxなのかな？」という疑問が書かれている。公式ドキュメントにも「Fluxかと聞かれたら、YesでもありNoでもある」とある。
【Vue.js】
後発のJavaScript MVVMフレームワーク。分かりやすくシンプルなAPIと双方向データバインディングが特徴。後発フレームワークのため、先発フレームワークのいいとこどり感がある。AngularJSに影響を受けている。
IE9以上のモダンブラウザを対象としているため、ライブラリ自体も軽量。
AngularJSのようなフルスタックJSフレームワークに比べて機能は少なめだが、シンプルで学習コストが低い。他のフレームワークとの連携が考慮されている。
他に有名なMVVMフレームワークとしてKnockout.jsがある。
後発のため、日本語での解説記事は多くないが、ドキュメントが充実していてボランティアにより翻訳されている。だが個人的には、この翻訳がほぼ直訳なので、原文ドキュメントも同時に参照することをオススメする。
【Vuex】
Fluxにインスパイアされて作られたVue.js用のアプリケーションアーキテクチャ。Vuexの他に、Vue.jsで中〜大規模アプリを開発する場合、Reduxと合わせるという選択肢もドキュメントでは、提示されている。
【SPA】
シングルページアプリケーションのこと。長すぎるのでイケてる人のブログ記事などでは、ほとんどこの表記。
シングルページアプリケーションとはユーザーがWebアプリケーションを使っている間、ページ全体のロードが発生せず、単一のページで完結するアプリケーションのこと。ネイティヴアプリのような優れたレスポンスとユーザーエクスペリエンスが提供できるとして、近年、注目を集めている。
しかしSPA特有の問題として、初期ロードが遅くなる、クローラにうまくインデックスしてもらえないなどの問題がある。
【SSR】
サーバーサイドレンダリングのこと。
シングルページアプリケーションでは、初期ロード時にブラウザがJSを評価した後で、サーバからデータを取得し、それからレンダリングを開始するため、初回のロードがどうしても遅くなる。
さらにクローラはJavaScriptをブラウザと同等に解釈できないため、空のWebページとしてインデックスされてしまうというSEO上の問題もあった。
昨年の10月に、Googleが公式にAjaxクロールのための推奨構成の廃止を宣言したことにより、Google、または一般的なサーチエンジンのクローラはSPAをブラウザ並みに解釈すると伝えられたが、SPAの性質上、コンテンツの100%がクロールされるのかは実際のところ分からない。
これらの理由から初回ロード時のみ、サーバーサイド(node.js)でHTMLを構築してレンダリングさせるという解決策があり、これをサーバーサイドレンダリングと呼ぶ。
サーバーサイドレンダリングに対応しているフレームワークは、現状で、ReactやEmberなど限定されている。
【Isomorphic】
読み方はアイソモーフィック。「同形の」という意味の形容詞。フロントエンドとバックエンドでコードを共有するという設計思想を表現する際に使われるキーワード。
最近では同じ意味で、UniversalなJSと表現されることもある。どんな環境でも使えるという意味合いから。
例）Isomorphicなフレームワーク。
isomorphic化。
isomorphicでpluggableなFlux実装。
3番目を分かりやすく言い換えると、「フロントエンドとバックエンドでコードが共有できて、さらに着脱が可能な、処理フローが一方向のみに流れるアーキテクチャを採用したアプリケーション実装」ということ。
3番目はFluxibleというyahooが開発したFluxフレームワークの説明において見られる表現。
【History API】
HTML5で拡張されたブラウザの履歴情報を操作するAPI。
シングルページアプリケーションや非同期によるページ更新を行う場合、同一ページ内でコンテンツが更新されるためURLが変わらない。そのため、ユーザーが直接URLを叩いてコンテンツを読みに行ったり、ブラウザの前後ボタンを使用しての前後ページへのアクセスができなくなってしまう。それを解決するためHistory APIを使用してスクリプト上からURLを変更する。
【Reactive Programming】
オブジェクト指向プログラミング、関数型プログラミングなどと同様のプログラミングパラダイムの一つ。
パラダイムとは、ある時代に、「これがオレの考える◯◯」的なことを言い出した人に、多くの人が賛同して捲き起こる特定分野においての潮流のこと。
リンク先からの引用だが、「データフローの宣言によって、片方の変化を他方に自動で伝播させる」というのがリアクティブプログラミングの基本的な考え方で、MVVMに見られるデータバインディングの仕組みがこれに当たる。
また、リアクティブプログラミングの新たなアプローチとして近年注目されているものに関数型リアクティブプログラミング(FRP)というものがあり、リアクティブプログラミングに関数型プログラミングの思想を加えたものということのようだ。
単にリアクティブプログラミングと言った場合、こちらの関数型リアクティブプログラミングのほうを指すことが多い。
そもそも関数型プログラミング自体がよくわかっていないため、関数型リアクティブプログラミングが何なのかは、難しくてよく分からなかった。だから、知りたい人はリンク先を参照してほしい。
たぶん、非同期処理が多いとコールバック地獄に陥るし何かと面倒くさいから、そうならないためにイベントを配列のようなストリームという箱に入れて、それを使って何やかんやするよ！みたいなことだと思う。
https://html5experts.jp/ahomu/13333/
http://qiita.com/hirokidaichi/items/9c1d862099c2e12f5b0f
【FRP】
関数型リアクティブプログラミングのこと。長いので、イケてる人のブログではだいたいこの表記。
【Elm】
関数型リアクティブプログラミング言語。純粋関数型プログラミング言語Haskellをベースに作られた静的型付けされた言語。
Elmで書かれたコードはhtml/CSS/JavaScriptにコンパイルされる。
【RxJS】
.NETのReactive ExtensionsというライブラリのJS版。関数型リアクティブプログラミングJSライブラリ。JSライブラリなのでコンパイルの必要がなく読み込むだけでいい。監視可能なコレクションや配列を使って、非同期なイベントベースのプログラムを作成できるライブラリ。
http://liginc.co.jp/web/js/151272
【Bacon.js】
RxJSにインスパイアされて作られた後発のFRPライブラリ。
【Cycle.js】
RxJSに依存する一方向にデータが流れるFRPフレームワーク。仮想DOM、サーバーサイドレンダリングをサポート。一方向のデータフローということで、概念的にはFluxにも近いのかな？でもFRPなんですよね？ということで、最も私にとって何がなんだか分からないフレームワーク。
開発者はFlux Challengeという、あるお題のFlux実装を募集し検証するということをやっている。Flux実装は複数の非同期処理をエレガントに行えるのかということに疑問を持っており、それを検証しようとしている模様。
【immutable.js】
facebook社製、不変データコレクションを扱うためのライブラリ。
【PhantomJS】
コンソールから実行できるWebKitベースのヘッドレスブラウザ。ヘッドレスブラウザとはGUIのないブラウザのこと。
JSの自動テストで使用する人が多い。
【Nightmare】
PhantomJSのラッパーライブラリ。テストコードがより簡潔に記述できる。v2になり内部ブラウザがPhantomJSからElectronベースとなり視覚的にテストしている様子が確認できるようになった。
【Electron】
Githubが開発しているHTML/CSS/JavaScriptを使ってクロスプラットフォームのデスクトップアプリケーションが作成できるフレームワーク。Atomエディタのネイティヴ部分をSDKとして公開したのが始まり。オープンソースのWebブラウザであるChromiumを内蔵しているため、ランタイムのいらない独立したアプリとして動作する。
SlackのWindows版でも使われている。
ブラウザを内蔵しているためファイルサイズが大きくなる。
【Karma】
Angularチームが開発したNode.jsで動作するJSテストランナー。JasmineやMochaなどのテストフレームワークを使用してテストを行う。
【Jasmine】
Angular標準のJSテスティングフレームワーク。BDDを採用しておりRSpecと似た記法で記述する。
【Mocha】
JavaScriptテストフレームワーク。Nodeモジュールをインストールしてコマンドラインでテスト実行する方法と、htmlで読み込ませてブラウザで実行する方法がある。TDDとBDDどちらの記法でも書ける。アサーションライブラリはバンドルされてないのでお好みのライブラリを選択する必要がある。アサーションライブラリと言うのがイマイチよく分からないけど、it.should.have.('hogehoge')みたいなテストコードで出てくる表現を記述できるようにするためのライブラリっぽい。有名なのはChai、shouldなど。
【ESLint】
ES6対応のJavaScript構文チェックツール。拡張性が高く、柔軟性のあるルール設定が可能。gulpのタスクに組み込んで使える。JSHintから乗り換える人が出てきている後発のリントツール。
http://qiita.com/inuscript/items/dcf48f56d8f484c0a1a8
【CreateJS】
HTML5のCanvasを使ったアニメーションが作れるフレームワーク。
何かと紛らわしい名前のため、まとめに入れてみた。
ということで数回にわたりお送りしたフロントエンド用語まとめ、いかがだったでしょうか。途中で私のココロの声がダダ漏れしてしまうハプニングもありましたが、概ね冷静な解説ができたかと思います。
思っていたよりたくさんありましたねー。
こうやって見ているとRubyがWeb業界に与えた影響は非常に大きいですね。
あと、フロントエンドにもサーバーサイドの文化が流入してきていて、逆にサーバーサイドにもフロントエンドの文化が流入してきていて、お互いに影響を与え合っているという感じでしょうか。
昔は住む世界が違うと思ってた大嫌いなアイツ。だけど、最近はなんだかいつも気になって仕方ない。これって、もしかして恋？？ううん、絶対ちがう。でも…。
うん、一番いい時期だな。
こういうおニューな技術の動向について、少し流し読みしておくと、イケてる人に話しかけられたときに
「ああ、Electronですね！知ってますよー。マカロンよりもっちりしてて美味しいですよねー」という定番のギャグを飛ばさなくて済むし、「ヘイ、シリー」を連呼しなくていいので安心です。
(先日、飲み会で酔っぱらってSiriさんに何度も絡んだら、Siriがガチギレして、再起動するまで何の質問にも答えてくれなくなったのはここだけの秘密）
でも専門用語とか横文字とかいっぱい言うと、オタク感（本来の姿）が出てしまいやや気持ち悪いので、「えーそれなんですかぁ？ ◯◯さんて、すごく物知りでイケメンですよねぇ」って部活の後輩風に答えたほうが、ポイント高いかもしれないです。
特に女子は、優秀だけどオタクという印象を相手に与えても何もいいことないです。マニアしか釣れないです。
冗談はさておき、コードの分離に関心が集まっていたかと思うと、むしろコードを共有しようという流れがあったりと、人はいろんなことを考えるものですね。Node.jsの人気の高まりにつれ、Webアプリケーションの世界では、フロントエンドとサーバーサイドの境界はあいまいになっているのかもしれません。
ページ遷移なしに状態を保持しながら複雑な更新を行うということは、これからはフロントエンド側のコードもきちんとした設計思想に則ってオーガナイズする必要がありそうです！
フレームワークなしでやってると、どうしてもJSが「きゃー今散らかってるから、絶対見ないでぇー」な雰囲気になってきてしまいます。
そういった意味で、ハイレベルなフロントエンド開発がこれからのWebアプリケーション構築では必須になっていきそうです。
Sass、Lessもそうですが、後発が流行ったと思ったら先発が巻き返したりもしますし、Web業界の移り変わりはホントに目まぐるしいですね。
でも目まぐるしいから面白いとも言えるし、どんどん便利になっていくとも言えます。
新しいだけじゃなくて、すごいだけじゃなくて、クライアントにもエンジニアにもうれしい、そんなフロントエンド構成を選択していきたいものですね！！あと未来の自分と同僚のためにも！！
（それが弊社の社是だし）
TL;DRってまさにこういうときに使うべき。
では、また来月会おう。
