Monaca初心者がVue.jsでアプリを作ってみた #monaca_ug #ゆるweb札幌

Vue.jsのプロジェクトを、Monacaでネイティブアプリにできるかチャレンジした記録。

Transcript

1. ΏΔ8FCษڧձ!ࡳຈ
   @tacck
   .POBDBॳ৺ऀ͕
   7VFKTͰΞϓϦΛ࡞ͬͯΈͨ
   2019/05/30
   with Monaca UG
   in Sapporo
   

   View Slide

2. !UBDDL
   ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
   ୭
   • ໊લ
   
   tacck / ໦ݪ ୎໵
   
   • ॴଐ
   
   גࣜձࣾϊʔεσΟςʔϧ
   
   • ओ࠵
   
   • ΏΔWebษڧձ@ࡳຈ
   
   • εϚʔτεϐʔΧʔͰ༡΅͏ձ@ࡳຈ
   
   • ޷͖ͳϑΟΪϡΞεέʔτͷٕ
   
   εϓϨουɾΠʔάϧ
   

   View Slide

3. View Slide

4. !UBDDL
   ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
   ΏΔ8FCษڧձ!ࡳຈͱ͸
   • ʮWebʯͱ͍͏Ωʔϫʔυʹؔ͢ΔɺΏΔ͍ษڧձɻ
   
   • جຊ͸ࢲͷฉ͖͍ͨ͜ͱΛςʔϚʹͯ͠ɺ

   Έͳ͞Μʹൃදͯ͠΋Β͍ͬͯ·͢ɻ

   
   
   
   • 2018೥8݄͔Β࢝·Γɺݱࡏ·Ͱʹ5ճ։࠵ɻ

   
   

   View Slide

5. !UBDDL
   ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
   .POBDBͷܦݧ
   • θϩ
   

   View Slide

6. !UBDDL
   ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
   .POBDBͷܦݧ
   • θϩͰ͸ͳ͔ͬͨɻ
   

   View Slide

7. !UBDDL
   ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
   .POBDBͷܦݧ
   • θϩͰ͸ͳ͔ͬͨɻ Ͱ΋3೥લ
   

   View Slide

8. !UBDDL
   ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
   ࠓ೔ͷ࿩
   • Monaca ͷ(࣮࣭)ॳ৺ऀ͕
   
   • Vue.js + Monaca Ͱ
   
   • ωΠςΟϒΞϓϦ࡞ΓʹνϟϨϯδͨ͠
   

   View Slide

9. !UBDDL
   ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
   ·ͣ.POBDBΛ৮Δ
   

   View Slide

10. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    .POBDBͷϖʔδ
    

    View Slide

11. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    .POBDBͷϖʔδ
    

    View Slide

12. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    .POBDBͷϖʔδ
    

    View Slide

13. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    .POBDBͷϖʔδ
    

    View Slide

14. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    .POBDBͷϖʔδ
    

    View Slide

15. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    .POBDBͷϖʔδ
    

    View Slide

16. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    .POBDBͷϖʔδ
    

    View Slide

17. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    .POBDBͷϖʔδ
    

    View Slide

18. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    .POBDBͷϖʔδ
    

    View Slide

19. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    .POBDBͷϖʔδ
    

    View Slide

20. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    .POBDBͷϖʔδ
    

    View Slide

21. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    .POBDBͷϖʔδ
    

    View Slide

22. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    .POBDBͷϖʔδ
    

    View Slide

23. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    .POBDBͷϖʔδ
    

    View Slide

24. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    OQNJHNPOBDB
    

    View Slide

25. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    NPOBDBMPHJO
    

    View Slide

26. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    NPOBDBMPHJO
    

    View Slide

27. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    NPOBDBJNQPSU
    

    View Slide

28. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    NPOBDBJNQPSU
    

    View Slide

29. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    NPOBDBQSFWJFX
    

    View Slide

30. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    ϒϥ΢βͰ֬ೝ
    

    View Slide

31. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    J1IPOFͷ6*෩ʹ੾ΓସΘΔ
    

    View Slide

32. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    7VFKTͷϓϩδΣΫτΛ

    .POBDBϓϩδΣΫτ΁
    

    View Slide

33. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    /ZBO/ZBO/ZBO
    

    View Slide

34. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    /ZBO/ZBO/ZBO
    Vue-CLI v2 Ͱ࡞ͬͨ

    ϓϩδΣΫτ

    (ϖʔδભҠͳ͠)
    

    View Slide

35. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    ΍ͬͯΈͨ
    

    View Slide

36. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    HJUDMPOF
    

    View Slide

37. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    NPOBDBJOJU
    

    View Slide

38. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    NPOBDBJOJU
    

    View Slide

39. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    OQNJOTUBMM
    

    View Slide

40. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    OQNJOTUBMM
    

    View Slide

41. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    NPOBDBQSFWJFX
    

    View Slide

42. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    NPOBDBQSFWJFX
    

    View Slide

43. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    ϒϥ΢βͰ֬ೝ
    

    View Slide

44. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    ϒϥ΢βͰ֬ೝ
    

    View Slide

45. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    Ͱ͖·ͨ͠
    

    View Slide

46. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    %FCVHΞϓϦͰ֬ೝ
    

    View Slide

47. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    %FCVHΞϓϦ
    

    View Slide

48. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    NPOBDBVQMPBE
    

    View Slide

49. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    NPOBDBVQMPBE
    

    View Slide

50. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    μϝͰͨ͠
    

    View Slide

51. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    ͳͥ
    • “node_modules/npm” ͷόʔδϣϯ͕௿ͦ͏
    
    • ґଘؔ܎ʹ͋ΔͷͰ͍Ζ͍Ζ໘౗ͦ͏
    
    • ఘΊ
    

    View Slide

52. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    7VFKTͷϓϩδΣΫτΛ

    .POBDBϓϩδΣΫτ΁1BSU
    

    View Slide

53. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    /ZBO/ZBO/ZBO
    Vue-CLI v2 Ͱ࡞ͬͨ

    ϓϩδΣΫτ

    (ϖʔδભҠͳ͠)
    

    View Slide

54. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    /ZBO/ZBO/ZBO
    Vue-CLI v2 Ͱ࡞ͬͨ

    ϓϩδΣΫτ

    (ϖʔδભҠͳ͠)
    Vue-CLI v3 ͷϓϩδΣΫτ΁

    Ҡ͠ସ͑
    

    View Slide

55. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    Ҡ͠ସ͑
    • ͕Μ͹Δ
    

    View Slide

56. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    Ҡ͠ସ͑
    

    View Slide

57. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    NPOBDBJOJU
    

    View Slide

58. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    NPOBDBJOJU
    

    View Slide

59. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    OQNJOTUBMM
    

    View Slide

60. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    NPOBDBQSFWJFX
    

    View Slide

61. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    ϒϥ΢βͰ֬ೝ
    

    View Slide

62. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    ϒϥ΢βͰ֬ೝ
    

    View Slide

63. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    Ͱ͖·ͨ͠
    

    View Slide

64. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    %FCVHΞϓϦͰ֬ೝ1BSU
    

    View Slide

65. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    NPOBDBVQMPBE
    

    View Slide

66. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    NPOBDBVQMPBE
    

    View Slide

67. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    ϒϥ΢βͰ֬ೝ
    

    View Slide

68. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    %FCVHΞϓϦͰ֬ೝ
    J04
    

    View Slide

69. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    

    View Slide

70. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    %FCVHΞϓϦͰ֬ೝ
    "OESPJE
    

    View Slide

71. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    

    View Slide

72. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    Ͱ͖·ͨ͠
    

    View Slide

73. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    "OESPJE
    ωΠςΟϒΞϓϦͰ֬ೝ
    

    View Slide

74. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    Ϗϧυϝχϡʔ
    

    View Slide

75. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    "OESPJEΞϓϦͷϏϧυ
    

    View Slide

76. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    Ϗϧυத
    

    View Slide

77. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    Ϗϧυ׬ྃ
    

    View Slide

78. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    

    View Slide

79. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    ֎෦ʹ઀ଓͰ͖ͳ͍
    

    View Slide

80. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    ͜͜ͰλΠϜΞοϓ
    ⏰
    

    View Slide

81. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    ·ͱΊ
    

    View Slide

82. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    7VF$-*
    ( Ͱ͖ͨ͜ͱ
    
    Vue-CLI v2 ͷϓϩδΣΫτΛ

    MonacaϓϩδΣΫτʹͰ͖ͨɻ

    

    Vue-CLI v3 ͷϓϩδΣΫτ΋Ͱ͖ͨɻ
    
    ) Ͱ͖ͳ͔ͬͨ͜ͱ
    
    Vue-CLI v2 ͷϓϩδΣΫτ͸ɺ

    ΞοϓϩʔυͰ͖ͳ͔ͬͨɻ
    

    View Slide

83. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    ωΠςΟϒΞϓϦԽ
    ( Ͱ͖ͨ͜ͱ
    
    DebugΞϓϦͰ͸ɺ

    iOS / Andorid ͲͪΒͰ΋ಈ͍ͨɻ
    
    ) Ͱ͖ͳ͔ͬͨ͜ͱ
    
    Android ωΠςΟϒΞϓϦͰ͸ɺ

    ֎෦ʹ௨৴Ͱ͖ͳ͔ͬͨɻ
    
    ௨৴ͷઃఆपΓ͸ɺ͍Ζ͍Ζ֬ೝ͍ͨ͠ɻ
    

    View Slide

84. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    ײ૝
    • Vue.jsͳͲͷWebϑϩϯτΤϯυͷ஌ࣝͰɺ

    (DebugΞϓϦͩͱͯ͠΋) ωΠςΟϒΞϓϦΛ࡞ΕΔɻ
    
    • ͜Ε͸ɺͱͯ΋ڻ͖Ͱ͋Γɺײಈɻ
    

    View Slide

85. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    %FCVHΞϓϦͷ֬ೝͰ΋

    ָ͍͠
    

    View Slide

86. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    ࣍͸ωΠςΟϒΞϓϦʹ

    νϟϨϯδ
    

    View Slide

87. !UBDDL
    ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH
    FOE
    

    View Slide