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

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

by Kihara, Takuya

Speaker Deck

Tweet

Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

!UBDDL ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH ΏΔ8FCษڧձ!ࡳຈͱ͸ • ʮWebʯͱ͍͏Ωʔϫʔυʹؔ͢ΔɺΏΔ͍ษڧձɻ • جຊ͸ࢲͷฉ͖͍ͨ͜ͱΛςʔϚʹͯ͠ɺ  Έͳ͞Μʹൃදͯ͠΋Β͍ͬͯ·͢ɻ  • 2018೥8݄͔Β࢝·Γɺݱࡏ·Ͱʹ5ճ։࠵ɻ 

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

!UBDDL ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH /ZBO/ZBO/ZBO Vue-CLI v2 Ͱ࡞ͬͨ  ϓϩδΣΫτ  (ϖʔδભҠͳ͠)

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

!UBDDL ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH /ZBO/ZBO/ZBO Vue-CLI v2 Ͱ࡞ͬͨ  ϓϩδΣΫτ  (ϖʔδભҠͳ͠)

Slide 54

Slide 54 text

!UBDDL ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH /ZBO/ZBO/ZBO Vue-CLI v2 Ͱ࡞ͬͨ  ϓϩδΣΫτ  (ϖʔδભҠͳ͠) Vue-CLI v3 ͷϓϩδΣΫτ΁  Ҡ͠ସ͑

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

!UBDDL ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH 7VF$-* ( Ͱ͖ͨ͜ͱ Vue-CLI v2 ͷϓϩδΣΫτΛ  MonacaϓϩδΣΫτʹͰ͖ͨɻ    Vue-CLI v3 ͷϓϩδΣΫτ΋Ͱ͖ͨɻ ) Ͱ͖ͳ͔ͬͨ͜ͱ Vue-CLI v2 ͷϓϩδΣΫτ͸ɺ  ΞοϓϩʔυͰ͖ͳ͔ͬͨɻ

Slide 83

Slide 83 text

!UBDDL ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH ωΠςΟϒΞϓϦԽ ( Ͱ͖ͨ͜ͱ DebugΞϓϦͰ͸ɺ  iOS / Andorid ͲͪΒͰ΋ಈ͍ͨɻ ) Ͱ͖ͳ͔ͬͨ͜ͱ Android ωΠςΟϒΞϓϦͰ͸ɺ  ֎෦ʹ௨৴Ͱ͖ͳ͔ͬͨɻ ௨৴ͷઃఆपΓ͸ɺ͍Ζ͍Ζ֬ೝ͍ͨ͠ɻ

Slide 84

Slide 84 text

!UBDDL ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH ײ૝ • Vue.jsͳͲͷWebϑϩϯτΤϯυͷ஌ࣝͰɺ  (DebugΞϓϦͩͱͯ͠΋) ωΠςΟϒΞϓϦΛ࡞ΕΔɻ • ͜Ε͸ɺͱͯ΋ڻ͖Ͱ͋Γɺײಈɻ

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

!UBDDL ΏΔ8FCษڧձXJUI.POBDB6(JO4BQQPSP NPOBDBVH ࣍͸ωΠςΟϒΞϓϦʹ  νϟϨϯδ

Slide 87

Slide 87 text

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