Angularを使ったmodern開発_20180831

by Takayuki

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

0.ࣗݾ঺հ ◆໊લ ླ໦ ޹೭(Suzuki Takayuki) ※ಉ੏ಉ໊ଟͯ͘ࠔͬͯ·͢ɻɻɻ ◆ࣗݾ঺հ ɾ1990೥ɺਆಸ઒ݝੜ·Εɻ ɾࣾձਓʹͳ͔ͬͯΒɺϓϩάϥϛϯάΛ࢝ΊΔɻ ɾ2015೥ʹϑϧεϐʔυʹೖࣾ͠ɺ2017೥ʹಠཱɻ ɾݱࡏ͸ɺϑϦʔϥϯεͰϊϚυϫʔΧʔΛ΍Γͭͭɺ ىۀʹ޲͚ͨ೶ۀܥͷWebαʔϏεΛ։ൃதɻ ◆झຯ ίεϓϨɺԻָϥΠϒɺϚϥιϯେձʹग़Δɺ໺ٿ؍ઓ ◆εΩϧ PHP,Symfony2,CakePHP3,JavaScript,backbone.js,Angular.js,Java

Slide 4

Slide 4 text

Slide 5

Slide 5 text

1.Angular4ͷ֓ཁ ɾAngular4͸ɺGoogle͕։ൃΛओಋ͢ΔʮϞμϯWebʯͷͨΊͷΞ ϓϦέʔγϣϯ։ൃϑϨʔϜϫʔΫɻ ɾAngularJSͱݺ͹Ε͍ͯͨόʔδϣϯ1ʢAngularJS 1ʣ͔Βɺόʔ δϣϯ2Ͱେ͖͘มߋ͞ΕͯɺҎ߱͸Angularͱݺ͹Ε͍ͯ·͢ɻ ɾ2017೥3݄ʹϦϦʔεɻAngular͸ࠓޙɺ͓͓ΉͶ6Χ݄͝ͱͷϝ δϟʔΞοϓσʔτ༧ఆ͕Ξφ΢ϯε͞Ε͍ͯΔɻ ࠓޙ͸֤όʔδϣϯ͸ɺҎલͷϦϦʔεͱԼҐޓ׵ੑ͕͋Δͱ໿ଋ͞ Ε͍ͯ·͢ɻ ɾv4͸௕ظαϙʔτର৅ɺ2018೥10݄·Ͱ1೥൒ɻ(LTS) v4͸Angular͕ఏڙ͢Δ࠷ॳͷLTSͱͳΔ ɾAngular1ܥͱ͸΄΅ผ෺ɻɻ

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Angular5͸γϯϓϧԽͱ εϐʔυʹ஫ྗ༧ఆ ᶃAngularΞϓϦέʔγϣϯͷίϯύΠϧΛΑΓ γϯϓϧʹ͢ΔɻJITίϯύΠϥ͚ͩͰͳ͘AHTί ϯύΠϥʢA head of timeɿࣄલίϯύΠϥʣΛ ࠾༻͕ͨ͠ɺ͜ͷ2͕ͭ͋Δͱࠞཚ͢Δ͜ͱ΋͋ Δɻࠓޙ͸AHTίϯύΠϥΛσϑΥϧτʹ͢Δ͜ ͱͰϏϧυͷखॱΛҰຊԽ͠ɺ༨ܭͳ࡞ۀΛݮΒ ͍ͯͭ͘͠΋Γͩɻ ᶄεϐʔυͱαΠζ΁ͷ஫ྗɻMaterial΍IonicΛ ར༻ͨ͠ͱ͖ͳͲͰ΋࠷దʹѻ͑ΔΑ͏ʹ͢Δɻ

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

ʙσΟϨΫτϦߏ଄ʙ 1.Angularͷ֓ཁ ɾcomponent UIͷ෦඼ͳͲɻ͜ͷޙͷεϥΠυͰઆ໌ɻ ɾconstant ఆ਺ͳͲͷఆٛ஋Λ·ͱΊΔɻ ɾdirective HTMLΛ಺แ͢ΔΑ͏ͳ΋ͷɻ jQueryͱͷڝ߹ͳͲΛ๷͛Δɻ ɾentity ஋ͷड͚౉͠Λߦ͏ΦϒδΣΫτJavaͰ͍͏DTO΍EntityΈ͍ͨͳ΋ͷɻ ɾservice αʔόαΠυͱͷAjax௨৴Λߦ͏ɻ ɾutil ڞ௨Ͱ࢖͏Α͏ͳॲཧΛ·ͱΊΔɻ

Slide 11

Slide 11 text

ʙ֤σΟϨΫτϦͷ໾ׂ(PHPͱjsͷWebΞϓϦέʔγϣϯ)ʙ WebΞϓϦέʔγϣϯͰAjax௨৴͢ΔࡍͷॲཧͷྲྀΕ ϑϩϯταΠυ αʔόαΠυ Component HTML CSS TypeScript Service Entity Util Directive Ajax௨৴ Entity Cons tant ඞཁʹԠͯ͡࢖͏ ඞཁʹԠͯ͡࢖͏

