受託開発でのangularjs - 第1回angularjs 勉強会 at lig

1

受託開発でのAngularJS

2

@frontainerFront-end Engineer

2014/4 LIG入社フロントエンドエンジニア

プロフィール

http://github.com/frontainer

http://trifort.jp/library/cavy/

現在はWebサイトを作ったりテンプレート作ったりいろいろ

前職ではゲームのフロントエンド開発や canvasライブラリを作って遊んだりしてました。

これまでBackboneで２本、Angularで４本案件実装してきました。

YUICHI HAYASHI

林　優一

https://twitter.com/frontainer

https://twitter.com/frontainer

http://github.com/frontainer

http://trifort.jp/library/cavy/

3

本題に入る前にお知らせです。

4

Powered by

CM

10

体験を売りたい人も貴重な体験をしたい人も

CM

11

Powered by

CM

https://trip-u.com/

https://trip-u.com/

12

初回の今回は「AngularJSを導入したときのお話」

AngularJSを使うときに懸念したこと

チャットアプリでAngularJS

AngularJSの進化スピード

まとめ

13

AngularJSを使うなら知っておきたいワード

14


15

01IE9以上+モダンブラウザ


対応ブラウザ

バージョン 1.2.x 1.3.x 2.x.x

対応ブラウザ IE8 IE9 IE11(予定)

備考 IE8以下は一部機能で別途対策が必要I積極的な機能削除は行わないが

E8はテストを行わない開発中

推奨

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以上+モダンブラウザ

http://news.mynavi.jp/news/2014/05/07/066/

17


IE対策はしておいた方が良さそうだ

18

ng-app属性をつけている要素に id=“ng-app”をつける

<div id=“ng-app” ng-app=“app”> … </div>

対策１- ng-app

独自タグは使わず、属性にする Directiveのrestrictは”E”だけでなく”EA”としておくと吉

<ng-view></ng-view><ng-include></ng-include>

対策２- 独自タグ

<div ng-view></div><div ng-include></div>


19

独自タグを使いたい場合は、 HTMLにプレフィックス指定をして JSでcreateElementする

対策３- 独自タグ２

<html xmlns:ng="http://angularjs.org"> <head>  </head>

20

json2.jsまたはjson3.jsを使う

対策４- 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

• パフォーマンス • バグが見つかったとしても修正される可能性が低い


独自タグを使わないようにすれば最小限で済む

IE7以下も対応となったらBackboneの方が無難だと思う

新しいバージョンのAngularJSを使うときもIEのシェアと相談になりそう

21


IEへの対応について

22

02


学習コスト学習コストが高いと・・・

• 挫折しやすい • 開発に時間がかかる • チームメンバーの増減が難しくなる

などなど、問題多数

23

風の噂


他のフレームワークより

学習コストが高いらしい

社員C

ドキュメントが少なくて調べるの大変そう

CTO

AngularJSって難しいんでしょ

社員B

覚えること多くて面倒くさそう

社員A

※ コメントは当人とは一切関係ありません

24


学習コストを単純比較したらBackboneよりもAngularは高い

25


学習コストを単純比較したらBackboneよりもAngularは高い

機能多

機能少

26


学習コストって

事前に調べて勉強実際に業務で頑張る

見事納品して報酬獲得

学習コストは単体フレームワークではなくプロジェクトの内容をすべて実装するために必要な学習コストで比較しないといけない

27


学習コストって

事前に調べて勉強実際に業務で頑張る

見事納品して報酬獲得

準備から完成までかかる調べたり実装するコストの総量

28


諸々を考えると対して変わらない気がする・・・

Backbone.stickitMarionette

ChaplinRequireJS

Underscore

29


それならばAngularJSにしてみよう

30


31


Node.js Socket-Service

チャット実装における構成イメージ

View

Soket.io

Controller

32


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); } }); }); } }; });

33


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); }; }

34


View

<div ng-repeat="message in messages"> {{message}} </div> <form ng-submit="send"> <textarea ng-model=“form.message"></textarea> <input type="submit" value="送信" />

</form>

35


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() }); }); }); };

36

実演

37

フォームバリデーション

HTML Validationに準拠。

それ以外にも条件必須やエラー表示など柔軟に対応できる

アニメーション

細かなアニメーションをつけることが簡単

機能だけでなく見た目もこだわりたい

フィルタリング

並べ替え、日付フォーマットなど

かゆいところに手が届く

Ajax通信とセキュリティ

もちろん安全性にも配慮したい。

Ajax通信周りでAngularがやっている

セキュリティ対策


工数を削減してくれた機能たち（一部）

38

フォームバリデーション


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>

39

フィルタリング


日付フォーマットやソートなどのフィルタ機能自作フィルタも比較的簡単に実装できるこのフィルタを増やしているだけでもわくわくする

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>

