Angular2を使ったModern開発

Angular2を使ったModern開発

Transcript

1. Angular2を使ったmodern開ൃ 鈴木孝之 2017/06/30
2. "KFOEB ࣗݾ঺հ
   "OHVMBSͷ֓ཁ
   "OHVMBSͷϝϦοτɾಛ௃
   %&.0
3. 0.ࣗݾ঺հ ◆໊લ ླ໦ ޹೭(Suzuki Takayuki) ※ಉ੏ಉ໊ଟͯ͘ࠔͬͯ·͢ɻɻɻ ◆ࣗݾ঺հ ɾ1990೥ɺਆಸ઒ݝੜ·Εɻ ɾࣾձਓʹͳ͔ͬͯΒɺϓϩάϥϛϯάΛ࢝ΊΔɻ ɾ2015೥ʹϑϧεϐʔυʹೖࣾ͠ɺ2017೥ʹಠཱɻ ɾݱࡏ͸ɺϑϦʔϥϯεͰϊϚυϫʔΧʔΛ΍Γͭͭɺ ىۀʹ޲͚ͨ೶ۀܥͷWebαʔϏεΛ։ൃதɻ ◆झຯ ίεϓϨɺԻָϥΠϒɺϚϥιϯେձʹग़Δɺ໺ٿ؍ઓ ◆εΩϧ PHP,Symfony2,CakePHP3,JavaScript,backbone.js,Angular.js,Java
4. 0.ࣗݾ঺հ ɾLig͞Μͷ௕໺ΦϑΟε ɾ໊ݹ԰ͷίϫʔΩϯάεϖʔε ɾΠέμϋϠτ͞Μͷۙ͘ͷଜ(ߴ஌ݝ) ɾΧϑΣ(ߴ஌ݝ) ɾଞࣾͷ։ൃ߹॓
5. 1.Angular2ͷ֓ཁ ɾAngular2͸ɺGoogle͕։ൃΛओಋ͢ΔʮϞμϯ WebʯͷͨΊͷΞϓϦέʔγϣϯ։ൃϑϨʔϜϫʔΫɻ ɾ2016೥9݄ʹϦϦʔεɻ ɾAngular2͕ਖ਼໊͍͠শɻ͕͜͜େࣄɻ ɾAngular1ܥͱ͸΄΅ผ෺ɻɻ
6. ֶशίετߴ͍ ֶशίετ௿͍ ॏྔͰϑϧελοΫ ܰྔͰ൚༻ੑ͋Γ 1.Angular2ͷ֓ཁ
7. ʙੈքతͳτϨϯυʙ 1.Angular2ͷ֓ཁ
8. ʙσΟϨΫτϦߏ଄ʙ 1.Angular2ͷ֓ཁ ɾcomponent UIͷ෦඼ͳͲɻ͜ͷޙͷεϥΠυͰઆ໌ɻ ɾconstant ఆ਺ͳͲͷఆٛ஋Λ·ͱΊΔɻ ɾdirective HTMLΛ಺แ͢ΔΑ͏ͳ΋ͷɻ jQueryͱͷڝ߹ͳͲΛ๷͛Δɻ ɾentity ஋ͷड͚౉͠Λߦ͏ΦϒδΣΫτJavaͰ͍͏DTO΍EntityΈ͍ͨͳ΋ͷɻ ɾservice αʔόαΠυͱͷAjax௨৴Λߦ͏ɻ ɾutil ڞ௨Ͱ࢖͏Α͏ͳॲཧΛ·ͱΊΔɻ
9. ʙ֤σΟϨΫτϦͷ໾ׂ(PHPͱjsͷWebΞϓϦέʔγϣϯ)ʙ WebΞϓϦέʔγϣϯͰAjax௨৴͢ΔࡍͷॲཧͷྲྀΕ ϑϩϯταΠυ αʔόαΠυ 3 DEMO Component HTML CSS TypeScript Service Entity Util Directive Ajax௨৴ Entity Cons tant ඞཁʹԠͯ͡࢖͏ ඞཁʹԠͯ͡࢖͏
10. ɾUIͷ෦඼ΛComponent ͱͯ͠෼ׂ͍ͯ͘͜͠ͱ ͰɺෳࡶͳΞϓϦ΋ΑΓ ݟ௨͠ͷΑ͘ɺอक͠΍ ͍͢ίʔυʹ͢Δ͜ͱ͕ Ͱ͖Δɻ ɾ੩తܕ෇͚͕Ͱ͖Δɻ ɾJavaΈ͍ͨʹॻ͚Δɻ ɾอकੑ͕ߴ·Δ ɾ෦඼ԽΛਐΊΔͱ໘౗ʹͳͬ ͯ͘ΔґଘΫϥεͷ؅ཧΛ༰ қʹ͢Δɻ ίϯϙʔωϯτࢤ޲ ґଘੑͷ஫ೖ 2.ϝϦοτɾಛ௃ TypeScript͕ਪ঑͞ΕͯΔ 1 3 2 ʙϝϦοτʙ
11. Collection 2.ϝϦοτɾಛ௃ ʙίϯϙʔωϯτࢤ޲ʙ ίϯϙʔωϯτ1 HTML CSS TypeScript ίϯϙʔωϯτ2 HTML CSS TypeScript ίϯϙʔωϯτ3 HTML CSS TypeScript
12. 2.ϝϦοτɾಛ௃ ʙίϯϙʔωϯτࢤ޲ʙ ίϯϙʔωϯτ ίϯϙʔωϯτ ίϯϙʔωϯτ ίϯϙʔωϯτ ίϯϙʔωϯτ ίϯϙʔωϯτ ίϯϙʔωϯτ
13. MainComponent SummaryComponent GraphComponent ListComponent 2.ϝϦοτɾಛ௃ ʙίϯϙʔωϯτࢤ޲ʙ
14. 䡧ಠࣗ ɾܕ஫ऍʢม਺ɺҾ਺ɺ໭Γ஋ͳͲͷܕએݴʣͱ ίϯύΠϧ࣌ͷܕνΣοΫ
    ɾܕਪ࿦, ܕΨʔυ - ifจͷ instanceof ͳͲΛར༻ ͨ͠ܕਪ࿦ ɾΠϯλʔϑΣΠε
    ɾྻڍܕ FOVN ɾMixin ɾδΣωϦοΫ
    ɾ໊લۭؒ ɾλϓϧ ɾڞ༻ମܕ ɾܕΤΠϦΞε 2.ϝϦοτɾಛ௃ ʙTypeScriptʙ
