SlideShare a Scribd company logo
AngularJS開発事例
ユース・情報システム開発
武山 俊
Agenda
私
•武山 俊とは
使ってみて
•AngularJSを使ってみて
まとめ
•まとめと対策
武山 俊 とは
• ユース・情報システム開発
• 2011年入社 4年目
• システム開発部
• Java JavaScript Perl PHP
• 人事教育部
• 内定者研修、社内勉強会etc…
• 芝浦工業大学大学院
工学マネジメント研究科在籍
AngularJS開発事例
事例概要
• 大学におけるアクティブラーニング支援システム
• エンジニア2名 デザイナ1名
• 開発期間
• 2014/6 ~ 2014/10 ( 実働 2014/10 ~ 2014/12 )≒大炎上
事例概要
• MEAN環境
• MongoDB + Express + AngularJS + Node.js
• 12 Controllers
• 8 Services
• 6 Directives
• CoffeeScriptで5klocくらい
AngularJSを選んだ理由
• 流行の技術だったから
• レガシーな技術で作られたシステム=ダサイ
• それを導入している大学=ダサイ
• モジュラリティの高いシステムを組みたかった
• リアルタイムにコミュニケーションできるシステ
ムにしたかった
AngularJSを使い始めてー始め
• jQueryのようにとりあえず使う!はできない
• というか有難みをあんまり享受できない
• あれもこれも覚えなきゃいけない
• DOM操作しにくい
• jqLiteはあるけど…
• 日本語のドキュメントが少ない!
AngularJSを使い始めてー中盤1
• 双方向バインディング凄く便利!
• AngularJSに委譲しているので、バインド対象を意識
しなくていい
• サーバとクライアントを分離できる!
• モックをユーザに早く確認してもらえる
• 分業がはっきりできる
• Directiveすごい便利!
• デザイナの負担を軽減できる(後述)
AngularJSを使い始めてー中盤2
• 実用十分なライブラリー群
AngularJSを使い始めてー中盤3
• 実用十分とはいえ枯れたライブラリはない
• AngularJS自体がまだ枯れてないので当たり前
• やっぱり学習コストは高い
• 実装方針・イベント発火仕方など
• HTML=プログラミング
• デザイナの負担が大きい
AngularJSを使い始めてー中盤4
• Coffee ScriptやJadeが必須に感じる
• とくにJade(テンプレートエンジン)は必須
• DirectiveがあるとはいえHTMLがかなり複雑になる
AngularJSを使い始めてー終盤
• Controllerの肥大化が酷い
• Projectの反省点
• 基本はarticle、場合によってsectionごとにControllerにし
ても良いのかもしれない
• Serviceをもっと活用すべきだった
• Controller分割の肝
• 重い
• 調子に乗るとクライアントの負荷が高い
• SEO対策どうしよう
AngularJS導入のメリット
• 双方向バインドはやっぱり正義
• DOM操作をしなくていい
• サーバとクライアントの分業が容易
• スプリントを回しやすい
AngularJS導入のデメリット
• 学習コストが高い
• 凝ったつくりにすると動作が重い
• SEO対策が面倒くさい
学習コストが高い
• Service・Directiveが使えないと話にならない
• DOM構造とオブジェクトが密に関連するので、
旧来のデザイナには辛い
• UIデザインができないエンジニアにも同様に辛
い
• これは頑張るしかない
動作が重い
• 双方向バインディングやDirectiveを使いすぎる
と重い
• One-time bindingを使う
• 場合によってはDirectiveをあきらめる
• ngCloakとUIデザインで体感速度を上げる
SEO対策が面倒くさい
• GoogleのクローラはAngularJSを処理してくれ
ない
• その結果何もないページになってしまう
• 静的なページをホストする
• PhantomJS経由でホストする
ありがとうございました。

More Related Content

PDF
noteをAngularJSで構築した話
PDF
Enterprise x AngularJS
PDF
開発ライフサイクルから見たAngularJS
PDF
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
PDF
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
PDF
Directiveで実現できたこと
PDF
Angular2
PDF
イベント駆動AngularJS / 今から書くAngular 2.0
noteをAngularJSで構築した話
Enterprise x AngularJS
開発ライフサイクルから見たAngularJS
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
Directiveで実現できたこと
Angular2
イベント駆動AngularJS / 今から書くAngular 2.0

