ここ数年前から2015/5までのモダンフロントエンドを総まとめしてみた


HTML5や、次々と台頭するJavaScriptフレームワークにみられるように、現在のフロントエンドは異常なほど動きがあります。

常にキャッチアップしていないと、いつのまにかOLDな技術を使い続けることになります。実際に今回記事にしてみて、ちょっとつらくなりました。。

しかし、フロントエンドエンジニアとしてコードを書いていて（最近は主にJavaScript）、そのおもしろさに日々驚いています。

そこで今回は、**ここ数年~2015年のフロントエンド界隈で一度は流行った技術、今後の動向などをまとめました**。タイトルにモダンとありますが、その辺は適当です。ぜひ一度整理してみてください。


## 目次

* Javascriptフレームワーク
	* React.js
	* Angular.js
	* Angular.js 2.0
	* Backbone.js
	* Vue.js
	* Mithril.js
	* Aurelia.js
	* Knockout.js
	* Ember.js
	* Riot.js
	* Ractive.js
	* まとめ
* ES6
* タスクランナー
* モジュール化
* パッケージ管理
* ハイブリッドアプリ
* SPA
	* 概要
	* SEO
	* HTML6
* サーバーサイドJavascript
	* Node.js
	* Express.js
	* io.js
* CSS
	* CSS3
	* 設計パターン
* アートスクリプティング
* まとめ



## Javascriptフレームワーク

まずは、みんな大好きJavascriptフレームワークについて軽くまとめます。

* <a href="http://paiza.hatenablog.com/entry/2015/03/11/Backbone_JS%E3%81%8B%E3%82%89Angular2%E3%81%BE%E3%81%A7%E3%80%81%E5%85%A89%E5%A4%A7JavaScript%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF%E3%82%92%E6%9B%B8%E3%81%8D%E6%AF%94%E3%81%B9" target="_blank">Backbone.JSからAngular2まで、全9大JavaScriptフレームワークを書き比べた!</a>
* <a href="http://yosuke-furukawa.hatenablog.com/entry/2014/07/17/011757" target="_blank">天下一クライアントサイドJS MV*レームワーク武道会を開催しました。</a>

### React.js
* 最近注目を浴びているFacebook製のライブラリで、MVCアーキテクチャでいうViewにあたる機能を提供する
* JSX、Virtual DOMという、新しいアプローチ
* MVCとは違う、Fluxという設計パターン
* <a href="http://postd.cc/from-angularjs-to-react-the-isomorphic-way/" target="_blank">Isomorphicなアーキテクチャ</a>が可能
* <a href="https://speakerdeck.com/masuidrive/reactganazesu-qing-rasiifalseka" target="_blank">Reactがなぜ素晴らしいのか // Speaker Deck</a>
* <a href="http://qiita.com/okmttdhr/items/63a9191fa2ad37dc1133" target="_blank">React.jsプロジェクト構成ベストプラクティス検討 - Qiita</a>
* <a href="https://html5experts.jp/hokaccha/13301/" target="_blank">今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference | HTML5Experts.jp</a>

### Angular.js
* Google製人気MVCフレームワーク
* フルスタックで、できないことは殆ど無い
* Yeomanなどを使うとSPAが30分位で作れてしまう（SEOは残念）
* Angular Wayともいわれるが、モジュール化がきっちりされていて、汚いコードにはほぼならない
* 実際に作ってみるのが早い
	* <a href="https://docs.angularjs.org/tutorial" target="_blank">AngularJS: Tutorial: Tutorial</a>
	* <a href="https://github.com/yeoman/generator-angular" target="_blank">yeoman/generator-angular</a>
	* <a href="https://github.com/DaftMonk/generator-angular-fullstack" target="_blank">DaftMonk/generator-angular-fullstack</a>