Slide 12

Slide 12 text

ɾUIͷ෦඼ΛComponent ͱͯ͠෼ׂ͍ͯ͘͜͠ͱ ͰɺෳࡶͳΞϓϦ΋ΑΓ ݟ௨͠ͷΑ͘ɺอक͠΍ ͍͢ίʔυʹ͢Δ͜ͱ͕ Ͱ͖Δɻ ɾ੩తܕ෇͚͕Ͱ͖Δɻ ɾJavaΈ͍ͨʹॻ͚Δɻ ɾอकੑ͕ߴ·Δ ɾ෦඼ԽΛਐΊΔͱ໘౗ʹͳͬ ͯ͘ΔґଘΫϥεͷ؅ཧΛ༰ қʹ͢Δɻ ίϯϙʔωϯτࢤ޲ ґଘੑͷ஫ೖ 2.ϝϦοτɾಛ௃ TypeScript͕ਪ঑͞ΕͯΔ 1 3 2 ʙϝϦοτʙ

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

䡧ಠࣗ ɾܕ஫ऍʢม਺ɺҾ਺ɺ໭Γ஋ͳͲͷܕએݴʣͱ ίϯύΠϧ࣌ͷܕνΣοΫ ɾܕਪ࿦, ܕΨʔυ - ifจͷ instanceof ͳͲΛར༻ ͨ͠ܕਪ࿦ ɾΠϯλʔϑΣΠε ɾྻڍܕ FOVN ɾMixin ɾδΣωϦοΫ ɾ໊લۭؒ ɾλϓϧ ɾڞ༻ମܕ ɾܕΤΠϦΞε 2.ϝϦοτɾಛ௃ ʙTypeScriptʙ

Slide 17

Slide 17 text

2.ϝϦοτɾಛ௃ TypeScriptΛಋೖͨ͠ํ͕ྑ͍έʔε ιʔείʔυ͕๲େͰ ͋Δ৔߹ɺ·ͨෳ਺ͷ ਓ͕ϓϩδΣΫτʹै ࣄ͍ͯ͠Δ৔߹ɺܕγ εςϜ͸໌Β͔ͳΤϥʔ Λ๷͙ͷʹ໾ཱͪ·͢ɻ 1 νʔϜϝϯό΍C#΍ JavaͷΑ͏ͳڧ͍ܕ෇͖ ݴޠͷόοΫάϥ΢ϯυ Λ࣋ͪɺJavaScriptΛͱ ͜ͱΜֶͿؾ͸ͳ͍ͱ͍ ͏৔߹ɺTS͸͍͍୅ସ ҊͩͱࢥΘΕ·͢ɻ 2 Angular ࣗମ͕ TypeScript Ͱ هड़͞Ε͓ͯΓɺϓϩμΫγϣ ϯίʔυͷهड़΋ TypeScript ͕ਪ঑͞Ε͍ͯΔɻ 3 ίʔυαΠζ ϝϯόʔͷաڈͷܦݧ AngularΛ࢖͏৔߹

Slide 18

Slide 18 text

2.ϝϦοτɾಛ௃ ʙґଘੑͷ஫ೖ(DI)ʙ ίϯϙʔωϯτ HTML CSS TypeScript ґଘΫϥεͷ Πϯελϯε ґଘΫϥεͷ Πϯελϯε ґଘΫϥεͷ Πϯελϯε DI DI DI ɾॳΊͯݺͼग़͞Εͨ࣌ʹ ΫϥεͷΠϯελϯεԽΛߦ͏ɻ ɾίϯϙʔωϯτͷੜ੒ɾഁغͷ αΠΫϧʹؔΘΒͣΠϯελϯεΛ อ࣋͢Δɻ ɾґଘੑͷ஫ೖΛߦ͏͜ͱͰ ΠϯελϯεԽʹ͕͔͔࣌ؒΔͷΛ ճආ͠ɺύϑΥʔϚϯεΛ ্͛ΒΕΔɻ

Slide 19

Slide 19 text

Componentͷςετશମߏ੒ ϑϩϯταΠυ αʔόαΠυ Component HTML CSS TypeScript Service Entity Util Ajax௨৴ Cons tant Base Service http Service ܧঝ DI Service Mock DI ຌྫ ࣮ࡍͷιʔε Mockͷιʔε ·ͨ͸ ͳͲ

Slide 20

Slide 20 text

ʙDSPͱ͸ʙ AD SSP DSP1 DSP3 DSP2 ϝσΟΞ RTB CPMΦʔΫγϣϯ DSP1 80ԁ DSP2 110ԁ DSP3 100ԁ ᶃΠϯϓϨογϣϯൃੜ ᶄDSP΁ೖࡳϦΫΤετ ᶅDSP͕৚݅ʹԊͬͯೖࡳ ᶆΦʔΫγϣϯ։࠵ ᶇ޿ࠂ഑৴

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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