Roc - React/Reduxを使ったnodeフレームワーク // MOONGIFT Archived

Reactを使ってみたいと思うプログラマはたくさんいると思うのですが、いざちゃんとしたものを作ろうと思うとフレームワークの存在に悩むことになります。Reduxを使うとしてもどういう組み合わせ、ディレクトリ構成でやるのがベストなのか分かりづらかったりします。そこで使ってみたいのがRocです。React/Reduxを使ったnodeのWebアプリケーションフレームワークです。

Rocの使い方

Rocのインストールはnpmでできます。

npm install -g roc

アプリケーションの初期設定はinitを使います。対話型で作ります。

$ roc init web-app-react
Found a folder named /path/to/react-app, will try to use it. 

Using v1.0.3 as template version
  :
? What's the name of your application? my-roc-app
? What's the description for the application? My Roc Application
? Who's the author of the application? John Doe
? What's the license for the application? MIT
? What's the port for the application? 3000
? What do you what to use for <title>? My Roc Application

Installing template dependencies… (If this fails you can try to run npm install directly)

ファイル構成は次のようになっています。シンプルで分かりやすそうです。

後は dev コマンドで開発用サーバが立ち上がります。

$ roc dev
Found a local version of Roc, will use that over the global one. 

  roc:dev:client Dev server started on port 3001 +0ms
  roc:dev:node:builder Server rebuilt 4223 ms +4s
  roc:dev:node:watcher You can restart the server by entering "rs" and pressing enter" +8ms
webpack built bd9fb8550a39de1140f3 in 4950ms
Roc runtime has been initialized.
  roc:server Server started on port 3000 (HTTP) and served from / +0ms
  < -- GET /
[BS] Proxying: http://0.0.0.0:3000
[BS] Access URLs:
 -------------------------------------
       Local: http://localhost:3030
    External: http://192.168.0.15:3030
 -------------------------------------
          UI: http://localhost:3031
 UI External: http://192.168.0.15:3031
 -------------------------------------
  --> GET / 200 74ms 7.5kb
  < -- GET /
  --> GET / 200 25ms 7.5kb
  < -- GET /favicon.png
  --> GET /favicon.png 200 4ms 3.57kb

Webブラウザでアクセスしたところです。

リアルタイム同期機能があるので、コードを変更するとリロードではなく画面に反映されます（スクロール位置が変わりません）。

Rocを使うとReact/Reduxを使った開発環境が即座に整います。ディレクトリごとにファイルが分割されているのが人によって好みが分かれるところでしょう。ルーティングなどの機能も入っていますので、さくさくと開発が進められそうです。

Rocはnode/JavaScript製のオープンソース・ソフトウェア（MIT License）です。

Roc - Get started developing today! rocjs/roc: Modern Application Development Ecosystem