### Angular.js 2.0
* ES6等の最新のJavaScript規格を取り入れ、**TypeScript**をベースとし記述する
* Angular.jsとはかなり書き方が違う
* WebComopmentsを利用した、より厳密に独立したコンポーネント化を推進
* <a href="http://wazanova.jp/items/1203" target="_blank">Angular 2.0 - ワザノバ | wazanova</a>
* <a href="http://paiza.hatenablog.com/entry/2015/03/11/%E5%A7%BF%E3%82%92%E7%8F%BE%E3%81%97%E3%81%9F%EF%BC%81%E6%AC%A1%E4%B8%96%E4%BB%A3JS%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AFAngularJS2.0%E3%82%A2%E3%83%AB%E3%83%95%E3%82%A1%E7%89%88" target="_blank">姿を現した！次世代JSフレームワークAngularJS2.0アルファ版を試しみてた！ - paiza開発日誌</a>

### Backbone.js
* 単一データの管理を行うModel、複数件のモデルの管理を行うCollection、画面の管理を行うViewを組み立てていく
* Backbone.js自体は構造化の仕組みがなく、フレームワークとしてMarionette.jsと一緒に使われることが多い
* 事例が案外多い（Buffer、Soundcloud、Trello、Qiitaなど）
* <a href="http://www.cyokodog.net/blog/backbone-js/" target="_blank">Backbone.js ではじめるクライアントサイド MVC プログラミング | CYOKODOG</a>

### Vue.js
* MVVM
* 作成したUIコンポーネントを組合せてページを構成することを前提にしている
* 似ているといわれるが、AngularJSと設計思想は全く異なるもの
* 理解しやすいフレームワークとして有名
* <a href="http://qiita.com/okmttdhr/items/58be840c3cc64c5ff460" target="_blank">Vue.js on Railsパーフェクトガイド - Qiita</a>

### Mithril.js
* Mercuryとともに、スピードがかなりはやいフレームワーク
* <a href="https://speakerdeck.com/yosuke_furukawa/mithril-dot-js" target="_blank">mercury/mithril.js // Speaker Deck</a>

### Aurelia.js
* ES6、ES7なシンタックス
* GoogleでAngularJSの開発に関わっていたRob Eisenbergさんが開発した
* <a href="http://paiza.hatenablog.com/entry/2015/03/02/AngularJS%E3%81%AF%E3%82%82%E3%81%86%E5%8F%A4%E3%81%84%EF%BC%9F%E6%9C%AA%E6%9D%A5%E5%BF%97%E5%90%91%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AFAurelia.JS%E3%82%92%E8%A9%A6%E3%81%97" target="_blank">AngularJSはもう古い？未来志向フレームワークAurelia.JSを試してみた！ - paiza開発日誌</a>

### Knockout.js
* MVVM
* Bindingに特化したフレームワーク
* 機能は少ないが、導入するのが容易で、学習コストも低い
* <a href="http://qiita.com/okmttdhr/items/72e302e0dec423033a9e" target="_blank">MVC(MVVM) JS フレームワークの中でKnockoutJsを選んだ理由 - Qiita</a>

### Ember.js
* <a href="http://gihyo.jp/dev/serial/01/emberjs/0001" target="_blank">第1回　Ember.jsの世界：実践入門 Ember.js｜gihyo.jp … 技術評論社</a>

### Riot.js
* <a href="http://qiita.com/cognitom/items/fb1295f3f93911e9e92d" target="_blank">Riot.js 2.0 を触ってみた — まだReactで消耗しているの? - Qiita</a>

### Ractive.js
* <a href="http://qiita.com/morisuke/items/640ba52a4acb0a6bdfc2" target="_blank">RactiveJS - 今すぐ使えるRactive.js入門 - Qiita</a>

### まとめ

ざっと書いただけでこれなので、多すぎます。特にこだわりのない方は、上から5つくらいを覚えておけば普通にアプリケーションをつくる上では困ることはないと思いますので、残りは、参考程度にしてください。




## ES6

次に、次世代のフレームワークに続々採用されている、**ES6**を紹介します。

**ES6とはECMAScript 6のことで、Javascriptの標準言語<a href="http://ja.wikipedia.org/wiki/ECMAScript" target="_blank">ECMAScript</a>の次期標準仕様となります**。

`class`機能などが導入され、これまでのJavascriptとは大きく変わります（**Angular.js 2.0**の開発チームも採用した**Typescript**は、ES6の構文を積極的に取り入れています）。JavaScriptフレームワークなんて、何個か覚えておけばいいと書きましたが、ES6の流れを汲み取っているかは注意してみておいたほうがいいと思います。

