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
960
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
280
PHPとAPI Platformで作る本格的なWeb APIアプリケーション(入門編) / phpcon 2024 Intro to API Platform
ttskch
0
470
今年書いた技術記事で伸びたやつの自慢と自分の中では力作なのにさっぱり伸びなかったやつの供養 / My Tech Articles 2024
ttskch
2
93
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
47
33k
データベース/SQL超入門!完全初心者向けに世界一分かりやすく解説します
ttskch
1
5k
Symfony UX Autocompleteとかいう 顧客が本当に必要だったもの
ttskch
0
1.9k
就活生あるいは新人エンジニアさんへのお節介なアドバイス
ttskch
0
1.5k
symfony/pantherでWordleを解いてみた
ttskch
0
300
ついに、Webアプリでの帳票印刷のベストプラクティスを編み出しました💡
ttskch
16
19k
Other Decks in Programming
See All in Programming
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
210
ARA Ansible for the teams
kksat
0
150
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
180
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
150
昭和の職場からアジャイルの世界へ
kumagoro95
1
390
Visual StudioのGitHub Copilotでいろいろやってみる
tomokusaba
1
130
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
870
Unity Android XR入門
sakutama_11
0
160
Lottieアニメーションをカスタマイズしてみた
tahia910
0
130
WebDriver BiDiとは何なのか
yotahada3
1
150
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
810
クリーンアーキテクチャから見る依存の向きの大切さ
shimabox
3
730
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
51
7.4k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
Making Projects Easy
brettharned
116
6k
Raft: Consensus for Rubyists
vanstee
137
6.8k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Fireside Chat
paigeccino
34
3.2k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Gamification - CAS2011
davidbonilla
80
5.1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
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 ;)