Pro Yearly is on sale from $80 to $50! »

Angularを使ったmodern開発_20180831

02886e95c50822b9aa2552da1e518491?s=47 Takayuki
September 01, 2018

 Angularを使ったmodern開発_20180831

※この発表内容は少し古い情報も含まれます。

02886e95c50822b9aa2552da1e518491?s=128

Takayuki

September 01, 2018
Tweet

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