受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
-
Upload
hayashi-yuichi -
Category
Technology
-
view
17.324 -
download
0
description
Transcript of 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
![Page 1: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/1.jpg)
1
受託開発でのAngularJS
![Page 2: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/2.jpg)
2
@frontainerFront-end Engineer
2014/4 LIG入社 フロントエンドエンジニア
プロフィール
http://github.com/frontainer
http://trifort.jp/library/cavy/
現在はWebサイトを作ったりテンプレート作ったりいろいろ
前職ではゲームのフロントエンド開発や canvasライブラリを作って遊んだりしてました。
これまでBackboneで2本、Angularで4本案件実装してきました。
YUICHI HAYASHI
林 優一
![Page 3: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/3.jpg)
3
本題に入る前にお知らせです。
![Page 4: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/4.jpg)
4
Powered by
CM
![Page 5: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/5.jpg)
CM
![Page 6: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/6.jpg)
CM
![Page 7: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/7.jpg)
CM
![Page 8: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/8.jpg)
CM
![Page 9: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/9.jpg)
CM
![Page 10: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/10.jpg)
10
体験を売りたい人も 貴重な体験をしたい人も
CM
![Page 12: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/12.jpg)
12
初回の今回は「AngularJSを導入したときのお話」
![Page 13: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/13.jpg)
AngularJSを使うときに懸念したこと
チャットアプリでAngularJS
AngularJSの進化スピード
まとめ
13
AngularJSを使うなら知っておきたいワード
![Page 14: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/14.jpg)
14
AngularJSを使うときに懸念したこと
![Page 15: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/15.jpg)
15
01IE9以上+モダンブラウザ
AngularJSを使うときに懸念したこと
対応ブラウザ
バージョン 1.2.x 1.3.x 2.x.x
対応ブラウザ IE8 IE9 IE11(予定)
備考 IE8以下は一部機能で別途対策が必要I積極的な機能削除は行わないが
E8はテストを行わない開発中
推奨
![Page 16: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/16.jpg)
20.6%
5.4%6.9%8.6%8.9%12.3%
16.6%
20.9%IE8.0 IE11.0FF28 IE9.0Chrome34 IE10.0Chrome33 その他
16http://news.mynavi.jp/news/2014/05/07/066/
現実 IE8以上+モダンブラウザ
![Page 17: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/17.jpg)
17
AngularJSを使うときに懸念したこと
IE対策はしておいた方が良さそうだ
![Page 18: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/18.jpg)
18
ng-app属性をつけている要素に id=“ng-app”をつける
<div id=“ng-app” ng-app=“app”> … </div>
対策1- ng-app
独自タグは使わず、属性にする Directiveのrestrictは”E”だけでなく”EA”としておくと吉
<ng-view></ng-view><ng-include></ng-include>
対策2- 独自タグ
<div ng-view></div><div ng-include></div>
AngularJSを使うときに懸念したこと
![Page 19: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/19.jpg)
19
独自タグを使いたい場合は、 HTMLにプレフィックス指定をして JSでcreateElementする
対策3- 独自タグ2
<html xmlns:ng="http://angularjs.org"> <head> <!--[if lte IE 8]> <script> document.createElement('ng-include'); document.createElement('ng-view'); !
// Optionally these for CSS document.createElement('ng:include'); document.createElement('ng:view'); </script> <![endif]--> </head>
AngularJSを使うときに懸念したこと
![Page 20: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/20.jpg)
20
json2.jsまたはjson3.jsを使う
対策4- IE7のために
<script src=“/path/to/json2.json”></script>
json2.js https://github.com/douglascrockford/JSON-js json3.js http://bestiejs.github.io/json3/
でもIE7対応するならばAngularを使わない方が良いと思う -> Backbone
• パフォーマンス • バグが見つかったとしても修正される可能性が低い
AngularJSを使うときに懸念したこと
![Page 21: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/21.jpg)
独自タグを使わないようにすれば最小限で済む
IE7以下も対応となったらBackboneの方が無難だと思う
新しいバージョンのAngularJSを使うときもIEのシェアと相談になりそう
21
AngularJSを使うときに懸念したこと
IEへの対応について
![Page 22: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/22.jpg)
22
02
AngularJSを使うときに懸念したこと
学習コスト学習コストが高いと・・・
• 挫折しやすい • 開発に時間がかかる • チームメンバーの増減が難しくなる
などなど、問題多数
![Page 23: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/23.jpg)
23
風の噂
AngularJSを使うときに懸念したこと
他のフレームワークより
学習コストが高いらしい
社員C
ドキュメントが少なくて調べるの大変そう
CTO
AngularJSって難しいんでしょ
社員B
覚えること多くて面倒くさそう
社員A
※ コメントは当人とは一切関係ありません
![Page 24: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/24.jpg)
24
AngularJSを使うときに懸念したこと
学習コストを単純比較したらBackboneよりもAngularは高い
![Page 25: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/25.jpg)
25
AngularJSを使うときに懸念したこと
学習コストを単純比較したらBackboneよりもAngularは高い
機能多
機能少
![Page 26: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/26.jpg)
26
AngularJSを使うときに懸念したこと
学習コストって
事前に調べて勉強実際に業務で頑張る
見事納品して報酬獲得
学習コストは単体フレームワークではなく プロジェクトの内容をすべて実装するために必要な学習コストで 比較しないといけない
![Page 27: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/27.jpg)
27
AngularJSを使うときに懸念したこと
学習コストって
事前に調べて勉強実際に業務で頑張る
見事納品して報酬獲得
準備から完成までかかる調べたり実装するコストの総量
![Page 28: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/28.jpg)
28
AngularJSを使うときに懸念したこと
諸々を考えると対して変わらない気がする・・・
Backbone.stickitMarionette
ChaplinRequireJS
Underscore
![Page 29: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/29.jpg)
29
AngularJSを使うときに懸念したこと
それならばAngularJSにしてみよう
![Page 30: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/30.jpg)
30
チャットアプリでAngularJS
![Page 31: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/31.jpg)
31
チャットアプリでAngularJS
Node.js Socket-Service
チャット実装における構成イメージ
View
Soket.io
Controller
![Page 32: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/32.jpg)
32
チャットアプリでAngularJS
Socket-Service
angular.module("services").factory("SocketService",function($rootScope){ if (typeof io === 'undefined') return; var socket = io.connect('http://'+location.host + '/'); return { on: function (type, listener) { socket.on(type, function () { var args = arguments; $rootScope.$apply(function () { listener.apply(socket, args); }); }); }, emit: function (type, data, listener) { socket.emit(type, data, function () { var args = arguments; $rootScope.$apply(function () { if (listener) { listener.apply(socket, args); } }); }); } }; });
![Page 33: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/33.jpg)
33
チャットアプリでAngularJS
Controller
angular.module('controllers').controller('RoomCtrl',function($scope,SocketService) { $scope.messages = []; SocketService.on('receive', function(message) { $scope.messages.unshift(message); }); $scope.send = function() { SocketService.emit(‘send’,$scope.form.message); }; }
![Page 34: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/34.jpg)
34
チャットアプリでAngularJS
View
<div ng-repeat="message in messages"> {{message}} </div> <form ng-submit="send"> <textarea ng-model=“form.message"></textarea> <input type="submit" value="送信" />
</form>
![Page 35: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/35.jpg)
35
チャットアプリでAngularJS
Node.js
var SocketIO = require('socket.io'); !exports.init = function(server) { var io = SocketIO.listen(server, {log:false}); io.sockets.on('connection', function(socket) { socket.on('send',function(message) { io.sockets.emit('receive',{ message: message, date: new Date() }); }); }); };
![Page 36: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/36.jpg)
36
実演
![Page 37: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/37.jpg)
37
フォームバリデーション
HTML Validationに準拠。
それ以外にも条件必須やエラー表示など柔軟に対応できる
アニメーション
細かなアニメーションをつけることが簡単
機能だけでなく見た目もこだわりたい
フィルタリング
並べ替え、日付フォーマットなど
かゆいところに手が届く
Ajax通信とセキュリティ
もちろん安全性にも配慮したい。
Ajax通信周りでAngularがやっている
セキュリティ対策
チャットアプリでAngularJS
工数を削減してくれた機能たち(一部)
![Page 38: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/38.jpg)
38
フォームバリデーション
チャットアプリでAngularJS
required属性など非対応ブラウザでも対応してくれる(Polyfill) ng-required属性を使うと条件付き必須が簡単に実装できる エラー時にスタイルを変えたり、Submitボタンをdisabledしたりもできる
<form name="validation_form"> <label> <input type="radio" ng-model="form.exp" name="exp" value="exp1" checked> 条件1
</label> <label> <input type="radio" ng-model="form.exp" name="exp" value="exp2"> 条件2
</label> <div ng-show="form.exp === 'exp1'" class="ng-cloak"> <input type="text" ng-required="form.exp === 'exp1'" ng-model="form.exp1.required" /> </div> <div ng-show="form.exp === 'exp2'" class="ng-cloak"> <input type="text" ng-required="form.exp === 'exp2'" ng-model="form.exp2.required" /> </div> <input type="submit" ng-disabled="validation_form.$invalid"/> </form>
![Page 39: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/39.jpg)
39
フィルタリング
チャットアプリでAngularJS
日付フォーマットやソートなどのフィルタ機能 自作フィルタも比較的簡単に実装できる このフィルタを増やしているだけでもわくわくする
angular.module('filters').filter('lineBreak', function() { return function(input,exp) { return input.replace(/\n|\r/g, "<br>"); } });
※改行コードをbrにする自作フィルタ
<div class="form-group"> <input type="text" class="form-control" ng-model="input_date"/> <p>{{input_date}}</p> <p>{{input_date | date: 'yyyy/MM/dd HH/mm'}}</p> </div>
![Page 40: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/40.jpg)
40
アニメーション
チャットアプリでAngularJS
angular-animateモジュールを使うと要素追加や削除時などに 簡単にアニメーションをつけることができる。
ngAnimate.cssを使うとすぐに出来上がる モック作りに最適で、初期の動きのイメージに使用
<div class="list-group"> <div ng-repeat="message in messages" class="slide-left list-group-item"> <div>{{message}}</div> </div> </div>
$ bower install ngAnimate
https://github.com/Augus/ngAnimate
![Page 41: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/41.jpg)
41
Ajax通信とセキュリティ
チャットアプリでAngularJS
app.config(['$httpProvider',function($httpProvider) { $httpProvider.defaults.headers.common = {'X-Requested-With': 'XMLHttpRequest'}; }]);
CSRF対策としてヘッダーとCookieでやり取り→ フォームにhiddenなinputを設置しなくてよい
デフォルトでX-Requested-With: “XMLHttpRequest”がついていない app初期化時につけておくと良い
![Page 42: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/42.jpg)
42
実演
![Page 43: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/43.jpg)
特にフォーム周りは充実していて、フォームが複雑なページに最適
AngularのHTMLはいつも使っているHTMLではないと割り切る。 ng-clickとかonClick時代に逆戻りじゃん!的な考えは捨てる。 -> そう!だってこれはテンプレートだもの
データバインディングは本当に楽。 ビューをほとんど意識しなくて済む。
43
チャットアプリでAngularJS
チャットアプリで導入して思ったこと
意外と不足していたのが配列やオブジェクトの操作 UnderscoreやLo-dashがあるといいかもしれない
思ったよりも工数はかからず。バグが少なかったためむしろ工数は削減できた。 小規模な開発でも十分に使っていけるフレームワークと感じた。
![Page 44: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/44.jpg)
44
AngularJSを使うなら知っておきたいワード
![Page 45: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/45.jpg)
GruntとAngularJSのMinify
Karma / Jasmine
YeomanとAngular Generator
45
AngularJSを使うなら知っておきたいワード
今回はワードの紹介のみですが・・・
AngularJS Batarang (Chrome拡張)
Angular Batarang以外は他のフレームワークでも使えるものです。 今後、それぞれ勉強会を開催できればと思ってます。
![Page 46: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/46.jpg)
46
AngularJSの進化スピード
![Page 47: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/47.jpg)
40回?!
47
頻繁なバージョンアップと定期的な開発
AngularJSの進化スピード
0.9.0-0.9.8
2010.102011
20122013
0.9.8-0.10.5
0.10.5 - 1.0.4
1.1.0 - 1.1.1
1.0.4 - 1.0.8
1.1.1 - 1.2.6
20102014
1.2.6 - 1.2.16
1.3.0 (β1) - 1
.3.0 (β10)
2.0.0 -
8回17回 19回 19回 20回
![Page 48: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/48.jpg)
48
今回ご紹介した部分
まだまだできることが一杯
AngularJSの進化スピード
学習コストが高いと言われる所以の1つ
![Page 49: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/49.jpg)
49
AngularJSの進化スピード
まだまだ進化していくフレームワーク
それはリスクでもあり楽しみでもある
![Page 50: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/50.jpg)
50
まとめ
![Page 51: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/51.jpg)
51
風の噂
まとめ
他のフレームワークより
学習コストが高いらしい
社員C
ドキュメントが少なくて調べるの大変そう
CTO
AngularJSって難しいんでしょ
社員B
覚えること多くて面倒くさそう
社員A
※ コメントは当人とは一切関係ありません
![Page 52: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/52.jpg)
52
まとめ
AngularJSって難しいんでしょ
社員A
使うのはかなり簡単
• 使うのは非常に簡単 • ちょっとしたコードですぐにそれっぽいものができる • でもディレクティブ辺りでだいたい1度つまづく • 本当に使いこなそうとすると先は長い
社員B
覚えること多くて面倒くさそう 覚えることは多い• ng-なんちゃらが多くて覚えるのは大変 • 他のフレームワークやライブラリにあまり似ていないので、過去の経験は活かしにくい
• 公式ドキュメントを見ながらが基本になる
![Page 53: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/53.jpg)
53
まとめ
他のフレームワークより
学習コストが高いらしい
Nobisuke
ドキュメントが少なくて調べるの大変そう
CTO
フルスタックフレームワークだもの
• 機能が多い分、学習すべき項目は多い • でもいろんなライブラリを覚える必要が少ない • 一貫したルールで作れるので最終的には管理しやすい
日本語ドキュメントは少ない?
• js-studio (http://js.studio-kingdom.com/angularjs) • ドットインストール (http://dotinstall.com/lessons/
basic_angularjs) • AngularJS Ninja (http://angularjsninja.com/)
ドキュメントは公式が無難 -> ゆえに英語必須
![Page 54: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/54.jpg)
54
まとめ
AngularJSの開発者が設計から実装、テスト、TIPSまでを紹介
AngularJSアプリケーション開発ガイド
http://www.oreilly.co.jp/books/9784873116679/
Web開発者にいま最も支持されているJavaScript MVCフレームワーク「AngularJS」の解説書。定型的な単純作業が繰り返されがちなWeb開発をよりシンプルで楽しいものにしようというのがAngularJSの試みです。本書ではまずAngularJSアプリケーションの構成要素を押さえた上で…
![Page 55: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/55.jpg)
小規模案件でも使えるくらい初期開発は簡単
特にフォーム周りは充実している。 コンタクトフォームだけの実装でも役に立ちそう
進化スピードが速いので対応するのにもスピードが必要 長期に渡って運用するものはバージョンアップのコストを考慮しておく
一環したルールで構築できるので、1度覚えれば楽で保守がしやすい (いろんなプラグインのルールを覚える必要が少ない)
55
まとめ
受託開発でAngularを使ってみて
30分では語り尽くせませんね・・・
![Page 56: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/56.jpg)
56
まとめ
CMのあと次回予告
![Page 57: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/57.jpg)
57
CM
57
LIGでは、一緒にAngularJSをやっていける
フロントエンドエンジニアを募集しています。
LIG
![Page 58: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/58.jpg)
58
CM
58
LIGでは、一緒にAngularJSをやっていける
フロントエンドエンジニアを募集しています。
LIG
![Page 59: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/59.jpg)
59
CM
59
LIGでは、一緒にAngularJSをやっていける
フロントエンドエンジニアを募集しています。
LIG
![Page 60: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/60.jpg)
60
この人を見つけて捕まえて詳細を吐かせてください!
LIGに興味のあるエンジニアの方は
CM
![Page 61: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/61.jpg)
61
次回 予告
ディレクトリ構成とタスクランナー
※ 内容が変更になる場合がございます。あらかじめご了承ください
![Page 62: 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG](https://reader034.fdocument.pub/reader034/viewer/2022042700/55835d50d8b42a68138b5244/html5/thumbnails/62.jpg)
62
ご清聴ありがとうございました
https://github.com/frontainer/angular-sample
勉強会で使用したサンプルはGithubにて公開しています
- PullRequest歓迎 -