Falcor+Reactフルスタック(開発環境) #JavaScript

Meteor and Reactによるリアクティブシステム「ラーメン野郎を追いかけろ！＠ Twitter」を作ってみた

Falcor+Reactフルスタック（開発環境）
Falcor+Reactフルスタック（react-router）
Falcor+Reactフルスタック（views層とcomponents層）
Falcor+Reactフルスタック（formsy-react）
Falcor+Reactフルスタック（エラー処理）
Falcor+Reactフルスタック（Material-UI）

　前回までは、ひたすらFalcorについて説明してきました。開発環境やフルスタックの他の構成要素についてはほとんど触れませんでした。

Netflix Falcorについて（１）
Netflix Falcorについて（２）
Netflix Falcorについて（３）
Netflix Falcorについて（４）
Netflix Falcorについて（５）

　今回からはJavaScriptによるフルスタックの開発環境に視点を移していきたいと思います。フルスタックの構成としては以下のようなものを考えています。

MongoDB + Mongoose +Node + Express + Falcor + React + Redux + Material-UI + Webpack + babel

　フルスタックの構成要素を簡単に説明します。

MongoDB : DBです。
Mongoose : ExpressからMongoDBにアクセスするためのものです。
Node : JavaScriptのサーバサイドの実行環境です。
Express : Node上で動作するWebアプリサーバです。
Falcor : サーバとクライアント間の通信のためのJavaScriptライブラリ。Rest APIの代替。
React : クライアントJavaScriptのライブラリ。
Redux : 主にReactで使われる状態（JSON object）管理のライブラリー
Material-UI : Material DesignのReact用のライブラリ。最近はbootstrapより人気？
Webpack: module bundler、複数のソースコードを１つのJSファイルにまとめます。
babel : JavaScriptのためのコンパイラ、es6やes7,reactなどのシンタックスをコンパイルします。

　まず最初のサンプルプログラムとして、ユーザ登録／ログイン／ログアウト、の画面と機能の基本的なものを作成したいと思います。以下のサイトで実行例を確認できます。ユーザ登録を行いログイン／ログアウトを行ってみてください。簡単なシングルページアプリケーションになっています。chromeで動作を確認しています。
http://www.mypress.jp:3019/

　Falcorに関しては前回までの解説の枠を出ませんので、今回はそれ以外のフルスタックの構成要素について説明していきたいと思います。特にReactで作成した画面から、Falcorを利用する具体的なプログラムを示したいと思います。このサンプルではRedux以外の全ての要素を利用します。

　サーバ側は前回まで特に変わっていませんが、babel-cliで最新のEcmaScriptの仕様を利用できるようにしています。
https://github.com/babel/example-node-server

　今回は開発環境の説明です。必要なパッケージをインストールするために、以下のようにnpm installを繰り返します。nodeをまだインストールしていない時は、nvmを使ってインストールすると簡単です。

nodeのインストール

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash
nvm install node

node -v
v8.1.4
npm -v
5.3.0

パッケージのインストール

mkdir falcor-qiita6
cd falcor-qiita6
npm init

npm install body-parser --save
npm install crypto --save
npm install express --save
npm install falcor --save
npm install falcor-express --save
npm install falcor-router --save
npm install falcor-http-datasource --save
npm install formsy-react --save
npm install jsonwebtoken --save
npm install material-ui --save
npm install mongoose --save
npm install react --save
npm install react-dom --save
npm install react-router-dom --save
npm install react-tap-event-plugin --save
npm install prop-types  --save
npm install create-react-class --save

npm install babel --save-dev
npm install babel-core --save-dev
npm install babel-loader --save-dev
npm install babel-polyfill --save-dev
npm install babel-preset-es2015 --save-dev
npm install babel-preset-react --save-dev
npm install babel-preset-stage-2 --save-dev
npm install babel-cli --save-dev
npm install webpack --save-dev
npm install webpack-dev-server --save-dev
npm install nodemon --save-dev

　package.jsonファイルが出来上がりますので、以下のscriptsプロパティを追加します。

  "scripts": {
    "start": "npm run webpack; babel-node server/server.js  --presets es2015,stage-2",
    "webpack": "webpack --config ./webpack.config.js"
  },

　以下にpackage.jsonの全体をリストします。

package.json

{
  "name": "falcor-qiita6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server",
    "start": "npm run webpack; babel-node server/server.js  --presets es2015,stage-2",
    "webpack": "webpack --config ./webpack.config.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.17.2",
    "create-react-class": "^15.6.0",
    "crypto": "^1.0.1",
    "express": "^4.15.4",
    "falcor": "^0.1.17",
    "falcor-express": "^0.1.4",
    "falcor-http-datasource": "^0.1.3",
    "falcor-router": "^0.8.1",
    "formsy-react": "^0.19.5",
    "jsonwebtoken": "^7.4.2",
    "material-ui": "^0.18.7",
    "mongoose": "^4.11.6",
    "prop-types": "^15.5.10",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-router-dom": "^4.1.2",
    "react-tap-event-plugin": "^2.0.1"
  },
  "devDependencies": {
    "babel": "^6.23.0",
    "babel-cli": "^6.24.1",
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-polyfill": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "webpack": "^3.5.3",
    "webpack-dev-server": "^2.7.1"
  }
}

　次にwebpack.config.jsについてですが、falcorにバグがあり以下のプロパティの追加が必要なことに注意してください。
https://github.com/Netflix/falcor/issues/586

  resolve: {
    alias: {
      'rx$': '/プロジェクトまでのパス/falcor-qiita6/node_modules/falcor/node_modules/rx/dist/rx.js'
    }
  },

　以下にwebpack.config.jsの全体をリストします。

webpack.config.js

module.exports = {
  entry: ['babel-polyfill', './src/routes.js'],
   output: {
    path: __dirname + "/dist",
    filename: 'app.js',
    publicPath: '/'
    },
  devServer: {
    inline: true,
    port: 3000,
    contentBase: __dirname + "/dist",
  },
  module: {
    loaders: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel-loader',
      query: {
      presets: ['es2015', 'stage-2', 'react']
      }
    }]
  },
  resolve: {
    // you can now require('file') instead of require('file.js')
    // extensions: ['', '.js','.json'],
    alias: {
      // Workaround https://github.com/Reactive-Extensions/RxJS/issues/832, until it's fixed
      'rx$': '/プロジェクトまでのパス/falcor-qiita6/node_modules/falcor/node_modules/rx/dist/rx.js'
    }
  },
}

　次回以降に今回のプログラムの解説を行っていきたいと思います。