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

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

Transcript

1. 7VFKTॳ৺ऀ͕FMFDUSPOWVFͰ
   σεΫτοϓΞϓϦέʔγϣϯΛ
   ࡞੒ͨ͠࿩
   WLBOTBJ7VFKT/VYUKTNFFUVQ
   
   4"8
   

   View Slide

2. $(whoami)
   w ࢯ໊Ճ౻फҰ࿠ ࡀ
   
   Ѫ஌ग़਎ɾେࡕࡏॅ
   ϋϯυϧωʔϜ4"8
   ‣ ϗϥʔ͸ۤखͳͷͰɺөըl4"8zΛݟͨ͜ͱͳ͍
   4/4ΞΧ΢ϯτ
   ‣ 5XJUUFS!B[VLJ@FBUFS
   ‣ (JU)VCB[VLJQFOHVJO
   w ॴଐגࣜձࣾ.4&/ ೥໨
   
   2
   Let’s play a game.
   FreeBSD
   macOS
   Vue.js
   Linux
   

   View Slide

3. .BOQBHFPG4"8
   w export EDITOR=vim
   w 04NBD04 6CVOUV-JOVY 'SFF#4%
   ֶੜ࣌୅͸6/*9-JOVY؀ڥ͕ϝΠϯ
   ‣ γΣϧ͸ओʹCBTI
   ࢓ࣄͷ։ൃ؀ڥ͸8JOEPXT
   w ϓϩάϥϛϯάݴޠ1FSM 1)1 +BWB4DSJQU
   ϑϨʔϜϫʔΫ͸-BSBWFMͱ7VFKT
   3
   

   View Slide

4. WLBOTBJNFFUVQࢀՃྺ
   w ࢀՃճ਺ճ
   ճ໨WLBOTBJ7VFKT/VYUKTNFFUVQ
   ‣ લճҰൠࢀՃ࿮ʹͯࢀՃ
   ճ໨WLBOTBJ7VFKT/VYUKTNFFUVQ
   ‣ ࠓճొஃ࿮ʹͯࢀՃ
   w 7VFKTྺ͓Αͦϲ݄
   ΰϦΰϦͱ͸ॻ͍ͯͳ͍
   4
   

   View Slide

5. ൃද֓ཁ
   7VFKTॳ৺ऀ͕
   FMFDUSPOWVFͰ࡞੒ͨ͠
   σεΫτοϓΞϓϦέʔγϣϯΛ঺հ
   5
   

   View Slide

6. DTWFEJUPS
   w &YDFMϥΠΫͳ6*Ͱ$47ϑΝΠϧΛฤू͢Δπʔϧ
   (JU)VCB[VLJQFOHVJODTWFEJUPS
   w /PEFKTWҎલͰಈ࡞
   /PEFKTWܥͰ͸ಈ࡞͠ͳ͔ͬͨʜ
   w ґଘύοέʔδͷ੬ऑੑ͸ະղܾ
   શવอक͍ͯ͠ͳ͍ʜ
   6
   

   View Slide

7. ͳΜͰ࡞ͬͨͷ
   w େֶӃੜ࣌୅ʹ5"ͷۀ຿Ͱ࠾఺݁ՌΛ$47ϑΝΠϧʹهड़
   $47ϑΝΠϧͷจࣈίʔυ͸4IJGU@+*4
   w େֶͷNBD04ͷ&YDFMͰฤूͯ͠อଘ͢Δͱ೔ຊޠ͕l_zʹ
   ݪҼϩέʔϧΛӳޠʹ͍͔ͯͨ͠ΒͬΆ͍ʜ
   /VNCFSTΛ࢖͏ͱσϑΥϧτ͕65'ͳͷͰจࣈԽ͚
   w $47Λฤू͢Δπʔϧ͕ཉ͍͠
   ࣗ࡞͠Α͏
   7
   

   View Slide

8. ผͷํ๏͕͋ͬͨͷͰ͸
   w ϩέʔϧΛ೔ຊޠʹઃఆ͢Ε͹ྑ͍ͷͰ͸
   ׶͑ͯӳޠʹ͍ͯ͠Δ͔Βม͑ͨ͘ͳ͍
   w /VNCFST΍-JCSF0⒏DFͱ͔୅༻ͨ͠Β͍͔Μͷ͔
   Θ͟Θ͟5"ͷͨΊ͚ͩʹσϑΥϧτͷจࣈίʔυΛม͑ͨ͘ͳ͍
   Θ͟Θ͟5"ͷͨΊ͚ͩʹ-JCSF0⒏DFͱ͔ೖΕΔͷ໘౗͍͘͞
   8
   

   View Slide

9. ࡞Δํ͕ΑͬΆͲखؒͰ͸
   w ݐલ
   7VFKTͷ࣮ફ
   ‣ ͔ͤͬ͘झຯͰษڧ͍͔ͯͨ͠Β׆༻͔ͨͬͨ͠
   &MFDUSPOΛ࠾༻ͯ͠ϚϧνϓϥοτϑΥʔϜԽ
   ‣ NBD04͚ͩͰͳ͘ɺ8JOEPXT΍-JOVYͰ΋ར༻Մೳʹ
   w ຊԻ
   ࡞Γ͍͔ͨΒ࡞ͬͨ
   ‣ ࣮૷ָ͍͠
   9
   

   View Slide

10. ࢖༻͢ΔϥΠϒϥϦ
    w σεΫτοϓ؀ڥͷ։ൃ&MFDUSPO
    w +BWB4DSJQUϑϨʔϜϫʔΫ7VFKT
    w &YDFMϥΠΫͳ6*)BOETPOUBCMF
    w $47ύʔαQBQBQBSTF
    w จࣈίʔυͷࣗಈ൑ผFODPEJOHKBQBOFTF
    10
    

    View Slide

11. ओͳػೳ
    w $47ΛಡΈࠐΜͰ&YDFMϥΠΫͳςʔϒϧͱͯ͠දࣔ
    จࣈίʔυ΋ࣗಈ൑ผ
    w $47Λ&YDFMϥΠΫͳςʔϒϧΛ࢖ͬͯฤू
    w ฤूͨ͠ςʔϒϧ͔Β$47ʹग़ྗ
    จࣈίʔυΛࢦఆͯ͠ग़ྗ΋Մೳ
    11
    

    View Slide

12. ओͳػೳͷ֓ཁਤ
    12
    

    View Slide

13. $47ϑΝΠϧͷΦʔϓϯ
    w ϝΠϯϓϩηε
    બ୒͞ΕͨϑΝΠϧͷ಺༰Λऔಘ
    ‣ fsϞδϡʔϧͷreadFileSync()Λར༻
    *1$௨৴Ͱ7VFʹϑΝΠϧͷத਎ΛૹΔ
    w Ϩϯμϥʔϓϩηε
    $47ͷςΩετ͔Βσʔλߏ଄ʹม׵ͯ͠ಡΈࠐΈ
    ‣ QBQBQBSTFͷparse()ϝιουͰ$47Λ഑ྻʹύʔε
    ‣ )BOETPOUBCMFͷloadData()ϝιουͰ഑ྻΛςʔϒϧʹׂΓ౰ͯ
    13
    

    View Slide

14. ฤू݁ՌΛ$47ϑΝΠϧʹอଘ
    w Ϩϯμϥʔϓϩηε
    ςʔϒϧͷߏ଄͔Β$47ςΩετʹม׵
    ‣ QBQBQBSTFͷunparse()ϝιουͰςΩετԽ
    *1$௨৴ͰϝΠϯϓϩηεʹ಺༰Λૹ৴
    w ϝΠϯϓϩηε
    $47ϑΝΠϧͱͯ͠อଘ
    ‣ fsϞδϡʔϧͷwriterStream.write()ʹΑͬͯϑΝΠϧʹग़ྗ
    14
    

    View Slide

15. Ϩϯμϥʔϓϩηε
    
    w 7VFKTͰϑϩϯτΤϯυͷॲཧΛ࣮૷
    $47ϑΝΠϧͱ+BWB4DSJQUͰѻ͏จࣈྻͷΤϯίʔυͷ૬ޓม׵
    ‣ FODPEJOHKBQBOFTFΛར༻
    $47ͱςʔϒϧͷίϯϙʔωϯτ༻ͷσʔλߏ଄ͷ૬ޓม׵
    ‣ 1BQBQBSTFͷར༻
    ςʔϒϧͷॲཧ͸)BOETPOUBCMFʹؙ౤͛
    15
    

    View Slide

16. Ϩϯμϥʔϓϩηε
    
    16
    $47ͱσʔλߏ଄ͷ૬ޓม׵
    $47σʔλͷಡΈࠐΈͱ$47σʔλ΁ͷग़ྗ
    

    View Slide

17. ϝΠϯϓϩηε
    
    w &MFDUSPOͰόοΫΤϯυͷॲཧΛ࣮૷
    ΢Οϯυ΢ͷૢ࡞ ΢Οϯυ΢ͷ࡞੒ɾΫϩʔζͳͲ
    
    $47ϑΝΠϧͷΦʔϓϯ
    ςʔϒϧͷ಺༰Λ$47ϑΝΠϧʹอଘ
    ‣ &MFDUSPOͷ*1$௨৴ͱ/PEFKTͷfsϞδϡʔϧʹΑ࣮ͬͯݱ
    17
    

    View Slide

18. ϝΠϯϓϩηε
    
    18
    ϑΝΠϧΦʔϓϯͷॲཧ
    ϝχϡʔόʔͷઃఆ
    

    View Slide

19. ۤ࿑ͨ͠఺
    w 7VFͷίϯϙʔωϯτͱϦΞΫςΟϒγεςϜ
    ϑΝΠϧ͔ΒಡΈࠐΜͩ$47Λଈ࠲ʹςʔϒϧʹදࣔͰ͖ͳ͍
    ฤू಺༰͕ग़ྗ࣌ʹ൓ө͞Εͳ͍
    ࣮͸͋·Γ֮͑ͯͳ͍ʜ
    w &MFDUSPOͷ*1$௨৴ʹΑΔϨϯμϥʔͱϝΠϯϓϩηεͷ࿈ܞ
    Πϕϯτ͕͏·͘Ωϟονग़དྷͳ͍
    19
    

    View Slide

20. ·ͱΊ
    w FMFDUSPOWVFͰ͓खܰʹσεΫτοϓΞϓϦέʔγϣϯΛ࡞੒
    7VFKTͱ&MFDUSPOॳ৺ऀͰ΋࡞ΕΔ
    ‣ ؆୯ͱ͸ݴ͍ͬͯͳ͍
    w )BOETPOUBCMFΛ࢖͑͹&YDFMϥΠΫͳΞϓϦέʔγϣϯΛखܰʹ࡞੒
    )BOETPOUBCMFͷίϯϙʔωϯτʹσʔλΛloadData()Ͱ౉͚ͩ͢Ͱ0,
    ‣ ׳Εͳ͍ͱࠞཚ͠΍͍͢
    
    20
    

    View Slide

21. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide