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

Front-End Tech Meetup by Yappli /2019.01.23 takuto aihara

173e83658fa172d1d51234ed009d05d6?s=47 takuto87
January 23, 2019

Front-End Tech Meetup by Yappli /2019.01.23 takuto aihara

173e83658fa172d1d51234ed009d05d6?s=128

takuto87

January 23, 2019
Tweet

Transcript

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

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

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

    ϑϩϯτΤϯυΤϯδχΞͱͯ͠೔ʑࣾ಺ͷ ߽ܼୡʹѱເͷΑ͏ͳཁٻΛ͞ΕΔ೔ʑΛݱ ࡏ·Ͱա͍ͯ͝͠Δɻ
  4. 7VFESBHBOETPSU Ծ w 'SPN5PͷσʔλͷΈฦͯ͘͠Δ׽Β͍͠࢓༷ 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. 4FTTJPO4UPSBHF w ESBHத͚ͩάϧʔϓ΍σʔλ΍JOEFYΛॻ͖ࠐΉʂ w ଞάϧʔϓͷΞΠςϜΛIPWFSͨ࣌͠ɺ͜͜Λࢀরʂ

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

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