Vue.js初心者がelectron-vueでデスクトップ アプリケーションを作成した話

v_kansai meetup #6 の発表資料です。

Transcript

1. 7VFKTॳ৺ऀ͕FMFDUSPOWVFͰ
   σεΫτοϓΞϓϦέʔγϣϯΛ
   ࡞੒ͨ͠࿩ WLBOTBJ
   7VFKT/VYUKT
   NFFUVQ
   
   
   4"8
2. $(whoami) w ࢯ໊
   Ճ౻
   फҰ࿠
   ࡀ
    Ѫ஌ग़਎ɾେࡕࡏॅ
    ϋϯυϧωʔϜ
   4"8
   ‣ ϗϥʔ͸ۤखͳͷͰɺөը
   l4"8z
   Λݟͨ͜ͱͳ͍
    4/4ΞΧ΢ϯτ
   ‣ 5XJUUFS
   !B[VLJ@FBUFS
   ‣ (JU)VC
   B[VLJQFOHVJO
   w ॴଐ
   גࣜձࣾ.4&/
   ೥໨ 2 Let’s play a game. FreeBSD macOS Vue.js Linux
3. .BO
   QBHF
   PG
   4"8 w export EDITOR=vim
   w 04
   NBD04
   6CVOUV
   -JOVY
   'SFF#4%
    ֶੜ࣌୅͸6/*9-JOVY؀ڥ͕ϝΠϯ
   ‣ γΣϧ͸ओʹCBTI
    ࢓ࣄͷ։ൃ؀ڥ͸8JOEPXT
   
   w ϓϩάϥϛϯάݴޠ
   1FSM
   1)1
   +BWB4DSJQU
    ϑϨʔϜϫʔΫ͸-BSBWFMͱ7VFKT 3
4. WLBOTBJ
   NFFUVQ
   ࢀՃྺ w ࢀՃճ਺
   ճ
    ճ໨
   WLBOTBJ
   7VFKT/VYUKT
   NFFUVQ
   
   ‣ લճ
   ҰൠࢀՃ࿮ʹͯࢀՃ
    ճ໨
   WLBOTBJ
   7VFKT/VYUKT
   NFFUVQ
   
   ‣ ࠓճ
   ొஃ࿮ʹͯࢀՃ
   w 7VFKTྺ
   ͓Αͦϲ݄
    ΰϦΰϦͱ͸ॻ͍ͯͳ͍ 4
5. ൃද֓ཁ 7VFKTॳ৺ऀ͕
   FMFDUSPOWVFͰ࡞੒ͨ͠
   σεΫτοϓΞϓϦέʔγϣϯΛ঺հ 5
6. DTWFEJUPS w &YDFMϥΠΫͳ6*Ͱ$47ϑΝΠϧΛฤू͢Δπʔϧ
    (JU)VC
   B[VLJQFOHVJODTWFEJUPS
   w /PEFKT
   WҎલͰಈ࡞
    /PEFKT
   WܥͰ͸ಈ࡞͠ͳ͔ͬͨʜ
   w ґଘύοέʔδͷ੬ऑੑ͸ະղܾ
    શવอक͍ͯ͠ͳ͍ʜ 6
7. ͳΜͰ࡞ͬͨͷ w େֶӃੜ࣌୅ʹ5"ͷۀ຿Ͱ࠾఺݁ՌΛ$47ϑΝΠϧʹهड़
    $47ϑΝΠϧͷจࣈίʔυ͸4IJGU@+*4
   w େֶͷNBD04ͷ&YDFMͰฤूͯ͠อଘ͢Δͱ೔ຊޠ͕
   l_z
   ʹ
    ݪҼ
   ϩέʔϧΛӳޠʹ͍͔ͯͨ͠ΒͬΆ͍ʜ
    /VNCFSTΛ࢖͏ͱσϑΥϧτ͕65'ͳͷͰจࣈԽ͚
   w $47Λฤू͢Δπʔϧ͕ཉ͍͠
    ࣗ࡞͠Α͏ 7
8. ผͷํ๏͕͋ͬͨͷͰ͸ w ϩέʔϧΛ೔ຊޠʹઃఆ͢Ε͹ྑ͍ͷͰ͸
    ׶͑ͯӳޠʹ͍ͯ͠Δ͔Βม͑ͨ͘ͳ͍
   w /VNCFST΍-JCSF0⒏DFͱ͔୅༻ͨ͠Β͍͔Μͷ͔
    Θ͟Θ͟5"ͷͨΊ͚ͩʹσϑΥϧτͷจࣈίʔυΛม͑ͨ͘ͳ͍
    Θ͟Θ͟5"ͷͨΊ͚ͩʹ-JCSF0⒏DFͱ͔ೖΕΔͷ໘౗͍͘͞ 8
9. ࡞Δํ͕ΑͬΆͲखؒͰ͸ w ݐલ
    7VFKTͷ࣮ફ
   ‣ ͔ͤͬ͘झຯͰษڧ͍͔ͯͨ͠Β׆༻͔ͨͬͨ͠
    &MFDUSPOΛ࠾༻ͯ͠ϚϧνϓϥοτϑΥʔϜԽ
   ‣ NBD04͚ͩͰͳ͘ɺ8JOEPXT΍-JOVYͰ΋ར༻Մೳʹ
   w ຊԻ
    ࡞Γ͍͔ͨΒ࡞ͬͨ
   ‣ ࣮૷ָ͍͠ 9
10. ࢖༻͢ΔϥΠϒϥϦ w σεΫτοϓ؀ڥͷ։ൃ
    &MFDUSPO
    w +BWB4DSJQUϑϨʔϜϫʔΫ
    7VFKT
    w &YDFMϥΠΫͳ6*
    )BOETPOUBCMF
    w $47ύʔα
    QBQBQBSTF
    w จࣈίʔυͷࣗಈ൑ผ
    FODPEJOHKBQBOFTF 10
11. ओͳػೳ w $47ΛಡΈࠐΜͰ&YDFMϥΠΫͳςʔϒϧͱͯ͠දࣔ
     จࣈίʔυ΋ࣗಈ൑ผ
    w $47Λ&YDFMϥΠΫͳςʔϒϧΛ࢖ͬͯฤू
    w ฤूͨ͠ςʔϒϧ͔Β$47ʹग़ྗ
     จࣈίʔυΛࢦఆͯ͠ग़ྗ΋Մೳ 11
12. ओͳػೳͷ֓ཁਤ 12
13. $47ϑΝΠϧͷΦʔϓϯ w ϝΠϯϓϩηε
     બ୒͞ΕͨϑΝΠϧͷ಺༰Λऔಘ
    ‣ fsϞδϡʔϧͷreadFileSync()Λར༻
     *1$௨৴Ͱ7VFʹϑΝΠϧͷத਎ΛૹΔ
    w Ϩϯμϥʔϓϩηε
     $47ͷςΩετ͔Βσʔλߏ଄ʹม׵ͯ͠ಡΈࠐΈ
    ‣ QBQBQBSTFͷparse()ϝιουͰ$47Λ഑ྻʹύʔε
    ‣ )BOETPOUBCMFͷloadData()ϝιουͰ഑ྻΛςʔϒϧʹׂΓ౰ͯ 13
14. ฤू݁ՌΛ$47ϑΝΠϧʹอଘ w Ϩϯμϥʔϓϩηε
     ςʔϒϧͷߏ଄͔Β$47ςΩετʹม׵
    ‣ QBQBQBSTFͷunparse()ϝιουͰςΩετԽ
     *1$௨৴ͰϝΠϯϓϩηεʹ಺༰Λૹ৴
    w ϝΠϯϓϩηε
     $47ϑΝΠϧͱͯ͠อଘ
    ‣ fsϞδϡʔϧͷwriterStream.write()ʹΑͬͯϑΝΠϧʹग़ྗ 14
15. Ϩϯμϥʔϓϩηε
     w 7VFKTͰϑϩϯτΤϯυͷॲཧΛ࣮૷
     $47ϑΝΠϧͱ+BWB4DSJQUͰѻ͏จࣈྻͷΤϯίʔυͷ૬ޓม׵
    ‣ FODPEJOHKBQBOFTFΛར༻
     $47ͱςʔϒϧͷίϯϙʔωϯτ༻ͷσʔλߏ଄ͷ૬ޓม׵
    ‣ 1BQBQBSTFͷར༻
     ςʔϒϧͷॲཧ͸)BOETPOUBCMFʹؙ౤͛ 15
16. Ϩϯμϥʔϓϩηε
     16 $47ͱσʔλߏ଄ͷ૬ޓม׵ $47σʔλͷಡΈࠐΈͱ$47σʔλ΁ͷग़ྗ
17. ϝΠϯϓϩηε
     w &MFDUSPOͰόοΫΤϯυͷॲཧΛ࣮૷
     ΢Οϯυ΢ͷૢ࡞
    ΢Οϯυ΢ͷ࡞੒ɾΫϩʔζͳͲ
     $47ϑΝΠϧͷΦʔϓϯ
     ςʔϒϧͷ಺༰Λ$47ϑΝΠϧʹอଘ
    ‣ &MFDUSPOͷ*1$௨৴ͱ/PEFKTͷfsϞδϡʔϧʹΑ࣮ͬͯݱ 17
18. ϝΠϯϓϩηε
     18 ϑΝΠϧΦʔϓϯͷॲཧ ϝχϡʔόʔͷઃఆ
19. ۤ࿑ͨ͠఺ w 7VFͷίϯϙʔωϯτͱϦΞΫςΟϒγεςϜ
     ϑΝΠϧ͔ΒಡΈࠐΜͩ$47Λଈ࠲ʹςʔϒϧʹදࣔͰ͖ͳ͍
     ฤू಺༰͕ग़ྗ࣌ʹ൓ө͞Εͳ͍
     ࣮͸͋·Γ֮͑ͯͳ͍ʜ
    w &MFDUSPOͷ*1$௨৴ʹΑΔϨϯμϥʔͱϝΠϯϓϩηεͷ࿈ܞ
     Πϕϯτ͕͏·͘Ωϟονग़དྷͳ͍ 19
20. ·ͱΊ w FMFDUSPOWVFͰ͓खܰʹσεΫτοϓΞϓϦέʔγϣϯΛ࡞੒
     7VFKTͱ&MFDUSPOॳ৺ऀͰ΋࡞ΕΔ
    ‣ ؆୯ͱ͸ݴ͍ͬͯͳ͍
    w )BOETPOUBCMFΛ࢖͑͹&YDFMϥΠΫͳΞϓϦέʔγϣϯΛखܰʹ࡞੒
     )BOETPOUBCMFͷίϯϙʔωϯτʹσʔλΛloadData()Ͱ౉͚ͩ͢Ͱ0,
    ‣ ׳Εͳ͍ͱࠞཚ͠΍͍͢ 20
21. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