SlideShare a Scribd company logo
1 of 62
Download to read offline
1
受託開発でのAngularJS
2
@frontainer
Front-end Engineer
2014/4 LIG入社
フロントエンドエンジニア
プロフィール
http://github.com/frontainer
http://trifort.jp/library/cavy/
現在はWebサイトを作ったりテンプレート作ったりいろいろ
前職ではゲームのフロントエンド開発や
canvasライブラリを作って遊んだりしてました。
これまでBackboneで2本、Angularで4本案件実装してきました。
YUICHI HAYASHI
林 優一
3
本題に入る前にお知らせです。
4
Powered by
CM
CM
CM
CM
CM
CM
10
体験を売りたい人も
貴重な体験をしたい人も
CM
11
Powered by
CM
https://trip-u.com/
12
初回の今回は「AngularJSを導入したときのお話」
AngularJSを使うときに懸念したこと
チャットアプリでAngularJS
AngularJSの進化スピード
まとめ
13
AngularJSを使うなら知っておきたいワード
14
AngularJSを使うときに懸念したこと
15
01
IE9以上+モダンブラウザ
AngularJSを使うときに懸念したこと
対応ブラウザ
バージョン 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.0
FF28 IE9.0
Chrome34 IE10.0
Chrome33 その他
16http://news.mynavi.jp/news/2014/05/07/066/
現実 IE8以上+モダンブラウザ
17
AngularJSを使うときに懸念したこと
IE対策はしておいた方が良さそうだ
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を使うときに懸念したこと
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を使うときに懸念したこと
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を使うときに懸念したこと
独自タグを使わないようにすれば最小限で済む
IE7以下も対応となったらBackboneの方が無難だと思う
新しいバージョンのAngularJSを使うときもIEのシェアと相談になりそう
21
AngularJSを使うときに懸念したこと
IEへの対応について
22
02
AngularJSを使うときに懸念したこと
学習コスト
学習コストが高いと・・・
• 挫折しやすい
• 開発に時間がかかる
• チームメンバーの増減が難しくなる
などなど、問題多数
23
風の
AngularJSを使うときに懸念したこと
他のフレームワークより
学習コストが高いらしい
社員C
ドキュメントが少なくて調べるの
大変そう
CTO
AngularJSって難しいんでしょ
社員B
覚えること多くて面倒くさそう
社員A
※ コメントは当人とは一切関係ありません
24
AngularJSを使うときに懸念したこと
学習コストを単純比較したらBackboneよりもAngularは高い
25
AngularJSを使うときに懸念したこと
学習コストを単純比較したらBackboneよりもAngularは高い
機能多
機能少
26
AngularJSを使うときに懸念したこと
学習コストって
事前に調べて勉強
実際に業務で頑張る 見事納品して報酬獲得
学習コストは単体フレームワークではなく
プロジェクトの内容をすべて実装するために必要な学習コストで
比較しないといけない
27
AngularJSを使うときに懸念したこと
学習コストって
事前に調べて勉強
実際に業務で頑張る 見事納品して報酬獲得
準備から完成までかかる調べたり実装するコストの総量
28
AngularJSを使うときに懸念したこと
諸々を考えると対して変わらない気がする・・・
Backbone.stickit
Marionette
Chaplin
RequireJS
Underscore
29
AngularJSを使うときに懸念したこと
それならばAngularJSにしてみよう
30
チャットアプリでAngularJS
31
チャットアプリでAngularJS
Node.js Socket-Service
チャット実装における構成イメージ
View
Soket.io
Controller
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);	

}	

});	

});	

}	

};	

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

	

 };	

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

	

 });	

	

 });	

});	

};
36
実演
37
フォームバリデーション
HTML Validationに準拠。

それ以外にも条件必須やエラー表示など
柔軟に対応できる
アニメーション
細かなアニメーションをつけることが簡単

機能だけでなく見た目もこだわりたい
フィルタリング
並べ替え、日付フォーマットなど

かゆいところに手が届く
Ajax通信とセキュリティ
もちろん安全性にも配慮したい。

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