What's hot (20)

PDF
AngularJSで業務システムUI部品化
PDF
今後のWeb開発の未来を考えてangularJSにしました
PDF
AngularJSについて
PDF
Angular jsの継続的なバージョンアップ
PDF
エンタープライヤーのためのWeb Componentsハンズオン
PDF
俺とAngular JS 2
PDF
Angularモダンweb開発セミナー紹介 20170923
PDF
Angular1&2
PDF
Angular 4がやってくる!? 新機能ダイジェスト
PDF
angular X designer - デザイナからみたAngularJS #ten1club
PDF
AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)
PPTX
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
PDF
angular1脳で見るangular2
PDF
AngularJS 概説
PPTX
AngularJSを浅めに紹介します
PDF
Angular#Kanazawa
PDF
3分でわかるangular js
PDF
ng-mtg#6 AngularJS ディレクティブ・パターン
PDF
スキスキIonic
PDF
AngularJSからReactに移ったケースの話
AngularJSで業務システムUI部品化
今後のWeb開発の未来を考えてangularJSにしました
AngularJSについて
Angular jsの継続的なバージョンアップ
エンタープライヤーのためのWeb Componentsハンズオン
俺とAngular JS 2
Angularモダンweb開発セミナー紹介 20170923
Angular1&2
Angular 4がやってくる!? 新機能ダイジェスト
angular X designer - デザイナからみたAngularJS #ten1club
AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
angular1脳で見るangular2
AngularJS 概説
AngularJSを浅めに紹介します
Angular#Kanazawa
3分でわかるangular js
ng-mtg#6 AngularJS ディレクティブ・パターン
スキスキIonic
AngularJSからReactに移ったケースの話
Ad

Similar to Angular js開発事例 (20)

PDF
20140823 LL diver Angular.js で構築した note に関して
PDF
pairsでのAngularJS x TypeScript x e2e @めぐすた#1
PDF
AngularJSでwebアプリを作ってみた!(2014/6/8 GDGKobe)
PDF
今からでも遅くない! 2から始めるangular js
PPTX
エンタープライズ分野での実践AngularJS
PPTX
Our Track to Modern Angular
PDF
TypeScript 勉強会
PDF
Node.jsでブラウザメッセンジャー
PDF
Angularおじさんの1年
PPTX
20161125 米田 angular_jsを触ってみた
ODP
AngularJSとの危険な関係 by Mario Heiderich - CODE BLUE 2015
PPTX
AngularJS入門
PDF
多分モダンなWebアプリ開発
PDF
AngularJS で ハイスピードSI
PDF
Hyper → Highspeed → Development
PDF
JS開発におけるTDDと自動テストツール利用の勘所
PDF
AngularJS+TypeScript - AngularJS 1周年記念勉強会
KEY
いまさらJavaScript
PPTX
Angular js はまりどころ
20140823 LL diver Angular.js で構築した note に関して
pairsでのAngularJS x TypeScript x e2e @めぐすた#1
AngularJSでwebアプリを作ってみた!(2014/6/8 GDGKobe)
今からでも遅くない! 2から始めるangular js
エンタープライズ分野での実践AngularJS
Our Track to Modern Angular
TypeScript 勉強会
Node.jsでブラウザメッセンジャー
Angularおじさんの1年
20161125 米田 angular_jsを触ってみた
AngularJSとの危険な関係 by Mario Heiderich - CODE BLUE 2015
AngularJS入門
多分モダンなWebアプリ開発
AngularJS で ハイスピードSI
Hyper → Highspeed → Development
JS開発におけるTDDと自動テストツール利用の勘所
AngularJS+TypeScript - AngularJS 1周年記念勉強会
いまさらJavaScript
Angular js はまりどころ
Ad

Angular js開発事例

Editor's Notes

  • #5: 最近の若者のイメージ、いろいろとあると思います。