Angularを使ったmodern開発_20180831

Transcript

1. Angularを使ったmodern開ൃ 鈴木孝之 2018/08/31

2. "KFOEB ࣗݾ঺հ
   "OHVMBSͷ֓ཁ
   "OHVMBSͷϝϦοτɾಛ௃
   %&.0

3. 0.ࣗݾ঺հ ◆໊લ ླ໦ ޹೭(Suzuki Takayuki) ※ಉ੏ಉ໊ଟͯ͘ࠔͬͯ·͢ɻɻɻ ◆ࣗݾ঺հ ɾ1990೥ɺਆಸ઒ݝੜ·Εɻ ɾࣾձਓʹͳ͔ͬͯΒɺϓϩάϥϛϯάΛ࢝ΊΔɻ ɾ2015೥ʹϑϧεϐʔυʹೖࣾ͠ɺ2017೥ʹಠཱɻ

   ɾݱࡏ͸ɺϑϦʔϥϯεͰϊϚυϫʔΧʔΛ΍Γͭͭɺ ىۀʹ޲͚ͨ೶ۀܥͷWebαʔϏεΛ։ൃதɻ ◆झຯ ίεϓϨɺԻָϥΠϒɺϚϥιϯେձʹग़Δɺ໺ٿ؍ઓ ◆εΩϧ PHP,Symfony2,CakePHP3,JavaScript,backbone.js,Angular.js,Java

4. Copyright Re:Build.inc All Rights Reserved. ձࣾ঺հ ◆ձ໊ࣾ גࣜձࣾRe:Build ◆ॅॴ ԭೄݝԭೄࢢதԝ̍ஸ໨̍̒−̕

   ◆ࣄۀ಺༰ ɾ೶ۀʹ͓͍ͯͷϑʔυϩεΛແ͘͢ ࣗࣾWEBαʔϏεͷاըɾ։ൃɻ ɾडୗ։ൃ ◆ࣾһ 4໊ ◆ΤϯδχΞͷಇ͖ํ ϦϞʔτϫʔΫՄೳͳࣗ༝ͳಇ͖ํΛਪ঑ͯ͠·͢ʂ

5. 1.Angular4ͷ֓ཁ ɾAngular4͸ɺGoogle͕։ൃΛओಋ͢ΔʮϞμϯWebʯͷͨΊͷΞ ϓϦέʔγϣϯ։ൃϑϨʔϜϫʔΫɻ ɾAngularJSͱݺ͹Ε͍ͯͨόʔδϣϯ1ʢAngularJS 1ʣ͔Βɺόʔ δϣϯ2Ͱେ͖͘มߋ͞ΕͯɺҎ߱͸Angularͱݺ͹Ε͍ͯ·͢ɻ ɾ2017೥3݄ʹϦϦʔεɻAngular͸ࠓޙɺ͓͓ΉͶ6Χ݄͝ͱͷϝ δϟʔΞοϓσʔτ༧ఆ͕Ξφ΢ϯε͞Ε͍ͯΔɻ ࠓޙ͸֤όʔδϣϯ͸ɺҎલͷϦϦʔεͱԼҐޓ׵ੑ͕͋Δͱ໿ଋ͞ Ε͍ͯ·͢ɻ

   ɾv4͸௕ظαϙʔτର৅ɺ2018೥10݄·Ͱ1೥൒ɻ(LTS) v4͸Angular͕ఏڙ͢Δ࠷ॳͷLTSͱͳΔ ɾAngular1ܥͱ͸΄΅ผ෺ɻɻ

6. ݬͷόʔδϣϯ3 ɾόʔδϣϯ3Λඈ͹ͨ͠ཧ༝͸@angular/routerͷӨڹɻ ͜ͷύοέʔδ͚ͩطʹόʔδϣϯ3.3·Ͱ্͕͍ͬͯͯɺ ࠞཚ͕ى͖ͦ͏ͩͬͨͷͰangularࣗମͷόʔδϣϯΛ4ʹ ͋͛ͨɻ

7. Angular5͸γϯϓϧԽͱ εϐʔυʹ஫ྗ༧ఆ ᶃAngularΞϓϦέʔγϣϯͷίϯύΠϧΛΑΓ γϯϓϧʹ͢ΔɻJITίϯύΠϥ͚ͩͰͳ͘AHTί ϯύΠϥʢA head of timeɿࣄલίϯύΠϥʣΛ ࠾༻͕ͨ͠ɺ͜ͷ2͕ͭ͋Δͱࠞཚ͢Δ͜ͱ΋͋ Δɻࠓޙ͸AHTίϯύΠϥΛσϑΥϧτʹ͢Δ͜

   ͱͰϏϧυͷखॱΛҰຊԽ͠ɺ༨ܭͳ࡞ۀΛݮΒ ͍ͯͭ͘͠΋Γͩɻ ᶄεϐʔυͱαΠζ΁ͷ஫ྗɻMaterial΍IonicΛ ར༻ͨ͠ͱ͖ͳͲͰ΋࠷దʹѻ͑ΔΑ͏ʹ͢Δɻ

