Vue.js 続・大規模アプリ開発

Transcript

1. 1.

   Vue.js ଓɾେن໛ΞϓϦ։ൃ 2018.12.04 @kazupon ReproTech #5

2. 2.

   ࣗݾ঺հ

3. 3.

   kazupon Vue.js ίΞνʔϜϝϯό Vue.js ೔ຊϢʔβʔάϧʔϓ୅ද vue-i18n OSS։ൃऀ vuejs/jp.vuejs.org ϝϯςφ @kazu_pon

   kazupon
4. 4.

   ͸͡Ίʹ

5. 5.

   ςʔϚ: Frontend Reliability

6. 6.

   Vue.jsຊମ Vue Router Vuex Vue CLI ༷ʑͳن໛ʹରԠ͠΍͘͢ɺ͔ͭॊೈੑΛ͍࣋ͬͯΔ খن໛ େن໛ ϓϩάϨογϒϑϨʔϜϫʔΫ

   தن໛
7. 7.

   • தɾେن໛޲͚ͳΞϓϦ։ൃ͸ɺ݁ߏΧ ΦεʹͳΓ΍͍͢ ॊೈ͗͢Δ൓໘…

8. 8.

   • தɾେن໛޲͚ͷΞ ϓϦ։ൃʹ͍ͭͯ • Vue.jsೖ໳:
 8ষɺ9ষɺ10ষ ʹ ର͢Δิ଍తͳ͜ͱ Λ ࠓ೔࿩͢͜ͱ

9. 9.

   தɾେن໛޲͚ ΞϓϦ։ൃ ʹ͍ͭͯ

10. 10.

    • Ұൠతʹதن໛Ҏ্ͷΞϓϦ։ൃͰ͸ɺ ෳ਺ਓͰ։ൃ͢Δ • ͜ͷͨΊɺΞϓϦέʔγϣϯϑϨʔϜϫʔ ΫͰ͸ɺੜ࢈ੑ΍ϝϯςφϯεੑΛߟྀ ͨ͠΋ͷʹͳ͍ͬͯΔ ҰൠతͳΞϓϦέʔγϣϯϑϨʔϜϫʔΫ

11. 11.

    • ։ൃπʔϧ • ܕγεςϜ • σʔλӬଓԽ • ςετ • σόοά

    • Ϗϧυ ΞϓϦέʔγϣϯϑϨʔϜϫʔΫ͕ఏڙ͢Δ߲໨ • ίʔσΟϯάΨΠυ ϥΠϯ • ن໿ • σβΠϯύλʔϯ • ϕετϓϥΫςΟε • ࠃࡍԽ
12. 12.

    • ࠷ॳ͔ΒϑϧελοΫʹαϙʔτ͍ͯ͠ ͳ͍ • ͨͩɺVue.jsͱͯ͠ެࣜʹఏڙ͍ͯ͠Δ΋ ͷ͕͋Δ Vue.js͸ϓϩάϨογϒϑϨʔϜϫʔΫ

13. 13.

    • ։ൃπʔϧ: Vue CLI • ελΠϧΨΠυ / ίʔσΟϯάΨΠυϥΠϯ:
 eslint-plugin-vue •

    ίϯϙʔωϯτγεςϜ:୯ҰϑΝΠϧίϯϙʔωϯτ • ϧʔςΟϯά: Vue Router • ঢ়ଶ؅ཧͱσʔλϑϩʔ: Vuex • ςετϢʔςΟϦςΟ: Vue Test Utils Vue.js͕ఏڙ͢Δ಺༰
14. 14.

    • Ϗϧυ(όϯυϥ): 
 Vue Loader / rollup-plugin-vue • ΤσΟλ֦ு: Vetur

    • αʔόʔαΠυϨϯμϦϯά Vue.js͕ఏڙ͢Δ಺༰ ͜ΕΒ΍ɺαʔυύʔςΟͷ΋ͷΛඞཁ ʹԠͯ͡ಋೖͯ͠ΞϓϦ։ൃΛ͍ͯ͘͠
15. 15.

    ΞϓϦ։ൃ: ։ൃ؀ڥηοτΞοϓ

16. 16.

    ΞϓϦ։ൃʹඞཁͳ΋ͷ • ίʔςΟϯά؀ڥ • UIϏϧμ • ςετ & CI ؀ڥ

    • σόοΨ / ϓϩϑΝΠϥ • Ϗϧμ • γϡϛϨʔλ
