読者です 読者をやめる 読者になる 読者になる

DC4

今よく言われてる「草食系」にはなったらあかん! 野獣のような「肉食系」になるため、今は肉ばっかり食べてるよ。

Rails 5 + Angular2 + TypeScript でTodoアプリを作った。

JavaScript Ruby on Rails Ruby つくったもの

フロントエンドの勉強のため、 Rails 5 + Angular2 + TypeScript + SystemJS の組合せでTodoアプリを作成しました。

作ったもの

f:id:Yasun:20161221000644p:plain

todo-rails-xxx-js

構成

GitHub - yassun/todo-rails-xxx-js: Todo samples by Rails 5 (API mode) and JS frameworks.

f:id:Yasun:20161221233809p:plain

開発中は 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)を付けて以下記事と同じ手順で作成しました。

Rails-APIでTODOアプリを作る。

Angular2 + TypeScript + SystemJS

Angular2は公式のチュートリアルがとても充実していました。

まずはこちらの章でAngular2の雰囲気を掴むことから始めました。

Quickstart - ts - QUICKSTART

その後はより実践的なチュートリアルに進みました。

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 で挑戦してみようと思います。