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 (1.x) いまさら触ってみた
Search
Takashi Kanemoto
June 20, 2015
Programming
0
980
AngularJS (1.x) いまさら触ってみた
Symfony Meetup #4 LT 資料
https://symfony.doorkeeper.jp/events/26456
Takashi Kanemoto
June 20, 2015
Tweet
Share
More Decks by Takashi Kanemoto
See All by Takashi Kanemoto
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
360
PHPとAPI Platformで作る本格的なWeb APIアプリケーション(入門編) / phpcon 2024 Intro to API Platform
ttskch
0
760
今年書いた技術記事で伸びたやつの自慢と自分の中では力作なのにさっぱり伸びなかったやつの供養 / My Tech Articles 2024
ttskch
2
130
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
47
38k
データベース/SQL超入門!完全初心者向けに世界一分かりやすく解説します
ttskch
1
6.1k
Symfony UX Autocompleteとかいう 顧客が本当に必要だったもの
ttskch
0
2k
就活生あるいは新人エンジニアさんへのお節介なアドバイス
ttskch
0
1.6k
symfony/pantherでWordleを解いてみた
ttskch
0
350
ついに、Webアプリでの帳票印刷のベストプラクティスを編み出しました💡
ttskch
16
19k
Other Decks in Programming
See All in Programming
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
5.8k
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
87
29k
RailsGirls IZUMO スポンサーLT
16bitidol
0
190
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
10
5.2k
Hack Claude Code with Claude Code
choplin
4
2.1k
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
170
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
780
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
480
NPOでのDevinの活用
codeforeveryone
0
840
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
220
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
510
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
184
22k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Documentation Writing (for coders)
carmenintech
72
4.9k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
300
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Building an army of robots
kneath
306
45k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Visualization
eitanlees
146
16k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
690
Transcript
AngularJS (1.x) ͍·͞Β৮ͬͯΈͨ #symfony_meetup 2015.06.20 @qckanemoto
• ໊ݹ͔Βདྷ·ͨ͠ • (ג)ΧϧςοτίϛϡχέʔγϣϯζCTO • PHPྺ3 • Symfonyྺ1ʢ͙Β͍ROMઐʣ @qckanemoto
Χϧςοτίϛϡχέʔγϣϯζ • PHPerืूதʂ • ໊ݹʢϦϞʔτՄʣ • @hidenorigoto͞Μ͕ؒೖΓ͠·ͨ͠ • ϦεςΟϯάࠂӡ༻πʔϧʮLisketʯ
ΤϯδχΞͷಇ͖͢͞େࣄʹͯ͠·͢ Χϧςοτίϛϡχέʔγϣϯζ
SNS͔ϝʔϧͰ͓ؾܰʹ͝࿈བྷ͍ͩ͘͞✨ Χϧςοτίϛϡχέʔγϣϯζ
ຊ
Symfony2 + AngularJS ձࣾͷϓϩμΫτͷߏ
ձࣾͷϓϩμΫτͷߏ Symfony2 + AngularJS
ձࣾͷϓϩμΫτͷߏ ʊਓਓਓਓਓਓਓਓʊ ʼɹ AngularJS ɹʻ ʼɹɹɹɹɹɹɹɹʻ ʉY^Y^Y^Y^Y^Y^Yʉ
ձࣾͷϓϩμΫτͷߏ ʊਓਓਓਓਓਓਓਓʊ ʼɹ AngularJS ɹʻ ʼɹશવ͔ΒΜɹʻ ʉY^Y^Y^Y^Y^Y^Yʉ
ࣄʹࢧো͕͋ͬͨͷͰ ͜͜3͙Β͍৮ͬͯΈ·ͨ͠
ࣄ࢝Ί • ͱΓ͋͑ͣͳͷͰਂ͘ߟ͑ͣʹYeomanͰ࡞Δ
ࣄ࢝Ί
ࣄ࢝Ί
͓͓ʙ
Step1. σΟϨΫτϦߏݟΔ
None
શϏϡʔڞ௨ͷhtmlʢϨΠΞτతͳʣ
શϏϡʔڞ௨ͷhtmlʢϨΠΞτతͳʣ jsϑΝΠϧશ෦͜͜
શϏϡʔڞ௨ͷhtmlʢϨΠΞτతͳʣ jsϑΝΠϧશ෦͜͜ ֤Ϗϡʔͷhtml
ίϯτϩʔϥ Ϗϡʔ
ϧʔςΟϯάઃఆͱ͔configܥ
ϧʔςΟϯά͜ΜͳϊϦ
Ѳ
Step2. ͱΓ͋͑ͣը໘ॻ͘ ʢνϟοτπʔϧΈ͍ͨͳͷΛఆʣ
ίϯτϩʔϥ
ίϯτϩʔϥ Ҿʹॻ͚ͩ͘Ͱ αʔϏεΛΠϯδΣΫτՄೳ
ίϯτϩʔϥ $scopeαʔϏεܦ༝Ͱ ίϯτϩʔϥɾϏϡʔؒͰ มʢϞσϧʣΛڞ༗
Ϗϡʔ
Ϗϡʔ $scope.comment Λ {{ comment }} Ͱग़ྗ
Ϗϡʔ Α͋͘Δײ͡ͷϑΟϧλ ʢࣗ࡞Մೳʣ
ग़ྗ݁Ռ
͓͓ʙ
Step3. ฤूՄೳʹͯ͠ΈΔ
ίϯτϩʔϥ ϞσϧʹฤूதϑϥάΛՃ
Ϗϡʔ
Ϗϡʔ ฤूϑϥάΛΓସ͑ΔϘλϯΛՃ
Ϗϡʔ ΫϦοΫ͞ΕͨΒ comment.isEditing Λస
Ϗϡʔ ฤूϑϥάͷʹԠͯ͡ දࣔͤ͞ΔཁૉΛΓସ͑
Ϗϡʔ ฤूதͷͱ͖Ӆ͢
Ϗϡʔ ฤूதͷͱ͖ʹݟͤΔ
Ϗϡʔ comment.content ʹ ೖྗΛඥ͚Δ
ग़ྗ݁Ռ
ग़ྗ݁Ռ ΫϦοΫͯ͠ฤूதʹ
ग़ྗ݁Ռ ฤू
ग़ྗ݁Ռ ΫϦοΫͯ͠ฤूऴྃ
͓͓ʙ
Step4. ࠶ར༻ͨ͘͠ͳΔ
͜ͷ࣌Ͱࢥͬͨ͜ͱ νϟοτπʔϧͩͬͨΒ ͜ͷฤूՄೳͳίϝϯτύωϧ ৭Μͳը໘Ͱ͍ͦ͏
Ϗϡʔ෦ͷ࠶ར༻ • ϏϡʔͷҰ෦ΛʮσΟϨΫςΟϒʯͱͯ͠෦Խ • ෳͷϏϡʔ͔ΒσΟϨΫςΟϒΛ࠶ར༻ • ng-click, ng-show, ng-hide, ng-model
AngularJSΈࠐΈͷσΟϨΫςΟϒ • ཁૉΛؙ͝ͱ෦Խͨ͠ΓɺཁૉͷػೳΛ֦ு ͢ΔͨΊͷଐੑ͚ͩΛ෦Խͨ͠Γ৭ʑͰ͖Δ
σΟϨΫςΟϒԽͯ͠ΈΔ ɿjsϑΝΠϧΛՃͨ͠߹index.html͔Βϩʔυ͢ΔͷΛΕͳ͍Α͏ʹ
σΟϨΫςΟϒԽͯ͠ΈΔ σΟϨΫςΟϒ໊ camelCase Ͱ͚Δ Ϗϡʔ͔Β kebab-case Ͱ͏
σΟϨΫςΟϒԽͯ͠ΈΔ ‘E’ ཁૉʢElementʣ ‘A’ ଐੑʢAttributeʣ ‘EA’ ͱ͔Δͱ྆ํͱͯ͑͠Δ
σΟϨΫςΟϒԽͯ͠ΈΔ σΟϨΫςΟϒʹHTMLදݱΛ ͍࣋ͨͤͨ߹ςϯϓϨʔτΛࢦఆͰ͖Δ ʢػೳͷΈͰHTMLදݱΛ࣋ͨͳ͍ͷՄʣ
σΟϨΫςΟϒԽͯ͠ΈΔ σΟϨΫςΟϒΛͬͨཁૉࣗମΛ ςϯϓϨʔτͰஔ͖͑Δ߹ true ʹ
σΟϨΫςΟϒԽͯ͠ΈΔ σΟϨΫςΟϒͷ࣋ͭಠࣗείʔϓͱ ར༻ଆͷϏϡʔͷείʔϓͷؔ࿈͚ઃఆʢޙड़ʣ
σΟϨΫςΟϒͷςϯϓϨʔτ
Ϗϡʔ
Ϗϡʔ ϏϡʔଆͰ σΟϨΫςΟϒ໊ kebab-case
Ϗϡʔ σΟϨΫςΟϒείʔϓͷ comment ͱ͍͏Ϟσϧʹ ࣗείʔϓͷ comment ϞσϧΛόΠϯυ
ग़ྗ݁Ռ ͪΌΜͱಉ͡Α͏ʹಈ͘Ϗϡʔ͕ग़ͨ
…
ͪΐͬͱΉ͍ͣΜ͚
σΟϨΫςΟϒ͕࠷ॳͷؔ • 2͙Β͍ͰσΟϨΫςΟϒ࡞Γͨ͘ͳͬͨ • είʔϓͷόΠϯσΟϯά͕Α͔͘Βͳ͘ ͯͪΐͬͱۤ͠Μͩ • ͦΕΛΓӽ͑ͨΒָʹ৭ʑͰ͖ΔΑ͏ʹͳ ͬͨ
είʔϓͷόΠϯσΟϯά • ‘=‘ ͱ ‘@’ ͱ ‘&’ ͷ3छྨ͕͋Δ • ‘=‘
ํόΠϯσΟϯά • ར༻ଆͱϞσϧΛڞ༗ • σΟϨΫςΟϒͰϞσϧΛॻ͖͑ͨΒར༻ଆͰมΘΔ • ‘@‘ ར༻ଆ͔Β੩తͳΛͨͩΒ͏͚ͩ • ར༻ଆͰ directive=“{{ model }}” Έ͍ͨʹධՁޙͷΛ͢ • ‘&’ ࠷ॳ͋·ΓΘͳ͍ͷͰͦͷ͏ͪάά͍ͬͯͩ͘͞
σΟϨΫςΟϒԞ͕ਂ͍ • ଞʹ৭ʑͰ͖ͯԞ͕ਂ͍ͬΆ͍Ͱ͢ • Ͱॳาతͳ͍ํ͚ͩͳΒׂΓͱ͙͢׳Ε·͢ • ҎԼͷهࣄ͕ࢀߟʹͳΓ·ͨ͠ • “AngularJSͷDirectiveΛཧղ͢Δ.” http://qiita.com/Quramy/items/
dd4e7d2693c32d92048c
͍ͭͰʹαʔϏεͷઆ໌
ϩδοΫͷ࠶ར༻ • ϩδοΫΛ࠶ར༻͍ͨ͠߹ɺσΟϨΫςΟ ϒͰͳ͘αʔϏεΛ࡞Δ • $scopeͳͲͷΈࠐΈͷαʔϏεͱಉ͡Α͏ ʹɺίϯτϩʔϥσΟϨΫςΟϒɺଞͷαʔ ϏεͳͲʹ؆୯ʹΠϯδΣΫτՄೳ
αʔϏεͷྫʢఆٛଆʣ
αʔϏεͷྫʢఆٛଆʣ ୯ҰػೳͷαʔϏεͳΒ ΫϩʔδϟΛ return ͯ͠OK
αʔϏεͷྫʢར༻ଆʣ
αʔϏεͷྫʢར༻ଆʣ ΈࠐΈαʔϏεͱಉ͡Α͏ʹ Ҿʹ͚ͩ͢ͰOK
αʔϏεͷྫʢར༻ଆʣ ͋ͱී௨ʹ͏͚ͩ
ͬͪ͜؆୯ͬΆ͍ʢϗοʣ
Step5. ͦͯ͠આ
υΩϡϝϯτಡΈ·͠ΐ͏ • ࠓυΩϡϝϯτ݁ߏॆ࣮ͯͯ҆͠৺Ͱ͢ • ↓ͷ2ͭΛ͋ͨΕ͍͍͔ͩͨΓ·͢ • https://docs.angularjs.org/api • https://docs.angularjs.org/guide
ग़ల: My Experience With AngularJS - The Super-heroic JavaScript MVW
Framework http://www.bennadel.com/blog/2439-my-experience-with-angularjs-the-super-heroic-javascript-mvw-framework.htm ֶशίετ༻్࣍ୈ
ࣗࠓͨͿΜ “Neat!” ͷͱ͜ͳͷͰ͜ΕҎ্ ਂ͍͠ͳ͍ํ͕ݡ໌ͬΆ͍
·ͱΊ • Α͘σΟεΒΕͯΔ͚Ͳɺ୯७ͳΞϓϦͰ ͏ͳΒΊͬͪΌ؆୯Ͱศར • AngularJS 1.x → Angular2 Ͱ΄΅ผͷϑϨʔ
ϜϫʔΫʹͳͬͯΔΒ͍͠ͷͰࠓ͔ΒΔͳ Β1ܥແࢹͰ͍͍ͱࢥ͍·͢
͓·͚ • Symfony্ͰAngularJSΛಈ͔͍ͨ͠ਓ→ • “Symfony2 meets AngularJS” http://www.slideshare.net/77web/ symfony-33704176 •
Ͱ΄ͱΜͲͷέʔεͰࠞͥΔͳةݥͳͷͰ SymfonyଆREST APIʹప͢Δ͕٢
Thanks ;)