Alternative rails-ujs - Speaker Deck

Alternative rails-ujs

by Taketo Takashima

Slide 1

Slide 1 text

"MUFSOBUJWFSBJMTVKT 5IV 1SPQPTBMTPO3BJMT 5BLFUP5BLBTIJNB !UBLFUP

Slide 2

Slide 2 text

"CTUSBDU

Slide 3

Slide 3 text

SBJMTVKT w ֬ೝμΠΞϩά΍%&-&5&ϦΫΤετͳͲΛ؆୯ʹ࣮ݱͰ͖Δ +BWB4DSJQUͷϥΠϒϥϦ IUUQTHJUIVCDPNSBJMTSBJMTCMPCTUBCMFBDUJPOWJFXBQQKBWBTDSJQU

Slide 4

Slide 4 text

SBJMTVKTͷ࢖͍ํ w )5.-ʹಛఆͷEBUBଐੑΛ͚ͭΔ͜ͱͰ+BWB4DSJQUΛॻ͔ͳͯ͘΋ ৼΔ෣͍ΛมߋՄೳ w ֬ೝμΠΞϩά w BλάͰ(&5Ҏ֎ͷ)551ϦΫΤετૹ৴ w ྫ%&-&5&ϦΫΤετ = link_to "Destroy", task_path(@task), method: :delete = link_to "Link", task_path(@task), data: { con fi rm: "ϝοηʔδ" }

Slide 5

Slide 5 text

SBJMTVKTͷྺ࢙ w KRVFZ@VKT KRVFSZSBJMTHFN w 3BJMT ೥ Ҏલ͔ΒσϑΥϧτͰೖΔHFN w SBJMTVKTHFN w K2VFSZͷґଘΛແͨ͘͠SBJMTVKTʹҠߦ w 3BJMT ͔ΒσϑΥϧτ w !SBJMTVKTOQN w 3BJMT ͔ΒXFCQBDLFSͷಋೖʹ൐͍OQNԽ w SBJMTVKTඇਪ঑ w 3BJMT ͔ΒSBJMTVKT͸ඇਪ঑ɻ5VSCP͕σϑΥϧτʹɻ w SBJMTVKTഇࢭ w SBJMTSBJMTϨϙδτϦͷNBJOϒϥϯν͔Β࡟আ w 3BJMTϦϦʔε w !SBJMTVKTWҎ߱͸ϦϦʔε͞Εͳ͍ w 3BJMT&P- w !SBJMTVKTWY΋Ҏ߱ϦϦʔε͞Εͳ͍

Slide 6

Slide 6 text

SBJMTVKTEJF w 3BJMT Ͱ׬શʹഇࢭ w 3BJMT&P- લʹҠߦ͕ඞཁ IUUQTHJUIVCDPNSBJMTSBJMTQVMM

Slide 7

Slide 7 text

SBJMTVKTҠߦํ๏ w 5VSCP )PUXJSF ΁ͷҠߦ w 3BJMT$PSF5FBNਪ঑ͷҠߦઌ w ޓ׵ϥΠϒϥϦ΁ͷҠߦ w طଘͷޓ׵ϥΠϒϥϦͷར༻ NSVKTBMUVKTOQN w SBJMTVKTͷܧଓར༻ w !SBJMTVKTOQNWYͷܧଓར༻΋Մೳ w ࠓޙϝϯςφϯε ੬ऑੑରԠͳͲ ͞Εͳ͍ϦεΫ͋Γ

Slide 8

Slide 8 text

5VSCP )PUXJSF ΁ͷҠߦ w 3BJMT$PSF5FBNਪ঑ͷҠߦઌ w ͨͩ͠ɺطଘͷ3BJMTΞϓϦͷҠߦ͸େม͔΋ w 41" 4JOHMF1BHF"QQMJDBUJPO తͳڍಈʹมΘΔ w ్தͰҠߦ͢Δͷ͸Өڹ͕େ͖͍ w 7JFXEBUBଐੑมߋ NFUIPEDPO fi SN w ·ͨ͸CVUUPO@UPʹஔ͖׵͑ = link_to "Destroy", task_path(@task), method: :delete = link_to "Destroy", task_path(@task), data: { turbo_method: :delete } ࢀߟIUUQTEFWUPUIPNBTWBOIPMEFSIPXUPNJHSBUFSBJMTVKTUPIPUXJSFUVSCPIEI

Slide 9

Slide 9 text