8. ֶशίετߴ͍ ֶशίετ௿͍ ॏྔͰϑϧελοΫ ܰྔͰ൚༻ੑ͋Γ ֤ϑϨʔϜϫʔΫͷൺֱ

9. ʙੈքతͳτϨϯυʙ 1.Angularͷ֓ཁ

10. ʙσΟϨΫτϦߏ଄ʙ 1.Angularͷ֓ཁ ɾcomponent UIͷ෦඼ͳͲɻ͜ͷޙͷεϥΠυͰઆ໌ɻ ɾconstant ఆ਺ͳͲͷఆٛ஋Λ·ͱΊΔɻ ɾdirective HTMLΛ಺แ͢ΔΑ͏ͳ΋ͷɻ jQueryͱͷڝ߹ͳͲΛ๷͛Δɻ ɾentity

    ஋ͷड͚౉͠Λߦ͏ΦϒδΣΫτJavaͰ͍͏DTO΍EntityΈ͍ͨͳ΋ͷɻ ɾservice αʔόαΠυͱͷAjax௨৴Λߦ͏ɻ ɾutil ڞ௨Ͱ࢖͏Α͏ͳॲཧΛ·ͱΊΔɻ

11. ʙ֤σΟϨΫτϦͷ໾ׂ(PHPͱjsͷWebΞϓϦέʔγϣϯ)ʙ WebΞϓϦέʔγϣϯͰAjax௨৴͢ΔࡍͷॲཧͷྲྀΕ ϑϩϯταΠυ αʔόαΠυ Component HTML CSS TypeScript Service Entity

    Util Directive Ajax௨৴ Entity Cons tant ඞཁʹԠͯ͡࢖͏ ඞཁʹԠͯ͡࢖͏

12. ɾUIͷ෦඼ΛComponent ͱͯ͠෼ׂ͍ͯ͘͜͠ͱ ͰɺෳࡶͳΞϓϦ΋ΑΓ ݟ௨͠ͷΑ͘ɺอक͠΍ ͍͢ίʔυʹ͢Δ͜ͱ͕ Ͱ͖Δɻ ɾ੩తܕ෇͚͕Ͱ͖Δɻ ɾJavaΈ͍ͨʹॻ͚Δɻ ɾอकੑ͕ߴ·Δ ɾ෦඼ԽΛਐΊΔͱ໘౗ʹͳͬ

    ͯ͘ΔґଘΫϥεͷ؅ཧΛ༰ қʹ͢Δɻ ίϯϙʔωϯτࢤ޲ ґଘੑͷ஫ೖ 2.ϝϦοτɾಛ௃ TypeScript͕ਪ঑͞ΕͯΔ 1 3 2 ʙϝϦοτʙ

13. Collection 2.ϝϦοτɾಛ௃ ʙίϯϙʔωϯτࢤ޲ʙ ίϯϙʔωϯτ1 HTML CSS TypeScript ίϯϙʔωϯτ2 HTML CSS

    TypeScript ίϯϙʔωϯτ3 HTML CSS TypeScript

14. 2.ϝϦοτɾಛ௃ ʙίϯϙʔωϯτࢤ޲ʙ ίϯϙʔωϯτ ίϯϙʔωϯτ ίϯϙʔωϯτ ίϯϙʔωϯτ ίϯϙʔωϯτ ίϯϙʔωϯτ ίϯϙʔωϯτ

15. MainComponent SummaryComponent GraphComponent ListComponent 2.ϝϦοτɾಛ௃ ʙίϯϙʔωϯτࢤ޲ʙ

16. 䡧ಠࣗ ɾܕ஫ऍʢม਺ɺҾ਺ɺ໭Γ஋ͳͲͷܕએݴʣͱ ίϯύΠϧ࣌ͷܕνΣοΫ
    ɾܕਪ࿦, ܕΨʔυ - ifจͷ instanceof ͳͲΛར༻ ͨ͠ܕਪ࿦

    ɾΠϯλʔϑΣΠε
    ɾྻڍܕ FOVN ɾMixin ɾδΣωϦοΫ
    ɾ໊લۭؒ ɾλϓϧ ɾڞ༻ମܕ ɾܕΤΠϦΞε 2.ϝϦοτɾಛ௃ ʙTypeScriptʙ

