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
370
PHPとAPI Platformで作る本格的なWeb APIアプリケーション(入門編) / phpcon 2024 Intro to API Platform
ttskch
0
800
今年書いた技術記事で伸びたやつの自慢と自分の中では力作なのにさっぱり伸びなかったやつの供養 / My Tech Articles 2024
ttskch
2
130
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
47
38k
データベース/SQL超入門!完全初心者向けに世界一分かりやすく解説します
ttskch
1
6.2k
Symfony UX Autocompleteとかいう 顧客が本当に必要だったもの
ttskch
0
2.1k
就活生あるいは新人エンジニアさんへのお節介なアドバイス
ttskch
0
1.6k
symfony/pantherでWordleを解いてみた
ttskch
0
350
ついに、Webアプリでの帳票印刷のベストプラクティスを編み出しました💡
ttskch
16
20k
Other Decks in Programming
See All in Programming
Flutterと Vibe Coding で個人開発!
hyshu
1
220
Strands Agents で実現する名刺解析アーキテクチャ
omiya0555
1
110
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
21
10k
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)The Basics of Agent Development with ADK — A Demo-Focused Introduction
risatube
PRO
6
1.4k
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
710
副作用と戦う PHP リファクタリング ─ ドメインイベントでビジネスロジックを解きほぐす
kajitack
3
520
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
15
9.3k
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
180
PHPカンファレンス関西2025 基調講演
sugimotokei
6
1.1k
Amazon Q CLI開発で学んだAIコーディングツールの使い方
licux
3
170
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
36
11k
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
250
Featured
See All Featured
A designer walks into a library…
pauljervisheath
207
24k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
182
54k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
750
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
Scaling GitHub
holman
461
140k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
The World Runs on Bad Software
bkeepers
PRO
70
11k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Six Lessons from altMBA
skipperchong
28
3.9k
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