ng-mtg#6 AngularJS ディレクティブ・パターン

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

1
ディレクティブ・パターン

2
@frontainer
Front-end Engineer
2014/4 LIG入社
フロントエンドエンジニア
プロフィール
http://github.com/frontainer
http://trifort.jp/library/c...

3
@frontainer
Front-end Engineer
前回はLIG社内で勉強会を行いました
プロフィール
http://www.slideshare.net/frontainer/angularjs-1angularjs-lig

4
@frontainer
Front-end Engineer
犬が好きです
プロフィール

5
本題に入る前に質問です

6
Q. AngularJSを実務で使ったことはありますか？

7
Q. （チュートリアル以外で）ディレクティブを作ったことはありますか？

8
今回はそんな「ディレクティブ」について
過去の案件を振り返ってパターン分けしてみました

実装のパターン
[おまけ]より良いパフォーマンスのために
まとめ
9
呼び出しのパターン
ディレクティブ・パターンとは

10
ディレクティブ・パターンとは

11
ディレクティブ・パターンとは
ディレクティブ・パターンとは
一般的に認知されているものではなく勝手に付けた呼称です。
パターン化することで使う場面を想定してもらえるようになれば嬉しいです
ディレクティブをあまり活用したことのない方に少しで...

12
呼び出しパターン

