$30 off During Our Annual Pro Sale. View Details »

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

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

Mitsuki Ogasahara

August 04, 2017
Tweet

More Decks by Mitsuki Ogasahara

Other Decks in Technology

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