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

Front-End Tech Meetup by Yappli /2019.01.23 takuto aihara

takuto87
January 23, 2019

Front-End Tech Meetup by Yappli /2019.01.23 takuto aihara

takuto87

January 23, 2019
Tweet

Other Decks in Programming

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