Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

SAW
May 22, 2019

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

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

SAW

May 22, 2019
Tweet

More Decks by SAW

Other Decks in Programming

Transcript

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

    4"8

    View Slide

  2. $(whoami)
    w ࢯ໊Ճ౻फҰ࿠ ࡀ

    Ѫ஌ग़਎ɾେࡕࡏॅ
    ϋϯυϧωʔϜ4"8
    ‣ ϗϥʔ͸ۤखͳͷͰɺөըl4"8zΛݟͨ͜ͱͳ͍
    4/4ΞΧ΢ϯτ
    ‣ 5XJUUFS!B[[email protected]
    ‣ (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ϑΝΠϧͷจࣈίʔυ͸[email protected]+*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