セキュリティ対策
チャットアプリでAngularJS
工数を削減してくれた機能たち(一部)
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>
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>
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
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初期化時につけておくと良い
42
実演
特にフォーム周りは充実していて、フォームが複雑なページに最適
AngularのHTMLはいつも使っているHTMLではないと割り切る。

ng-clickとかonClick時代に逆戻りじゃん!的な考えは捨てる。

-> そう!だってこれはテンプレートだもの
データバインディングは本当に楽。

ビューをほとんど意識しなくて済む。
43
チャットアプリでAngularJS
チャットアプリで導入して思ったこと
意外と不足していたのが配列やオブジェクトの操作

UnderscoreやLo-dashがあるといいかもしれない
思ったよりも工数はかからず。バグが少なかったためむしろ工数は削減できた。

小規模な開発でも十分に使っていけるフレームワークと感じた。
44
AngularJSを使うなら知っておきたいワード
GruntとAngularJSのMinify
Karma / Jasmine
YeomanとAngular Generator
45
AngularJSを使うなら知っておきたいワード
今回はワードの紹介のみですが・・・
AngularJS Batarang (Chrome拡張)
Angular Batarang以外は他のフレームワークでも使えるものです。
今後、それぞれ勉強会を開催できればと思ってます。
46
AngularJSの進化スピード
40回?!
47
頻繁なバージョンアップと定期的な開発
AngularJSの進化スピード
0.9.0-0.9.8
2010.10
2011
2012
2013
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
2010
2014
1.2.6 - 1.2.16
1.3.0 (β1) - 1.3.0 (β10)
2.0.0 -
8回
17回
19回 19回 20回
48
今回ご紹介した部分
まだまだできることが一杯
AngularJSの進化スピード
学習コストが高いと言われる所以の1つ
49
AngularJSの進化スピード
まだまだ進化していくフレームワーク
それはリスクでもあり楽しみでもある
50
まとめ
51
風の
まとめ
他のフレームワークより
学習コストが高いらしい
社員C
ドキュメントが少なくて調べるの
大変そう
CTO
AngularJSって難しいんでしょ
社員B
覚えること多くて面倒くさそう
社員A
※ コメントは当人とは一切関係ありません
52
まとめ
AngularJSって難しいんでしょ
社員A
使うのはかなり簡単
• 使うのは非常に簡単
• ちょっとしたコードですぐにそれっぽいものができる
• でもディレクティブ辺りでだいたい1度つまづく
• 本当に使いこなそうとすると先は長い
社員B
覚えること多くて面倒くさそう 覚えることは多い
• ng-なんちゃらが多くて覚えるのは大変
• 他のフレームワークやライブラリにあまり似ていないので、

