レガシーなフロントエンドをリプレイスする

Transcript

1. ϨΨγʔͳϑϩϯτΤϯυΛ ϦϓϨΠε͢Δ Frontend Conference 2019 #kfug2019 @Daikids2

2. খౡ େج / Daiki Kojima @Daikids2 @jiko21 ژ౎େֶେֶӃ৘ใֶݚڀՊM2 (ଟ෼) ϑϩϯτΤϯυΤϯδχΞ

3. ͓͸ͳ͢͠Δ͜ͱ • ϨΨγʔͳϑϩϯτΤϯυΛϦϓϨΠεͨ͠࿩ • ϨΨγʔͬͯͲΜͳঢ়ଶͩͬͨͷ? • ٕज़બఆ͸? ઃܭ͸? • Ͳ͏΍ͬͯ͢͢Ί͍ͯͬͨͷ?

4. ͦ΋ͦ΋

5. ϨΨγʔͬͯ?

6. Wikipediaͩͱ… https://ja.wikipedia.org/wiki/%E3%83%AC%E3%82%AC%E3%82%B7%E3%83%BC%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0

7. ཁ͢Δʹ… • ݹ͍!! • ෛ࠴ • ѻ͍ͮΒ͍…

8. ϑϩϯτͬͯ
 ΘΓ͔͠৽͍͠…

9. ϨΨγʔͱ͸ؔ܎ͳ͍?

10. NO!

11. ϑϩϯτ΋ϨΨγʔʹͳΔΘ͚ • ৽͍ٕ͠ज़͕͙͢ʹೖͬͯ͘Δ • TypeScript, es6… • ഁյతͳมߋɾUpdate͕ଟ͍ • Angular

    1.x/2.xͰͷҧ͍
12. None

13. ౰࣌ͷٕज़ελοΫ • Angular.js (1ܥ) • Vue.js (2ܥ) + TypeScript •

    Pug + Sass • Gulp

14. ౰࣌ͷٕज़ελοΫ • Angular.js (1ܥ) • ։ൃॳظʹಋೖ (Angular (2ܥ)͕ొ৔ͨ͜͠Ζ) • JavaScriptͰهड़

15. ౰࣌ͷٕज़ελοΫ • Vue.js (2ܥ) • ʮAngular.js͕ͭΒ͍ΑͶʯͱ͍͏͜ͱͰ৽نը໘Ͱ
 ಋೖ • TypeScript +

    Pug + SassͰهड़

16. Ϗϧυ·ΘΓ͸?

