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

Transcript

1. 1.

   ձࣾͷ։ൃ߹॓Ͱ
 &MFDUSPOWVFͰ
 4MBDLΫϥΠΞϯτ࡞ͬͯΈͨ খּݪΈ͖ͭ / @yamitzky

2. 2.

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

3. 3.

   w 4MBDLΫϥΠΞϯτʹෆຬ͕͋ͬͨ
   w ࣗ෼͕ෳ਺ϓϩδΣΫτʹෳ਺νϟϯωϧʹ
 ·͕ͨͬͯΔͷ͕େ͖ͳཧ༝
   w &MFDUSPOͰσεΫτοϓΞϓϦ࡞ͬͯΈ͔ͨͬͨ
   w 7VFͱ7VFYΛͪΌΜͱ৮ͬͯΈ͔ͨͬͨ Ϟνϕʔγϣϯ

4. 4.

   w &MFDUSPO
   w Ϛϧν04ͷΞϓϦέʔγϣϯΛ࡞ΔͨΊͷ044
   w ʮ1$޲͚ιϑτʯ͚ͩͲɺٕज़͸΢Σϒͱ/PEF
   w 7VFKT
   w Ϗϡʔ༻ϥΠϒϥϦɻ3FBDUͳͲͱಉ͡ϨΠϠʔ
   

   w 7VFY
   w 7VFKT
   ͷঢ়ଶ؅ཧ༻ϑϨʔϜϫʔΫɻ3FYVYͳͲͱಉ͡ϨΠϠʔ
   w 1BSTJNNPO
   w ύʔαʔίϯϏωʔλɻޙड़ ٕज़ελοΫ
5. 5.

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

   $ vue init simulatedgreg/electron-vue my-project
6. 6.

   w 3FBDU
   Ͱ͍͏
   3FEVY
   Έ͍ͨͳঢ়ଶ؅ཧϥΠϒϥϦ
   w ୯ҰετΞ
   w 3FEVY
   ΑΓ΋
   7VF
   ͷઃܭࢥ૝ʹد͍ͬͯΔ
   w HFUUFS DPNQVUFE Έ͍ͨͳ֓೦
   

   w ঢ়ଶมߋ͸ʮNVUBUJPOʯͰඇಉظ༻ͷʮBDUJPOʯ΋ ༻ҙ͞Ε͍ͯΔ
   w େن໛ͳ։ൃʹ΋͍͚ͦ͏ͳखԠ͑ VueͱVuex
7. 7.

   w &MFDUSPOͷঢ়ଶ؅ཧϞσϧ͸ɺ΢Οϯυ΢͝ͱʹ
 ಠཱ͍ͯ͠Δ
   w ྫ͑͹ʮઃఆʯͷը໘ͱʮλΠϜϥΠϯʯͷը໘͸ ঢ়ଶ ม਺ Λڞ༗͍ͯ͠ͳ͍
   w JQDͱWVFYͰෳ਺ը໘ͷঢ়ଶڞ༗͕Ͱ͖Δ


   IUUQTHJUIVCDPNWVFKTWVFYJTTVFT ෳ਺ը໘ͷVuex
8. 8.

   w 4MBDLه๏͔Β͍͍ײ͡ʹ)5.-Λੜ੒͢Δ044 ͸ଘࡏ͠ͳ͍
 ˠ
   ࣗྗͰ
   4MBDL
   ه๏ύʔαʔ͕ඞཁ
   w ʮύʔαʔΛ࡞ΔͨΊͷϥΠϒϥϦʯΛ࢖ͬͯ
 ָΛͨ͠
 ˠ
   ύʔαʔίϯϏωʔλ ύʔαʔίϯϏωʔλ

9. 9.

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

10. 10.

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

11. 11.

    Ͱ͖ͨ΋ͷ

12. 12.

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

    Ͱ͖ͨ΋ͷ
13. 13.

    w 0"VUI
    Ͱ͖ͯͳ͍΋ͷ

14. 14.

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