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
350
PHPとAPI Platformで作る本格的なWeb APIアプリケーション(入門編) / phpcon 2024 Intro to API Platform
ttskch
0
750
今年書いた技術記事で伸びたやつの自慢と自分の中では力作なのにさっぱり伸びなかったやつの供養 / My Tech Articles 2024
ttskch
2
120
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
47
37k
データベース/SQL超入門!完全初心者向けに世界一分かりやすく解説します
ttskch
1
6k
Symfony UX Autocompleteとかいう 顧客が本当に必要だったもの
ttskch
0
2k
就活生あるいは新人エンジニアさんへのお節介なアドバイス
ttskch
0
1.6k
symfony/pantherでWordleを解いてみた
ttskch
0
340
ついに、Webアプリでの帳票印刷のベストプラクティスを編み出しました💡
ttskch
16
19k
Other Decks in Programming
See All in Programming
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
320
すべてのコンテキストを、 ユーザー価値に変える
applism118
2
850
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
560
CursorはMCPを使った方が良いぞ
taigakono
1
180
VS Code Update for GitHub Copilot
74th
1
410
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
450
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
630
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
160
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
370
技術同人誌をMCP Serverにしてみた
74th
1
380
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
920
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
100
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Statistics for Hackers
jakevdp
799
220k
Balancing Empowerment & Direction
lara
1
370
Practical Orchestrator
shlominoach
188
11k
The Cult of Friendly URLs
andyhume
79
6.5k
Designing for Performance
lara
609
69k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.4k
Gamification - CAS2011
davidbonilla
81
5.3k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.3k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
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