Corporation, Okinawa JAPAN
宮里 忍
2014年08月21日
目次
- Webアプリケーションの新しい形
- 既存のWebアプリケーション
- シングルページアプリケーション
- AngularJSとは
- JavaScriptはなぜ複雑になるのか?
- AngularJSの各種機能
- polaris-webの紹介
Webアプリケーションの新しい形
既存のWebアプリケーション
Webアプリケーションの新しい形
シングルページアプリケーション
AngularJSとは
- AngularJSとは
- シングルページアプリケーションを開発するためのフレームワークと処理系
- フレームワーク:クラスやイベントハンドラなどを提供する
- 処理系:HTMLやJavaScriptを解釈し、それに応じた動きをする
- クライアント・サーバ型アーキテクチャのWebへの適用
- クライアントサイドへのMVC・MVVMアーキテクチャの適用
JavaScriptはなぜ複雑になるのか?
DOM操作
- DOM（Document Object Model）とはhtmlの各要素にアクセスする仕組み
- DOMを操作することで要素の値を操作できる
JavaScriptはなぜ複雑になるのか?
DOM操作の例
(HTML)
<img id="dom-demo" src="dom-demo01.png"/>
(JavaScript)
var imgObject = getElementById('dom-demo');
imgObject.src = "dom-demo02.png";
変数「imgObject」とid「dom-demo」が同一かは保証されない!
- つまり、2つ(HTMLとJavaScript)の異なる名前空間について注意深く開発する必要がある
- JavaScriptの複雑性はこれにつきる
AngularJSのデータバインディング
(HTML)
<div ng-controller="LoginController">
<input type="text" ng-model="LoginController.user"/>
</div>
(JavaScript)
angular.module('app', [])
.controller('LoginController', function($scope) {
$scope.user = "shinobu";
});
AngularJSのデータバインディング
- bind:束縛する,縛る,包む,固める,結ぶ,義務付ける,結び付ける,固まる,束ね
- つまり、HTMLとJavaScriptの名前空間を共有できる
- かつ、データバインディングは双方向で行われる
AngularJSのテンプレートHTML
- HTMLにAngularJS独自のタグや属性(Directiveと言う)を埋め込んで画面を作る
- また、独自Directiveを作成するとHTMLタグや属性を拡張できる
(HTML)
<div ng-controller="LoginController">
<input type="text" ng-model="LoginController.user"/>
</div>
JavaScriptの保守はどうすると楽か?
- 改修→ブラウザで確認→エラー→改修→ブラウザで確認(トライアンドエラー手法)
- トライエンドエラーには限界がある
- つまり、単体テストが保守を楽にする
AngularJS の DI 機能を利用すると単体テストがしやすくなる!
AngularJSのDI
AngularJSのDI(Dependency Injection : 依存性注入)の機能
- 基本的にクラスをnewしない
- newするのはAngulaJSの処理系の役割
- これにより、クラス間が粗結合になる
- つまり、単体テストが可能になる!
- 単体テスト時、テスト対象以外はモックで置き換えることができる
polaris-web
polaris-webは、
開発標準構築PJで開発してるAngularJSを使用したフレームワーク
https://github.com/occ-corp/polaris-web
polaris-webの特徴
- AngularJS
- MVVM
- TypeScript
- Jade
- SASS
- Bootstrap
polaris-webの特徴
MVVM
- ViewとModelの歪みを調整するViewModelを導入したアーキテクチャ
- Controllerの機能をViewModelに分散するアーキテクチャ
TypeScript
- JavaScriptへの型の適用
- 型とはつまりクラス
- JavaScriptに変換されて実行される
- 変換時にエラーを吐いてくれる
- 次期JavaScriptの機能の先取り
TypeScirpt
angular.module('app', [])
.controller('LoginController', function($scope) {
var user = new User();
});
(TypeScript)
module app.controller {
export class LoginController {
User user = new User();
}
}
Jade
- 安全にHTMLを記述するための記法
- ネストをインデントで表現する
- HTMLに変換されて処理される
- 変換時にエラーを吐いてくれる
Jade
(HTML)
<div ng-controller="LoginController">
<input type="text" ng-model="LoginController.user"/>
</div>
(Jade)
div(ng-controller='app.controller.LoginController')
input(type='text', ng-model='login.user')
SASS
- CSSに変数、継承、ネームスペースを導入したもの
- CSSに変換されて処理される
- 変換時にエラーを吐いてくれる
