Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
AngularJS 勉強会 #4 - 実戦!AngularJS
Search
Makoto Sakata
December 03, 2013
Technology
20
12k
AngularJS 勉強会 #4 - 実戦!AngularJS
Makoto Sakata
December 03, 2013
Tweet
Share
More Decks by Makoto Sakata
See All by Makoto Sakata
Hubotレビュアーおみくじ @ githubkaigi
sakatam
14
3k
Other Decks in Technology
See All in Technology
Modern Linux
oracle4engineer
PRO
0
150
AI時代を生き抜くエンジニアキャリアの築き方 (AI-Native 時代、エンジニアという道は 「最大の挑戦の場」となる) / Building an Engineering Career to Thrive in the Age of AI (In the AI-Native Era, the Path of Engineering Becomes the Ultimate Arena of Challenge)
jeongjaesoon
0
230
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
torounit
0
130
CDK CLIで使ってたあの機能、CDK Toolkit Libraryではどうやるの?
smt7174
4
190
【実演版】カンファレンス登壇者・スタッフにこそ知ってほしいマイクの使い方 / 大吉祥寺.pm 2025
arthur1
1
900
自作JSエンジンに推しプロポーザルを実装したい!
sajikix
1
190
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
sh_fk2
3
450
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
sh_fk2
3
270
要件定義・デザインフェーズでもAIを活用して、コミュニケーションの密度を高める
kazukihayase
0
120
Firestore → Spanner 移行 を成功させた段階的移行プロセス
athug
1
500
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
10
75k
Claude Code でアプリ開発をオートパイロットにするためのTips集 Zennの場合 / Claude Code Tips in Zenn
wadayusuke
3
230
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
850
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
The Cult of Friendly URLs
andyhume
79
6.6k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.1k
Building an army of robots
kneath
306
46k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
What's in a price? How to price your products and services
michaelherold
246
12k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Transcript
࣮ઓ! AngularJS AngularJS ͷϓϩμΫτద༻ܦݧ͔ΒֶΜͩ͜ͱ
ࣗݾհ ࡔా ਅ / @sakatam! Software Engineer! ݱ৬: KAIZEN Platform
Inc. ! લ৬: Gilt Groupe Japan!
ࣗݾհ ࡔా ਅ / @sakatam! Software Engineer! ݱ৬: KAIZEN Platform
Inc. ! લ৬: Gilt Groupe Japan!
ΞδΣϯμ ❖ ϓϩδΣΫτʹ͍ͭͯ! ❖ γεςϜߏˍਓһߏ! ❖ ͳΜͰAngularJSʁ (vs. Backbone.js)! ❖
։ൃϑϩʔ! ❖ ࣮ઓೖ࣌ͷTips
ϓϩδΣΫτʹ͍ͭͯ
ϓϩδΣΫτʹ͍ͭͯ • ։ൃظؒ: ͓Αͦ3ϲ݄ؒ (20135݄ʙ7݄)! • EίϚʔεαΠτ(νέοςΟϯάɾαʔϏε) ͷϦχϡʔΞϧ! • Mobile
First Ξϓϩʔν! • ͍ͭͰʹ AngularJS
❖ ݁Ռ! ❖ https://m.giltcity.jp ϓϩδΣΫτʹ͍ͭͯ
❖ ݁Ռ! ❖ https://m.giltcity.jp! ❖ ͱ্ͬͯख͍͖͘·ͨ͠ɻ ϓϩδΣΫτʹ͍ͭͯ
γεςϜˍਓһߏ ❖ چߏ - ϨΨγʔSOA jsp! java servlet Legacy API
(RPC) DB
γεςϜˍਓһߏ ❖ ৽ߏ - ϞμϯSOA jsp! java servlet Legacy API
(RPC) DB AngularJS App Node.js (REST) Legacy API (RPC) DB
γεςϜˍਓһߏ ❖ ਓһ AngularJS App Node.js (REST) Legacy API (RPC)
DB UX σβΠφʔ Frontend JS ΤϯδχΞ Backend JS ΤϯδχΞ
ͳΜͰAngularJSʁ (vs. Backbone.js)
ͳΜͰAngularJSʁ (vs. Backbone.js) ❖ GiltͷϝΠϯϓϩμΫτBackbone.js
ͳΜͰAngularJSʁ (vs. Backbone.js) ❖ Backbone.js! ❖ ॊೈੑ͕ߴ͍! ❖ ͦͷ໘ɺ։ൃऀͷྗྔͰίʔυ࣭͕Β͖͍ͭ͢! ❖
ίʔυͷϞδϡʔϧԽ։ൃऀ࣍ୈ
ͳΜͰAngularJSʁ (vs. Backbone.js) → ։ൃମ੍ͷεέʔϦϯά͕Ή͔͍ͣ͠ ❖ Backbone.js! ❖ ॊೈੑ͕ߴ͍! ❖
ͦͷ໘ɺ։ൃऀͷྗྔͰίʔυ࣭͕Β͖͍ͭ͢! ❖ ίʔυͷϞδϡʔϧԽ։ൃऀ࣍ୈ
❖ AngularJS! ❖ ॊೈੑͰBackbone.jsʹྼΔ͕…! ❖ Ϟδϡʔϧɾϕʔεͷ։ൃΛڧ੍ (࠶ར༻ੑɾςετͷ͢͠͞)! ❖ DI/Module! ❖
APIϨεϙϯεmockՄೳ → B/E։ൃͷґଘΛͳͤ͘Δ! ❖ Directive! ❖ ը໘ͷ෦Խ! ❖ ϏϡʔͱϞσϧͷࣗಈόΠϯσΟϯά! ❖ ίϯτϩʔϥͷ୯७Խɾۉ࣭Խ ͳΜͰAngularJSʁ (vs. Backbone.js)
ͳΜͰAngularJSʁ (vs. Backbone.js) → ։ൃମ੍ͷεέʔϦϯά͕؆୯ ❖ AngularJS! ❖ ॊೈੑͰBackbone.jsʹྼΔ͕…! ❖
Ϟδϡʔϧɾϕʔεͷ։ൃΛڧ੍ (࠶ར༻ੑɾςετͷ͢͠͞)! ❖ DI/Module! ❖ APIϨεϙϯεmockՄೳ → B/E։ൃͷґଘΛͳͤ͘Δ! ❖ Directive! ❖ ը໘ͷ෦Խ! ❖ ϏϡʔͱϞσϧͷࣗಈόΠϯσΟϯά! ❖ ίϯτϩʔϥͷ୯७Խɾۉ࣭Խ
։ൃϑϩʔ
❖ ΧϨϯμʔ (12 weeks) ։ൃϑϩʔ week 1-3: ։ൃج൫ͮ͘Γ week 4-5:
νʔϜల։ week 6-12: ࣮։ൃ ϩʔϯν
❖ ΧϨϯμʔ (12 weeks) ։ൃϑϩʔ week 1-3: ։ൃج൫ͮ͘Γ week 4-5:
νʔϜల։ week 6-12: ࣮։ൃ ϩʔϯν → ج൫ͮ͘Γʹ࣌ؒΛ͔͚ͨͷ͕ޭͨ͠! ɾϑΝΠϧߏɾϏϧυϓϩηε ɾAPIΫϥΠΞϯτͳͲͷجఈΫϥε
❖ ΧϨϯμʔ (12 weeks) ։ൃϑϩʔ week 1-3: ։ൃج൫ͮ͘Γ week 4-5:
νʔϜల։ week 6-12: ࣮։ൃ ϩʔϯν → FrontendΤϯδχΞʹ͔ͬ͠ΓೃΕͯΒ͏ ɾDI / Ϟδϡʔϧࢤ / ςετϑΝʔετͷ֓೦ཧղ ɾͪΐͬͱͨ͠DirectiveΛ࡞ͬͯΈΔ
❖ ։ൃΠςϨʔγϣϯ! ❖ ҰൠతͳΣϒ։ൃͱ΄ͱΜͲಉ͡! ❖ ը໘ϞοΫΞοϓ! ❖ APIݕ౼! ❖ ϞσϦϯά
/ Unit Test / Viewεέϧτϯ࣮! ❖ CSSελΠϦϯά ։ൃϑϩʔ
։ൃϑϩʔ → ʮී௨ʹʯςετɾϑΝʔετͰ͖Δʂ ɹ͜ͷϓϩδΣΫτͰ! ɹɾUnit Test ඞਢ! ɹɾEnd to End
Test ΫϦςΟΧϧɾύε֬ೝ༻ ❖ ։ൃΠςϨʔγϣϯ! ❖ ҰൠతͳΣϒ։ൃͱ΄ͱΜͲಉ͡! ❖ ը໘ϞοΫΞοϓ! ❖ APIݕ౼! ❖ ϞσϦϯά / Unit Test / Viewεέϧτϯ࣮! ❖ CSSελΠϦϯά
AngularJS ࣮ઓೖͷTips
❖ ֊Խ͞ΕͨϞσϧɾσʔλͷঢ়ଶཧ! ❖ viewͱ݁͠ͳ͍Ϟσϧͷঢ়ଶΛͲ͏ཧ͢Δ͔ʁ! ❖ = AngularJSͷॴʮγϯϓϧͳϞσϧʯͷ෭࡞༻! ❖ ຊՈGoogle GroupsͰٞʹͳ͍͕ͬͯͨɺ໌֬ͳ
͑ແ͠ (http://goo.gl/j0BqM1)! ❖ ͜ͷϓϩδΣΫτͰɺϞσϧΛઙͯ͘͠ճආ AngularJS ࣮ઓೖͷTips
❖ $rootScope.$broadcast! ❖ ≒ େҬδϟϯϓ! ❖ ศརͳ͚ͩʹதಟੑ͕͋Δ! ❖ ͍͗͢ΔͱDIͷҙຯ͕ͳ͘ͳΔͷͰҙʂ AngularJS
࣮ઓೖͷTips
❖ ԾҾͷMinifyରԠ! ❖ Minify͞Εͯಈ͔ͳ͘ͳΔͷΛ͙ AngularJS ࣮ઓೖͷTips
❖ ϦΫΤετͷංେԽ! ❖ ΞϓϦຊମˍϏϡʔ! ❖ httpͷίετ͕ߴ͍ϞόΠϧ͚αΠτཁҙ! ❖ Ϗϧυ࣌ʹόϯυϧ͢Δ! ❖ webmake
ͰΞϓϦέʔγϣϯΛ·ͱΊΔ! ❖ angular-template Ͱ view Λόϯυϧ! ❖ APIͷઃܭΛ͢Δ AngularJS ࣮ઓೖͷTips
❖ SEO/Crawlerରࡦ! ❖ single-page appશൠͷͰ͕͢! ❖ User-Agentผͯ͠ɺPhantomJSͰ αʔόαΠυϨϯμϦϯά͢Δͷָ͕ AngularJS ࣮ઓೖͷTips
❖ ᐜ༕ͩͬͨ͜ͱ! ❖ Two-way Binding ʹΑΔϨεϙϯεѱԽ! ❖ ԆϩʔυʹΑΔϨΠΞτͣ͘Ε! ❖ AngularJSຊମͷαΠζ
(minifyͯ͠100KB) AngularJS ࣮ઓೖͷTips → ܕམͪAndroidͰαΫαΫ
❖ ΄ͲΑ੍͍ɾϞδϡʔϧԽͷڧ੍! ❖ FrontendΤϯδχΞͷఈ্͛! ❖ AngularJSνʔϜ։ൃ͖ ΨϯΨϯ࣮ઓೖ͍ͯͩ͘͠͞ʂ (ͨͩ͠ࣄલ४උ೦ೖΓʹ) ·ͱΊ
❖ ʮຊͰ௨͑ΔγϦίϯόϨʔͷελʔτΞοϓʯ! ❖ ΤϯδχΞืूதͰ͢ (Frontend & Backend)! ❖ Rails /
Node.js / CoffeeScript! ❖ ࣍ظϑϩϯτΤϯυAngularJSΛ࠾༻༧ఆ! ❖ http://kaizenplatform.in/ KAIZEN Platform Inc.
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