17. 17.

    ΞϓϦ։ൃʹඞཁͳ΋ͷ • ίʔυ؅ཧπʔϧ • Ξηοτ؅ཧ • ઃఆ؅ཧ • ࠃࡍԽϦιʔε؅ཧ ͜͏ͨ͠αϙʔτΛड͚ΒΕΔɺΞϓ

    Ϧ։ൃͷͨΊͷπʔϧ͕ඞཁ
18. 18.

    ΞϓϦ։ൃΛ αϙʔτ͢Δπʔϧ

19. 19.

    • IDE • GUI ϕʔεͷ౷߹։ൃ؀ڥ • CLI • λʔϛφϧΛϕʔεͱͨ͠։ൃ؀ڥ Ұൠతʹఏڙ͞Ε͍ͯΔ։ൃ؀ڥπʔϧ

20. 20.

    • iOS: XCode • Android: Android Studio • Windows: Visual

    Studio • Web: Web Storm IDE
21. 21.

    • Ruby on Rails • Angular CLI • Create React

    App CLI
22. 22.

    • Vue CLI • Vue CLI UI Vue.js͕ఏڙ͢Δ։ൃ؀ڥπʔϧ ͜͏ͨ͠πʔϧͰΞϓϦ։ൃ ϓϩδΣΫτΛߏங͠ɺ

    ඞཁʹԠͯ͡ଞͷϥΠϒϥϦɺ πʔϧΛ૊Έ߹ΘͤΔ
23. 23.

    Vue CLI ͷ ৽چͷҧ͍

24. 24.

    • Vue CLI v1 ʙ v2 • ςϯϓϨʔτϕʔε • pros:


    ॊೈੑ͕ߴ͍
 ςϯϓϨʔτ࣍ୈͰࣗ༝ʹΧελϚΠζͰ͖Δ • cons:
 ϝϯςφϯε͕େม
 πʔϧ΍αʔυϕϯμͷϥΠϒϥϦΛࣗ෼Ͱόʔδϣϯ؅ ཧ͠ͳ͍ͱ͍͚ͳ͍ چ Vue CLI
25. 25.

    • Vue CLI v3 ʙ • ϓϥάΠϯϕʔε • pros:
 ։ൃ؀ڥͷߏஙɺ֦ுɺϝϯςφϯεָ͕


    ΄ͱΜͲ Vue CLI ͕໘౗ݟͯ͘ΕΔ • cons:
 ΤοδͳΧελϚΠζ͕ࠔ೉
 Vue CLI ͷϨʔϧ͔Β֎ΕΔ͜ͱ͸Ͱ͖ͳ͍ ৽ Vue CLI
26. 26.

    • چ Vue CLI ͱ Vue.js ެࣜ webpack ςϯϓ ϨʔτΑΓ΋ɺ৽

    Vue CLI (Ҏ߱ Vue CLI v3 ͱݺͿ) ͷํ͕ɺ֨ஈʹָʂ • Ҏ߱Ͱ͸ɺVue CLI v3 ʹΑΔ։ൃ؀ڥ઀ ηοτΞοϓʹ͍ͭͯิ଍͢Δ
27. 27.

    Vue CLI Ͱ ߏஙͰ͖Δ ඪ४։ൃ؀ڥ

28. 28.

    • τϥϯεύΠϥ: Babel • ܕγεςϜ: TypeScript • Ϧϯτ: ESLint •

    ίʔυϑΥʔϚολ: Prettier • ୯ମςετ: Chai / Mocha / Jest • E2Eςετ: NightWatch / Cypress • Ϗϧυ: webapck ։ൃπʔϧ
29. 29.

    • ϧʔςΟϯά: Vue Router • ঢ়ଶ؅ཧ: Vuex • ୯ମςετϢʔςΟϦςΟ: Vue

    Test Utils ϥΠϒϥϦ
30. 30.

    • npm / yarn ͷίϚϯυొ࿥ • ؀ڥม਺ʹΑΔΞϓϦઃఆ؅ཧ • .env Ͱ؅ཧՄೳ

    • όοΫΤϯυͷ API ϓϩΩγ؀ڥͷఏڙ • vue.config.js Ͱͷઃఆ ͦͷଞ