17. 2.ϝϦοτɾಛ௃ TypeScriptΛಋೖͨ͠ํ͕ྑ͍έʔε ιʔείʔυ͕๲େͰ ͋Δ৔߹ɺ·ͨෳ਺ͷ ਓ͕ϓϩδΣΫτʹै ࣄ͍ͯ͠Δ৔߹ɺܕγ εςϜ͸໌Β͔ͳΤϥʔ Λ๷͙ͷʹ໾ཱͪ·͢ɻ 1 νʔϜϝϯό΍C#΍

    JavaͷΑ͏ͳڧ͍ܕ෇͖ ݴޠͷόοΫάϥ΢ϯυ Λ࣋ͪɺJavaScriptΛͱ ͜ͱΜֶͿؾ͸ͳ͍ͱ͍ ͏৔߹ɺTS͸͍͍୅ସ ҊͩͱࢥΘΕ·͢ɻ 2 Angular ࣗମ͕ TypeScript Ͱ هड़͞Ε͓ͯΓɺϓϩμΫγϣ ϯίʔυͷهड़΋ TypeScript ͕ਪ঑͞Ε͍ͯΔɻ 3 ίʔυαΠζ ϝϯόʔͷաڈͷܦݧ AngularΛ࢖͏৔߹

18. 2.ϝϦοτɾಛ௃ ʙґଘੑͷ஫ೖ(DI)ʙ ίϯϙʔωϯτ HTML CSS TypeScript ґଘΫϥεͷ Πϯελϯε ґଘΫϥεͷ Πϯελϯε

    ґଘΫϥεͷ Πϯελϯε DI DI DI ɾॳΊͯݺͼग़͞Εͨ࣌ʹ ΫϥεͷΠϯελϯεԽΛߦ͏ɻ ɾίϯϙʔωϯτͷੜ੒ɾഁغͷ αΠΫϧʹؔΘΒͣΠϯελϯεΛ อ࣋͢Δɻ ɾґଘੑͷ஫ೖΛߦ͏͜ͱͰ ΠϯελϯεԽʹ͕͔͔࣌ؒΔͷΛ ճආ͠ɺύϑΥʔϚϯεΛ ্͛ΒΕΔɻ

19. Componentͷςετશମߏ੒ ϑϩϯταΠυ αʔόαΠυ Component HTML CSS TypeScript Service Entity Util

    Ajax௨৴ Cons tant Base Service http Service ܧঝ DI Service Mock DI ຌྫ ࣮ࡍͷιʔε Mockͷιʔε ·ͨ͸ ͳͲ

20. ʙDSPͱ͸ʙ AD SSP DSP1 DSP3 DSP2 ϝσΟΞ RTB CPMΦʔΫγϣϯ DSP1

    80ԁ DSP2 110ԁ DSP3 100ԁ ᶃΠϯϓϨογϣϯൃੜ ᶄDSP΁ೖࡳϦΫΤετ ᶅDSP͕৚݅ʹԊͬͯೖࡳ ᶆΦʔΫγϣϯ։࠵ ᶇ޿ࠂ഑৴

21. ʙAdMatrixDSPͰߦ͍ͬͯΔࣄʙ AD SSP AdMatrix DSP ϝσΟΞ CPMΦʔΫγϣϯ DSP1 80ԁ DSP2

    110ԁ DSP3 100ԁ ᶃΠϯϓϨογϣϯൃੜ ᶄDSP΁ೖࡳϦΫΤετ ᶅDSP͕৚݅ʹԊͬͯೖࡳ ᶆΦʔΫγϣϯ։࠵ ᶇ޿ࠂ഑৴ 䡧؅ཧը໘Ͱओʹߦ͏ૢ࡞ ɾେྔͷ޿ࠂϨϙʔτͷ֬ೝ ɾ޿ࠂͷ࡞੒ɾฤू ɾ഑৴ϢʔβͷλʔήςΟϯά ͳͲ RTB

22. ɾେྔͷσʔλΛѻ͏ɻ ɾϨϙʔτσʔλͷάϥϑԽɻ ɾϞʔμϧͷىಈɾ̎ॏىಈɻ ɾ༧ࢉͳͲΛදࣔ͢Δҝɺ਺஋ͷදهͰ όά͕ग़Δͱக໋తɻ ɾւ֎ల։͍ͯ͠Δձࣾͷ৔߹ɺଟݴޠରԠɻ ޿ࠂ؅ཧը໘ͷಛ௃

23. WWW.SITE2MAX.PRO Free PowerPoint & KeyNote Templates 3 DEMO Twitter৘ใΛ෼ੳ͢Δ Twitter

    Analysis Twitter Analysis

24. ʙ࢖༻͍ͯ͠Δٕज़ʙ ϑϩϯταΠυ αʔόαΠυ ϏϧυɾλεΫ؅ཧ ɾऔಘσʔλͷՃ޻ 3 DEMO API