広告管理画面におけるAngularのメリット・導入事例

02886e95c50822b9aa2552da1e518491?s=47 Takayuki
January 17, 2018

 広告管理画面におけるAngularのメリット・導入事例

02886e95c50822b9aa2552da1e518491?s=128

Takayuki

January 17, 2018
Tweet

Transcript

  1. 3.

    0.ࣗݾ঺հ ◆໊લ ླ໦ ޹೭(Suzuki Takayuki) ◆ࣗݾ঺հ ɾ1990೥ɺਆಸ઒ݝੜ·Εɻ ɾ2015೥ʹϑϧεϐʔυʹೖࣾ͠ɺ2017೥5݄ʹ ϑϦʔϥϯεʹͳΓɺىۀ४උதɻ ɾݱࡏ͸ɺԭೄͷΪʔΫϋ΢εͱؔ౦ۙลΛத৺ʹ׆ಈ͠ɺ

    ىۀ४උதɻ ◆झຯ ϚϥιϯେձɺίεϓϨɺԻָϥΠϒɺ໺ٿ؍ઓ ◆εΩϧ ɾPHP Symfony2,CakePHP3,Laravel5 ɾJavaScript Angular1,2,4,backbone.js ɾJava
  2. 10.

    ੈք ೔ຊ const searchCondition = { start_time:"2016-01-01", end_time:"2016-12-31", location: "world",

    }; ֤ϑϨʔϜϫʔΫͷݕࡧ਺ൺֱ const searchCondition = { start_time:"2016-01-01", end_time:"2016-12-31", location: "japan", };
  3. 13.

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

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

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

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

    ɾUIͷ෦඼ΛComponent ͱͯ͠෼ׂ͍ͯ͘͜͠ͱ Ͱɺڞ௨Ͱ࢖͏ ComponentΛ෦඼Խͯ͠ ͓͚Δɻ ɾ੩తܕ෇͚͕Ͱ͖Δɻ ɾJavaΈ͍ͨʹॻ͚Δɻ ɾอकੑ͕ߴ·Δ ɾAngularΛΠϯετʔϧ͠ ͨ࣌఺ͰKarmaͱE2EͷϥΠ

    ϒϥϦ͕ೖ͍ͬͯΔɻ ڞ௨ͷComponent Λ࡞͓͚ͬͯΔ ςετϑϨʔϜϫʔΫ͕ ॆ࣮ TypeScriptͰॻ͘ࣄͰݫີ ʹ஋ΛνΣοΫͰ͖Δ 1 3 2 AngularͷϝϦοτɾಛ௃
  6. 20.

    ʙ֤σΟϨΫτϦͷ໾ׂʙ ϑϩϯταΠυ αʔόαΠυ Component HTML CSS TypeScript Service Entity Util

    Ajax௨৴ Cons tant ඞཁʹ Ԡͯ͡࢖͏ Base Service Http Service ܧঝ DI τʔΫϯͷੜ੒ ͳͲΛ୲͏ ڞ௨Ͱ࢖͏getɺpostͷ ॲཧ͕·ͱ·ͬͯΔ Ϩεϙϯεσʔλͷ Ճ޻΍Ϩϙʔτ ͷܭࢉͳͲ σʔλͷड͚౉͠΍ ϋϯυϦϯά Common Component Pipe ·ͨ͸ ͳͲ
  7. 28.

    ɾKarmaͷશମߏ੒ Karma͸4ͭͷେ͖ͳػೳʢϓϥάΠϯʣ͕ଘࡏ͠·͢ɻ FrameworkɺLauncherɺPreprocessorɺReporter NodeJS Karma karma start coverage Chrome Webserver

    port:9876 Karma Reporter karma- coverage Framework karma-jasmine Preprocessor Files ςετର৅jsίʔυ Launcher karma-chrome- launcher karma.conf.js Brower ςετίʔυ.ts Jasmine karma-typescript- preprocessor Console ಡΈࠐΈ ࣮ߦ Chrome࣮ߦ αʔόΛཱͯΔ ಡΈࠐΈ ಡΈࠐΈ ࣮ߦ ࣮ߦ ಡΈࠐΈ Karma ࣮ߦ ग़ྗ URLಡΈࠐΈ WebSocket https://qiita.com/howdy39/items/b9d704e7f84053924da3
  8. 29.

    ɾςετର৅ CompmentɺUtilपΓͱ͢Δɻ ςετͷ֓ཁઆ໌ get: ɾςʔϒϧ͕ͪΌΜͱɺඳը͞Ε͍ͯΔ͜ͱɻϞʔμϧ͕ىಈ͍ͯ͠Δ͜ͱɻ add ɿόϦσʔγϣϯޮ͔͘ɺૹ৴ϘλϯΛԡͨ࣌͠ͷΫΤϦ͕ॴ๬௨Γ͔ update ɿݱঢ়ͷ஋͕ೖ͍ͬͯΔ͔ɺόϦσʔγϣϯޮ͔͘ɺૹ৴ϘλϯΛԡͨ࣌͠ͷΫΤϦ͕ॴ๬௨Γ͔ deleteɿૹ৴ϘλϯΛԡͨ࣌͠ͷΫΤϦ͕ॴ๬௨Γ͔

    ɾςετ؍఺ Compment ܭࢉॲཧ΍Πϯϓοτ஋ͱΞ΢τϓοτ஋͕૝ఆ௨Γ͔ʁ Util ϞοΫ: ʮΦϒδΣΫτͷϝιου͕Ͳ͏ݺ͹ΕͯԿΛฦ͔͢ʯͱ͍͏ΠϯλϑΣʔε΋ؚΊͨςετͷͨΊʹ࢖͏ ελϒ: ςετΛεϜʔζʹߦ͏ͨΊʹʮ͋ΔΦϒδΣΫτͷϝιου͕ݺ͹ΕͨΒɺ͋Δ໭Γ஋Λฦ͢ʯͨΊʹ࢖͏ ɾϞοΫͱελϒʹ͍ͭͯ
  9. 30.

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

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

    ·ͨ͸ ͳͲ Utilͷςετશମߏ੒ ϑϩϯταΠυ αʔόαΠυ Component HTML CSS TypeScript Service

    Entity Util Ajax௨৴ Cons tant Base Service http Service ܧঝ DI ຌྫ ࣮ࡍͷιʔε Mockͷιʔε
  11. 35.

    ςετͷॻ͖ํɾ࣮ߦํ๏ @NgModule describe() beforeEach() it() it() ςετର৅Ϋϥεʹґଘ͠ ͍ͯΔModuleΛఆٛ ςετ࣮ߦલʹલॲ ཧΛఆٛ

    ֤֬ೝ߲໨಺ ༰Λఆٛ ςετέʔεΛఆٛ expect() expect() expect() expect() ςετશମͷએݴ