31. 31.

    CLIϓϥάΠϯʹΑΔ֦ு • ྫ: ࠃࡍԽͷ࢓૊Έ(i18n)Λಋೖ vue add i18n vue-cli-plugin-i18n my-app1 scafollding

    & Env settings
32. 32.

    Vue CLI UI ʹ͍ͭͯ

33. 33.

    Vue CLI UI vue ui ίϚϯυ࣮ߦ… Webϒϥ΢βʹGUIΞϓϦ͕ىಈ

34. 34.

    Vue CLI UI Ͱग़དྷΔࣄ • Vue CLI ͷ CLI ϕʔεͰग़དྷΔࣄ͸ͻͱ௨

    ΓͰ͖Δ (Vue CLI Λϥοϓͯ͠ಈ࡞) • ΞϓϦ։ൃϓϩδΣΫτ࡞੒ • CLIϓϥάΠϯ௥Ճ • ։ൃαʔόͷىಈ • ΞϓϦͷϏϧυ • webpackͷΠϯεϖΫγϣϯ …ͳͲ
35. 35.

    CLI ൛ʹ͸ͳ͍ػೳͷఏڙ • GUIϕʔεͷಛੑΛੜ͔ͯ͠ɺҎԼͷΑ͏ ͳ༷ʑͳػೳΛఏڙ͍ͯ͠Δ • ϓϩδΣΫτ؅ཧ • GUIϕʔεͷઃఆ •

    CLIϓϥάΠϯͷݕࡧˍҰཡ • CLIϓϥάΠϯͷΞοϓσʔτ • CLIϓϥάΠϯʹΑΔ։ൃࢧԉ֦ு … ͳͲ
36. 36.

    ϓϩδΣΫτ؅ཧ

37. 37.

    GUIϕʔεͷઃఆ

38. 38.

    CLIϓϥάΠϯݕࡧˍҰཡ

39. 39.

    Vue CLI UI ʹΑΔ։ൃࢧԉ • i18nϦιʔεͷ؅ཧ (CLIϓϥάΠϯ)

40. 40.

    • λʔϛφϧͰ͸ͳ͘ɺGUI ϕʔεͳͷͰί Ϛϯυ࣮ߦ͕ۤखͳਓʹ͸༏͍͠ • ։ൃνʔϜͰۤखҙࣝͷํ͕͍Δ৔߹͸ɺ ࢖ͬͯੜ࢈ੑΛߴΊΔͱΑ͍ • ߏஙͨ͠ϓϩδΣΫτͷ Vue

    CLI ͱ Vue CLI UI ͷฒଘར༻͸Մ Vue CLI UI ͸༏͍͠
41. 41.

    ͞ΒͳΔ ։ൃ؀ڥͷڧԽ

42. 42.

    • Visual Studio Code + Vetur ૊Έ߹Θͤਪ ঑ • Vue

    ޲͚ʹ࠷దՄ͞Εͨίʔυิ׬ • SFCͷγϯλοΫεϋΠϥΠτ • ڧྗͳ TypeScript ͷܕαϙʔτ ίʔσΟϯά؀ڥ
43. 43.

    • Chrome + Vue DevTools ਪ঑ • Chrome DevTools ʹΑΔϓϩϑΝΠϦϯ

    ά • Vue DevToolsʹΑΔڧྗͳσόοά؀ڥ σόοΨͱϓϩϑΝΠϦϯά
44. 44.

    • σϑΥϧτͰ͸ essntial ʹઃఆ͞Ε͍ͯ Δ • recommended Λਪ঑ • Vue.js։ൃऀͱίϛϡχςΟʹରͯ͠ཧղ

    Ͱ͖ΔҰ؏ੑΛ࣋ͬͨίʔυ eslint-plugin-vueͷϧʔϧΧςΰϦ
45. 45.

    • RESTful ͳ API ʹରͯ͠͸ axios • GraphQL ͳέʔεʹରͯ͠͸ɺvue-apollo ͱ͔

    ௨৴ϥΠϒϥϦ
46. 46.

    • Vuex ͸ Vue CLI v3 ܦ༝ͰಋೖͰ͖ΔΑ͏ʹ ͳ͍ͬͯΔ • σΟϨΫτϦߏ଄Խ͸Ϣʔβʔ೚ҙ

    • Vuex ͷ TypeScript ؀ڥ ͕ਏ͍ͳΒɺVue.js ެࣜͰ͸ͳ͍͕ɺϔϧύΛ࢖͏ख΋͋Δ
 https://github.com/ktsn/vuex-type-helper ঢ়ଶ؅ཧϥΠϒϥϦ