17. ౰࣌ͷٕज़ελοΫ Vue.js Angular.js Gulp html, css, js "OHVMBSͱ7VFKTΛ
 (VMQͰϏϧυ

18. ౰࣌ͷٕज़ελοΫ Vue.js Angular.js Gulp html, css, js "OHVMBSͱ7VFKTΛ
 (VMQͰϏϧυ

19. ϨΨγʔɾ·͍ͣ఺

20. ͬ͟ͱ໰୊఺(Ұྫ) • Angular.jsͱVue.js͕ڞଘ • Angular.jsଆ͸ςετ͕Ұ੾ͳ͠!! • i18nରԠ͕ͻͲ͍ (೔ຊޠɾӳޠΛผʑͷϑΝΠϧͰද ݱ)

21. ͬ͟ͱ໰୊఺ • Angular.jsͱVue.js͕ڞଘ • Ұ෦Service૚͕Angularʹґଘ • VueͷComponentͰXHRͯ͠Δ • Angular.jsଆ͸ςετ͕Ұ੾ͳ͠!! •

    i18nରԠ͕ͻͲ͍ (೔ຊޠɾӳޠΛผʑͷϑΝΠϧͰදݱ) ໰୊఺͕ଟ͍

22. Angular.jsͱVue.js ͕ڞଘ

23. Angular.jsͱVue.js͕ڞଘ • 2ͭͷFWΛ๊͑Δ͜ͱʹ… • Angular.js͸es5ɺVue.js͸TypeScript(es6 base) • FWͲ͜Ζ͔ɺݴޠ΋(͍ͩͿ)ҧ͏ • Ұ෦Service૚͕Angularʹґଘ

    • ࠶ར༻ੑ͕௿͍ ➡ VueͷComponentͰXHRͤ͟ΔΛಘͳ͍৔߹΋

24. Angular.jsଆ͸ςετ͕ Ұ੾ͳ͠!!

25. ςετͬͯ? ιʔείʔυ ࣦഊ ੒ޭ ίʔυ͕ςετέʔεΛύε͢Δ͔
 ࣮ߦͯ֬͠ೝ ςετπʔϧ ςετ࣮ߦ

26. ςετΛॻ͘ར఺ • ڍಈ͕ਖ਼͍͜͠ͱΛอূͰ͖Δ • ໰୊ͷ੾Γ෼͚͕Ͱ͖Δ • ςετέʔε͕࢓༷ʹͳͬͯ͘ΕΔ • etc…

27. ͱ͜Ζ͕… • ςετͷݱঢ় • Vue: ίϯϙʔωϯτͷςετ͸͋Δ • Angular.js: ςετ͕Ұ੾ͳ͠(Ϟδϡʔϧ΋!!)

28. i18nରԠ͕ͻͲ͍

29. i18nͬͯ • ࠃࡍԽରԠͷ͜ͱ • ༷ʑͳ஍Ҭɾݴޠʹ߹ΘͤΔ͜ͱ ೔ຊޠͰ
 ݟ͍ͨ ӳޠͰ
    ݟ͍ͨ ೔ຊޠ൛

    ӳޠ൛

30. ຊདྷͳΒ… • ઃఆϑΝΠϧͰݴޠΛ؅ཧ͓ͯ͘͠ • ϒϥ΢βͷ৘ใΛ༻͍ͯදࣔ͢΂͖ݴޠͰදࣔ • i18nαϙʔτ͸αʔόʔɾϑϩϯτ໰Θͣ
 ༷ʑͳϥΠϒϥϦͰ࣮ݱͰ͖Δ

31. ݱঢ় • ଟݴޠରԠ͕ඞཁͳϖʔδ͸ӳޠ൛ɾ೔ຊޠ൛ͱ
 ςϯϓϨʔτ(html)Λ෼͚ͯɺϦϯΫ΋ผʑʹ… ➡ ίʔυͷมߋྔ͕ݴޠͷ෼͚ͩ૿͑Δ! hogehoge-ja.html(೔ຊޠ) hogehoge-en.html(ӳޠ)

32. ϨΨγʔΛվળ͢ΔͨΊʹ ϦϓϨΠεΛߦ͏͜ͱʹ!!

33. ٕज़બఆɾઃܭ

34. ΍Δ͜ͱ • ٕज़ΛબͿ • FWɺUI Architectureɺςετ • σΟϨΫτϦͷઃܭ

35. ٕज़બఆ • FW: Vue.js • ίϨࣗମ͸ܾఆࣄ߲ • @vue/cliͰϘΠϥʔϓϨʔτΛੜ੒

36. ٕज़બఆ • ͦͷଞ • TypeScript: ࣾ಺ͰͲΜͲΜTSԽ͕… ܕ͋Δͱ͏Ε͍͠ • class-style-api: ܕָ͕ɻͰ΋…(ޙड़)

    • Vuex: ෳࡶͳঢ়ଶ؅ཧ͕ඞཁͳ৔߹

37. Class-style api Class-style api @Component export default class Count extends

    Vue { @Prop() msg!: string; private count: number = 0; private add(): void { this.count += 1; } private minus(): void { this.count -= 1; } get isEven(): boolean { return this.count % 2 === 0; } } export default Vue.extend({ name: "Count", props: { msg: { type: String, required: true, }, }, data() { return { count: 0, }; }, computed: { isEven(): boolean { return this.count % 2 === 0; }, }, methods: { add(): void { this.count += 1; }, minus(): void { this.count -= 1; }, }, }); Class-style api Ұൠతͳॻ͖ํ

38. σΟϨΫτϦઃܭɹ • QiitaͳͲΛௐ΂ͯσΟϨΫτϦߏ੒Λத৺ʹ৘ใूΊ • React + ReduxΛܦݧ͔ͯ͠ΒͷstatelessͳVue + Vuexߏ੒ʹ͍ͭͯ
 (https://qiita.com/_masakitm_/items/ff5df4da0247baeede35)

    • vuexެࣜ (https://github.com/vuejs/vuex/tree/dev/examples/chat)

39. Ͱ͖͕͋ͬͨ΋ͷ 6*·ΘΓ ϩδοΫ ·ΘΓ

40. UI·ΘΓ 1BHFT 1BHFT 1BHFT /home /about /help DPOUBJOFS DPOUBJOFS DPNQPOFOU

    DPNQPOFOU DPNQPOFOU ΃ʔ͡͝ͱʹ
 1BHFͷ3PPU
    $PNQPOFOU 7VFY΍4UPSFΛ࣋ͯΔ
 DPOUBJOFS
    DPNQPOFOU جຊతʹ TUBUFMFTTͳ
 $PNQPOFOU 7VFY

41. ϩδοΫपΓ • جຊతʹserviceɺutilͳͲͷܗͰϞδϡʔϧΛ۠੾Δ • service: APIͳͲΛୟ͘ • utils: ࣌ؒɺจࣈྻͳͲͷศརͳؔ਺ •

    ͜ΕΒΛVue͔ΒҾ͖ണ͕͠ɺ
 UIϑϨʔϜϫʔΫʹґଘ͠ͳ͍ɺ࠶ར༻Մೳͳ΋ͷʹ


42. VuexपΓ • جຊతʹϖʔδ͝ͱʹmoduled store • άϩʔόϧͰڞ༗͢Δඞཁ͸͋·Γͳ͍ • ͨͩ͠moduleͳ͍Ͱঢ়ଶ͕૿͑Δ৔߹͸… • ؔ৺͝ͱϕʔεͰmoduleΛ۠੾Δ

    (re-ducksύλʔϯ?)

43. ҙࣝͨ͜͠ͱ • ࣾ಺ͰReactΛಋೖͨ͠ͱ͖ͷ൓লΛ׆͔͢ • Component͸ͳΔ΂͘Statelessʹ • ௚઀XHR͠ͳ͍ • ԿΑΓɺίʔυΛࣺͯΒΕΔΑ͏ʹ͢Δ •

    Vueʹґଘ͠ͳ͍ॲཧ͸moduleʹ

44. ςετपΓ • ީิʹ্͕ͬͨπʔϧ • Jest • Mocha+Chai ͲͪΒ΋!WVFDMJͰબ୒Մೳ

45. ͦΕͧΕͷҧ͍… • Jest vs Mocha: Which Should You Choose?[1]ʹΑΔͱ… •

    Jest: ؆୯ʹ͔͚ͯฒߦ࣮ߦɻεφοϓγϣοτ΋ɹ • Mocha: ΧελϜ͕Ͱ͖Δ… [1] https://blog.usejournal.com/jest-vs-mocha-whats-the-difference-235df75ffdf3 ॻ͖΍͢͞΍͸΍͞Ͱ+FTU

46. ςετํ਑ • ϞδϡʔϧɾVuex • ΧόϨοδ100%Λ໨ࢦ͢ • ίϯϙʔωϯτ • εφοϓγϣοτςετΛଟ༻ •

    Πϕϯτ΋Ͱ͖ΔݶΓνΣοΫ

47. Snapshotςετͱ͸? ඳը <template> <div class="count"> <h1>{{ count }}</h1> <div class="buttons">

    <button class="add" @click="increment">+</button> <button class="minus" @click="decrement">-</button> </div> </div> </template> ίϯϙʔωϯτ exports[`Count.vue correctly renders html 1`] = ` <div class="count"> <h1>0</h1> <div class="buttons"><button class="add">+</button> <button class="minus">-</button></div> εφοϓγϣοτ ϑΝΠϧʹ
 ॻ͖ࠐΉ ॳճ

48. Snapshotςετͱ͸? ඳը <template> <div class="count"> <h1>{{ count }}</h1> <div class="buttons">

    <button class="add" @click="increment">+</button> <button class="minus" @click="decrement">-</button> </div> </div> </template> ίϯϙʔωϯτ EJ⒎Λͱͬͯ
 ֬ೝ ͦΕҎ߱ is equal to ඳը͞ΕͨComponent ? SnapshotϑΝΠϧ

49. εφοϓγϣοτςετͷ௕ॴɾ୹ॴ ϝϦοτ σϝϦοτ ɾมߋ͕Θ͔Γ΍͍͢ ɾมߋʹऑ͍
    ɾ6*ϥΠϒϥϦʹґଘ
    ɾ࣮ߦ؀ڥʹґଘ

50. ଞʹ΋… • ίʔυͷελΠϧ໘ͰͷࢦఠΛRVͰݮΒ͢ • ESLint • SnapshotςετͷมߋΛ༻ҙʹ • watch(؂ࢹ)ϞʔυͷςετΛ༰қ

51. ࣮ࡍͷ։ൃʹ͍ͭͯ

52. ։ൃͷྲྀΕ • ֤ϖʔδ͝ͱͷissue • ୲౰ऀΛAssigneeʹ • ը໘ɾϩδοΫ·ΘΓ(+Vuex)͝ͱʹPR • جຊ͸ϦϓϨΠεݩͷը໘ΛͳΔ΂͘࠶ݱ

53. ϓϩδΣΫτͷਐΊํ ๻ҰਓͰ
 ։ൃΛਐΊΔ ࣍ୈʹଞͷਓ΋
 ։ൃʹࢀՃ νʔϜશମͰ
 ϦϓϨΠεΛ
 ऴ͍ྃͤͯ͘͞ 5݄ 9݄

    7݄ ϦϓϨΠε ׬ྃ ϦϓϨΠε 4UBSU Ұ൪Ή͍ͣ΍ͭ Angular.jsϦϓϨΠε։࢝ طଘͷVue͔Β

54. ։ൃͷྲྀΕ • ֤ϖʔδ͝ͱͷissue • ୲౰ऀΛAssigneeʹ • ը໘ɾϩδοΫ·ΘΓ(+Vuex)͝ͱʹPR • جຊ͸ϦϓϨΠεݩͷը໘ΛͳΔ΂͘࠶ݱ

55. ։ൃ͸ॱௐ͔ͩͬͨ?

56. NO

57. ͳͥ͏·͍͔͘ͳ͍͔ • ϑϨʔϜϫʔΫ΍ϥΠϒϥϦ͸ৗʹมԽ͍ͯ͠Δ • ಛʹRFCʹ্͕ΔΑ͏ͳٕज़͸࠾༻͞Εͳ͜ͱ΋ • npm͕rc൛ͷϥΠϒϥϦΛinstall͢Δ͜ͱ΋͋Δ

58. ࣮ࡍʹ͋ͬͨ͜ͱ • ϦϓϨΠεલͷίʔυͰ͸ಈ͍͍ͯͨςετ͕
 ಈ͔ͳ͍ • @vue/cli͕࢖͏Α͏ʹΞϐʔϧͯͨ͠class-style-api͕
 ඇਪ঑ʹ

59. ϦϓϨΠεલͷίʔυͰ͸
 ಈ͍͍ͯͨςετ͕ಈ͔ͳ͍

60. ϦϓϨΠεલͷίʔυͰ͸
 ಈ͍͍ͯͨςετ͕ಈ͔ͳ͍ • ݪҼ => Bootstrap-Vueͷόʔδϣϯ • Ҡߦલ: 1.5ܥ •

    Ҡߦઌ: 2.0.x-rc • ͦ΋ͦ΋Componentͷmount͕͏·͍ͬͯ͘ͳ͍…

61. ରॲ๏ • ςετΛॻ͘͜ͱ͕໨తͰ͸ͳ͍ͷͰҰ୴Skip • ۩ମతʹ…
 
 
 • ςετίʔυΛ࢒͠ͳ͕Β࣮ߦΛඈ͹ͤΔ it.skip('correctly

    renders html', () => { const wrapper = shallowMount(Count); expect(wrapper.html()).toMatchSnapshot(); });

62. @vue/cli͕࢖͏Α͏ʹ
 Ξϐʔϧͯͨ͠class-style-api͕
 ඇਪ঑ʹ

63. @vue/cli͕࢖͏Α͏ʹΞϐʔϧͯͨ͠
 class-style-api͕ඇਪ঑ʹ • ઃܭஈ֊ͰTypeScriptΛ࢖͏લఏͷͨΊར༻ • Vue.extendsΑΓܕ·ΘΓ͕ྑ͔ͬͨ… • class style apiͷར༻Λܾఆͨ࣌͠ظ

    • 2019೥1݄ • ͜ΕΛ࢖ͬͯ։ൃΛਐΊ͍ͯͨ…

64. ͋Δ೔… https://github.com/vuejs/rfcs/pull/17#issuecomment-494242121

65. ͜ΕΛ౿·͑ͯɹ • ৽نͰ։ൃ͢ΔComponentʹؔͯ͠ • class style apiΛར༻ͤͣʹ࣮૷ • ͢Ͱʹ։ൃͨ͠Componentʹ͍ͭͯ •

    Ұ୴อཹ (͙͢͞·αϙʔτ͞Εͳ͘ͳΒͳ͍ͨΊ) • ͨͩ͠issueͱͯ͠ഉআܭըΛ࢒͓ͯ͘͠ (ϦϑΝΫλϦϯά)

66. ࠷ޙʹ

67. ϦϓϨΠεΛऴ͑ͯ • VueࣗମͰͷϦϓϨΠε͸ϦϦʔε׬ྃ • ྑ͔ͬͨ͜ͱ • ࠓ·Ͱٕ͋ͬͨज़తෛ࠴͸Ұ૟Ͱ͖ͨɻ • ϞμϯͳϑϩϯτΤϯυͷ஌ݟ •

    ѱ͔ͬͨ͜ͱ • ٕज़બ୒ͷϛεʹΑΔ৽ͨͳ՝୊ • ଞʹ΋ࠓ͔ΒݟΔͱGoodͰ͸ͳ͍ίʔυ΋

68. ϦϓϨΠεΛऴ͑ͯ • VueࣗମͰͷϦϓϨΠε͸ϦϦʔε׬ྃ • ྑ͔ͬͨ͜ͱ • ࠓ·Ͱٕ͋ͬͨज़తෛ࠴͸Ұ૟Ͱ͖ͨɻ • ϞμϯͳϑϩϯτΤϯυͷ஌ݟ •

    ѱ͔ͬͨ͜ͱ • ٕज़બ୒ͷϛεʹΑΔ৽ͨͳ՝୊ • ଞʹ΋ࠓ͔ΒݟΔͱGoodͰ͸ͳ͍ίʔυ΋ ࠓޙϦϑΝΫλϦϯάͰ
 ղফ

69. ࠷ޙʹ

70. ·ͱΊ • ϑϩϯτΤϯυ΋࣌୅ͱͱ΋ʹϨΨγʔͳίʔυ͕ݱΕΔ • ໰୊఺Λղܾ͠ɺ։ൃͷ͠΍͢͞Λ֬อ͢ΔͨΊʹ΋
 ϦϓϨΠε͸େࣄɻ • ϦϓϨΠεޙͷΞϓϦʹ΋໰୊͸ඞͣ͋Γɺ
 ϦϑΝΫλϦϯά͍ͯ͘͜͠ͱ͕ॏཁɻ

71. ͝ਗ਼ௌ
 ͋Γ͕ͱ͏͍͟͝·͢