Front-End Tech Meetup by Yappli /2019.01.23 takuto aihara

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide