Rails 5 + Angular2 + TypeScript でTodoアプリを作った。
フロントエンドの勉強のため、 Rails 5 + Angular2 + TypeScript + SystemJS の組合せでTodoアプリを作成しました。
作ったもの
構成
GitHub - yassun/todo-rails-xxx-js: Todo samples by Rails 5 (API mode) and JS frameworks.
開発中は RailsAPI と Angular2 それぞれでローカルサーバを立ち上げて作業しています。 違うポートでの通信となるのでクロスドメイン問題を解決する必要があります。
今回はこちらのGemを使用しました。 GitHub - cyu/rack-cors: Rack Middleware for handling Cross-Origin Resource Sharing (CORS), which makes cross-origin AJAX possible.
リリース時にビルドしたフロントのリソースfront/angular2/public/* を Rails側の/public に移動しています。
Rails5
APIモードのオプション(rails new app --api)を付けて以下記事と同じ手順で作成しました。
Angular2 + TypeScript + SystemJS
Angular2は公式のチュートリアルがとても充実していました。
まずはこちらの章でAngular2の雰囲気を掴むことから始めました。
その後はより実践的なチュートリアルに進みました。
Tutorial: Tour of Heroes - ts - TUTORIAL
こちらはかなりボリュームがあるのですが、ヒーローを題材としたSPAを作りながら
- Component
- Module
- Routing
- DI
- Two-Way Binding / Event binding
- Service
- Mockの作り方
- RxJS...etc
と開発に必要な要素を一通り学ぶことができます。
フロントエンド開発について
何も知らない状態からフロントエンドに入る際の障壁として、 Angular2 / TypeScript / RxJS の学習はサクサクと進めれたのですが、モジュール管理とビルド周りが辛かったです。
特にSystemJSをbundleするのに苦戦しました。
さいごに
Angularの次期バージョンは 3 ではなく、4になるそうです。 そして6ヶ月ごとにメジャーバージョンが上がるとの事です。
Angularの次バージョンは「Angular 4」に、2017年3月リリース。今後は単に「Angular」と呼んでほしいと － Publickey
Angularはフロント開発に必要なライブラリが既に用意されている状態で開始できるので、入門としては入りやすかったです。
次回はReact.js + Redux.js + ES6 で挑戦してみようと思います。
