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
Angular初心者が1週間でモノ作ってみました
Search
Takashi Kanemoto
August 23, 2019
Programming
0
1.5k
Angular初心者が1週間でモノ作ってみました
ng-sake #15 LT資料
https://ng-sake.connpass.com/event/140021/
Takashi Kanemoto
August 23, 2019
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
型で語るカタ
irof
0
200
Team operations that are not burdened by SRE
kazatohiei
1
320
Hack Claude Code with Claude Code
choplin
5
2.3k
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
180
What's new in AppKit on macOS 26
1024jp
0
110
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
660
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
120
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
1
130
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
540
Deep Dive into ~/.claude/projects
hiragram
14
2.6k
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1k
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Navigating Team Friction
lara
187
15k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
RailsConf 2023
tenderlove
30
1.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
980
Embracing the Ebb and Flow
colly
86
4.7k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Transcript
/30 Angularॳ৺ऀ͕ 1िؒͰϞϊ࡞ͬͯΈ·ͨ͠ 2019/08/23 #ng_sake @ttskch 1
/30 ʹ͍ͭͯ 2
/30 ͖ͨͭͪʢ໊͋ͩʣ • ໊ݹ͔Βདྷ·ͨ͠ • (ג)ΧϧςοτίϛϡχέʔγϣϯζCTO • PHPྺ7ɺjQueryྺ6ɺAngularྺ0 3
/30 ͖ͨͭͪʢ໊͋ͩʣ • ͓ख͍ͨ͠ຊʢ2015/12ʣ • Schooߨࢣʢ2018/04ʣ ʮGitHubΛͬͨσϓϩΠࣗಈԽ࣮ફʯ ʮجຊ͔Β͔ͬ͠ΓֶͿ Symfony2ೖʯ 4
/30 ͨ ͭ ͖ ͪ twitter.com/ttskch ͋͞ɺ͋ͳͨࠓ͙͢ϑΥϩʔ͠Α͏!!! શແྉ ·͞ʹ໊ݴػ ਓੜͰେͳ͜ͱɺͯ͢
͖͔ͨͭͪΒڭΘͬͨ ͖ͨͭͪΛϑΥϩʔͨ͠Β ࠊ௧͕࣏Γ·ͨ͠ 100% φϯτʂ ϑΥϩϫʔ͔Βͷࢧ࣋ 100% ͍ͯ͠Δ ͍ͯ͠ͳ͍ ϑΥϩϫʔ͞Μ100ਓʹฉ͖·ͨ͠ ͖ͨͭͪΛϑΥϩʔ͍ͯ͠Δʁ 5
/30 ձࣾʹ͍ͭͯ 6
/30 (ג)Χϧςοτίϛϡχέʔγϣϯζ https://quartet-communications.com 7
/30 (ג)Χϧςοτίϛϡχέʔγϣϯζ https://www.google.co.jp/search?q=Χʔςϯ 8
/30 (ג)Χϧςοτίϛϡχέʔγϣϯζ https://lisket.jp 9
/30 We are hiring!ʢϚδͰʣ • JSerઈࢍେืूதʂʢϦϞʔτ෭ۀɾόΠτՄʣ • Symfony+AngularͰɺWebࠂۀքΛ ϗϫΠτʹ͢ΔΈΛ࡞ͬͯ·͢ •
ܦӦϏδϣϯʮੈքҰޮతͳཧళʯ 10
/30 We are hiring!ʢϚδͰʣ • ࣗࣾαʔϏεʮLisketʯͰࣗࣾͷۀޮԽ • શࣾһͷฏۉۀ͕࣌ؒ5h/݄͙Β͍Ͱ͢ ಛผड 11
/30 We are hiring!ʢϚδͰʣ ΤϯδχΞͷಇ͖͢͞େࣄʹͯ͠·͢✨ 12
/30 We are hiring!ʢϚδͰʣ ·͓͚ͣͩͰʂؾܰʹ͔͚͍ͯͩ͘͞ 13
/30 We are hiring!ʢϚδͰʣ ࠾༻αΠτ͋Γ·͢ʂͥͻ͍ͯΈ͍ͯͩ͘͞ 14 https://quartetcom.co.jp/recruit/engineer/
/30 Angularॳ৺ऀ͕ 1िؒͰϞϊ࡞ͬͯΈ·ͨ͠ 2019/08/23 #ng_sake @ttskch 15
/30 ͡Ίʹ 16 • ݄༵ʹ࡞Δ͜ͱΛࢥཱ͍ͬͨ • ࠓʢ༵ۚʣ·Ͱʹ࡞ͬͯLT͔ͨͬͨ͠ • ͑Δ݄࣌ؒʙͷ2͙࣌ؒͣͭΒ͍ •
Angularྗຊ1ಡΜͰͪΐͬͱΛ࡞Ζ͏ ͱͯ͠Έͨ͜ͱ͕͋Δ͙Β͍ʢͦΕ࠳ંͨ͠সʣ
/30 ࡞ͬͨͷ 17
/30 Ͱ͖Δ͜ͱ 18 • ը૾ɺ໊ɺϦϯΫઌURLΛೖྗ͢Δͱ հϦϯΫͷϒϩάύʔπΛੜ • ίϐϖ༻ͷHTMLίʔυΛtextareaʹදࣔ
/30 ࣌ؒΕͰͰ͖ͳ͔ͬͨ͜ͱ 19 • AmazonָఱͷϖʔδURL͔ΒҰൃͰ ϒϩάύʔπΛੜͰ͖ΔΑ͏ʹ͔ͨͬͨ͠ • API͕ϒϥβ͔Β͑ͳ͍ͷͰόοΫΤϯυ࡞Βͳ͍ͱ
/30 σϞ 20
/30 ͬͨ͜ͱͷྲྀΕ 1. ng newʊ 2. bootstrapɺngx-bootstrapಋೖ 3. HTMLΛϚʔΫΞοϓ 4.
imgurͷը૾ΞοϓϩʔυΛ࣮ 5. ϓϨϏϡʔ෦ͷHTMLΛtextareaʹग़ྗ 21
/30 ͬͨ͜ͱͷྲྀΕ 1. ng newʊ 2. bootstrapɺngx-bootstrapಋೖ 3. HTMLΛϚʔΫΞοϓ 4.
imgurͷը૾ΞοϓϩʔυΛ࣮ 5. ϓϨϏϡʔ෦ͷHTMLΛtextareaʹग़ྗ 22 ͜͜Ͱ݁ߏϋϚͬͨ
/30 ࠷ॳͷ࣮ 23 • ϓϨϏϡʔ෦ʹ#previewΛ͚ͭΔ • @ViewChildͰElementRefΛऔಘͯ͠ .nativeElement.innerHTMLͰHTMLΛऔಘ
/30 ݁Ռ 24
/30 _ngcontent-hiy-c0="" is Կʁ 25 • ίϯϙʔωϯτ͝ͱʹCSSͷείʔϓΛ ΧϓηϧԽ͢ΔͨΊʹૠೖ͞ΕΔͭΒ͍͠ • @ComponentσίϨʔλͰ
encapsulation: ViewEncapsulation.Noneʊ Λࢦఆ͢ΕফͤΔΒ͍͠_ ɾhttps://stackoverflow.com/questions/45082129 ɾhttps://qiita.com/jimbo/items/b347c19d935e796c2482 ࢀߟ
/30 ࠓͷ࣮ 26 • ϓϨϏϡʔ෦ΛίϯϙʔωϯτԽ • ͦͷίϯϙʔωϯτViewEncapsulation.None • @ViewChildΛ{ read:
ElementRef }͖Ͱ͑ ComponentͰͳ͘ElementRefΛऔಘͰ͖ͨ • ͋ͱಉ͡
/30 ݁Ռ 27
/30 ·ͱΊ 28 1ि͍ؒ
/30 ײ 29 • Ͱ·͋ॳ৺ऀͰ1िؒͰҰԠϞϊ࡞ΕΔ • ng generateͷ͓͔͛ͰαΫαΫ࡞ΕΔ • AngularJSͷใΛආ͚ͳ͕ΒάάΔͷΉ͍ͣ
• ຊಡΜͰͳ͔ͬͨΒແཧͩͬͨ
/30 @ttskch ʘThanks!ʗ 30