40

アニメーション


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

41

Ajax通信とセキュリティ


app.config(['$httpProvider',function($httpProvider) { $httpProvider.defaults.headers.common = {'X-Requested-With': 'XMLHttpRequest'}; }]);

CSRF対策としてヘッダーとCookieでやり取り→ フォームにhiddenなinputを設置しなくてよい

デフォルトでX-Requested-With: “XMLHttpRequest”がついていない app初期化時につけておくと良い

42

実演

特にフォーム周りは充実していて、フォームが複雑なページに最適

AngularのHTMLはいつも使っているHTMLではないと割り切る。 ng-clickとかonClick時代に逆戻りじゃん！的な考えは捨てる。 -> そう！だってこれはテンプレートだもの

データバインディングは本当に楽。ビューをほとんど意識しなくて済む。

43


チャットアプリで導入して思ったこと

意外と不足していたのが配列やオブジェクトの操作 UnderscoreやLo-dashがあるといいかもしれない

思ったよりも工数はかからず。バグが少なかったためむしろ工数は削減できた。小規模な開発でも十分に使っていけるフレームワークと感じた。

44


GruntとAngularJSのMinify

Karma / Jasmine

YeomanとAngular Generator

45


今回はワードの紹介のみですが・・・

AngularJS Batarang (Chrome拡張）

Angular Batarang以外は他のフレームワークでも使えるものです。今後、それぞれ勉強会を開催できればと思ってます。

46


40回?!

47

頻繁なバージョンアップと定期的な開発


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回

48

今回ご紹介した部分

まだまだできることが一杯


学習コストが高いと言われる所以の１つ

49


まだまだ進化していくフレームワーク

それはリスクでもあり楽しみでもある

50

まとめ

51

風の噂

まとめ



社員C


CTO


社員B

覚えること多くて面倒くさそう

社員A

※ コメントは当人とは一切関係ありません

52

まとめ


社員A

使うのはかなり簡単

• 使うのは非常に簡単 • ちょっとしたコードですぐにそれっぽいものができる • でもディレクティブ辺りでだいたい１度つまづく • 本当に使いこなそうとすると先は長い

社員B

覚えること多くて面倒くさそう覚えることは多い• ng-なんちゃらが多くて覚えるのは大変 • 他のフレームワークやライブラリにあまり似ていないので、過去の経験は活かしにくい

• 公式ドキュメントを見ながらが基本になる

53

まとめ



Nobisuke


CTO

フルスタックフレームワークだもの

• 機能が多い分、学習すべき項目は多い • でもいろんなライブラリを覚える必要が少ない • 一貫したルールで作れるので最終的には管理しやすい

日本語ドキュメントは少ない？

• js-studio (http://js.studio-kingdom.com/angularjs) • ドットインストール (http://dotinstall.com/lessons/

basic_angularjs) • AngularJS Ninja (http://angularjsninja.com/)

ドキュメントは公式が無難 -> ゆえに英語必須

http://js.studio-kingdom.com/angularjs

http://angularjsninja.com/

54

まとめ

AngularJSの開発者が設計から実装、テスト、TIPSまでを紹介

AngularJSアプリケーション開発ガイド

http://www.oreilly.co.jp/books/9784873116679/

Web開発者にいま最も支持されているJavaScript MVCフレームワーク「AngularJS」の解説書。定型的な単純作業が繰り返されがちなWeb開発をよりシンプルで楽しいものにしようというのがAngularJSの試みです。本書ではまずAngularJSアプリケーションの構成要素を押さえた上で…

小規模案件でも使えるくらい初期開発は簡単

特にフォーム周りは充実している。コンタクトフォームだけの実装でも役に立ちそう

進化スピードが速いので対応するのにもスピードが必要長期に渡って運用するものはバージョンアップのコストを考慮しておく

一環したルールで構築できるので、１度覚えれば楽で保守がしやすい（いろんなプラグインのルールを覚える必要が少ない）

55

まとめ

受託開発でAngularを使ってみて

30分では語り尽くせませんね・・・

56

まとめ

CMのあと次回予告

57

CM

57

LIGでは、一緒にAngularJSをやっていける

フロントエンドエンジニアを募集しています。

LIG

58

CM

58



LIG

59

CM

59



LIG

60

この人を見つけて捕まえて詳細を吐かせてください！

LIGに興味のあるエンジニアの方は

CM

61

次回予告

ディレクトリ構成とタスクランナー

※ 内容が変更になる場合がございます。あらかじめご了承ください

62

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

https://github.com/frontainer/angular-sample

勉強会で使用したサンプルはGithubにて公開しています

- PullRequest歓迎 -

https://github.com/frontainer/angular-sample

受託開発でのangularjs - 第1回angularjs 勉強会 at lig

Technology