俺とAngular JS 2

俺とAngularJS 22015-06-06 ふぁらお加藤

ProfileName ふぁらお加藤 / @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

関わったAngularJS Project

JSON

サーバMVCとクライアントMVCの関係

M V C

JSON M V C

JSONMySQL

REST実装

REST API実装を行い、そのAPIエンドポイントを呼ぶ。 処理結果、DBの内容はJSONで返す。

AngularJSとは何か• Googleとコミュニティで開発が進められている JavaScript フレームワーク

• クライアントサイドで動く

• 後述する特徴があってユーザがデータを入力、選択して、ページを遷移しないで結果、プレビューがでるような画面を作るのが得意

• AngularJS 2との関係は・・・ちょっとむずかしい。

AngularJSとは何か - 特徴

AngularJS TIPS AngularJSを利用するには？ よりhttp://www.buildinsider.net/web/angularjstips/0001

AngularJS 2では 双方向データバインディングは廃止

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

立ち位置 が違う

AngularJSとは何か - 学習方法• 2はまだハードルが高い・・・。1について。

• AngularJS Hub が 神

• http://www.angularjshub.com

• 例) 双方向バインディング

• http://www.angularjshub.com/examples/basics/twowaydatabinding/

AngularJSとは何か - 学習コスト

http://nathanleclaire.com/blog/2014/01/04/5-smooth-angularjs-application-tips/

学習していくと成果が・・・？

AngularJS、つまり、JavaScriptを 多人数で開発してみた !

・・・結構苦労する。 そもそもJavaScriptって大規模なMVC 書いたりするには、いろいろ足りてなくねえ？

そこででてくる altJS

altJSとは• altJS = Alternative JavaScript

• JavaScriptを置き換えるために作られた言語

• といっても、まずは altJS で書き、ユーザーに送信する前に、 JavaScript変換する

• たくさん種類があって、選択フローチャートなんかも作ってる人がいる

そこでAngularJSが選んだのが TypeScript

TypeScriptとはTypeScript はマイクロソフトによって開発された

フリーでオープンソースのプログラミング言語である。

TypeScript は JavaScript に使用するかどうかが

任意の静的型付けとクラスベースオブジェクト指向を

加えたスーパーセットとなっている。

Wikipedia - TypeScript より

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

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

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

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

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

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

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

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

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

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

つまり、これでバリバリ、ロジックやMVCをかけるぜ。 !

TypeScript公式ページ learn > Handbook に行けば単語が並んでる。

素のJavaScriptにちょっと加えるだけで 読みやすいのもウリ !

しかし、先進的すぎるのでは？

ECMAScript6 との関係について

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

Angular2とECMAScript6

Angular2 は ECMAScript6ベースのAtScript/TypeScriptを採用している !

とにかく、ECMAScript6ベース、これで標準をと言える。

まとめ• AngularJSのサンプルを動かしてみた

• AngularJS 2で採用されるTypeScriptとJavaScriptを比較し以下について説明した

• 実行前にわかるエラー

• コード作成するMicrosoft社のエディタへ型を示すことの優位性

• Angular2はECMAScript6を取り込んでいき、標準で進んでいるが、まだまだアルファ版。

2015-06-06 ふぁらお加藤

ご清聴ありがとうございました。