47. 47.

    • Vue CLI v3 ʹ͓͍ͯ΋ weback-dev-server Λར༻͍ͯ͠ΔͨΊɺϓϩΩγઃఆ͸ै དྷͲ͓Γ • ։ൃ؀ڥ޲͚ʹmock࣮૷ͨ͠

    Express ͷ ίʔυ͸ vue.config.js ʹઃఆ͢Δ όοΫΤϯυͱͷϓϩΩγ؀ڥߏங
48. 48.

    • Vue CLI v3 Ͱ͸ɺCypress ΋࢖͑ΔΑ͏ ʹͳͬͨ • Cypress ͷϓϥάΠϯͰE2E؀ڥΛڧԽ͠

    ͍ͨ৔߹͸ɺͦͷྲّྀʹै͏ඞཁ͕͋Δ
 https://docs.cypress.io/guides/tooling/plugins-guide.html#Use-Cases E2Eςετ؀ڥ
49. 49.

    ΞϓϦ։ൃ: ઃܭ

50. 50.

    • ॻ੶Ͱ͸ҎԼͷ߲໨ͷઃܭʹ͍ͭͯղઆ • ίϯϙʔωϯτઃܭ • ঢ়ଶϞσϦϯάͱσʔλϑϩʔઃܭ • ϧʔςΟϯάઃܭ ΞϓϦέʔγϣϯઃܭ

51. 51.

    ίϯϙʔωϯτ ઃܭ

52. 52.

    • Ұ؏ੑ
 ΞϓϦέʔγϣϯશମͰ౷Ұײͷ͋ΔίϯϙʔωϯτΛ ։ൃͰ͖Δ • ॏෳഉআ
 ಉ͡Α͏ͳػೳΛఏڙ͢Δίϯϙʔωϯτ։ൃΛഉআͰ ͖Δ • ੜ࢈ੑ޲্


    νʔϜͰ։ൃ͢Δίϯϙʔωϯτͷେ࿮Λڞ༗͢Δ͜ͱ Ͱ։ൃޮ཰ΛߴΊΒΕΔ ίϯϙʔωϯτઃܭͷҙٛ
53. 53.

    • ίϯϙʔωϯτ ͷཻ౓ͱ෼ྨ͸ Atomic Design ʹै͍ɺSFCͱ ͯ͠நग़ • ίϯϙʔωϯτ ͷAPIΛઃܭ

    Atomic Design
54. 54.

    • No • ։ൃϓϩδΣΫτʹ͓͍ͯίϯϙʔωϯτ ͷடংΛҡ࣋Ͱ͖ΔͳΒɺଞͷ෼ྨख๏͕ ͋Ε͹ͦΕΛ࢖͑͹Α͍ • ૊৫ಠࣗʹΦϨΦϨ෼ྨख๏Ͱ΍͍ͬͯ͘ ࣗ৴͕͋ΔͳΒ͹ɺͦΕͰ΋͍͍ͱࢥ͏ ඞͣAtomic

    DesignͰͳ͚Ε͹͍͚ͳ͍ͷ͔ʁ
55. 55.

    • Basic • Components • Containers • Pages ࢀߟ: ίϯϙʔωϯτͷ෼ྨ๏

    ޙչ͠ͳ͍ͨΊͷ Vue ίϯϙʔωϯτઃܭ: nakajmgࢯ https://ponyhead.booth.pm/items/1028529
56. 56.

    ঢ়ଶϞσϦϯά ͱ σʔλϑϩʔઃܭ

57. 57.

    • ΞϓϦͷUI࢓༷͔ Βঢ়ଶ(Ϟσϧ)ʹ མͱ͠ࠐΉ • σʔλϑϩʔͷ؍ ఺͔Β͍ͭͰʹɺ API΋͜͏ͳΔ΂ ͖ͱઃܭ͕ͪ͠ ϞσϦϯάͱσʔλϑϩʔ