15. 2.ϝϦοτɾಛ௃ TypeScriptΛಋೖͨ͠ํ͕ྑ͍έʔε ιʔείʔυ͕๲େͰ ͋Δ৔߹ɺ·ͨෳ਺ͷ ਓ͕ϓϩδΣΫτʹै ࣄ͍ͯ͠Δ৔߹ɺܕγ εςϜ͸໌Β͔ͳΤϥʔ Λ๷͙ͷʹ໾ཱͪ·͢ɻ 1 νʔϜϝϯό΍C#΍ JavaͷΑ͏ͳڧ͍ܕ෇͖ ݴޠͷόοΫάϥ΢ϯυ Λ࣋ͪɺJavaScriptΛͱ ͜ͱΜֶͿؾ͸ͳ͍ͱ͍ ͏৔߹ɺTS͸͍͍୅ସ ҊͩͱࢥΘΕ·͢ɻ 2 Angular2 ࣗମ͕ TypeScript Ͱهड़͞Ε͓ͯΓɺϓϩμΫ γϣϯίʔυͷهड़΋ TypeScript ͕ਪ঑͞Ε͍ͯ Δɻ 3 ίʔυαΠζ ϝϯόʔͷաڈͷܦݧ Angular2Λ࢖͏৔߹
16. 2.ϝϦοτɾಛ௃ ʙґଘੑͷ஫ೖ(DI)ʙ ίϯϙʔωϯτ HTML CSS TypeScript ґଘΫϥεͷ Πϯελϯε ґଘΫϥεͷ Πϯελϯε ґଘΫϥεͷ Πϯελϯε DI DI DI ɾॳΊͯݺͼग़͞Εͨ࣌ʹ ΫϥεͷΠϯελϯεԽΛߦ͏ɻ ɾίϯϙʔωϯτͷੜ੒ɾഁغͷ αΠΫϧʹؔΘΒͣΠϯελϯεΛ อ࣋͢Δɻ ɾґଘੑͷ஫ೖΛߦ͏͜ͱͰ ΠϯελϯεԽʹ͕͔͔࣌ؒΔͷΛ ճආ͠ɺύϑΥʔϚϯεΛ ্͛ΒΕΔɻ
17. WWW.SITE2MAX.PRO Free PowerPoint & KeyNote Templates 3 DEMO Twitter৘ใΛ෼ੳ͢Δ Twitter Analysis Twitter Analysis
18. ʙ࢖༻͍ͯ͠Δٕज़ʙ ϑϩϯταΠυ αʔόαΠυ ϏϧυɾλεΫ؅ཧ ɾऔಘσʔλͷՃ޻ 3 DEMO API