対象
- 掲題の環境をサクッと構築したい方。
- 類似の環境を構築していて、うまくいかなかった方。
- サンプルコードを見て、作り方の参考にしたい方。
- readable で testable なクライアント開発がしたい方。
概要
WEBアプリを新規開発するに当たって、開発手法の検証のために、TODO アプリを作成しました。
react, redux を typescript で開発して、webpack でビルドして karma でテストしています。
使いこなすことができれば、結構いい感じな構成（readable で testable）だと思っています。しかし、このくらいの複雑さになってくると環境構築がめちゃくちゃ面倒ですし、周辺ライブラリの使い方も良く分からなかったりすると思うので、このサンプルアプリが参考になればと思います。※特に typescript 周りが面倒かな・・・
対象の通り、この記事の主な目的は環境構築サポートおよび各技術についての初歩的なサンプルコードの提供です。各技術要素の詳細については他の記事を参照してください。
ちなみにですが、TODOアプリは redux 公式のサンプルをベースに、typescript 化したり機能追加したりしています。
使用しているツール・ライブラリ
クライアントサイド
- 言語
- typescript 2.0
- フレームワーク・ライブラリ
- react
- redux
- redux-saga （非同期処理、pure ではない処理など）
- axios （Ajax）
- inversify 2.0 （DI:依存性注入）
- ビルドツール
- webpack
- テスト
- karma
- jasmine
- その他
- sass(.scss)
- babel-polyfill
サーバサイド
play2.5(scala) です。
動作環境
IE11* およびモダンブラウザです。
*IE9 以上を対象にする場合は、inversifyjs の ＠inject を使用しないように修正してください。＠inject は reflect-metadata を使用しますが、これを import すると IE9, 10 はクラッシュしてしまいました。
サンプルアプリで ＠inject を使用している箇所は kernel.get で代替可能です。※格好悪くなりますが・・・
ソースコード
サンプルコードのビルド方法
上記 URL から git clone してください。
事前準備
以下をインストールしてください。
- sbt (play2.5 を実行するために必要です）
- nodejs (v4.6.2)
ビルド（開発時）
webpack を watch モードで起動します。
npm install
export NODE_ENV=development (Windows の場合は set NODE_ENV=development)
npm run build:webpack
別のターミナルにて、sbt を debug モードで起動します。
sbt ~run
別のターミナルにて、js のテストを起動します。
npm run test
ブラウザで http://localhost:9000/sample/ を開いてください。
ビルド（リリース時を想定）
npm install
export NODE_ENV=production
npm run test:prod
npm run build:webpack:prod
sbt stage
target/universal/stage/bin/webboilerplate -Dconfig.resource=dev.conf -Dlogger.resource=log/dev.xml
コメント
typescript ⇒ ES5 への変換
typescript を一旦 ES6 にトランスパイルした後に、babel で ES5 にトランスパイルしています。ES6 の polyfill として babel-polyfill を使用しています。
typescript ⇒ ES5 へのトランスパイルもトライしましたが、babel-polyfill との相性が悪いようでうまくいかなった（詳細は忘れました）ので、上記のように二段階にしています。
参考： http://bouzuya.hatenablog.com/entry/2016/03/15/145210
DI でクライアントの永続化ストレージを切替
クライアント側のデータ保存先を localStorage or cookie で切り替えられるようにしています。（inversify.js を使用）
typings で取得した d.ts の修正
redux-logger, js-cookie については修正したファイルをローカルに配置しています。
export = hoge ⇒ export default hoge
play2 との連携
webpack で固めた jsファイル（スタイルや画像を含む）を public ディレクトリに配置することで play2 に取り込んでいます。