$30 off During Our Annual Pro Sale. View Details »

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

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

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

Kihara, Takuya

May 30, 2019
Tweet

More Decks by Kihara, Takuya

Other Decks in Technology

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