Angular初心者が1週間でモノ作ってみました

Slide 1

Slide 1 text

/30 Angularॳ৺ऀ͕  1िؒͰϞϊ࡞ͬͯΈ·ͨ͠ 2019/08/23 #ng_sake @ttskch 1

Slide 2

Slide 2 text

/30 ๻ʹ͍ͭͯ 2

Slide 3

Slide 3 text

/30 ͖ͨͭͪʢ໊͋ͩʣ • ໊ݹ԰͔Βདྷ·ͨ͠ • (ג)ΧϧςοτίϛϡχέʔγϣϯζCTO • PHPྺ7೥ɺjQueryྺ6೥ɺAngularྺ0೥ 3

Slide 4

Slide 4 text

/30 ͖ͨͭͪʢ໊͋ͩʣ • ͓ख఻͍ͨ͠ຊʢ2015/12ʣ • Schooߨࢣʢ2018/04ʣ ʮGitHubΛ࢖ͬͨσϓϩΠࣗಈԽ࣮ફʯ ʮجຊ͔Β͔ͬ͠ΓֶͿ Symfony2ೖ໳ʯ 4

Slide 5

Slide 5 text

/30 ͨ ͭ ͖ ͪ twitter.com/ttskch ͋͞ɺ͋ͳͨ΋ࠓ͙͢ϑΥϩʔ͠Α͏!!! ׬શແྉ ·͞ʹ໊ݴ੡଄ػ ਓੜͰେ੾ͳ͜ͱ͸ɺ͢΂ͯ ͖͔ͨͭͪΒڭΘͬͨ ͖ͨͭͪΛϑΥϩʔͨ͠Β  ࠊ௧͕࣏Γ·ͨ͠ 100% φϯτʂ ϑΥϩϫʔ͔Βͷࢧ࣋཰ 100% ͍ͯ͠Δ ͍ͯ͠ͳ͍ ϑΥϩϫʔ͞Μ100ਓʹฉ͖·ͨ͠ ͖ͨͭͪΛϑΥϩʔ͍ͯ͠Δʁ 5

Slide 6

Slide 6 text

/30 ձࣾʹ͍ͭͯ 6

Slide 7

Slide 7 text

/30 (ג)Χϧςοτίϛϡχέʔγϣϯζ https://quartet-communications.com 7

Slide 8

Slide 8 text

/30 (ג)Χϧςοτίϛϡχέʔγϣϯζ https://www.google.co.jp/search?q=Χʔςϯ 8

Slide 9

Slide 9 text

/30 (ג)Χϧςοτίϛϡχέʔγϣϯζ https://lisket.jp 9

Slide 10

Slide 10 text

/30 We are hiring!ʢϚδͰʣ • JSerઈࢍେืूதʂʢϦϞʔτ΍෭ۀɾόΠτ΋Մʣ • Symfony+AngularͰɺWeb޿ࠂۀքΛ  ϗϫΠτʹ͢Δ࢓૊ΈΛ࡞ͬͯ·͢ • ܦӦϏδϣϯ͸ʮੈքҰޮ཰తͳ୅ཧళʯ 10

Slide 11

Slide 11 text

/30 We are hiring!ʢϚδͰʣ • ࣗࣾαʔϏεʮLisketʯͰࣗࣾͷۀ຿΋ޮ཰Խ • શࣾһͷฏۉ࢒ۀ͕࣌ؒ5h/݄͙Β͍Ͱ͢ ಛผ৆ड৆ 11

Slide 12

Slide 12 text

/30 We are hiring!ʢϚδͰʣ ΤϯδχΞͷಇ͖΍͢͞௒େࣄʹͯ͠·͢✨ 12

Slide 13

Slide 13 text

/30 We are hiring!ʢϚδͰʣ ·ͣ͸͓࿩͚ͩͰ΋ʂؾܰʹ੠͔͚͍ͯͩ͘͞ 13

Slide 14

Slide 14 text

/30 We are hiring!ʢϚδͰʣ ࠾༻αΠτ΋͋Γ·͢ʂͥͻ೷͍ͯΈ͍ͯͩ͘͞ 14 https://quartetcom.co.jp/recruit/engineer/

Slide 15

Slide 15 text

/30 Angularॳ৺ऀ͕  1िؒͰϞϊ࡞ͬͯΈ·ͨ͠ 2019/08/23 #ng_sake @ttskch 15

Slide 16

Slide 16 text