現状ES6を実行しても動かないので、<a href="https://babeljs.io/" target="_blank">Babel</a>や<a href="https://github.com/google/traceur-compiler" target="_blank">Traceur</a>をつかってコンパイルする必要がありますが、今後、遠くない未来にES6標準がくるので今のうちに取り入れたいですね。

* <a href="http://techlife.cookpad.com/entry/2015/02/02/094607" target="_blank">ES6時代のJavaScript - クックパッド開発者ブログ</a>
* <a href="http://yoshiko-pg.github.io/slides/20150425-jsfes/" target="_blank">Hello, ES6 ~これから迎えるJSのミライ~ - @yoshiko_pg</a>



## タスクランナー

### Gulp

タスクランナーは、フロントエンドの様々な面倒事を自動化できるツールです。これなしのフロントエンドはもはや考えられない気がします。

* <a href="http://ics-web.jp/lab/archives/3290" target="_blank">5分で導入できる！タスクランナーGulpを使ってWeb制作を爆速にしよう</a>



## モジュール化

概要は以下をみればわかると思います。

* <a href="http://tsuchikazu.net/javascript-module/" target="_blank">JavaScriptのモジュール管理(CommonJSとかAMDとかBrowserifyとかwebpack)</a>
* <a href="http://yutapon.hatenablog.com/entry/2014/12/06/123000" target="_blank">gulp.jsを使ってフロントエンドのビルドをする【webpack, stylus】 - yutaponのブログ</a>
* <a href="http://blog.uu59.org/2015-01-03-browerify-webpack.html" target="_blank">browserifyとwebpack</a>
* <a href="https://www.google.com/trends/explore#q=Webpack%2C%20Browserify&cmpt=q&tz=" target="_blank">Google Trends -  webpack vs browserify</a>

BrowserifyとWebpackに関しては、タスクランナーと同じく、できることに大差はありません。Webpackが後発ですが、最近の新しいプロジェクトとかだとWebpackの採用事例も増えてきています。

また、**Browserifyが単一のJSファイルを出力するのに対して、Webpackは複数のJSを出力するのが容易**、かつ、**BrowserifyはGulpなどと組み合わせて使うのが一般的ですが、Webpackはそれがなくてもけっこうフルスタック**でビルドができます。

新規でアプリを作る際はWebpackにするのがいいかなあと思います。



## パッケージ管理
概要は以下の記事が詳しいです。

* <a href="http://havelog.ayumusato.com/develop/others/e630-npm_meets_frontend.html" target="_blank">npm とフロントエンドのパッケージ管理の未来 ::ハブろぐ</a>

パッケージ管理は、npm・Bowerで行います。簡単にいうと、npmが主にNode.jsの世界であるのに対して、Bowerはブラウザの世界で動くライブラリを管理します。

最近は、**「CommonJSスタイルでモジュール管理=>ビルド」**の流れでJavaScript開発をするのがデフォとなってきているので、**npm&Webpack(Browserify)でソースを管理し、`require('パッケージ名')`して読み込む**、というパターンに落ち着く気がします。

Angular.js 2.0やReact.jsなど、ES6の流れをくんでいるスクリプトは、Node.jsの世界で完結させることができるので、今後Bowerは使いドコロが減ってゆきそうです。



## ハイブリッドアプリ
ハイブリッドアプリか、ネイティブアプリか？という話は<a href="http://readwrite.jp/archives/21539" target="_blank">宗教チック</a>になるのでここではしません。

いつの間にか多すぎるほどできていて、気になるものはたくさんありますが、安心できそうなのは、**Ionic、React Native、Meteor**あたりでした。

弊社ではReact Nativeでのアプリ開発がスタートしていて、さわり始めたばかりでいうのもアレなのですが、React.jsがさらに勢いをました場合、Webからモバイルまで同じ言語で動くものをつくれるというのはすごいのではないかな、と思います。実際にReact.jsでの開発と並行しても、頭のスイッチコストがかなり低いです。