58. 58.

    • ઃܭͨ͠ϞσϧͱAPI͸ɺϑϩϯτΤϯυࢹ఺ ʹΑΔઃܭ • མͱ͠ࠐΜͩϞσϧͱAPIͷ࢓༷͸ɺόοΫΤ ϯυଆͱೝࣝᴥᴪ͕ͳ͍Α͏ʹ͠ͳ͍ͱ͍͚ͳ ͍ • ίϛϡχέʔγϣϯ΋ॏཁͰ͋Δ͕ɺόοΫΤ ϯυଆͱೝࣝᴥᴪΛݮΒ͢޻෉(࢓૊Έ)΋ඞཁ

    όοΫΤϯυଆͱڠௐ͢Δʹ͸ʁ
59. 59.

    • ҎԼ͕ࢀߟʹͳΔ • swagger ΍ OpenAPI Generator • Consumer Driven

    Contract ಉ࣌ʹ։ൃΛਐΊΔͨΊʹ͸ʁ BFFʢBackends For Frontendsʣ࣮ફʹ͓͚Δ3ͭͷΞϯνύλʔϯͱɺͦͷճආࡦ: ݹ઒ཅհࢯ http://www.atmarkit.co.jp/ait/articles/1808/31/news013.html
60. 60.

    ϧʔςΟϯά ઃܭ

61. 61.

    • Scrolling Amnesia • ϒϥ΢βͷ໭ΔϘλϯ Λԡͨ࣌͠ʹظ଴͢Δ HTML͕ϩʔυ͞Εͳ ͔ͬͨ࣌ʹى͜Δ໰୊ • Α͋͘Δέʔε:


    ແݶϖʔδωʔγϣϯ εΫϩʔϧҐஔͷ૕ࣦ໰୊ 7 Principles of Rich Web Applications
 https://rauchg.com/2014/7-principles-of-rich-web-applications#dont-break-history-enhance-it
62. 62.

    • UI࢓༷ݕ౼࣌ͷ֬ೝ
 ྫ: ແݶϖʔδωʔγϣϯͷ༗ແ & ڍಈ • αϙʔτ͢Δϒϥ΢βͷ֬ೝ
 https://developer.mozilla.org/ja/docs/Web/API/History#ϒϥ΢βʔ࣮૷ঢ়گ •

    ϧʔςΟϯάϥΠϒϥϦͷରॲ๏ͷ֬ೝ
 https://router.vuejs.org/ja/guide/advanced/scroll-behavior.html ࣄલʹରԠՄೳ͔֬ೝඞਢ
63. 63.

    ΞϓϦ։ൃ: ࣮૷

64. 64.

    • ݎݻͳΞϓϦ։ൃʹ͢ΔͨΊʹ͸ɺಋೖ ͢΂͖ • Vue CLI v3 ͳΒ؆୯ʹಋೖ͢Δ͜ͱ͕Ͱ ͖Δ •

    Visual Studio Code + Vetur Ͱੜ࢈ੑߴ͍ ։ൃ͕Մೳͳͷ͸ɺલʹઆ໌ͨ͠ͱ͓Γ TypeScriptͷಋೖ
65. 65.

    ࣮૷શൠ ʹ͍ͭͯ

66. 66.

    • ॻ੶Ͱ͸ vue init Ͱ karma + mocha ͳ؀ڥͰ ͷTDD؀ڥΛߏஙͨ͠

    • ࠓޙ͸ Jest Λਪ঑͢Δ • εφοϓγϣοτςετ͕ศར • Assertion / Mock ΋๊߹͍ͯͯ͠ɺ͜Εܥͷ ϥΠϒϥϦͲΕ࢖͏͔೰·ͳ͍͍ͯ͘ ϑϩϯτΤϯυʹ͓͚ΔTDD
67. 67.

    • ίϯϙʔωϯτɺσʔλϑϩʔɺϧʔςΟϯάͷ ࣮૷͸TDDͰ΍͍ͬͯΔ͕શͯ΍Δඞཁͳ͍ͱߟ ͍͑ͯΔ • ҰൠతʹUIͷ࢓༷͸සൟʹଟ͘ൃੜ͢ΔͨΊຖճ ςετมߋίετ͕େม • ·ͨTDDͰUIͷߏ଄΍ݟͨ໨΍Ξχϝʔγϣϯͳ ͲͷڍಈΛ֬ೝ͢Δͷ͸ਏ͍ͱ͍͏໰୊͕͋Δ

    TDDʹΑΔΞϓϦ։ൃ