/30 ͸͡Ίʹ 16 • ݄༵ʹ࡞Δ͜ͱΛࢥཱ͍ͬͨ • ࠓ೔ʢ༵ۚʣ·Ͱʹ࡞ͬͯLT͔ͨͬͨ͠ • ࢖͑Δ࣌ؒ͸݄ʙ໦ͷ໷2͙࣌ؒͣͭΒ͍ • Angularྗ͸ຊ1࡭ಡΜͰͪΐͬͱ෺Λ࡞Ζ͏ ͱͯ͠Έͨ͜ͱ͕͋Δ͙Β͍ʢͦΕ͸࠳ંͨ͠সʣ

Slide 17

Slide 17 text

/30 ࡞ͬͨ΋ͷ 17

Slide 18

Slide 18 text

/30 Ͱ͖Δ͜ͱ 18 • ը૾ɺ঎඼໊ɺϦϯΫઌURLΛೖྗ͢Δͱ  ঎඼঺հϦϯΫͷϒϩάύʔπΛੜ੒ • ίϐϖ༻ͷHTMLίʔυΛtextareaʹදࣔ

Slide 19

Slide 19 text

/30 ࣌ؒ੾ΕͰͰ͖ͳ͔ͬͨ͜ͱ 19 • Amazon΍ָఱͷ঎඼ϖʔδURL͔ΒҰൃͰ  ϒϩάύʔπΛੜ੒Ͱ͖ΔΑ͏ʹ͔ͨͬͨ͠ • API͕ϒϥ΢β͔Β࢖͑ͳ͍ͷͰόοΫΤϯυ΋࡞Βͳ͍ͱ

Slide 20

Slide 20 text

/30 σϞ 20

Slide 21

Slide 21 text

/30 ΍ͬͨ͜ͱͷྲྀΕ 1. ng newʊ 2. bootstrapɺngx-bootstrapಋೖ 3. HTMLΛϚʔΫΞοϓ 4. imgur΁ͷը૾ΞοϓϩʔυΛ࣮૷ 5. ϓϨϏϡʔ෦෼ͷHTMLΛtextareaʹग़ྗ 21

Slide 22

Slide 22 text

/30 ΍ͬͨ͜ͱͷྲྀΕ 1. ng newʊ 2. bootstrapɺngx-bootstrapಋೖ 3. HTMLΛϚʔΫΞοϓ 4. imgur΁ͷը૾ΞοϓϩʔυΛ࣮૷ 5. ϓϨϏϡʔ෦෼ͷHTMLΛtextareaʹग़ྗ 22 ͜͜Ͱ݁ߏϋϚͬͨ

Slide 23

Slide 23 text

/30 ࠷ॳͷ࣮૷ 23 • ϓϨϏϡʔ෦෼ʹ#previewΛ͚ͭΔ • @ViewChildͰElementRefΛऔಘͯ͠  .nativeElement.innerHTMLͰHTMLΛऔಘ

Slide 24

Slide 24 text

/30 ݁Ռ 24

Slide 25

Slide 25 text

/30 _ngcontent-hiy-c0="" is Կʁ 25 • ίϯϙʔωϯτ͝ͱʹCSSͷείʔϓΛ  ΧϓηϧԽ͢ΔͨΊʹૠೖ͞ΕΔ΍ͭΒ͍͠ • @ComponentσίϨʔλͰ  encapsulation: ViewEncapsulation.Noneʊ  Λࢦఆ͢Ε͹ফͤΔΒ͍͠_ ɾhttps://stackoverﬂow.com/questions/45082129 ɾhttps://qiita.com/jimbo/items/b347c19d935e796c2482 ࢀߟ

Slide 26

Slide 26 text

/30 ࠓͷ࣮૷ 26 • ϓϨϏϡʔ෦෼ΛίϯϙʔωϯτԽ • ͦͷίϯϙʔωϯτ͸ViewEncapsulation.None • @ViewChildΛ{ read: ElementRef }෇͖Ͱ࢖͑͹  ComponentͰ͸ͳ͘ElementRefΛऔಘͰ͖ͨ • ͋ͱ͸ಉ͡

Slide 27

Slide 27 text

/30 ݁Ռ 27

Slide 28

Slide 28 text

/30 ·ͱΊ 28 1िؒ͸୹͍

Slide 29

Slide 29 text

/30 ײ૝ 29 • Ͱ΋·͋ॳ৺ऀͰ΋1िؒͰҰԠϞϊ͸࡞ΕΔ • ng generateͷ͓͔͛ͰαΫαΫ࡞ΕΔ • AngularJSͷ৘ใΛආ͚ͳ͕ΒάάΔͷΉ͍ͣ • ຊಡΜͰͳ͔ͬͨΒແཧͩͬͨ

Slide 30

Slide 30 text

/30 @ttskch ʘThanks!ʗ 30