以下適当にリストアップします。

* <a href="https://facebook.github.io/react-native/" target="_blank">React Native</a>

	* <a href="http://qiita.com/naoya@github/items/ecda4d3089902dcbea53" target="_blank">React Native ファーストインプレッション - Qiita</a>
	* <a href="http://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript" target="_blank">Introducing React Native: Building Apps with JavaScript</a>
* <a href="https://www.meteor.com/" target="_blank">Meteor</a>
	* フロントからバックエンドまでフルスタック。
	* フォルダ構成などが綺麗
	* <a href="http://docs.meteor.com/#/basic/buildingmobileapps" target="_blank">*Once you've built your web app with Meteor, you can easily build a native wrapper for your app and publish it to the Google Play Store or iOS App Store with just a few commands*</a>
* <a href="http://ionicframework.com/" target="_blank">Ionic</a>
	* Angular.js製
	* React Nativeがでていなければこれを使っていたと思う
* <a href="https://www.nativescript.org/" target="_blank">Native Script</a>
	* 最近話題に
* <a href="http://reapp.io/" target="_blank">Reapp</a>
* <a href="https://tabrisjs.com/" target="_blank">Tabris.js</a>
* <a href="http://ja.onsen.io/" target="_blank">Onsen UI</a>
* <a href="http://phonegap.com/" target="_blank">PhoneGap</a>



## SPA

### 概要

**Single Page Application**の略で、JavaScriptフレームワークのおかげで、開発コストが大きく下がったアプリケーションアーキテクチャのひとつです。

* <a href="http://blog.mitsuruog.info/2014/01/spa7.html" target="_blank">SPAを構築するときに知っておいた方がいい7つの課題</a>
* <a href="http://albatrosary.hateblo.jp/entry/2014/01/15/121608" target="_blank">「SPAを構築するときに知っておいた方がいい7つの課題」は課題ではない</a>
* <a href="http://qiita.com/yamazaki/items/f2aceb3f293e31e8ed60" target="_blank">SinglePageApplication - SPA Single Page Applicationを作る際のエトセトラ(入門的な取っ掛かり情報) - Qiita</a>

### SEO

Angular.jsでは、SEOが問題になったりしましたが、React.jsのServer Side Renderingでそれが解決されるかも、とのこと。

* <a href="http://blog.risingstack.com/from-angularjs-to-react-the-isomorphic-way/" target="_blank">From AngularJS to React: The Isomorphic Way</a>
* <a href="http://qiita.com/mizchi/items/dca6b82349e811a24158" target="_blank">reactjs - Reactでサーバーサイドで生成したHTMLに対してDOMを初期化せずにReactComponentとして状態を更新する - Qiita</a>
* <a href="https://speakerdeck.com/hokaccha/react-rails-1" target="_blank">react-rails // Speaker Deck</a>

### HTML6

<a href="https://lists.w3.org/Archives/Public/public-html/2015Mar/0066.html" target="_blank">こちらの記事</a>では、HTML6での「JSなしのSPA」について述べられており、議論をうみました。

* <a href="http://www.infoq.com/jp/news/2015/04/html6-without-javascript" target="_blank">"JavaScriptを使わないシングルページアプリ"に対する非公式なHTML6提案が議論を引き起こした</a>



## サーバーサイドJavascript

### Node.js

まだ動きの激しいところとして、サーバーサイドJavaScript（Node.js）があります。

* <a href="http://blog.anatoo.jp/entry/20110615/1308147251" target="_blank">Node.jsがどうして注目されているのか、もしくはどうして他のサーバサイドJavaScriptはスルーされているのか - id:anatooのブログ</a>

JavaScriptなだけあって、非同期な処理をすぐに実装することができるので、**リアルタイムなWeb**をつくるときや、**JSONを扱うAPIサーバー**として使うのに向いています。

### Express.js

だいぶ前にMEAN StackのEとして話題に上がった、Node.jsのフレームワーク**Express.js**があります。RESTfulなAPIがシンプルに記述できます。

* <a href="http://www.atmarkit.co.jp/ait/articles/1503/04/news047.html" target="_blank">MEANスタックで始めるWebアプリ開発入門（3）：Node.jsのMVCフレームワーク「Express」の基礎知識とインストール (1/3) - ＠IT</a>

### io.js

Node.jsの話に欠かせないのが**io.js**です。こちらもアンテナを張っておきたいところです。

* <a href="http://yosuke-furukawa.hatenablog.com/entry/2015/05/13/100832" target="_blank">Node.js と io.js の統合は最終局面へ - from scratch</a>



## CSS
### CSS3
これまでJavaScriptでやっていたことが、次々にCSSでできるようになっています。

例えば、**アニメーションにおいては、主要なJavaScriptフレームワークにおいても、すでにCSSが基本**となっていて、**GPUで処理されているため、処理能力の低いデバイス（スマホなど）でも滑らかに動きます**。

また、3DなどをJavaScriptなしで実装できるのも、WebGLがモバイル対応していない機器が多いいまは助かります。

今後、より様々な技術がCSSでできるようになっていくのは間違いありません。

* <a href="http://webgl.souhonzan.org/entry/?v=0202" target="_blank">CSS の極致！ 絶滅危惧種の動物たちを表現した In Pieces がすごい！</a>
* <a href="http://wild.as/timbre" target="_blank">Matrixをつかったサイト｜WILD - Timbre</a>
* <a href="http://design.kayac.com/topics/2011/06/css-programing.php" target="_blank">どう考えても無茶な「CSSプログラミング」が話題に</a>
* <a href="http://ginpen.com/2013/12/06/hardware-acceleration/" target="_blank">スムーズなアニメーションを実装するコツと仕組みを説明するよ。CPUとGPUを理解しハードウェアアクセラレーションを駆使するのだ！</a>
* <a href="http://codepen.io/johnblazek/full/nceyw" target="_blank">3Dでできたカルーセルのデモ</a>

### 設計パターン
CSSの壊れやすさに関してはまだ進化しているとは残念ながらいえないと思います・・・。しかし、多くの概念やフレームワークが登場し、開発は楽になっています。

#### 設計

設計方法でいうと以下が有名です。どれも共通しているのが、**CSSに構造を持たせて（プログラムのオブジェクト指向のように）設計しなさい**ということです。なかでも簡単に導入できるのが**BEM**で、オレオレで設計するくらいなら絶対に入れるべき設計方針だと思います。

* BEM
	* <a href="http://chroma.hatenablog.com/entry/2013/12/15/165511" target="_blank">SMACSS に BEM を取り入れよう - CHROMA</a>
* OOCSS
	* <a href="https://app.codegrid.net/entry/oocss-1" target="_blank">知っておきたいHTMLテンプレート設計法 - OOCSSの基本 | CodeGrid</a>
* SMACCS
	* <a href="https://app.codegrid.net/entry/smacss-1" target="_blank">SMACSSによるCSSの設計 - ベースとレイアウト | CodeGrid</a>

#### メタ言語

CSSを効率的にコーディングできるように拡張されたメタ言語が、**SCSSとLESS**になります。特にこだわりがないのであればSCSSを使うのがよいと思います。

* <a href="http://d.hatena.ne.jp/nenjiru/20111101/css_scss_less" target="_blank">SCSSとLESSのどちらを導入するか迷って、SCSSに決めたポイント - 眠る前に布団にはいろうか</a>
* <a href="http://www.abe3.net/2013/05/scss-recommend/" target="_blank">SCSSを使ってあまりの便利さに素のCSSを書く気がしなくなりました</a>

#### Compass

**SCSSをさらに使いやすくしたフレームワークで有名なものがCompassです。**Compassを使うと、便利なmixin群、スプライト自動作成、プロジェクトごとに設定ファイルを適用するなど、多くの機能を使うことができます。

mixinが使えるのはいいですね。他にも、mixinが使えるライブラリは、Rails gemの<a href="http://bourbon.io/" target="_blank">Bourbon</a>があります。mixinがいらないよ、という方は、GruntやGulpのautoprefixerとかで事足りるかもしれません。