68. 68.

    • ίϯϙʔωϯτͷ࣮૷: • Storybook + reg-suite (ଞʹ΋͋Δ) ʹΑΔ Visual Regression

    Testing
 
 https://github.com/mojoaxel/awesome-regression-testing • σʔλϑϩʔͱϧʔςΟϯάͷ࣮૷ • TDDͰϩδοΫͷڍಈΛνΣοΫ TDD͸͏·͘࢖͍෼͚Δͱ͍͍͔΋
69. 69.

    ։ൃαʔό ͱ σόοά

70. 70.

    • Vue DevTools v5 ʹ͸ҎԼͷػೳ͕ೖΔ༧ఆ 
 (ݱࡏbeta) • ϧʔςΟϯάཤྺ •

    ύϑΥʔϚϯεଌఆ • Vuexͷঢ়ଶ஋ฤू • …ͳͲ σόοΨ
71. 71.

    E2Eςετ

72. 72.

    • Cypress:
 Vue CLI v3 ͰެࣜʹηοτΞοϓΛఏڙ • Puppeteer:
 ಠࣗʹ؀ڥߏங͕ඞཁ NightWatchҎ֎ʹ΋͋Δ

73. 73.

    ύϑΥʔϚϯεͷ ଌఆɾվળ

74. 74.

    • Performance API ʹΑΔଌఆՕॴ • ύϑΥʔϚϯεվ ળϙΠϯτ Vue ʹ͓͚ΔύϑΥʔϚϯεଌఆ

75. 75.

    • ύϑΥʔϚϯεଌఆػೳ͕ೖΔ༧ఆ Vue DevTools v5 ͰΑΓศརʹ FPS ίϯϙʔωϯτͷඳը଎౓

76. 76.

    • ௒଎ຊʂϑϩϯτΤϯυΤϯδχΞඞಡ ҰൠతͳύϑΥʔϚϯεଌఆɾվળ https://webperf.guide/

77. 77.

    • ύϑΥʔϚϯεʹؔ͢Δ৘ใͷๅݿ Google Web Fundamentals https://developers.google.com/web/fundamentals/performance/

78. 78.

    • ΩϟογϡઓུɺΞʔΩςΫνϟͳͲʹ ͍ͭͯ͸ɺҎԼࢿྉ͕ࢀߟʹͳΔ͔΋
 
 ޫΛ௒͑ΔͨΊͷϑϩϯτΤϯυΞʔΩςΫνϟ
 https://speakerdeck.com/mizchi/guang-wochao-erutamefalsehurontoendoakitekutiya ύϑΥʔϚϯεͷΞʔΩςΫνϟ࿦

79. 79.

    αʔόʔαΠυ ϨϯμϦϯά

80. 80.

    • ॻ੶ͷίϥϜʹ΋ॻ͍͕ͨɺ৭ʑͱେม ͳͷͰཁݕ౼͢Δ͜ͱ • ҎԼURLͷεϥΠυ΋ࢀߟʹ
 You Need to know SSR


    https://speakerdeck.com/yosuke_furukawa/you-need-to-know-ssr ಋೖ͢Δ/͠ͳ͍͸ݕ౼͢Δ͜ͱ
81. 81.

    ·ͱΊ

82. 82.

    • Vue.jsೖ໳ͷதɾେن໛ΞϓϦ։ൃʹର͢Δิ଍ ಺༰Λ࿩ͨ͠ • ؀ڥηοτΞοϓʹ͍ͭͯ͸Vue CLI v3 ϕʔεͰ ͸େ෼ָʹͳΔ •

    ઃܭʹ͍ͭͯ͸ɺࢀߟʹͳΔצॴʹ͍ͭͯ࿩ͨ͠ • ࣮૷ʹ͍ͭͯ͸ɺ࣮૷ͷ࢓ํɺ࣌ظπʔϧͷαϙʔ τ͞ΕΔ಺༰ɺଞͷํ๏ʹ͍ͭͯ࿩ͨ͠ ·ͱΊ
83. 83.

    Vue.jsೖ໳ + ຊ೔ͷิ଍Talk ಺༰Ͱ େن໛։ൃ΍͍͖ͬͯ·͠ΐ͏ʂ

84. 84.

    Patreonͷࢧԉ ͓଴͓ͪͯ͠Γ·͢ʂ https://www.patreon.com/kazupon

85. 85.

    ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