source code is here -> http://qiita.com/PharaohKJ/private/e0e81296b53514f41db2

1. 俺とAngularJS 2
2015-06-06
ふぁらお加藤

2. Profile
Name
ふぁらお加藤 / @PharaohKJ
Hobby
Camera / subculture
Job & Works
PhalanXware (Freelancer)
OCR system com / .net
ISDB-T MFC / Linux C++
Social Game PHP / Java
ERP+CRM AngularJS / Cordova
Information App AngularJS / CakePHP

3. 関わったAngularJS Project
JSON

4. サーバMVCとクライアントMVCの関係
M
V
C
JSON M
V
C
JSON
MySQL
REST実装
REST API実装を行い、そのAPIエンドポイントを呼ぶ。
処理結果、DBの内容はJSONで返す。

5. AngularJSとは何か
• Googleとコミュニティで開発が進められている
JavaScript フレームワーク
• クライアントサイドで動く
• 後述する特徴があってユーザがデータを入力、選択し
て、ページを遷移しないで結果、プレビューがでるよ
うな画面を作るのが得意
• AngularJS 2との関係は・・・ちょっとむずかしい。

6. AngularJSとは何か - 特徴
AngularJS TIPS AngularJSを利用するには？ より
http://www.buildinsider.net/web/angularjstips/0001
AngularJS 2では 双方向データバインディングは廃止

7. AngularJSとは何か - 立ち位置
Backbone.JSからAngular2まで、全9大JavaScriptフレームワークを書き比べた!
http://paiza.hatenablog.com/entry/2015/03/11/Backbone_JS%E3%81%8B%E3%82%89Angular2%E3%81%BE%E3%81%A7%E3%80%81%E5%85%A89%E5%A4%A7JavaScript%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF
%E3%82%92%E6%9B%B8%E3%81%8D%E6%AF%94%E3%81%B9
立ち位置
が違う

8. AngularJSとは何か - 学習方法
• 2はまだハードルが高い・・・。1について。
• AngularJS Hub が 神
• http://www.angularjshub.com
• 例) 双方向バインディング
• http://www.angularjshub.com/examples/basics/
twowaydatabinding/

9. AngularJSとは何か - 学習コスト
http://nathanleclaire.com/blog/2014/01/04/5-smooth-angularjs-application-tips/
学習していくと成果が・・・？

10. AngularJS、つまり、JavaScriptを
多人数で開発してみた
!
・・・結構苦労する。
そもそもJavaScriptって大規模なMVC
書いたりするには、いろいろ足りてなくねえ？

11. そこででてくる altJS

12. altJSとは
• altJS = Alternative JavaScript
• JavaScriptを置き換えるために作られた言語
• といっても、まずは altJS で書き、ユーザーに送信す
る前に、 JavaScript変換する
• たくさん種類があって、選択フローチャートなんかも
作ってる人がいる

13. そこでAngularJSが選んだのが TypeScript

14. TypeScriptとは
TypeScript はマイクロソフトによって開発された
フリーでオープンソースのプログラミング言語である。
TypeScript は JavaScript に使用するかどうかが
任意の静的型付けとクラスベースオブジェクト指向を
加えたスーパーセットとなっている。
Wikipedia - TypeScript より

15. ぶっちゃけ、さっきの説明文で出てきた単語が
すぐ分かる人は、すぐ便利さに気づける！

16. お題をやります
http://www.typescriptlang.org/Playground
ですぐ試せます。

17. お題 足し算
ミスって数値 + 文字列 = ?

18. お題 足し算
静的型付けして、ミスさせない
function( arg: Type) : Type {}

19. お題 動け！
同名のメソッドを持っていることを期待する

20. お題 動け！
あらかじめ決めたプロパティが無いとエラー！

21. とにかく、型がちゃんと指定できて、実行してみ
ないとわからない！ってところがちゃんと事前に
わかる！

22. さらに 型を見た補完まで
mover. を打ってみると？

23. この補完、Visual Studio でできます。
いきなりできます。素晴らしい。

24. 多人数で開発、難しいロジックなどを書く時に
型 = Type をキッチリ定義する
ことで、
実行前にわかるバグを防ぐ、
開発環境がより便利になり、
開発・共同作業速度をあげることできます。

25. つまり、これでバリバ
リ、ロジックやMVCを
かけるぜ。
!
TypeScript公式ページ
learn > Handbook
に行けば単語が並んでる。

26. 素のJavaScriptにちょっと加えるだけで
読みやすいのもウリ
!
しかし、先進的すぎるのでは？

27. ECMAScript6 との関係について
次期JavaScriptの仕様であろう、ES6のSuperSetである。
オープンだし、即ボツになることは無い。はず。

28. Angular2とECMAScript6
Angular2 は ECMAScript6ベースの
AtScript/TypeScriptを採用している
!
とにかく、ECMAScript6ベース、これで標準
をと言える。

29. まとめ
• AngularJSのサンプルを動かしてみた
• AngularJS 2で採用されるTypeScriptとJavaScriptを比較し
以下について説明した
• 実行前にわかるエラー
• コード作成するMicrosoft社のエディタへ型を示すことの
優位性
• Angular2はECMAScript6を取り込んでいき、標準で進んで
いるが、まだまだアルファ版。

30. 2015-06-06 ふぁらお加藤
ご清聴ありがとうございました。