13
呼び出しパターン
angular.module('directives').directive('dummyText',function() {
return {
restrict: 'ACEM',
replace: true,
temp...

14
Attribute
Class
Element
Comment
01 Restrict: A
02 Restrict: C
03 Restrict: E
04 Restrict: M
呼び出しパターン

15
The normalization process is as follows:
!
Strip x- and data- from the front of the element/attributes.
Convert the :, ...

16
通常以下のような処理が行われます:
!
ElementやAttributeの前についているx-とdata-は取り除きます。
:、-や_などの区切り文字はキャメルケースへ変換されます。
呼び出しパターン

17
検証

18
01 Restrict: A
呼び出しパターン
- Attribute -

<div dummy-text><p class=“bg-danger">NG</p></div>
<div dummy_text><p class=“bg-danger">NG</p></div>
<div dummy:text><p cla...

<div dummy-text><p class=“bg-danger">NG</p></div>
<div dummy_text><p class=“bg-danger">NG</p></div>
<div dummy:text><p cla...

21
02 Restrict: C
呼び出しパターン
- Class -

<div class="dummy-text"><p class=“bg-danger">NG</p></div>
<div class="dummy_text"><p class=“bg-danger">NG</p></div>
<div c...

23
<div class="dummy-text"><p class=“bg-danger">NG</p></div>
<div class="dummy_text"><p class=“bg-danger">NG</p></div>
<di...

24
03 Restrict: E
呼び出しパターン
- Element -

<dummy-text><p class=“bg-danger">NG</p></dummy-text>
<dummy_text><p class=“bg-danger”>NG</p></dummy_text>
<dummy:text><p c...

<dummy-text><p class=“bg-danger">NG</p></dummy-text>
<dummy_text><p class=“bg-danger”>NG</p></dummy_text>
<dummy:text><p c...

27
04 Restrict: M
呼び出しパターン
- Comment -

<!-- directive: dummy-text —>
<!-- directive: dummy_text —>
<!-- directive: dummy:text —>
<!-- directive: dummyText —>
<!-...

<!-- directive: dummy-text —>
<!-- directive: dummy_text —>
<!-- directive: dummy:text —>
<!-- directive: dummyText —>
<!-...

AttributeとElementの解釈は同じ（camelCaseダメ）
ClassとCommentの解釈は同じ（:ダメ）
30
呼び出しパターン

31
呼び出しパターン
ディレクティブ名の使い分け
わかりやすい記法 → dummy-text,dummy_text
HTMLに準拠 → data-dummy-text
XMLに準拠 → dummy:text
XHTMLに準拠 → x-dumm...

32
ちなみに・・・
呼び出しパターン

28%
2%
70%
33
04 Restrict: M
01 Restrict: A
02 Restrict: C
03 Restrict: E
過去の案件で実際に呼び出された形式の割合
呼び出しパターン
１個もなかった

100%
34
dummy-text
過去の案件で実際に呼び出された名称形式の割合
呼び出しパターン
これしかなかった

ディレクティブ名はキャメルケースだけど呼び出しをキャメルにすると
呼び出せないことがある
restrict: mはあまり使われていない。ドキュメントでもあまり触れられていない
35
呼び出しパターンを調べてみて得たこと
呼び出しは-(ハイフン)...

36
実装パターン

37
01
実装パターン
テンプレートパターン
02 共通パーツパターン
04 jQueryプラグインパターン
03 イベントフックパターン

38
01 テンプレートパターン
実装パターン
- Template Pattern -

39
共通のテンプレートを反映させるためのディレクティブ。
ng-includeと同様だが、名称が明確になりマークアップがわかりやすくなる。
実装パターン
01 テンプレートパターン - Template Pattern -

<sidebar></sidebar>
40
実例
実装パターン 01 テンプレートパターン

<sidebar></sidebar>
41
実例
実装パターン 01 テンプレートパターン
アクセスしたページによって
activeになる要素を変えたい
今このページを表示している

<sidebar></sidebar>
42
実例
angular.module('directives').directive('sidebar',function($location) {
return {
restrict: 'E',
r...

43
controllers/RootCtrl.js
angular.module('controllers').controller('RootCtrl', function ($scope,$location,$rootScope) {
$...

44
templates/sidebar.html
<nav>
<ul class="nav nav-pills nav-stacked">
<li ng-class="{active:current==='/'}"><a href="#/">...

45
<sidebar></sidebar> <div ng-include=“‘templates/sidebar.html’”></div>
<sidebar></sidebar>実例
実装パターン 01 テンプレートパターン
動作は同じで...

46
02 共通パーツパターン
実装パターン
- Common Parts Pattern -

47
共通の動作や処理をもつパーツのディレクティブ。
ボタンやインプットフォームなど繰り返し使われる要素に有効。
実装パターン
02 共通パーツパターン - Common Parts Pattern -

48
<copyright></copyright>実例
実装パターン 01 テンプレートパターン

49
<copyright></copyright>実例
実装パターン 01 テンプレートパターン
Copyright © 2014 frontainer.com All Rights Reserved.
毎年更新してくれと言われる
記述の仕方...

50
directives/copyright.js
<copyright></copyright>実例
angular.module('directives').directive('copyright',function() {
retur...

51
<copyright></copyright>実例
<copyright name="frontainer.com"></copyright>
<div name="frontainer.com">Copyright © 2014 fro...

<select-list></select-list>
52
実例
実装パターン 02 共通パーツパターン

<select-list></select-list>
53
実例
実装パターン 02 共通パーツパターン
セレクトボックスまでいかない
簡易的な選択をさせたい
選択したデータがモデルに格納されるように

<select-list></select-list>
54
実例
<div class="list-group">
<a class="list-group-item" ng-repeat="human in data"
ng-cli...

<select-list></select-list>
55
実例
angular.module('directives').directive('selectList',function() {
return {
restrict: 'EA'...

<select-list></select-list>
56
実例
angular.module('controllers').controller('RootCtrl', function ($scope) {
$scope.data = [...

<select-list></select-list>
57
実例
実装パターン 02 共通パーツパターン
$scope.select = function(val) {
$scope.ngModel = val;
}
ng-click=“...

angular.module('controllers').controller('RootCtrl', function ($scope) {
$scope.data = [{
id: 0,
name: 'Ichiro'
}
];
});
<...

59
03 イベントフックパターン
実装パターン
- Event Hook Pattern -

60
一定のイベントをフックしてDOMを操作したり
ファイルをアップロードしたりするディレクティブ
実装パターン
03 イベントフックパターン - Event Hook Pattern -

<textarea shift-submit></textarea>
61
実例
実装パターン 03 イベントフックパターン

<textarea shift-submit></textarea>
62
実例
実装パターン
Shiftキーを押しながらEnterで送信したい
もちろん送信ボタンでも送信できる
03 イベントフックパターン

<form id=“message-form” ng-submit=“send();”>
<textarea shift-submit=“message-form”></textarea>
<p><input type=“submit”...

64
実例
angular.module(“directives").directive("shiftSubmit", function() {
return {
restrict:‘AC',
scope: {
shiftSubmit:...

65
実例
angular.module('controllers').controller('PatternCtrl', function ($scope) {
$scope.messages = [];
$scope.inputMessag...

66
実装パターン
04 jQueryプラグインパターン - jQuery Plugin Pattern -

67
AngularJSでjQueryプラグインを使いたいときのディレクティブ
参照が残らないように注意が必要なのと、プラグインでリークしないかどうかの注意も必要
実装パターン
04 jQueryプラグインパターン - jQuery Plugi...

<div tooltip=“ツールチップ表示”></div>
68
実例
実装パターン 04 jQueryプラグインパターン

<div tooltip=“ツールチップ表示”></div>
69
実例
実装パターン
マウスオーバーでツールチップを表示
jquery.powertip.jsを他ページで使っていたので
それに合わせる必要があった
04 jQueryプラグイン...

70
実例
angular.module('directives').directive('tooltip',function() {
return {
restrict: 'AC',
replace: true,
scope: {
toolt...

71
実例
実装パターン
<div tooltip=“ツールチップ表示”></div>
ng-repeatで回しても、Ajax等で追加されても
ツールチップがちゃんと出る
<div><a tooltip="jquery.powertip.jsを...

意外とパターンは少ない
活用しきれていない or モジュールが充実しているので自前実装が不要
一番多かったのは共通パーツパターン
次いでイベントフックパターン
72
パターン分けしてみてわかったこと
複雑な処理がディレクティブ化されているのを見...

ng-grid
73
複雑な処理のディレクティブ例
実装パターン

74
/***********************************************
* ng-grid JavaScript Library
* Authors: https://github.com/angular-ui/...

75
<div class="gridStyle" ng-grid="gridOptions"></div>
実装パターン
var app = angular.module('myApp', ['ngGrid']);
app.controlle...

76
より良いパフォーマンスのために

$templateCacheを活用しよう
gulp-angular-templatecache
$templateCache.put('hello.html', ‘<p>Hello World!!</p>’);
77
HTTPリクエストが増えす...

78
HTTPリクエストが増えすぎたときは
より良いパフォーマンスのために
こんな感じでまとめてくれる

79
まとめ
最後駆け足になりましたが、まとめ

ディレクティブを使うことでビューがコンパクトでわかりやすくなる
HTTPリクエストの数が増えたら$templateCacheを使ってテンプレートをひとまとめに
コントローラの負担を減らすために、DOM操作系は極力ディレクティブにしよう
80
ま...

81
まとめ
AngularJSの開発者が設計から実装、テスト、TIPSまでを紹介
AngularJSアプリケーション開発ガイド
http://www.oreilly.co.jp/books/9784873116679/
Web開発者にいま最も...

82
CM
82
LIGでは、一緒に
AngularJSをやっていける
フロントエンドエンジニア
を募集しています。
LIG

83
https://github.com/frontainer/angular-sample2
今回使用したサンプルはGithubにて公開しています

84
ご清聴ありがとうございました
今回使用したサンプルはGithubにて公開しています
https://github.com/frontainer/angular-sample2

Share Slideshare

LinkedIn
Facebook
Twitter

Embed

Size (px)

Show related Slideshows at end

WordPress Shortcode

Link

Share
Email

Directiveで実現できたこと by Kon Yuichi 9905 views
そろそろ押さえておきたい AngularJSのセキュリティ by Muneaki Nishimura 25911 views
開発ライフサイクルから見たAngularJS by Mizuho Sakamaki 25399 views
イマドキのフロントエンドエンジニアの道具箱 by Fumio SAGAWA 45749 views
エフスタ会津 - フロントエンドエンジニアの話 - by thedesignium Inc. 1144 views
LIGにおけるフロントエンドチーム構築 by Hayashi Yuichi 4583 views

View on Slideshare

1 of 84 Ad

View on Slideshare

1 of 84 Ad