Movatterモバイル変換


[0]ホーム

URL:


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

Turbolinksアレルギー患者に捧げるTurbo & Stimulusでの時短実装術 / ...

Avatar for lni_T lni_T
October 29, 2023

Turbolinksアレルギー患者に捧げるTurbo & Stimulusでの時短実装術 / Kaigi on Rails 2023

"Turbolinksアレルギー患者に捧げるTurbo & Stimulusでの時短実装術"
Kaigi on Rails 2023での登壇資料です。
https://kaigionrails.org/2023/talks/lni_T/

Turbolinksはどうしてもトラブルが多発するライブラリでしたが、
現代のHotwireはむしろ高速に開発することができるという例を紹介しています。

はてなブックマークする↓
https://b.hatena.ne.jp/entry?url=https://speakerdeck.com/lnit/kowakunai-hotwire-kaigi-on-rails-2023

Avatar for lni_T

lni_T

October 29, 2023
Tweet

More Decks by lni_T

See All by lni_T

Other Decks in Programming

See All in Programming

Featured

See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
507
140k
Embracing the Ebb and Flow
86
4.7k
Building Flexible Design Systems

Transcript

  1. 5VSCPMJOLTΞϨϧΪʔױऀʹ 
 ๋͛Δ5VSCP4UJNVMVT 
 Ͱͷ࣌୹࣮૷ज़ ,BJHJPO3BJMT !MOJ@5ϧχ

  2. ૣ଎Ͱ͕͢օ༷

  3. ʲ5VSCPMJOLTʳ ͱ͍͏໊લΛ͝ଘ஌Ͱ͔͢ʁ 🙋 👏

  4. 🤔

  5. ʲ5VSCPMJOLTʳ ͪΌΜͱ࢖͍ͬͯͨʁ 🙋 👏

  6. 🤯

  7. 5VSCPMJOLT  աڈ3BJMTඪ४ͩͬͨϥΠϒϥϦ  ը໘ભҠΛߴ଎Խ͢Δʂͱ͍͏΋ͷ  ϦϯΫΫϦοΫͳͲΛBKBYϦΫΤετʹஔ׵ͯ͠  Ϩεϙϯε͔ΒCPEZΛࠩ͠ସ͑Δ 

    KTDTT͸࠶ಡΈࠐΈ͠ͳ͍ͷͰߴ଎ʂ ͱ͍͏ౕ͍͕ͩ͢͝ʜʜ
  8. 5VSCPMJOLT  ࢖͍͜ͳ͢ͷ͕೉͍͠ϥΠϒϥϦͩͬͨʜʜ  +BWB4DSJQUͷΠϕϯτͷҰ෦͕ൃՐ͠ͳ͍ POMPBEͱ͔   K2VFSZͷϓϥάΠϯͱ૬ੑ͕ѱ͍ 

    ˠτϥϒϧͷଟ͔͞Β5VSCPMJOLTΛ֎͢ਓ͕ଓग़  ʮࠓ౓ͦ͜5VSCPMJOLTΛ࢖͍͜ͳͥ͢ʂʯͱ 
 ҙؾ༲ʑͱSBJMTOFXͨ͠ΤϯδχΞ͕ 
 ཌேʹແࢂͳ࢟Ͱൃݟ͞ΕΔ͜ͱ΋
  9. 5VSCPMJOLTͭΒ͍ʜ

  10. ͕ͩɺࠓ͸ҧ͏ʂ

  11. None
  12. None
  13. ໊લ͕ࣅͯΔʂා͍ʂ

  14. ʘා͘ͳ͍Αʗ

  15. ਃ͠஗Ε·͕ͨ͠

  16. ࣗݾ঺հ w5XJUUFS 9 *%!MOJ@5 w.FE1FFS 
 ɹαʔόʔαΠυϦʔυΤϯδχΞ w3VCZ3BJMTྺ೥ʙݱࡏ w3BJMTʙ3BJMT·Ͱܦݧ 


  17. None
  18. None
  19. ࠓ೔ͷηογϣϯͷഎܠ

  20. None
  21. None
  22. ଞ͔ࣾΒͷ ʮࣄۀɾγεςϜͷৡडʯ 
 Λߦ͍·ͨ͠

  23. ૝૾্ͷʮৡΓड͚Δʯ  ʮӡ༻อकΛҾ͖ܧ͙ͷ͔ͳʜʁʯ

  24. ࣮ࡍͷʮৡΓड͚Δʯ  αʔόʔ͸3BJMTͰϑϧεΫϥονͩʂ  %#΋Πν͔Βߏ଄Λݟ௚͠ʂ  Ϣʔβʔೝূج൫΋૊Έ௚ͧ͢ʂ  ࣄۀΛࣗ෼ͨͪͰਐΊ͍ͯͨ͘Ίʹ͸ 


    ౰વඞཁͳରԠͩΑͶʔ 

  25. αʔϏε͸ಈ͔ͨ͠·· ཪଆશ෦࡞Γ௚͢͜ͱʹ ͳͬͪΌͬͨ

  26. ΍Δ͜ͱ͕ଟ͍ͷʹ 
 ࣌ؒ͸଍Γͳ͍ʂ ࣌୹͠ͳ͖Όʜʂ

  27. ͱ͍͏͜ͱͰ

  28. ݱ৔Ͱ࣮ફʂ )PUXJSFΛ༻͍ͯ ։ൃΛՃ଎ͨ͠ํ๏

  29. )PUXJSF֓ཁ

  30. ݱ୅ͷϞμϯͳ8FCΞϓϦ  +40/Λૹड৴ͯ͠%0.Λߏங͢Δʂ αʔό ϑϩϯτΤϯυ ϑϨʔϜϫʔΫ +40/ ʘ%0.Λߏஙʗ

  31. )PUXJSFͷΞϓϩʔν  +40/Ͱ͸ͳ͘)5.-Λૹ৴͢Δ͜ͱͰɺ+BWB4DSJQUΛ͋·Γ࢖Θͣʹ 
 Ϟμϯͳ8FCΞϓϦέʔγϣϯΛߏங͢Δʂ αʔό )PUXJSF )5.- ʘ)5.-Λࠩ͠ସ͑ʗ

  32. ͬ͘͟Γػೳ঺հ  5VSCP+4Λॻ͔ͣʹ41"ϥΠΫͳΞϓϦΛ࡞ΕΔ  5VSCP%SJWF  վળ൛5VSCPMJOLTը໘ભҠ࣌ʹCPEZ͚ͩࠩ͠ସ͑  5VSCP'SBNF 

    UVSCPGSBNFλάͰғͬͨ෦෼ͷΈࠩ͠ସ͑  5VSCP4USFBN  ෳ਺Օॴͷ)5.-Λಉ࣌ʹࠩ͠ସ͑
  33. ͬ͘͟Γػೳ঺հ  4UJNVMVT  ܰྔ+4ϑϨʔϜϫʔΫ  5VSCPͰରԠ͖͠Εͳ੍͍ޚΛαϙʔτ͢Δ  +4ͱ)5.-Λ੾Γ཭͠ɺ੔ཧ͢ΔϨʔϧΛෑ͍ͯ͘ΕΔ 

    4USBEB  ͍ͭઌ೔ϦϦʔε͞Εͨ͹͔ΓͳͷͰ͕͢ɺ 
 ϞόΠϧΞϓϦ޲͚ͷػೳͷͨΊࠓ೔͸ׂѪ͠·͢🙇
  34. Ϧονͳ6*͕࡞ΕΔʂ

  35. ʮϦονʯͳͷʹʮ࣌୹ʯʁ ົͩͳʜ

  36. ࣮ફʂ)PUXJSF

  37. ˞஫ҙ˞  ҎԼͷ΋ͷ͕ಋೖ͞Ε͍ͯΔલఏͰ࿩͕ਐΈ·͢  )PUXJSF  ԿΒ͔ͷ$44ϑϨʔϜϫʔΫ  ຊηογϣϯͰ͸#VMNBΛ࠾༻͍ͯ͠·͢ 

    ྃ͝ঝԼ͍͞🙇
  38. Α͋͘Δཁ݅ͱղܾࡦ

  39. DSFBUFલͷ֬ೝը໘

  40. ֬ೝը໘ͱ͸ʁ  SBJMTͰ࣮૷͠΍͍͢جຊͷྲྀΕ OFX $SFBUFE 1045

  41. ֬ೝը໘ͱ͸ʁ  ҰํͰɺΑ͋͘Δػೳཁٻ OFX 1045 $SFBUFE ҎԼͷ಺༰Ͱ ࡞੒ͯ͠ ΑΖ͍͠Ͱ͔͢ʁ *%YYY!ZZZ

    18 1045 ֬ೝը໘ʂ
  42. ֬ೝը໘͍ͬͯͨ΁Μ  ೖྗ్தͷ৘ใ͸Ͳ͏อ࣋͢Δ͔ʁ  SBJMTͷWJFXͷΈͰ͸ը໘શମ͕ஔ͖׵Θͬͯ͠·͏ʜ  ֬ೝը໘Λදࣔ͢Δͱɺೖྗ͞Εͨ৘ใ͸ফ͑ͯ͠·͏ʂ  ରॲํ๏ 

    IJEEFO@ fi FMEͰอ࣋͠ଓ͚Δ  ࡞੒్தͷϨίʔυ΋อଘͰ͖ΔϞσϧΛ࣮૷͢Δ
  43. ֬ೝը໘͍ͬͯͨ΁Μ  ʮը໘Λͭ૿΍͚ͩ͢ʯͱ͸ݴ͏΋ͷͷʜ  ૢ࡞ϑϩʔ͕ෳࡶԽ͢Δʂ  ֬ೝը໘ͷʮΩϟϯηϧʯ͸Ͳ͏͢Δʜʁ  ֬ೝը໘ͷޙʹΤϥʔʹͳͬͨ৔߹͸Ͳ͏͢Δʜʁ

  44. )PUXJSFͰͲ͏࣌୹͢Δ͔

  45. ࣮ࡍʹΈͯΈΑ͏

  46. %FNP  Ϣʔβʔ͕ೖྗͨ͠৘ใΛ 
 ʮอଘલʹ֬ೝʯ͍ͤͨ͞ʜʂ

  47. %FNP  Ϣʔβʔ͕ೖྗͨ͠৘ใΛ 
 ʮอଘલʹ֬ೝʯ͍ͤͨ͞ʜʂ  ը໘ભҠΛͤͣʹ 
 ϞʔμϧμΠΞϩάΛදࣔ͢Ε͹໨తୡ੒ʂ

  48. ࣮૷ํ๏  ௨ৗͷೖྗϑΥʔϜʹՃ͑ͯ 
 μΠΞϩάදࣔ༧ఆ஍Λ༻ҙ͓ͯ͘͠  ˢ͜͜ʹۭͷEJWΛίοιϦઃஔ

  49. ࣮૷ํ๏  1045DPO fi SNͨ͠ࡍͷϨεϙϯεʹͯ 
 UVSCP@TUSFBNVQEBUF͢Δ͜ͱͰ%0.ࠩ͠ସ͑  μΠΞϩά෦෼ͷ)5.-ͷΈSFOEFS͢Δ DPO

    fi SNUVSCP@TUSFBNTMJN
  50. ࣮૷ํ๏  ೖྗ஋͸ϞʔμϧμΠΞϩά಺ʹ 
 IJEEFO@ fi FMEͰอ͓࣋ͯ͘͠

  51. ࣮૷ํ๏  ೖྗը໘ʹ໭͍ͨ͠৔߹͸ 
 ϞʔμϧμΠΞϩάΛ࡟আ͢Δ͚ͩʂ  ϑΥʔϜΛ࠶ඳը͍ͯ͠ͳ͍ͨΊ 
 ೖྗ஋͕࢒ͬͨ··ʹͳ͍ͬͯΔ

  52. Ԡ༻  Τϥʔදࣔʹ΋Ԡ༻Մೳ  ʮΤϥʔϝοηʔδʯ͚ͩSFOEFS͢Ε͹Α͍

  53. Կ͕خ͍͠ʁ  )PUXJSFແ͠ͷ৔߹ 
 Ϣʔβʔ͕ೖྗͨ͠ঢ়ଶΛ࠶ݱͯ͠ 
 Θ͟Θ͟࠶ඳը͢Δ࣮૷͕ඞཁʹͳΓ͕ͪ  ෳࡶͳೖྗϑΥʔϜͩͱ 


    ʮશͯͷϑΥʔϜΛ෮ݩͯ͠SFOEFSʯ 
 ͢Δ࣮૷޻਺͕ͲΜͲΜ;͘ΒΜͰ͍͘
  54. )PUXJSFͳ֬ೝը໘  Ϧονͳ6*Λఏڙʂ  ͞Βʹɺ7JFXͷ࣮૷ྔΛ࡟ݮʂ ࣌୹࣮૷ʂ

  55. ϑΥʔϜͷಈత੾Γସ͑

  56.  Α͋͘Δཁٻ  ͭͷϑΥʔϜΛมߋ͢ΔͱɺผͷϑΥʔϜ͕࿈ಈͯ͠੾ΓସΘΔ ϑΥʔϜͷಈత੾Γସ͑ νΣοΫϘοΫε νΣοΫϘοΫε બ୒ࢶ" બ୒ࢶ# બ୒ࢶ$

  57. ϑΥʔϜͷಈత੾Γସ͑  3BJMTͷWJFXͩͱʜ  )5.-Λෳ਺༻ҙ͓͍ͯͯ͠+BWB4DSJQUͰ੾Γସ͑Δ  ϑΥʔϜͷબ୒ࢶͳͲΛ"1*Ͱฦ͢Α͏ʹ͓͖ͯ͠ɺ 
 +BWB4DSJQUͰϦΫΤετˠཁૉΛஔ͖׵͑Δ 

    ͳͲͷରԠ͕ඞཁ  ͍ͣΕʹͯ͠΋ɺ+BWB4DSJQUͰϑϩϯτΤϯυΛߏங͢Δඞཁ͋Γʜ
  58. %FNP  ϑΥʔϜΛಈతʹ੾Γସ͍͑ͨʜʂ

  59. ࣮૷ํ๏  4UJNVMVTΛ͏·͘࢖͓͏ʂ

  60. ࣮૷ํ๏  EBUBDPOUSPMMFSଐੑΛࢦఆ͢Δͱ 
 ࣗಈͰ4UJNVMVT$POUSPMMFS͕Ξλον͞ΕΔ  EBUBBDUJPOଐੑΛࢦఆ͢Δͱ 
 DIBOHF΍JOQVUͱ͍ͬͨΠϕϯτʹର͢Δ 


    ൓ԠΛఆٛ͢Δ͜ͱ͕Ͱ͖Δ
  61. ࣮૷ํ๏  4UJNVMVT$POUSPMMFSʹ+4ͷॲཧΛఆٛͰ͖Δ  5VSCP4USFBNΛϦΫΤετ͢Δ͜ͱ΋Մೳʂ

  62. ࣮૷ํ๏  UVSCP@TUSFBNVQEBUFͰը໘ͷҰ෦෼͚ͩࠩ͠ସ͑  ͖ͬ͞ͷϞʔμϧͷྫͱಉ͡  બ୒ࢶ͚ͩࠩ͠ସ͑

  63. )PUXJSFͳಈత੾Γସ͑  Ϧονͳ6*Λఏڙʂ

  64. )PUXJSFͳಈత੾Γସ͑  Ϧονͳ6*Λఏڙʂ  ಛఆϖʔδʹ͔͠࡞༻͠ͳ͍+BWB4DSJQUʂ

  65. )PUXJSFͳಈత੾Γସ͑  Ϧονͳ6*Λఏڙʂ  ಛఆϖʔδʹ͔͠࡞༻͠ͳ͍+BWB4DSJQUʂ ࣌୹࣮૷ʂ

  66. )PUXJSFͰਝ଎ʹ࣮૷͢Δͧʂ 
 ͷίʔφʔͰͨ͠

  67. ຊ൪ར༻޲͚5JQT

  68. ͍ͭͲΜͳͱ͖ʹ 
 )PUXJSFΛ࠾༻͢Δͷ͔ʁ

  69. )PUXJSFͷಛ௃  )PUXJSFͷϝϦοτ  +BWB4DSJQUΛॻ͘࿑ྗ͸࠷খݶʹɺ41"͕Ͱ͖ΔΑ͏ʹͳΔʂ  αʔόʔαΠυʹϩδοΫΛू໿ɺ࠶ར༻͕Ͱ͖Δʂ  )PUXJSFͷσϝϦοτ 

    7VFKT΍3FBDU΄Ͳࡉ͔͍͜ͱ͸Ͱ͖ͳ͍  5VSCPʹΑΔը໘ߋ৽͸ຖճ௨৴͕ඞཁʹͳΔͧʂ  4UJNVMVT΋ෳࡶͳ%0.ૢ࡞͸αϙʔτ͍ͯ͠ͳ͍
  70. ͜ΜͳέʔεͰ࢖͍΍͍͢ʂ  ը໘ଆ͕)PUXJSFͰे෼࣮ݱͰ͖ΔαʔϏε  ࣾ಺޲͚ͷ؅ཧը໘ʹ࠾༻͢Δͱ͍͏ख΋  όοΫΤϯυΤϯδχΞ͕ଟ͍ϓϩδΣΫτ

  71. ࣄྫ  ๯಄ʹ঺հͨ͠ʮϠΫνΤʯ͸ϞόΠϧΞϓϦ͕ϝΠϯίϯςϯπ

  72. ࣄྫ  ๯಄ʹ঺հͨ͠ʮϠΫνΤʯ͸ϞόΠϧΞϓϦ͕ϝΠϯίϯςϯπ  8FCϖʔδ͕ඞཁͳػೳ͸Ұ෦ͷΈ ϢʔβʔೝূϖʔδͳͲ   )PUXJSFͰे෼࣮ݱՄೳʂ 

    ʮ%#Ҡߦʯʮೝূج൫ߏஙʯͳͲͷԑͷԼΛࢧ͑ΔλεΫ͕ଟ͍  αʔόଆ͸όοΫΤϯυॏࢹͷମ੍ͱͳΔʂ
  73. ϒϥ΢βࠩ෼

  74. ϒϥ΢βࠩ෼  )PUXJSF͸ʮ'FUDI"1*ʯͳͲͷ৽͍͠"1*Λར༻͓ͯ͠Γ 
 Ϟμϯϒϥ΢βͰ͔͠ಈ࡞͠ͳ͍  *OUFSOFU&YQMPSFS͕ఱणΛશ͏ͨ͠ࠓɺ 
 Ϟμϯϒϥ΢β͔Ͳ͏͔Λؾʹ͢Δඞཁ͸ͳ͍ʜʜ

  75. ϒϥ΢βࠩ෼  )PUXJSF͸ʮ'FUDI"1*ʯͳͲͷ৽͍͠"1*Λར༻͓ͯ͠Γ 
 Ϟμϯϒϥ΢βͰ͔͠ಈ࡞͠ͳ͍  *OUFSOFU&YQMPSFS͕ఱणΛશ͏ͨ͠ࠓɺ 
 Ϟμϯϒϥ΢β͔Ͳ͏͔Λؾʹ͢Δඞཁ͸ͳ͍ʜʜ ͸ͣͰ͕ͨ͠

  76. ཁ஫ҙʂJ04  ݹ͍4BGBSJͰ4UJNVMVT$POUSPMMFS͕ϩʔυͰ͖ͳ͍ใࠂ͋Γ  IUUQTHJUIVCDPNIPUXJSFETUJNVMVTSBJMTJTTVFT

  77. ཁ஫ҙʂJ04  J04ͰཁૉΛࢀর͢ΔʮUBSHFUʯػೳ͕࢖͑ͳ͍ʂτϥϒϧʹૺ۰  ެࣜͷه๏Ͱ͸ಈ͔ͳ͍ʜʜ

  78. ཁ஫ҙʂJ04  ͜ͷ໰୊͸ه๏Λม͑Δ͜ͱͰରॲՄೳ  ΋͠ಉ͡໰୊Λ౿ΜͩΒࢼͯ͠ΈͯͶ

  79. ཁ஫ҙʂJ04  .PCJMF4BGBSJͱ͍͏Ϟμϯϒϥ΢β͸ 
 όʔδϣϯ͕J04ࣗମͷόʔδϣϯʹґଘ͢Δͱ͍͏ 
 Ϟμϯͳઃܭʹͳ͍ͬͯΔ  ݹ͍J04ͷϢʔβʔ͸4BGBSJͷڍಈ΋ݹ͍·· 

    ೥ݱࡏɺݹ͍J04͸΅ͪ΅ͪαϙʔτΛ੾Γ͍͕ͨɺ 
 Ϣʔβʔར༻཰ͳͲ͔Β੾Εͳ͍έʔε΋ʜ
  80. ϒϥ΢βࠩ෼  ೦ͷͨΊɺαϙʔτ͍ͯ͠Δϒϥ΢β04Ͱ 
 ࠷΋ݹ͍؀ڥͰૣΊʹಈ࡞֬ೝΛ͓ͯ͘͠ͷ͕٢  ༨ܭͳख໭ΓΛݮΒͦ͏ʂ  ϒϥ΢βࠩ෼ͰࠔͬͯΔΈΜͳʂ஥ྑ͘͠·͠ΐ͏ʂ 

    աڈ೥͘Β͍ͣͬͱࠔͬͯΔ
  81. Ͳ͏ͯ͠΋ 5VSCPΛແޮԽ͍ͨ͠ʜ

  82. 5VSCPແޮԽͷӨڹ  ϑΥʔϜͳͲʹEBUBUVSCPGBMTFΛࢦఆ͢ΔͱແޮԽ͕Մೳ  ˞$VTUPN63-4DIFNF΁ͷભҠ͕'FUDI"1*Ͱ͸Ͱ͖ͳ͔ͬͨͨΊ 
 ɹಛఆϑΥʔϜͷΈ5VSCPແޮԽ͢Δ݁࿦ʹࢸΔʜʜ

  83. ࿈ଓTVCNJU͕๷ࢭͰ͖ͳ͘ͳΔ  ௨ৗ͸ϑΥʔϜૹ৴࣌ʹϘλϯ͕ 
 ࣗಈͰແޮԽ͞ΕΔ  UVSCPΛແޮԽ͢Δͱ 
 ͦͷػೳ͝ͱͳ͘ͳͬͯ͠·͏ʜ 

    ࿈ଓ1045͞Εͯ͠·͏ͳͲ 
 ผͷτϥϒϧΛݺͼ͕ͪ TVCNJU࣌ʹࣗಈແޮԽ
  84. ๷ࢭાஔ෮׆ͷّࣜ  1045ͨ͠ΒTVCNJUΛແޮԽ͢Δॲཧ͚ͩ෮׆ͤ͞Α͏  JOQVU<UZQFTVCNJU>Λ୳͠EJTBCMF͢ΔॲཧΛ࡞͓͖ͬͯʜ

  85. ๷ࢭાஔ෮׆ͷّࣜ  1045ͨ͠ΒTVCNJUΛແޮԽ͢Δॲཧ͚ͩ෮׆ͤ͞Α͏  JOQVU<UZQFTVCNJU>Λ୳͠EJTBCMF͢ΔॲཧΛ࡞͓͖ͬͯʜ  4UJNVMVT$POUSPMMFSΛΞλονͯ͠TVCNJU࣌ʹൃՐͤ͞Α͏

  86. ຊ൪ಋೖϊ΢ϋ΢ ͷ͝঺հͰͨ͠

  87. ͦΖͦΖ͓ผΕͷ࣌ؒ

  88. ͓ΘΓʹ  5VSCPMJOLTͷѱເ͸΋͏๨ΕΑ͏ʂ  5VSCP͸ౕ͍͍ʂ  )PUXJSFΛɺٕज़બఆͷબ୒ࢶʹೖΕͯΈͯ͸ʁ  ސ٬͸୭΋ݟͳ͍؅ཧը໘ɺ3FBDU΍7VFͷಋೖ͸ຊ౰ʹඞཁͰ͔͢ʜʁ 

    ͦΜͳը໘Ͱ΋ܧଓతʹϝϯςφϯεͰ͖·͔͢ʁ
  89. None
  90. ΞϑλʔΠϕϯτ΍Γ·͢ʂ IUUQTDPOOQBTTDPNFWFOU


[8]ページ先頭

©2009-2025 Movatter.jp