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

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

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

90dbd6fb1763a4b5f7236b72cba16a58?s=128

Mitsuki Ogasahara

August 04, 2017
Tweet

Transcript

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

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

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

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

    w 7VFY w 7VFKTͷঢ়ଶ؅ཧ༻ϑϨʔϜϫʔΫɻ3FYVYͳͲͱಉ͡ϨΠϠʔ w 1BSTJNNPO w ύʔαʔίϯϏωʔλɻޙड़ ٕज़ελοΫ
  5. w FMFDUSPOWVFΛ࢖͑͹ίϚϯυͰηοτΞοϓ w ಈ͘ΞϓϦέʔγϣϯͷςϯϓϨΛ࡞ͬͯ͘ΕΔ ElectronͱVueͷ૬ੑ͕ྑ͔ͬͨ $ npm install -g vue-cli

    $ vue init simulatedgreg/electron-vue my-project
  6. w 3FBDUͰ͍͏3FEVYΈ͍ͨͳঢ়ଶ؅ཧϥΠϒϥϦ w ୯ҰετΞ w 3FEVYΑΓ΋7VFͷઃܭࢥ૝ʹد͍ͬͯΔ w HFUUFS DPNQVUFE Έ͍ͨͳ֓೦

    w ঢ়ଶมߋ͸ʮNVUBUJPOʯͰඇಉظ༻ͷʮBDUJPOʯ΋ ༻ҙ͞Ε͍ͯΔ w େن໛ͳ։ൃʹ΋͍͚ͦ͏ͳखԠ͑ VueͱVuex
  7. w &MFDUSPOͷঢ়ଶ؅ཧϞσϧ͸ɺ΢Οϯυ΢͝ͱʹ
 ಠཱ͍ͯ͠Δ w ྫ͑͹ʮઃఆʯͷը໘ͱʮλΠϜϥΠϯʯͷը໘͸ ঢ়ଶ ม਺ Λڞ༗͍ͯ͠ͳ͍ w JQDͱWVFYͰෳ਺ը໘ͷঢ়ଶڞ༗͕Ͱ͖Δ


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

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

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

  11. Ͱ͖ͨ΋ͷ

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

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

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