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
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
1
13k
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
130
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
190
技術同人誌をMCP Serverにしてみた
74th
1
650
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
530
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
650
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
220
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
PipeCDのプラグイン化で目指すところ
warashi
1
280
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
900
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
87
29k
Featured
See All Featured
Building Adaptive Systems
keathley
43
2.7k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Code Reviewing Like a Champion
maltzj
524
40k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Visualization
eitanlees
146
16k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
4 Signs Your Business is Dying
shpigford
184
22k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
The Language of Interfaces
destraynor
158
25k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Speed Design
sergeychernyshev
32
1k
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 ;)