Submit Search
Upload
Angular js開発事例
•
Download as PPTX, PDF
•
4 likes
•
3,696 views
Shun Takeyama
Follow
AngularJS開発を通して感じたこと
Read less
Read more
Technology
Report
Share
Report
Share
1 of 19
Download now
Recommended
noteをAngularJSで構築した話
noteをAngularJSで構築した話
Kon Yuichi
Enterprise x AngularJS
Enterprise x AngularJS
Kenichi Kanai
開発ライフサイクルから見たAngularJS
開発ライフサイクルから見たAngularJS
Mizuho Sakamaki
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
Hayashi Yuichi
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
Mitsuru Ogawa
Directiveで実現できたこと
Directiveで実現できたこと
Kon Yuichi
Angular2
Angular2
Kenichi Kanai
イベント駆動AngularJS / 今から書くAngular 2.0
イベント駆動AngularJS / 今から書くAngular 2.0
Okuno Kentaro
Recommended
noteをAngularJSで構築した話
noteをAngularJSで構築した話
Kon Yuichi
Enterprise x AngularJS
Enterprise x AngularJS
Kenichi Kanai
開発ライフサイクルから見たAngularJS
開発ライフサイクルから見たAngularJS
Mizuho Sakamaki
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
Hayashi Yuichi
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
Mitsuru Ogawa
Directiveで実現できたこと
Directiveで実現できたこと
Kon Yuichi
Angular2
Angular2
Kenichi Kanai
イベント駆動AngularJS / 今から書くAngular 2.0
イベント駆動AngularJS / 今から書くAngular 2.0
Okuno Kentaro
AngularJSで業務システムUI部品化
AngularJSで業務システムUI部品化
Toshio Ehara
今後のWeb開発の未来を考えてangularJSにしました
今後のWeb開発の未来を考えてangularJSにしました
Mitsuru Ogawa
AngularJSについて
AngularJSについて
昌生 高橋
Angular jsの継続的なバージョンアップ
Angular jsの継続的なバージョンアップ
Kazuyoshi Tsuchiya
エンタープライヤーのためのWeb Componentsハンズオン
エンタープライヤーのためのWeb Componentsハンズオン
Mitsuru Ogawa
俺とAngular JS 2
俺とAngular JS 2
Masayuki KaToH
Angularモダンweb開発セミナー紹介 20170923
Angularモダンweb開発セミナー紹介 20170923
Staffnet_Inc
Angular1&2
Angular1&2
Kenichi Kanai
Angular 4がやってくる!? 新機能ダイジェスト
Angular 4がやってくる!? 新機能ダイジェスト
Masahiko Asai
angular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1club
silvers ofsilvers
AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)
AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)
tomonari takahashi
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
Shumpei Shiraishi
angular1脳で見るangular2
angular1脳で見るangular2
Moriyuki Arakawa
AngularJS 概説
AngularJS 概説
Kenichi Kanai
AngularJSを浅めに紹介します
AngularJSを浅めに紹介します
nkazuki
Angular#Kanazawa
Angular#Kanazawa
Kenichi Kanai
3分でわかるangular js
3分でわかるangular js
Shin Adachi
ng-mtg#6 AngularJS ディレクティブ・パターン
ng-mtg#6 AngularJS ディレクティブ・パターン
Hayashi Yuichi
スキスキIonic
スキスキIonic
Kon Yuichi
AngularJSからReactに移ったケースの話
AngularJSからReactに移ったケースの話
kumatch kumatch
Spring Boot + Doma + AngularJSで作るERP 〜JavaQneバージョン〜 #jqfk
Spring Boot + Doma + AngularJSで作るERP 〜JavaQneバージョン〜 #jqfk
学 松崎
2014年のChefとInfrastructure as code
2014年のChefとInfrastructure as code
Yukihiko SAWANOBORI
More Related Content
What's hot
AngularJSで業務システムUI部品化
AngularJSで業務システムUI部品化
Toshio Ehara
今後のWeb開発の未来を考えてangularJSにしました
今後のWeb開発の未来を考えてangularJSにしました
Mitsuru Ogawa
AngularJSについて
AngularJSについて
昌生 高橋
Angular jsの継続的なバージョンアップ
Angular jsの継続的なバージョンアップ
Kazuyoshi Tsuchiya
エンタープライヤーのためのWeb Componentsハンズオン
エンタープライヤーのためのWeb Componentsハンズオン
Mitsuru Ogawa
俺とAngular JS 2
俺とAngular JS 2
Masayuki KaToH
Angularモダンweb開発セミナー紹介 20170923
Angularモダンweb開発セミナー紹介 20170923
Staffnet_Inc
Angular1&2
Angular1&2
Kenichi Kanai
Angular 4がやってくる!? 新機能ダイジェスト
Angular 4がやってくる!? 新機能ダイジェスト
Masahiko Asai
angular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1club
silvers ofsilvers
AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)
AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)
tomonari takahashi
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
Shumpei Shiraishi
angular1脳で見るangular2
angular1脳で見るangular2
Moriyuki Arakawa
AngularJS 概説
AngularJS 概説
Kenichi Kanai
AngularJSを浅めに紹介します
AngularJSを浅めに紹介します
nkazuki
Angular#Kanazawa
Angular#Kanazawa
Kenichi Kanai
3分でわかるangular js
3分でわかるangular js
Shin Adachi
ng-mtg#6 AngularJS ディレクティブ・パターン
ng-mtg#6 AngularJS ディレクティブ・パターン
Hayashi Yuichi
スキスキIonic
スキスキIonic
Kon Yuichi
AngularJSからReactに移ったケースの話
AngularJSからReactに移ったケースの話
kumatch kumatch
What's hot
(20)
AngularJSで業務システムUI部品化
AngularJSで業務システムUI部品化
今後のWeb開発の未来を考えてangularJSにしました
今後のWeb開発の未来を考えてangularJSにしました
AngularJSについて
AngularJSについて
Angular jsの継続的なバージョンアップ
Angular jsの継続的なバージョンアップ
エンタープライヤーのためのWeb Componentsハンズオン
エンタープライヤーのためのWeb Componentsハンズオン
俺とAngular JS 2
俺とAngular JS 2
Angularモダンweb開発セミナー紹介 20170923
Angularモダンweb開発セミナー紹介 20170923
Angular1&2
Angular1&2
Angular 4がやってくる!? 新機能ダイジェスト
Angular 4がやってくる!? 新機能ダイジェスト
angular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1club
AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)
AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
angular1脳で見るangular2
angular1脳で見るangular2
AngularJS 概説
AngularJS 概説
AngularJSを浅めに紹介します
AngularJSを浅めに紹介します
Angular#Kanazawa
Angular#Kanazawa
3分でわかるangular js
3分でわかるangular js
ng-mtg#6 AngularJS ディレクティブ・パターン
ng-mtg#6 AngularJS ディレクティブ・パターン
スキスキIonic
スキスキIonic
AngularJSからReactに移ったケースの話
AngularJSからReactに移ったケースの話
Similar to Angular js開発事例
Spring Boot + Doma + AngularJSで作るERP 〜JavaQneバージョン〜 #jqfk
Spring Boot + Doma + AngularJSで作るERP 〜JavaQneバージョン〜 #jqfk
学 松崎
2014年のChefとInfrastructure as code
2014年のChefとInfrastructure as code
Yukihiko SAWANOBORI
JenkinsとSeleniumの活用事例
JenkinsとSeleniumの活用事例
Takeshi Kondo
Nulabとawsと私
Nulabとawsと私
ikikko
20170710 hifive-test-meetup
20170710 hifive-test-meetup
Naoya Kojima
アジャイルソフトウェア開発の道具箱
アジャイルソフトウェア開発の道具箱
Koichi ITO
マイクロサービスに至る歴史とこれから - XP祭り2021
マイクロサービスに至る歴史とこれから - XP祭り2021
Yusuke Suzuki
ソフトウェアテスト入門
ソフトウェアテスト入門
Preferred Networks
【eLV勉強会】AngularJSでのモバイルフロントエンド開発
【eLV勉強会】AngularJSでのモバイルフロントエンド開発
Hiroyuki Kusu
SWEBOKにみるソフトウェアエンジニアリングの全体、および、 つながる時代のソフトウェアモデリング&品質
SWEBOKにみるソフトウェアエンジニアリングの全体、および、 つながる時代のソフトウェアモデリング&品質
Hironori Washizaki
AIビジネスクリエーションワークショップ@東京
AIビジネスクリエーションワークショップ@東京
Deep Learning Lab(ディープラーニング・ラボ)
AWSからOpenStack, Chef SoloからChef Serverに インフラを置き換えた事例の紹介
AWSからOpenStack, Chef SoloからChef Serverに インフラを置き換えた事例の紹介
Naoyuki Yamada
メルカリの開発スピードと品質を支える Selenium on Azure Kubernetes Service
メルカリの開発スピードと品質を支える Selenium on Azure Kubernetes Service
Tadashi Nemoto
[GrapeCity Web TECH FORUM 2018]グレープシティJavaScript製品のご紹介 活用のコツと開発のポイント
[GrapeCity Web TECH FORUM 2018]グレープシティJavaScript製品のご紹介 活用のコツと開発のポイント
Developer Solutions事業部 メシウス株式会社 (旧グレープシティ株式会社)
OpenShift Ansbile 活用法 アプリケーションライフサイクルからみる導入効果
OpenShift Ansbile 活用法 アプリケーションライフサイクルからみる導入効果
Hideaki Tokida
開発現場から考えるプロジェクトで活躍する新入社員の育て方とは?
開発現場から考えるプロジェクトで活躍する新入社員の育て方とは?
CASAREAL, Inc.
今なぜサーバーレスなのか
今なぜサーバーレスなのか
真吾 吉田
OSC2018 hiroshima session slide by OSSC
OSC2018 hiroshima session slide by OSSC
Daisuke Nishino
フロントエンドで GraphQLを使った所感
フロントエンドで GraphQLを使った所感
Chao Li
作る人から作りながら運用する人になっていく
作る人から作りながら運用する人になっていく
Ryo Mitoma
Similar to Angular js開発事例
(20)
Spring Boot + Doma + AngularJSで作るERP 〜JavaQneバージョン〜 #jqfk
Spring Boot + Doma + AngularJSで作るERP 〜JavaQneバージョン〜 #jqfk
2014年のChefとInfrastructure as code
2014年のChefとInfrastructure as code
JenkinsとSeleniumの活用事例
JenkinsとSeleniumの活用事例
Nulabとawsと私
Nulabとawsと私
20170710 hifive-test-meetup
20170710 hifive-test-meetup
アジャイルソフトウェア開発の道具箱
アジャイルソフトウェア開発の道具箱
マイクロサービスに至る歴史とこれから - XP祭り2021
マイクロサービスに至る歴史とこれから - XP祭り2021
ソフトウェアテスト入門
ソフトウェアテスト入門
【eLV勉強会】AngularJSでのモバイルフロントエンド開発
【eLV勉強会】AngularJSでのモバイルフロントエンド開発
SWEBOKにみるソフトウェアエンジニアリングの全体、および、 つながる時代のソフトウェアモデリング&品質
SWEBOKにみるソフトウェアエンジニアリングの全体、および、 つながる時代のソフトウェアモデリング&品質
AIビジネスクリエーションワークショップ@東京
AIビジネスクリエーションワークショップ@東京
AWSからOpenStack, Chef SoloからChef Serverに インフラを置き換えた事例の紹介
AWSからOpenStack, Chef SoloからChef Serverに インフラを置き換えた事例の紹介
メルカリの開発スピードと品質を支える Selenium on Azure Kubernetes Service
メルカリの開発スピードと品質を支える Selenium on Azure Kubernetes Service
[GrapeCity Web TECH FORUM 2018]グレープシティJavaScript製品のご紹介 活用のコツと開発のポイント
[GrapeCity Web TECH FORUM 2018]グレープシティJavaScript製品のご紹介 活用のコツと開発のポイント
OpenShift Ansbile 活用法 アプリケーションライフサイクルからみる導入効果
OpenShift Ansbile 活用法 アプリケーションライフサイクルからみる導入効果
開発現場から考えるプロジェクトで活躍する新入社員の育て方とは?
開発現場から考えるプロジェクトで活躍する新入社員の育て方とは?
今なぜサーバーレスなのか
今なぜサーバーレスなのか
OSC2018 hiroshima session slide by OSSC
OSC2018 hiroshima session slide by OSSC
フロントエンドで GraphQLを使った所感
フロントエンドで GraphQLを使った所感
作る人から作りながら運用する人になっていく
作る人から作りながら運用する人になっていく
Recently uploaded
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Yuma Ohgami
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
taisei2219
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Ryo Sasaki
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
Toru Tamaki
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
sugiuralab
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
Hiroki Ichikura
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Toru Tamaki
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
iPride Co., Ltd.
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Toru Tamaki
Recently uploaded
(9)
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Angular js開発事例
1.
AngularJS開発事例 ユース・情報システム開発 武山 俊
2.
Agenda 私 •武山 俊とは 使ってみて •AngularJSを使ってみて まとめ •まとめと対策
3.
武山 俊 とは •
ユース・情報システム開発 • 2011年入社 4年目 • システム開発部 • Java JavaScript Perl PHP • 人事教育部 • 内定者研修、社内勉強会etc… • 芝浦工業大学大学院 工学マネジメント研究科在籍
4.
AngularJS開発事例
5.
事例概要 • 大学におけるアクティブラーニング支援システム • エンジニア2名
デザイナ1名 • 開発期間 • 2014/6 ~ 2014/10 ( 実働 2014/10 ~ 2014/12 )≒大炎上
6.
事例概要 • MEAN環境 • MongoDB
+ Express + AngularJS + Node.js • 12 Controllers • 8 Services • 6 Directives • CoffeeScriptで5klocくらい
7.
AngularJSを選んだ理由 • 流行の技術だったから • レガシーな技術で作られたシステム=ダサイ •
それを導入している大学=ダサイ • モジュラリティの高いシステムを組みたかった • リアルタイムにコミュニケーションできるシステ ムにしたかった
8.
AngularJSを使い始めてー始め • jQueryのようにとりあえず使う!はできない • というか有難みをあんまり享受できない •
あれもこれも覚えなきゃいけない • DOM操作しにくい • jqLiteはあるけど… • 日本語のドキュメントが少ない!
9.
AngularJSを使い始めてー中盤1 • 双方向バインディング凄く便利! • AngularJSに委譲しているので、バインド対象を意識 しなくていい •
サーバとクライアントを分離できる! • モックをユーザに早く確認してもらえる • 分業がはっきりできる • Directiveすごい便利! • デザイナの負担を軽減できる(後述)
10.
AngularJSを使い始めてー中盤2 • 実用十分なライブラリー群
11.
AngularJSを使い始めてー中盤3 • 実用十分とはいえ枯れたライブラリはない • AngularJS自体がまだ枯れてないので当たり前 •
やっぱり学習コストは高い • 実装方針・イベント発火仕方など • HTML=プログラミング • デザイナの負担が大きい
12.
AngularJSを使い始めてー中盤4 • Coffee ScriptやJadeが必須に感じる •
とくにJade(テンプレートエンジン)は必須 • DirectiveがあるとはいえHTMLがかなり複雑になる
13.
AngularJSを使い始めてー終盤 • Controllerの肥大化が酷い • Projectの反省点 •
基本はarticle、場合によってsectionごとにControllerにし ても良いのかもしれない • Serviceをもっと活用すべきだった • Controller分割の肝 • 重い • 調子に乗るとクライアントの負荷が高い • SEO対策どうしよう
14.
AngularJS導入のメリット • 双方向バインドはやっぱり正義 • DOM操作をしなくていい •
サーバとクライアントの分業が容易 • スプリントを回しやすい
15.
AngularJS導入のデメリット • 学習コストが高い • 凝ったつくりにすると動作が重い •
SEO対策が面倒くさい
16.
学習コストが高い • Service・Directiveが使えないと話にならない • DOM構造とオブジェクトが密に関連するので、 旧来のデザイナには辛い •
UIデザインができないエンジニアにも同様に辛 い • これは頑張るしかない
17.
動作が重い • 双方向バインディングやDirectiveを使いすぎる と重い • One-time
bindingを使う • 場合によってはDirectiveをあきらめる • ngCloakとUIデザインで体感速度を上げる
18.
SEO対策が面倒くさい • GoogleのクローラはAngularJSを処理してくれ ない • その結果何もないページになってしまう •
静的なページをホストする • PhantomJS経由でホストする
19.
ありがとうございました。
Editor's Notes
最近の若者のイメージ、いろいろとあると思います。
Download now