会社の開発合宿で Electron-vueで Slackクライアント作ってみた

Transcript

1. ձࣾͷ։ൃ߹॓Ͱ

   &MFDUSPOWVFͰ

   4MBDLΫϥΠΞϯτ࡞ͬͯΈͨ
   খּݪΈ͖ͭ / @yamitzky
   

   View Slide

2. w ͜ͷεϥΠυ͸ɺࣾ಺-5ࢿྉΛࣾ֎޲͚ʹΞϨϯδ
   ͨ͠΋ͷͰ͢
   w ιʔε΋ެ։͍ͯ͠ͳ͍ͷͰ͋·ΓࢀߟʹͳΒͳ͍
   ͔΋͠Ε·ͤΜ
   ஫ҙ
   

   View Slide

3. w 4MBDLΫϥΠΞϯτʹෆຬ͕͋ͬͨ
   w ࣗ෼͕ෳ਺ϓϩδΣΫτʹෳ਺νϟϯωϧʹ

   ·͕ͨͬͯΔͷ͕େ͖ͳཧ༝
   w &MFDUSPOͰσεΫτοϓΞϓϦ࡞ͬͯΈ͔ͨͬͨ
   w 7VFͱ7VFYΛͪΌΜͱ৮ͬͯΈ͔ͨͬͨ
   Ϟνϕʔγϣϯ
   

   View Slide

4. w &MFDUSPO
   w Ϛϧν04ͷΞϓϦέʔγϣϯΛ࡞ΔͨΊͷ044
   w ʮ1$޲͚ιϑτʯ͚ͩͲɺٕज़͸΢Σϒͱ/PEF
   w 7VFKT
   w Ϗϡʔ༻ϥΠϒϥϦɻ3FBDUͳͲͱಉ͡ϨΠϠʔ
   w 7VFY
   w 7VFKTͷঢ়ଶ؅ཧ༻ϑϨʔϜϫʔΫɻ3FYVYͳͲͱಉ͡ϨΠϠʔ
   w 1BSTJNNPO
   w ύʔαʔίϯϏωʔλɻޙड़
   ٕज़ελοΫ
   

   View Slide

5. w FMFDUSPOWVFΛ࢖͑͹ίϚϯυͰηοτΞοϓ
   w ಈ͘ΞϓϦέʔγϣϯͷςϯϓϨΛ࡞ͬͯ͘ΕΔ
   ElectronͱVueͷ૬ੑ͕ྑ͔ͬͨ
   $ npm install -g vue-cli
   $ vue init simulatedgreg/electron-vue my-project
   

   View Slide

6. w 3FBDUͰ͍͏3FEVYΈ͍ͨͳঢ়ଶ؅ཧϥΠϒϥϦ
   w ୯ҰετΞ
   w 3FEVYΑΓ΋7VFͷઃܭࢥ૝ʹد͍ͬͯΔ
   w HFUUFS DPNQVUFE
   Έ͍ͨͳ֓೦
   w ঢ়ଶมߋ͸ʮNVUBUJPOʯͰඇಉظ༻ͷʮBDUJPOʯ΋
   ༻ҙ͞Ε͍ͯΔ
   w େن໛ͳ։ൃʹ΋͍͚ͦ͏ͳखԠ͑
   VueͱVuex
   

   View Slide

7. w &MFDUSPOͷঢ়ଶ؅ཧϞσϧ͸ɺ΢Οϯυ΢͝ͱʹ

   ಠཱ͍ͯ͠Δ
   w ྫ͑͹ʮઃఆʯͷը໘ͱʮλΠϜϥΠϯʯͷը໘͸
   ঢ়ଶ ม਺
   Λڞ༗͍ͯ͠ͳ͍
   w JQDͱWVFYͰෳ਺ը໘ͷঢ়ଶڞ༗͕Ͱ͖Δ

   IUUQTHJUIVCDPNWVFKTWVFYJTTVFT
   ෳ਺ը໘ͷVuex
   

   View Slide

8. w 4MBDLه๏͔Β͍͍ײ͡ʹ)5.-Λੜ੒͢Δ044
   ͸ଘࡏ͠ͳ͍

   ˠࣗྗͰ4MBDLه๏ύʔαʔ͕ඞཁ
   w ʮύʔαʔΛ࡞ΔͨΊͷϥΠϒϥϦʯΛ࢖ͬͯ

   ָΛͨ͠

   ˠύʔαʔίϯϏωʔλ
   ύʔαʔίϯϏωʔλ
   

   View Slide

9. w ˣ4MBDLͷ6*ʹࣅ͍ͯΔ͕ɺࣗ࡞͍ͯ͠Δ
   ύʔαʔίϯϏωʔλ
   

   View Slide

10. w Ұ୴ਖ਼نදݱ͚ͩͰ͜Μͳײ͡Ͱ࡞ͬͨˣ
    Parsimmon
    

    View Slide

11. Ͱ͖ͨ΋ͷ
    

    View Slide

12. w ෳ਺νϟϯωϧ͔ΒͳΔʮάϧʔϓʯͰ·ͱΊͯݟ
    ΕΔ
    w ʮৗʹશը໘ʯʹͰ͖ΔͷͰɺ࡞ۀ͠ͳ͕Β΢Οϯ
    υ΢Λஔ͍͓͚ͯΔ
    w $44Λ͍͔ͭ͘ΧελϚΠζͰ͖Δ
    w Զ͕ߟ͑ͨ࠷ڧͷ4MBDLΫϥΠΞϯτ
    Ͱ͖ͨ΋ͷ
    

    View Slide

13. w 0"VUI
    Ͱ͖ͯͳ͍΋ͷ
    

    View Slide

14. w &MFDUSPOº7VFº7VFY͸Α͔ͬͨ
    w 8FCٕज़ͰΞϓϦ࡞Δͷ͸ࠓޙ΋૿͖͑ͯͦ͏
    ·ͱΊ
    

    View Slide