ޓ׵ϥΠϒϥϦ΁ͷҠߦ NSVKT w NSVKT w IUUQTNSVKTOFUMJGZBQQ w SBJMTVKTޓ׵ϥΠϒϥϦ w ͋ͱͪΐͬͱ͕ΠϚΠν w 3BJMTͰҰ෦ಈ͔ͳ͍ڍಈ͋ Γ w ϦϦʔεޙϝϯς͞Ε͍ͯͳ͍ w ଞͷޓ׵ϥΠϒϥϦͷબ୒ࢶ͸ҙ֎ ͱগͳ͍

Slide 10

Slide 10 text

SBJMTVKTͷܧଓར༻ w 3BJMTҎ߱Ͱ΋!SBJMTVKTOQNWYͷܧଓར༻΋Մೳ w ྫNBTUPEPO W 3BJMT!SBJMTVKT w ࠓޙϝϯςφϯε͞Εͳ͍ w 3BJMT͕Ͱ&P- w ੬ऑੑରԠ͞Εͳ͍ϦεΫ͋Γ

Slide 11

Slide 11 text

ࣗ෼ͷҠߦઌͷݕ౼ w 5VSCP )PUXJSF ΁ͷҠߦ w BQQWJFXTͷมߋ͕ଟ͗ͯ͢5VSCP΁ͷҠߦ͸ແཧͦ͏ɻɻɻ w ޓ׵ϥΠϒϥϦ΁ͷҠߦ w NSVKTΛࢼͯ͠Έ͚ͨͲಈ͔ͳ͍έʔε͕͋ͬͨΓɺϝϯς͞Εͯͳ ͍ɻɻɻ w SBJMTVKTͷܧଓར༻ w ࠷ޙͷखஈ͸͜Ε͔ͳ͊ w ޓ׵ϥΠϒϥϦࣗ࡞ /FX w ͳ͍ͳΒ࡞Ε͹͍͍

Slide 12

Slide 12 text

BMUVKTOQN w ࡞Γ·ͨ͠ IUUQTHJUIVCDPNUBLFUPBMUVKT IUUQTXXXOQNKTDPNQBDLBHFBMUVKT

Slide 13

Slide 13 text

BMUVKTOQNͷػೳ w Ҡ২͓ͨ͠΋ͳػೳ w ֬ೝμΠΞϩά w (&5Ҏ֎ͷ)551ϦΫΤετૹ৴ w 4VCNJUϘλϯͷμϒϧΫϦοΫ๷ࢭ w ඇରԠ w EBUBSFNPUFଐੑΛ࢖ͬͨ"KBYϦΫΤετ w ಠࣗػೳ w ػೳ୯ҐͰͷར༻ ྫ֬ೝμΠΞϩάͷΈ࢖͍͍ͨ

Slide 14

Slide 14 text

BMUVKTΛ࢖ͬͨҠߦํ๏ w OQNΛ௥Ճ w SBJMTVKTΛݺͼग़͍ͯ͠ΔՕॴΛҎԼͷΑ͏ʹมߋ w BQQWJFXTมߋෆཁʂʂ // your-app.js + import AltUjs from "alt-ujs" + AltUjs.start() - import Rails from "@rails/ujs" - Rails.start() $ npm install alt-ujs

Slide 15

Slide 15 text

BMUVKTΛ࢖ͬͨҠߦࣄྫ w 3BJMTΞοϓσʔτͱ߹Θͤͯࣗ෼ͷ3BJMTΞϓϦʹಋೖ w ͔Β໰୊ͳ͘ಈ࡞த

Slide 16

Slide 16 text

·ͱΊ w SBJMTVKTͷҠߦํ๏ w )PUXJSF 5VSCP ΁ͷҠߦ w ޓ׵ϥΠϒϥϦ΁ͷҠߦ w SBJMTVKTͷܧଓར༻ w BMUVKTΛ࢖ͬͨҠߦํ๏ w SBJMTVKTͷҠߦઌʹࠔ͍ͬͯΔํ͸ɺBMUVKTΛͥͻ࢖ͬͯΈͯͩ͘͞ ͍ʂ

Slide 17

Slide 17 text

IUUQTSFHJPOBMSVCZLBJHJPSHIPLVSJLV ൃදऀืूதʂ ·Ͱ

Slide 18

Slide 18 text

GVLVJSC,BJHJPO3BJMTײ૝ઓ w GVLVJSCͰ,BJHJPO3BJMTͷײ૝ઓ ΦϯϥΠϯ ΍Γ·͢ʂ w 4BU IUUQTGVLVJSCDPOOQBTTDPNFWFOU