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

Be33a704f251c77162896ac5ba03e9ac?s=47 SAW
May 22, 2019

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

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

Be33a704f251c77162896ac5ba03e9ac?s=128

SAW

May 22, 2019
Tweet

Transcript

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

  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
  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
  4. WLBOTBJNFFUVQࢀՃྺ w ࢀՃճ਺ճ  ճ໨WLBOTBJ7VFKT/VYUKTNFFUVQ ‣ લճҰൠࢀՃ࿮ʹͯࢀՃ  ճ໨WLBOTBJ7VFKT/VYUKTNFFUVQ ‣

    ࠓճొஃ࿮ʹͯࢀՃ w 7VFKTྺ͓Αͦϲ݄  ΰϦΰϦͱ͸ॻ͍ͯͳ͍ 4
  5. ൃද֓ཁ 7VFKTॳ৺ऀ͕ FMFDUSPOWVFͰ࡞੒ͨ͠ σεΫτοϓΞϓϦέʔγϣϯΛ঺հ 5

  6. DTWFEJUPS w &YDFMϥΠΫͳ6*Ͱ$47ϑΝΠϧΛฤू͢Δπʔϧ  (JU)VCB[VLJQFOHVJODTWFEJUPS w /PEFKTWҎલͰಈ࡞  /PEFKTWܥͰ͸ಈ࡞͠ͳ͔ͬͨʜ 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. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