社内ランチミーティング用資料「AngularJS で ハイスピードSI」

1. AngularJSで
ハイスピードSI
2015年 8月 4日
アールスリーインスティテュート 西島

2. アジェンダ
❖ AngularJSの簡単な紹介
❖ 開発環境
❖ ソース、ソース、ソース！
2

3. AngularJSの
簡単な紹介
3

4. ❖ Google製のフルスタックフレームワーク
❖ HTMLにテンプレート書いてごりごり
❖ 双方向のデータバインディング
❖ 2.0がもうすぐ出るけど別物注意
（今日は1系のはなし）
4

5. 開発環境
5

6. と言っても
IDEとかエディタとか
の話ではなく
6

7. ❖ API BlueprintでAPI仕様書いて
❖ Yeomanでプロジェクト作って
❖ gulpでserveして
❖ AngularJSでコーディング
7

8. API Blueprint
# GET /users/
+ Response 200 (application/json)
+ Body
{"status": "ok", "users": [
{
"userId": 111,
"name": "テスト太郎"
},
{
"userId": 222,
"name": "テスト二郎"
}
]}
8
って
markdownで
書くと

9. API Blueprint
9
$ aglio -p 2999 -i
api.md ̶server
で実際に動く！
POSTなども
勿論OK

10. Yeoman
10
❖ プロジェクトの雛形を作るツール
❖ 近年のJavaScript/フロントエンド
開発の闇がたっぷり見える。。。

11. Yeoman
11
色々答えると・・・
滅茶苦茶いっぱい
ダウンロードして
scaffolding

12. あっ・・・
12

13. もちろん
外部ライブラリの依存関係は
bowerで管理します。
忘れてないよ！
13

14. gulp
14
❖ Saasのコンパイルとか
❖ *.jsファイル群の圧縮とかminifyとか
❖ e2eテストの実行とか
❖ ブラウズ用サーバの起動と自動リロードとか

15. ❖ Saasのコンパイルとか
❖ *.jsファイル群の圧縮とかminifyとか
❖ テストの実行とか
❖ ブラウズ用サーバの起動と自動リロードとか
gulp
15
近年のフロントエンド開発の
面倒くさいことを
すべて引き受けてくれる
タスクランナー

16. gulp
16
yeomanが
生成した数々の
gulpfile.js
（の呪文で）
'use strict';
var gulp = require('gulp');
var wrench = require('wrench');
wrench.readdirSyncRecursive('./
gulp').filter(function(file) {
return (/.(js¦coffee)$/i).test(file);
}).map(function(file) {
require('./gulp/' + file);
});
gulp.task('default', ['clean'], function ()
{
gulp.start('build');
});

17. gulp
17
$ gulp serve
Webサーバ起動
ブラウザ起動
ファイル保存すれ
ば自動リロード
$ gulp serve
[19:45:49] Using gulpfile /yourapp/
gulpfile.js
[19:45:50] Starting 'watch'...
[19:45:50] Finished 'watch' after 46 ms
[19:45:50] Starting 'serve'...
[19:45:50] Finished 'serve' after 178 ms
[BS] [BrowserSync SPA] Running...
[BS] Access URLs:
--------------------------------------
Local: http://localhost:3003/
External: http://192.168.1.13:3003/
--------------------------------------
UI: http://localhost:3004
UI External: http://192.168.1.13:3004
--------------------------------------

18. ここまで
お膳立てして・・・
18

19. ようやく り着いた
19

20. ❖ Google製のフルスタックフレームワーク
❖ HTMLにテンプレート書いてごりごり
❖ 双方向のデータバインディング
❖ 2.0がもうすぐ出るけど別物注意
（今日は1系のはなし）
20
再度おさらい

21. では
色々言われて
いますが・・・
21

22. そんなに言われるほど
悪くないと
西島は思います
22

23. HTMLに
テンプレート書いてごりごり
23
<input type="text"
ng-model="yourName">
<h1>Hello {{yourName}}!</h1>
ng-modelで
データバインディング

24. HTMLに
テンプレート書いてごりごり
24
<ul>
<li ng-repeat="todo in
todoList.todos">
<input type="checkbox" ng-
model="todo.done">
<span class="done-
{{todo.done}}">{{todo.text}}</span>
</li>
</ul>
ng-repeatで
ループしたり

25. 双方向
データバインディング
25
<input type="text"
ng-model="yourName">
<h1>Hello {{yourName}}!</h1>
何が双方向なのか

26. 双方向
データバインディング
26
function YourController() {
console.log(this.yourName);
}
入力があった瞬間
変数に値が入ってる
（逆もしかり）

27. 簡単なことは簡単に
難しいことも
そこそこ簡単に
実現できる
27

28. 例えば：
数値のカンマ区切り
28
<p>値: {{val ¦ number}}</p>

29. 例えば：
日付の書式変換(filter)
29
<p>予約は {{ createDate ¦ date: yyyy/MM/dd'}} です</p>

30. 例えば：
文字通りフィルタリングも出来る
30
<tr ng-repeat="friend in friends ¦ filter:'太郎'">
orderByとかlimitとかも勿論ある

31. 例えば：
Selectの選択肢が特定のものなら、必須
31
選択肢がAかBの時のみ
入力Aは必須
みたいなちょっとめんどくさい系

32. 例えば：
Selectの選択肢が特定のものなら、必須
32
ng-requiredが
式を評価できるから
これだけでOK
<input type="text"
ng-model= cnt.inputparam"
ng-required="cnt.selectA === 'A' ¦¦
cnt.selectA === 'B'">

33. 勿論
オープンソースの
モジュールも多数あるので
33

34. ライセンスに問題なければ
34
作るより使った
ほうが早い。
ダイアログとか、
REST APIアクセス
とか、、、
http://ngmodules.org/

35. ❖ 1.0系
https://angularjs.org/
❖ 2.0系（現在アルファ）
https://angular.io/
35
今後混乱するかも
↑↓えっ！？

36. ❖ 色々deplicatedなAPIもあるけれど
移行しなくても死にはしない
❖ パフォーマンスも1.4系は随分まし
❖ Yeomanも1.4選べば
対応した雛形を作ってくれるよ
36
今後混乱するかも

37. 【勉強した技術が
３ヶ月後に廃れても泣かない】
フロントエンドはそんな心構え。
でもAngularは既に
5年位生き残ってるから、多分大丈夫。
37

38. というわけで
38

39. ❖ API Blueprint
❖ gulp
❖ AngularJS
39
この組み合わせで
慣れればかなりのスピードで
UIを作りこむことが可能

40. いかがですか
AngularJSのアプリ
メンテしませんか？（本音）
40

41. それはともかく
41

42. オープンな世界だと非常に
（場合によっては無駄に）
進化が早い
42

43. ビジネスロジック側は？
なんかいい手無いの？
43
kintone
やら
Angular
やら
ロジック
データフロー
ワークフロー
等などと
言われる
何者か
DBは
まあ
よかろう

44. これは（みんなの）
宿題
44

45. ありがとうございました
45