Front-End Tech Meetup by Yappli /2019.01.23 takuto aihara

Transcript

1. Vue.js্ͰDragˍDrop౳ɺ ௫ΜͩΓಈ͔ͨ͠Γ͢Δ΋ͷΛΠν͔Β࣮૷ͨ͠࿩

2. ࣗݾ঺հ ໊લ
   
   ૬ݪ޼ਓ
   ৬छ
   
   ϑϩϯτΤϯυΤϯδχΞ
   ಘҙ
   
   ΠϯλϥΫγϣϯ࣮૷
   ڵຯ
   
   &MFDUSPO
   8FFL
   झຯ
   
   ྉཧͱ''
   ݂ӷ
   
   ܕ
   ࡀ

3. ུྺ
   ೥݄
   ๺ւಓ৘ใେֶ
   ଔۀ
   ೥݄̐
   גࣜձࣾ"#$
   ৽ଔೖࣾ
   ༡ٕػͷα΢ϯυΫϦΤΠλʔͱͯ͠࡞ۂ΍ ΞςϨίσΟϨΫλʔɺޮՌԻ࡞੒Λߦ͏ɻ
   ೥
   גࣜձࣾ"45"3
   ೖࣾ
   8FCσβΠφʔ)5.-ίʔμʔͱͯ͠ୈೋ৽ ଔೖࣾɻͦͷޙK2VFSZ౳ͷ࣮૷ܥʹڵຯ͕Ҡ ΓϑϩϯτΤϯυΤϯδχΞʹɻ
   ೥
   גࣜձࣾϠϓϦ
   ೖࣾ
   

   ϑϩϯτΤϯυΤϯδχΞͱͯ͠೔ʑࣾ಺ͷ ߽ܼୡʹѱເͷΑ͏ͳཁٻΛ͞ΕΔ೔ʑΛݱ ࡏ·Ͱա͍ͯ͝͠Δɻ

4. 7VF
   ESBH
   BOE
   TPSU Ծ w 'SPN
   5PͷσʔλͷΈฦͯ͘͠Δ׽Β͍͠࢓༷
   w ฒͼସ͑ɺผάϧʔϓ͔Βͷड͚ೖΕɺผάϧʔϓ΁ͷૹ Γɺड͚ೖΕͱฒͼସ͑ͷಈ࡞มߋ౳ࡉ΍͔ͳઃఆ͕Մ ೳ
   w ಋೖࣗମ͸JNQPSUͯ͠XSBQ͢Δ͚ͩʂ

5. ͳΜͰΘ͟Θ͟಺੡ʁ

6. w ௫ΜͰΔঢ়ଶͩͱγϟυ΢͕ݟ੾ΕΔʢࣗ༝ʹ͍ͨ͠
   w ଞάϧʔϓ΁ͷ%%͕Ͱ͖Δ͜ͱ
   w ࣗάϧʔϓ಺ͰͷೖΕସ͑ͱɺଞάϧʔϓ͔Βͷड͚ೖΕ Λผಈ࡞ʹͰ͖Δࣄ
   w ϓϥάΠϯͩͱରԠग़དྷͳ͍ɻ࡞ͬͯɻ

7. %%ͷ֓೦Λ෼ղ ௫Ή ௫Μͩ΋ͷΛ
   ಈ͔͢ ௫ΜͰ
   ಈ͔ͨ͠΋ͷΛ
   ཭͢

8. ௫Ή w ௫Ήͱ͸伱ؒ࣌ؒ
   w .PVTF%PXOͱ.PVTF6Qͷ伱ؒ
   w .PVTF%PXO͸௫Ήର৅ʹ͚ͩ
   w .PVTF6QΛड͚෇͚Δൣғ͸ը໘શମ

9. ௫Μͩ΋ͷΛಈ͔͢ w .PVTF.PWFͰ࠲ඪΛߋ৽͚ͭͮ͠Δ
   w .PVTF.PWF͸ը໘શମͰड͚෇͚Δ
   w ௫Μͩର৅ΛpYʹ͠ɺ5PQɺ-FGUΛߋ৽
   w ͜ͷࡍIPWFSͨ͠ΞΠςϜͷJOEFYΛߋ৽͠ଓ͚Δ

10. ௫ΜͰಈ͔ͨ͠΋ͷΛ཭͢ w NPVTFNPWF΍NPVTFVQ౳ͷΠϕϯτΛSFNPWF
    w GSPNͱUPͷσʔλΛฦ͢ʂ

11. ΤϦΞ͔Βग़ͨঢ়ଶͰ NPVTFVQ͢ΔͱɺϦηοτʂ ௫Μͩ΋ͷΛಈ͔͢

12. ESPQΤϦΞͷදࣔ w ର৅ͷXJEUI IFJHIUΛίϐʔͯ͠લޙʹ഑ஔ
    w جຊతʹϨϯμϦϯά͞Εͯͳ͍͕ɺ৚݅Ͱग़ݱ

13. ESPQΤϦΞͷදࣔ Ϛ΢εಈ࡞ͷํ޲্͕ԼͲ͔ͬͪͰදࣔΛৼΓ෼͚ʂ
    ͔ͭલͷ*OEFY͕໭͖ͬͯͨͷ͔ɺ͕͖͋ͬͯͨͷ͔

14. άϧʔϓผ%% w ൚༻తʹ͍ͨ͠ʂ
    w ͳͷͰTUPSFͱ͔͸ར༻ͨ͘͠ͳ͍ʂ
    w ୭Ͱ΋࢖͑ΔΑ͏ʹ͍ͨ͠ʂ

15. 4FTTJPO
    4UPSBHF w ESBHத͚ͩάϧʔϓ΍σʔλ΍JOEFYΛॻ͖ࠐΉʂ
    w ଞάϧʔϓͷΞΠςϜΛIPWFSͨ࣌͠ɺ͜͜Λࢀরʂ

16. ͔ͤͬ͘൚༻త
    ʹ࡞ͬͨͷͰ

17. ΦʔϓϯιʔεԽ w ޙ೔ϒϩάʹͯৄࡉͱຊϓϥάΠϯͷ։ൃܭըॻ͖·͢
    w ۙ೔தʹOQN
    JOTUBMMͰ͖ΔΑ͏ʹ͠·͢ʂ