過去の経験は活かしにくい
• 公式ドキュメントを見ながらが基本になる
53
まとめ
他のフレームワークより
学習コストが高いらしい
Nobisuke
ドキュメントが少なくて調べるの
大変そう
CTO
フルスタックフレームワークだもの
• 機能が多い分、学習すべき項目は多い
• でもいろんなライブラリを覚える必要が少ない
• 一貫したルールで作れるので最終的には管理しやすい
日本語ドキュメントは少ない?
• js-studio (http://js.studio-kingdom.com/angularjs)
• ドットインストール (http://dotinstall.com/lessons/
basic_angularjs)
• AngularJS Ninja (http://angularjsninja.com/)
ドキュメントは公式が無難 -> ゆえに英語必須
54
まとめ
AngularJSの開発者が設計から実装、テスト、TIPSまでを紹介
AngularJSアプリケーション開発ガイド
http://www.oreilly.co.jp/books/9784873116679/
Web開発者にいま最も支持されているJavaScript MVCフレー
ムワーク「AngularJS」の解説書。定型的な単純作業が繰り
返されがちなWeb開発をよりシンプルで楽しいものにしよう
というのがAngularJSの試みです。本書ではまずAngularJSア
プリケーションの構成要素を押さえた上で…
小規模案件でも使えるくらい初期開発は簡単
特にフォーム周りは充実している。

コンタクトフォームだけの実装でも役に立ちそう
進化スピードが速いので対応するのにもスピードが必要
長期に渡って運用するものはバージョンアップのコストを考慮しておく
一環したルールで構築できるので、1度覚えれば楽で保守がしやすい

(いろんなプラグインのルールを覚える必要が少ない)
55
まとめ
受託開発でAngularを使ってみて
30分では語り尽くせませんね・・・
56
まとめ
CMのあと次回予告
57
CM
57
LIGでは、一緒に
AngularJSをやっていける
フロントエンドエンジニア
を募集しています。
LIG
58
CM
58
LIGでは、一緒に
AngularJSをやっていける
フロントエンドエンジニア
を募集しています。
LIG
59
CM
59
LIGでは、一緒に
AngularJSをやっていける
フロントエンドエンジニア
を募集しています。
LIG
60
この人を見つけて捕まえて

詳細を吐かせてください!
LIGに興味のあるエンジニアの方は
CM
61
次

回
予告
ディレクトリ構成とタスクランナー
※ 内容が変更になる場合がございます。あらかじめご了承ください
62
ご清聴ありがとうございました
https://github.com/frontainer/angular-sample
勉強会で使用したサンプルはGithubにて公開しています
- PullRequest歓迎 -

More Related Content

What's hot

angular1脳で見るangular2
angular1脳で見るangular2angular1脳で見るangular2
angular1脳で見るangular2Moriyuki Arakawa
 
angular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1clubangular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1clubsilvers ofsilvers
 
3分でわかるangular js
3分でわかるangular js3分でわかるangular js
3分でわかるangular jsShin Adachi
 
Angular js はまりどころ
Angular js はまりどころAngular js はまりどころ
Angular js はまりどころAyumi Goto
 
イベント駆動AngularJS / 今から書くAngular 2.0
イベント駆動AngularJS / 今から書くAngular 2.0イベント駆動AngularJS / 今から書くAngular 2.0
イベント駆動AngularJS / 今から書くAngular 2.0Okuno Kentaro
 
簡単AngularJS(関西AngularJS勉強会)
簡単AngularJS(関西AngularJS勉強会)簡単AngularJS(関西AngularJS勉強会)
簡単AngularJS(関西AngularJS勉強会)Takahiro Maki
 
AngularJSからReactに移ったケースの話
AngularJSからReactに移ったケースの話AngularJSからReactに移ったケースの話
AngularJSからReactに移ったケースの話kumatch kumatch
 
React を導入した フロントエンド開発
React を導入したフロントエンド開発React を導入したフロントエンド開発
React を導入した フロントエンド開発 daisuke-a-matsui
 
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門Shumpei Shiraishi
 
Flux react現状確認会
Flux react現状確認会Flux react現状確認会
Flux react現状確認会VOYAGE GROUP
 
JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門Shumpei Shiraishi
 
GUI アプリケーションにおける MVC
GUI アプリケーションにおける MVCGUI アプリケーションにおける MVC
GUI アプリケーションにおける MVCYu Nobuoka
 
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみたサーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみたItaru Kitagawa
 
Directiveで実現できたこと
Directiveで実現できたことDirectiveで実現できたこと
Directiveで実現できたことKon Yuichi
 

What's hot (20)

AngularJS 概説
AngularJS 概説AngularJS 概説
AngularJS 概説
 
angular1脳で見るangular2
angular1脳で見るangular2angular1脳で見るangular2
angular1脳で見るangular2
 
angular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1clubangular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1club
 
Angular2
Angular2Angular2
Angular2
 
Angular#Kanazawa
Angular#KanazawaAngular#Kanazawa
Angular#Kanazawa
 
3分でわかるangular js
3分でわかるangular js3分でわかるangular js
3分でわかるangular js
 
Angular js はまりどころ
Angular js はまりどころAngular js はまりどころ
Angular js はまりどころ
 
イベント駆動AngularJS / 今から書くAngular 2.0
イベント駆動AngularJS / 今から書くAngular 2.0イベント駆動AngularJS / 今から書くAngular 2.0
イベント駆動AngularJS / 今から書くAngular 2.0
 
簡単AngularJS(関西AngularJS勉強会)
簡単AngularJS(関西AngularJS勉強会)簡単AngularJS(関西AngularJS勉強会)
簡単AngularJS(関西AngularJS勉強会)
 
AngularJS入門
AngularJS入門AngularJS入門
AngularJS入門
 
AngularJSからReactに移ったケースの話
AngularJSからReactに移ったケースの話AngularJSからReactに移ったケースの話
AngularJSからReactに移ったケースの話
 
React を導入した フロントエンド開発
React を導入したフロントエンド開発React を導入したフロントエンド開発
React を導入した フロントエンド開発
 
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
 
Flux react現状確認会
Flux react現状確認会Flux react現状確認会
Flux react現状確認会
 
Angular2実践入門
Angular2実践入門Angular2実践入門
Angular2実践入門
 
JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門
 
GUI アプリケーションにおける MVC
GUI アプリケーションにおける MVCGUI アプリケーションにおける MVC
GUI アプリケーションにおける MVC
 
React.js + Flux
React.js + FluxReact.js + Flux
React.js + Flux
 
サーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみたサーバサイドエンジニアが 1年間まじめにSPAやってみた
サーバサイドエンジニアが 1年間まじめにSPAやってみた
 
Directiveで実現できたこと
Directiveで実現できたことDirectiveで実現できたこと
Directiveで実現できたこと
 

Viewers also liked

AngularJS入門の巻
AngularJS入門の巻AngularJS入門の巻
AngularJS入門の巻Toshio Ehara
 
Angular.jsについてちょっとしゃべる
Angular.jsについてちょっとしゃべるAngular.jsについてちょっとしゃべる
Angular.jsについてちょっとしゃべるMasashi Haga
 
AngularJS入門の巻2
AngularJS入門の巻2AngularJS入門の巻2
AngularJS入門の巻2Toshio Ehara
 
Angularを使ってみる実例いくつか (2015/4/29 GDGKobe)
Angularを使ってみる実例いくつか (2015/4/29 GDGKobe)Angularを使ってみる実例いくつか (2015/4/29 GDGKobe)
Angularを使ってみる実例いくつか (2015/4/29 GDGKobe)pinmarch_t Tada
 
とりあえずAngular jsを導入してみませんか
とりあえずAngular jsを導入してみませんかとりあえずAngular jsを導入してみませんか
とりあえずAngular jsを導入してみませんかKenji Ono
 
Composer による依存管理 と Packagist によるライブラリの公開
Composer による依存管理 と Packagist によるライブラリの公開Composer による依存管理 と Packagist によるライブラリの公開
Composer による依存管理 と Packagist によるライブラリの公開Shogo Kawahara
 
AngularJSの高速化
AngularJSの高速化AngularJSの高速化
AngularJSの高速化Kon Yuichi
 
エンジニアじゃなくてもAngularJS×milkcocoaでチャットアプリが1時間!? 非エンジニアから見たAngularJSの感動するポイント3つ
エンジニアじゃなくてもAngularJS×milkcocoaでチャットアプリが1時間!? 非エンジニアから見たAngularJSの感動するポイント3つエンジニアじゃなくてもAngularJS×milkcocoaでチャットアプリが1時間!? 非エンジニアから見たAngularJSの感動するポイント3つ
エンジニアじゃなくてもAngularJS×milkcocoaでチャットアプリが1時間!? 非エンジニアから見たAngularJSの感動するポイント3つYusaku Kinoshita
 
One-time Binding & $digest
One-time Binding & $digestOne-time Binding & $digest
One-time Binding & $digestHayashi Yuichi
 
実務導入に向けたAngularの始め方@Angular入門者の会
実務導入に向けたAngularの始め方@Angular入門者の会実務導入に向けたAngularの始め方@Angular入門者の会
実務導入に向けたAngularの始め方@Angular入門者の会Hayashi Yuichi
 
フロントエンドのツール Yeoman を勘違いしていた
フロントエンドのツール Yeoman を勘違いしていたフロントエンドのツール Yeoman を勘違いしていた
フロントエンドのツール Yeoman を勘違いしていたgirigiribauer
 
Monaca+Onsen UIで作るアプリ事始め
Monaca+Onsen UIで作るアプリ事始めMonaca+Onsen UIで作るアプリ事始め
Monaca+Onsen UIで作るアプリ事始めKenichi Inoue
 
iPhoneアプリを Javaで書くよ?
iPhoneアプリを Javaで書くよ?iPhoneアプリを Javaで書くよ?
iPhoneアプリを Javaで書くよ?Toshio Ehara
 
AWSを利用したcms冗長化構成
AWSを利用したcms冗長化構成AWSを利用したcms冗長化構成
AWSを利用したcms冗長化構成渉 米須
 
Angular js 入門介紹
Angular js 入門介紹Angular js 入門介紹
Angular js 入門介紹wantingj
 
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリAngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリアシアル株式会社
 
JenkinsをJava開発でこんな感じで使っています
JenkinsをJava開発でこんな感じで使っていますJenkinsをJava開発でこんな感じで使っています
JenkinsをJava開発でこんな感じで使っていますToshio Ehara
 
noteをAngularJSで構築した話
noteをAngularJSで構築した話noteをAngularJSで構築した話
noteをAngularJSで構築した話Kon Yuichi
 

Viewers also liked (19)

AngularJS入門の巻
AngularJS入門の巻AngularJS入門の巻
AngularJS入門の巻
 
Angular.jsについてちょっとしゃべる
Angular.jsについてちょっとしゃべるAngular.jsについてちょっとしゃべる
Angular.jsについてちょっとしゃべる
 
AngularJS入門の巻2
AngularJS入門の巻2AngularJS入門の巻2
AngularJS入門の巻2
 
Angularを使ってみる実例いくつか (2015/4/29 GDGKobe)
Angularを使ってみる実例いくつか (2015/4/29 GDGKobe)Angularを使ってみる実例いくつか (2015/4/29 GDGKobe)
Angularを使ってみる実例いくつか (2015/4/29 GDGKobe)
 
とりあえずAngular jsを導入してみませんか
とりあえずAngular jsを導入してみませんかとりあえずAngular jsを導入してみませんか
とりあえずAngular jsを導入してみませんか
 
Composer による依存管理 と Packagist によるライブラリの公開
Composer による依存管理 と Packagist によるライブラリの公開Composer による依存管理 と Packagist によるライブラリの公開
Composer による依存管理 と Packagist によるライブラリの公開
 
AngularJSの高速化
AngularJSの高速化AngularJSの高速化
AngularJSの高速化
 
エンジニアじゃなくてもAngularJS×milkcocoaでチャットアプリが1時間!? 非エンジニアから見たAngularJSの感動するポイント3つ
エンジニアじゃなくてもAngularJS×milkcocoaでチャットアプリが1時間!? 非エンジニアから見たAngularJSの感動するポイント3つエンジニアじゃなくてもAngularJS×milkcocoaでチャットアプリが1時間!? 非エンジニアから見たAngularJSの感動するポイント3つ
エンジニアじゃなくてもAngularJS×milkcocoaでチャットアプリが1時間!? 非エンジニアから見たAngularJSの感動するポイント3つ
 
One-time Binding & $digest
One-time Binding & $digestOne-time Binding & $digest
One-time Binding & $digest
 
実務導入に向けたAngularの始め方@Angular入門者の会
実務導入に向けたAngularの始め方@Angular入門者の会実務導入に向けたAngularの始め方@Angular入門者の会
実務導入に向けたAngularの始め方@Angular入門者の会
 
フロントエンドのツール Yeoman を勘違いしていた
フロントエンドのツール Yeoman を勘違いしていたフロントエンドのツール Yeoman を勘違いしていた
フロントエンドのツール Yeoman を勘違いしていた
 
Monaca+Onsen UIで作るアプリ事始め
Monaca+Onsen UIで作るアプリ事始めMonaca+Onsen UIで作るアプリ事始め
Monaca+Onsen UIで作るアプリ事始め
 
iPhoneアプリを Javaで書くよ?
iPhoneアプリを Javaで書くよ?iPhoneアプリを Javaで書くよ?
iPhoneアプリを Javaで書くよ?
 
AWSを利用したcms冗長化構成
AWSを利用したcms冗長化構成AWSを利用したcms冗長化構成
AWSを利用したcms冗長化構成
 
Angular js 入門介紹
Angular js 入門介紹Angular js 入門介紹
Angular js 入門介紹
 
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリAngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
 
AngularJS 入門
AngularJS 入門AngularJS 入門
AngularJS 入門
 
JenkinsをJava開発でこんな感じで使っています
JenkinsをJava開発でこんな感じで使っていますJenkinsをJava開発でこんな感じで使っています
JenkinsをJava開発でこんな感じで使っています
 
noteをAngularJSで構築した話
noteをAngularJSで構築した話noteをAngularJSで構築した話
noteをAngularJSで構築した話
 

Similar to 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG

フロントエンドで GraphQLを使った所感
フロントエンドで GraphQLを使った所感フロントエンドで GraphQLを使った所感
フロントエンドで GraphQLを使った所感Chao Li
 
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)Mitsuru Ogawa
 
スマホにおけるWebGL入門
スマホにおけるWebGL入門スマホにおけるWebGL入門
スマホにおけるWebGL入門Yohta Kanke
 
ABC2012Spring 20120324
ABC2012Spring 20120324ABC2012Spring 20120324
ABC2012Spring 20120324Tak Inamori
 
サーバーレスのアーキテクチャパターンとそれぞれの実装・テストの勘所
サーバーレスのアーキテクチャパターンとそれぞれの実装・テストの勘所サーバーレスのアーキテクチャパターンとそれぞれの実装・テストの勘所
サーバーレスのアーキテクチャパターンとそれぞれの実装・テストの勘所真吾 吉田
 
Swagger jjug ccc 2018 spring
Swagger jjug ccc 2018 springSwagger jjug ccc 2018 spring
Swagger jjug ccc 2018 springkounan13
 
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」Takashi Endo
 
スマートフォン開発の事例 Html5開発の導入ポイント
スマートフォン開発の事例 Html5開発の導入ポイントスマートフォン開発の事例 Html5開発の導入ポイント
スマートフォン開発の事例 Html5開発の導入ポイントMasakazu Muraoka
 
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発Daizen Ikehara
 
サーバーレスの今とこれから
サーバーレスの今とこれからサーバーレスの今とこれから
サーバーレスの今とこれから真吾 吉田
 
【SQiP2014】システム操作インターフェイス最適化によるテスト自動化ROI向上
【SQiP2014】システム操作インターフェイス最適化によるテスト自動化ROI向上【SQiP2014】システム操作インターフェイス最適化によるテスト自動化ROI向上
【SQiP2014】システム操作インターフェイス最適化によるテスト自動化ROI向上Tatsuya Ishikawa
 
ネットワーク分散型フレームワークConView
ネットワーク分散型フレームワークConViewネットワーク分散型フレームワークConView
ネットワーク分散型フレームワークConViewRakuten Group, Inc.
 
Net advantage 2012 volume2 最新情報 xaml プラットフォーム編
Net advantage 2012 volume2 最新情報 xaml プラットフォーム編Net advantage 2012 volume2 最新情報 xaml プラットフォーム編
Net advantage 2012 volume2 最新情報 xaml プラットフォーム編Daizen Ikehara
 
Intalio japan special cloud workshop
Intalio japan special cloud workshopIntalio japan special cloud workshop
Intalio japan special cloud workshopDaisuke Sugai
 
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~normalian
 

Similar to 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG (20)

フロントエンドで GraphQLを使った所感
フロントエンドで GraphQLを使った所感フロントエンドで GraphQLを使った所感
フロントエンドで GraphQLを使った所感
 
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
 
スマホにおけるWebGL入門
スマホにおけるWebGL入門スマホにおけるWebGL入門
スマホにおけるWebGL入門
 
[GrapeCity Web TECH FORUM 2018]グレープシティJavaScript製品のご紹介 活用のコツと開発のポイント
[GrapeCity Web TECH FORUM 2018]グレープシティJavaScript製品のご紹介 活用のコツと開発のポイント[GrapeCity Web TECH FORUM 2018]グレープシティJavaScript製品のご紹介 活用のコツと開発のポイント
[GrapeCity Web TECH FORUM 2018]グレープシティJavaScript製品のご紹介 活用のコツと開発のポイント
 
ABC2012Spring 20120324
ABC2012Spring 20120324ABC2012Spring 20120324
ABC2012Spring 20120324
 
サーバーレスのアーキテクチャパターンとそれぞれの実装・テストの勘所
サーバーレスのアーキテクチャパターンとそれぞれの実装・テストの勘所サーバーレスのアーキテクチャパターンとそれぞれの実装・テストの勘所
サーバーレスのアーキテクチャパターンとそれぞれの実装・テストの勘所
 
Swagger jjug ccc 2018 spring
Swagger jjug ccc 2018 springSwagger jjug ccc 2018 spring
Swagger jjug ccc 2018 spring
 
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
 
スマートフォン開発の事例 Html5開発の導入ポイント
スマートフォン開発の事例 Html5開発の導入ポイントスマートフォン開発の事例 Html5開発の導入ポイント
スマートフォン開発の事例 Html5開発の導入ポイント
 
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
 
サーバーレスの今とこれから
サーバーレスの今とこれからサーバーレスの今とこれから
サーバーレスの今とこれから
 
【SQiP2014】システム操作インターフェイス最適化によるテスト自動化ROI向上
【SQiP2014】システム操作インターフェイス最適化によるテスト自動化ROI向上【SQiP2014】システム操作インターフェイス最適化によるテスト自動化ROI向上
【SQiP2014】システム操作インターフェイス最適化によるテスト自動化ROI向上
 
Ignite UI 2012 最新情報 jQuery Mobile 編
Ignite UI 2012 最新情報 jQuery Mobile 編Ignite UI 2012 最新情報 jQuery Mobile 編
Ignite UI 2012 最新情報 jQuery Mobile 編
 
ネットワーク分散型フレームワークConView
ネットワーク分散型フレームワークConViewネットワーク分散型フレームワークConView
ネットワーク分散型フレームワークConView
 
Mvc conf session_5_isami
Mvc conf session_5_isamiMvc conf session_5_isami
Mvc conf session_5_isami
 
Net advantage 2012 volume2 最新情報 xaml プラットフォーム編
Net advantage 2012 volume2 最新情報 xaml プラットフォーム編Net advantage 2012 volume2 最新情報 xaml プラットフォーム編
Net advantage 2012 volume2 最新情報 xaml プラットフォーム編
 
2013 Ignite UI 最新情報 in 岡山
2013 Ignite UI 最新情報 in 岡山2013 Ignite UI 最新情報 in 岡山
2013 Ignite UI 最新情報 in 岡山
 
Intalio japan special cloud workshop
Intalio japan special cloud workshopIntalio japan special cloud workshop
Intalio japan special cloud workshop
 
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
 
Angularを利用したシステム開発事例
Angularを利用したシステム開発事例Angularを利用したシステム開発事例
Angularを利用したシステム開発事例
 

More from Hayashi Yuichi

Dockerとフロントエンド
DockerとフロントエンドDockerとフロントエンド
DockerとフロントエンドHayashi Yuichi
 
雇われエンジニアがCTOになってIVSに参加するまでの話 - IVS CTO Night 2016-05
雇われエンジニアがCTOになってIVSに参加するまでの話 - IVS CTO Night 2016-05雇われエンジニアがCTOになってIVSに参加するまでの話 - IVS CTO Night 2016-05
雇われエンジニアがCTOになってIVSに参加するまでの話 - IVS CTO Night 2016-05Hayashi Yuichi
 
とりあえず始めるAngular2
とりあえず始めるAngular2とりあえず始めるAngular2
とりあえず始めるAngular2Hayashi Yuichi
 
Angular1.4で作られた自社マイクロサービスを2へマイグレーション
Angular1.4で作られた自社マイクロサービスを2へマイグレーションAngular1.4で作られた自社マイクロサービスを2へマイグレーション
Angular1.4で作られた自社マイクロサービスを2へマイグレーションHayashi Yuichi
 
Angularおじさんの1年
Angularおじさんの1年Angularおじさんの1年
Angularおじさんの1年Hayashi Yuichi
 
今すぐブラウザでES6を使おう
今すぐブラウザでES6を使おう今すぐブラウザでES6を使おう
今すぐブラウザでES6を使おうHayashi Yuichi
 
LIGにおけるフロントエンドチーム構築
LIGにおけるフロントエンドチーム構築LIGにおけるフロントエンドチーム構築
LIGにおけるフロントエンドチーム構築Hayashi Yuichi
 
いい感じのフロントエンド開発環境を作ってみた
いい感じのフロントエンド開発環境を作ってみたいい感じのフロントエンド開発環境を作ってみた
いい感じのフロントエンド開発環境を作ってみたHayashi Yuichi
 
Front-end package managers
Front-end package managersFront-end package managers
Front-end package managersHayashi Yuichi
 
Gulp入門 - コーディングを10倍速くする
Gulp入門 - コーディングを10倍速くするGulp入門 - コーディングを10倍速くする
Gulp入門 - コーディングを10倍速くするHayashi Yuichi
 

More from Hayashi Yuichi (13)

Dockerとフロントエンド
DockerとフロントエンドDockerとフロントエンド
Dockerとフロントエンド
 
雇われエンジニアがCTOになってIVSに参加するまでの話 - IVS CTO Night 2016-05
雇われエンジニアがCTOになってIVSに参加するまでの話 - IVS CTO Night 2016-05雇われエンジニアがCTOになってIVSに参加するまでの話 - IVS CTO Night 2016-05
雇われエンジニアがCTOになってIVSに参加するまでの話 - IVS CTO Night 2016-05
 
とりあえず始めるAngular2
とりあえず始めるAngular2とりあえず始めるAngular2
とりあえず始めるAngular2
 
Angular1.4で作られた自社マイクロサービスを2へマイグレーション
Angular1.4で作られた自社マイクロサービスを2へマイグレーションAngular1.4で作られた自社マイクロサービスを2へマイグレーション
Angular1.4で作られた自社マイクロサービスを2へマイグレーション
 
LIGでのDocker活用
LIGでのDocker活用LIGでのDocker活用
LIGでのDocker活用
 
Angularおじさんの1年
Angularおじさんの1年Angularおじさんの1年
Angularおじさんの1年
 
Automated css
Automated cssAutomated css
Automated css
 
今すぐブラウザでES6を使おう
今すぐブラウザでES6を使おう今すぐブラウザでES6を使おう
今すぐブラウザでES6を使おう
 
LIGにおけるフロントエンドチーム構築
LIGにおけるフロントエンドチーム構築LIGにおけるフロントエンドチーム構築
LIGにおけるフロントエンドチーム構築
 
いい感じのフロントエンド開発環境を作ってみた
いい感じのフロントエンド開発環境を作ってみたいい感じのフロントエンド開発環境を作ってみた
いい感じのフロントエンド開発環境を作ってみた
 
Front-end package managers
Front-end package managersFront-end package managers
Front-end package managers
 
Gulp入門 - コーディングを10倍速くする
Gulp入門 - コーディングを10倍速くするGulp入門 - コーディングを10倍速くする
Gulp入門 - コーディングを10倍速くする
 
CSS Living StyleGuide
CSS Living StyleGuideCSS Living StyleGuide
CSS Living StyleGuide
 

Recently uploaded

IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)ssuser539845
 
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-LoopへTetsuya Nihonmatsu
 
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfTaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfMatsushita Laboratory
 
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法ssuser370dd7
 
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦Sadao Tokuyama
 
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見Shumpei Kishi
 
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~arts yokohama
 
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdfAyachika Kitazaki
 
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor 2024 01 Virtual_Counselor
2024 01 Virtual_Counselor arts yokohama
 

Recently uploaded (12)

2024 04 minnanoito
2024 04 minnanoito2024 04 minnanoito
2024 04 minnanoito
 
What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?
 
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
 
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
 
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfTaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
 
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
 
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
 
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
 
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
 
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf
 
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor 2024 01 Virtual_Counselor
2024 01 Virtual_Counselor
 
2024 03 CTEA
2024 03 CTEA2024 03 CTEA
2024 03 CTEA
 

受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG