モダンなisomorphic JavaScriptのプロジェクト構成をまとめる


#**概要**

最近のモダンなリポジトリなどから、よくある<a href="https://www.google.com/search?q=isomorphic+JavaScript&oq=isomorphic+JavaScript&aqs=chrome..69i57j69i59l2j0l3.574j0j7&sourceid=chrome&es_sm=119&ie=UTF-8" target="_blank">isomorphic JavaScript</a>なプロジェクト構成をまとめてみた。



#**プロジェクト構成**

##**クライアントサイド**

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

クライアントサイドにはReactを使用しているものが多い。

* <a href="https://www.google.co.jp/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=reactjs+isomorphic&lr=lang_ja" target="_blank">reactjs isomorphic - Google 検索</a>



##**クライアントサイドアーキテクチャ**

###**<a href="http://facebook.github.io/flux/" target="_blank">Flux</a>**

設計パターンには例によってReact.jsと相性の良いFluxを用いる。フレームワークは**<a href="http://rackt.github.io/redux/" target="_blank">Redux</a>**が人気。

* <a href="http://amagitakayosi.hatenablog.com/entry/2015/07/30/000000" target="_blank">人気のFluxフレームワークReduxをさわってみた - マルシテイアは月の上</a>
* <a href="http://qiita.com/okmttdhr/items/6310b6aa37a52667f675" target="_blank">Fluxフレームワークまとめ - Qiita</a>



##**クライアントサイドルーティング**

###**<a href="http://rackt.github.io/react-router/" target="_blank">React Router</a>**

これはほぼ一択な気がする。

* <a href="http://qiita.com/koba04/items/737c783f1189355e053f" target="_blank">React.jsでserver-side renderingにも対応したRouting - Qiita</a>



##**サーバーサイド**

###**<a href="http://expressjs.com/" target="_blank">Express</a>, <a href="http://koajs.com/" target="_blank">Koa</a>**

<a href="http://hapijs.com/" target="_blank">Hapi</a>も見ないわけではないが、主流なのはこの2つ。

* <a href="https://www.airpair.com/node.js/posts/nodejs-framework-comparison-express-koa-hapi" target="_blank">Node.js Framework Comparison: Express vs. Koa vs. Hapi</a>



##**ES6コンパイラ**

###**<a href="https://babeljs.io/" target="_blank">Babel</a>**

コンパイラはBabel一択感がありますね。

* <a href="http://magazine.rubyist.net/?0050-ECMAScript2015" target="_blank">2015年のJavaScriptとbabelの話</a>



##**モジュール管理**

###**<a href="http://webpack.github.io/" target="_blank">Webpack</a>**

<a href="http://browserify.org/" target="_blank">Browserify</a>も見ないわけではないが、やはりこれから新規で何かつくるのであれば多機能なWebpackを採用するのが主流なよう。

* <a href="https://github.com/webpack/react-starter" target="_blank">webpack/react-starter</a>




##**タスクランナー**

###**<a href="http://gulpjs.com/" target="_blank">Gulp</a>**

Gruntはもうほとんどみない。

* <a href="https://www.google.com/search?q=gulp%20grunt%20comparison&rct=j" target="_blank">gulp grunt comparison - Google 検索</a>

###**<a href="https://www.npmjs.com/" target="_blank">npm</a>**

<a href="https://github.com/kriasoft/react-starter-kit/" target="_blank">react-starter-kit</a>はGulpを切り捨て、npmおんりーに切り替えている。今後の流れ的には、逆にそのほうが安心なのかもしれない。

* <a href="http://akabeko.me/blog/2015/08/dev-web-front-end-without-gulp/" target="_blank">gulp なしの Web フロントエンド開発</a>


##**テスト**

###**<a href="https://mochajs.org/" target="_blank">Mocha</a>**

Karma上で動かしているものも多い。

* <a href="https://www.google.com/search?q=mocha%20javascript%20test&rct=j" target="_blank">mocha javascript test - Google 検索</a>

###**<a href="https://facebook.github.io/jest/" target="_blank">Jest</a>**

React.jsなのでJestでUnit Testを行うという方針もきれい。

* <a href="http://qiita.com/koba04/items/2f97904b3ca247fc1917" target="_blank">React.js + Jest - Qiita</a>



##**その他**

###**<a href="https://facebook.github.io/immutable-js/" target="_blank">Immutable.js</a>**

コレクションを扱うのにImmutable.jsをつかっていることもある。

* <a href="http://qiita.com/ryoppy/items/9afa0038a04feeb5783c" target="_blank">Immutable.jsを色々触ってみました - Qiita</a>



###**<a href="https://facebook.github.io/relay/" target="_blank">Relay</a>**

<a href="https://github.com/relayjs/relay-starter-kit" target="_blank">relayjs/relay-starter-kit</a>でGraph QLバリバリ使うという手も。

* <a href="http://qiita.com/kenfdev/items/c3c3a11abb98803a51c6" target="_blank">Facebook Relayについてまとめ - Qiita</a>



#**参考**

* <a href="http://qiita.com/masato/items/b4fff7e885f78cd96edb#koa-react-full-example" target="_blank">ES6で書くIsomorphicアプリ入門 - Part1: リソース - Qiita</a>
* <a href="http://qiita.com/okmttdhr/items/63a9191fa2ad37dc1133" target="_blank">React.jsプロジェクト構成ベストプラクティス検討 - Qiita</a>



#**まとめ**

まとめると、**React+Flux+React Router+Express(Koa)+Babel+Webpack+Gulp(npm)+Mocha(Jest)**という構成。

ご意見ください。