* <a href="http://liginc.co.jp/designer/archives/11623" target="_blank">CSSの常識が変わる！「Compass」の基礎から応用まで！ | 株式会社LIG</a>

#### フレームワーク

これは多すぎて把握できていません。基本、Bootstrapで十分なのかなと思っています。

ただ、2014-2015は、<a href="https://material.angularjs.org/#/" target="_blank">Angular.js</a>や<a href="http://material-ui.com/#/" target="_blank">React.js</a>でも取り入れているというのもあり、<a href="http://www.google.com/design/spec/material-design/introduction.html" target="_blank">Material design</a>系が増えたという印象があるので、さくっと導入したいですね。

* <a href="http://qiita.com/komeda/items/a74bda1408141e9109c9" target="_blank">CSSフレームワークまとめ - Qiita</a>
* <a href="http://tech.eversense.co.jp/1023" target="_blank">2015年も注目したいCSSフレームワーク6選 | エバーセンス開発ブログ</a>



## アートスクリプティング

HTML5のおかげで、かつてはフラッシュで行なっていたようなアートスクリプティングができるようになりました。

これらも、VR機器やIoTのおかげで無視できない存在になっていると思っています。理由は2つあって、1つ目は、**多様なAPI、美しいグラフィックなど、アウトプット(=デバイスで取得したデータの表現先)にはHTML5が優秀**なこと。2つ目は、**サーバーサイドは、HTML5との相性、サポートなどの面でNode.jsが優秀**なことです。

何より、未来なWeb UIをみるのはワクワクしますよね。

* webgl
	* <a href="http://www.acnplwgl.com/" target="_blank">ACNPL\WGL</a>
	* <a href="http://a-way-to-go.com/" target="_blank">WAY TO GO</a>
	* <a href="http://lights.helloenjoy.com/" target="_blank">Lights</a>
	* <a href="https://github.com/BabylonJS/Babylon.js" target="_blank">BabylonJS - 3D JavaScriptのフレームワーク</a>
* canvas
	* <a href="http://map.ipviking.com/" target="_blank">Norse - IPViking Live</a>
	* <a href="http://jviewz.com/" target="_blank">The DNA Project by j.viewz</a>
* VR
	* <a href="http://webvr.info/" target="_blank">WebVR - Bringing Virtual Reality to the Web</a>
	* <a href="http://mozvr.com/" target="_blank">MozVR</a>
* IoT
	* <a href="http://www.slideshare.net/moongift/html5javascript-iot" target="_blank">HTML5/JavaScript ではじめるIoT</a>
* svg
	* <a href="http://riccardoscalco.github.io/textures/" target="_blank">Textures.js</a>
	* <a href="http://snapsvg.io/" target="_blank">Snap.svg - Home</a>
	* <a href="http://svgpocketguide.com/book/" target="_blank">Pocket Guide to Writing SVG</a>
	* <a href="http://blog.mmmcorp.co.jp/blog/2015/04/10/svg/" target="_blank">WebサイトでSVGを使ってみる | MMMブログ</a>



## まとめ

以上、長くなりましたが、最近のフロントエンドをまとめてみました。

* Javascriptフレームワーク
* ES6
* タスクランナー
* モジュール化
* パッケージ管理
* ハイブリッドアプリ
* SPA
* サーバーサイドJavascript
* CSS
* アートスクリプティング
* まとめ

これ全部追いかけるのはたぶん無理ですが、やっぱりフロントおもしろいな、と。1年後にはまた状況が変わっているかもしれませんが・・・。

なにか間違っていればご意見くださいm(_ _)m。参考になれば幸いです。



## 参考
* <a href="https://gist.github.com/mizchi/757776f685805a1fddc5" target="_blank">フロントエンドを楽にするために</a>
* <a href="http://nobkz.hatenadiary.jp/entry/2015/03/20/175208" target="_blank">フロントエンド「エンジニア」とは何か? - nobkzのブログ</a>
* <a href="http://www.slideshare.net/dayoshi/20140821" target="_blank">10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話</a>
* <a href="http://postd.cc/javascript-framework-fatigue/" target="_blank">JavaScriptのフレームワークについて検討してみよう | プログラミング | POSTD</a>