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

Hotwire光の道とStimulus

 Hotwire光の道とStimulus

Kaigi on Rails 2024 のトーク資料です。Hotwireを活用するための指針をStimulusの側から整理しています。

Avatar for Yasuko Ohba

Yasuko Ohba

October 26, 2024
Tweet

More Decks by Yasuko Ohba

Other Decks in Technology

Transcript

  1. લճͷ͋Β͢͡  5VSCPͬͯબ୒ࢶ͕ 
 ݁ߏ͋Γ·͢ΑͶ  5VSCP%SJWF͚ͩ  5VSCP'SBNF 

    5VSCP4USFBN ͦΕΛ͔ͭͬͨઃܭํ਑΋ɺ 
 ෳ਺͋Γ·͢  ϞσϧΛத৺ʹ 
 ίϯϙʔωϯτͬΆ͘  ͢΂ͯΛը໘ભҠͰߟ͑Δ 
 ʮ8FCࢴࣳډʯ
  2. ·ͱΊɿ4UJNVMVT͸ͦ΋ͦ΋ 
 ԿΛ୲౰͢΂͖͔  )5.-ɾϒϥ΢βͷ֦ு  αʔόॲཧΛ଴ͭ४උ  αʔόʹΑΒͳ͍ը໘มߋ ʢཞ༻஫ҙʣ

     ඳըͷ֦ு )PUXJSF 3BJMT Πϕϯτ 
 ϋϯυϦϯά ը໘ͷมߋ σʔλͷมߋ 4UJNVMVT 5VSCP 3BJMT
  3. ɹԿΛ୲౰͢΂͖Ͱͳ͍͔ ը໘ͷมߋ 
 ɹɹɹ˞ݪଇతʹ )PUXJSF 3BJMT 41" Πϕϯτ 
 ϋϯυϦϯά

    ը໘ͷมߋ σʔλͷมߋ 4UJNVMVT 5VSCP 3BJMT 3FBDU౳ 3BJMT 3FBDU͔ΒҠߦ͢Δ৔߹ɺ3FBDUˠ4UJNVMVTͰ͸ ͳ͘ɺ3FBDUˠ3BJMTɾ5VSCPɾ4UJNVMVTͱͳΔ
  4.  EJSFDU@TVCNJU@DPOUSPMMFSKT import { Controller } from "@hotwired/stimulus" // Connects

    to data-controller="direct-submit" export default class extends Controller { static targets = [ "form" ] submit() { this.formTarget.requestSubmit() } }
  5. 4UJNVMVTίʔυͷجຊᶃ import { Controller } from "@hotwired/stimulus" // Connects to

    data-controller="direct-submit" export default class extends Controller { … } SBJMTHTUJNVMVTEJSFDU@TVCNJU (FOFSBUPSͰΨϫΛ࡞Δ
  6. 4UJNVMVTίʔυͷجຊᶄ import { Controller } from "@hotwired/stimulus" // Connects to

    data-controller="direct-submit" export default class extends Controller { static targets = [ "form" ] submit() { this.formTarget.requestSubmit() } } ʮΞΫγϣϯʯΛ࡞Δ ʢ͜ΕΛ)5.-͔ΒݺͿʣ
  7. 4UJNVMVTίʔυͷجຊᶅ import { Controller } from "@hotwired/stimulus" // Connects to

    data-controller="direct-submit" export default class extends Controller { static targets = [ "form" ] submit() { this.formTarget.requestSubmit() } } 4UJNVMVTίʔυ͔Β )5.-ཁૉΛ ૬ରతʹࢀরͰ͖Δ ˞UBSHFUTҎ֎ͷํ๏Ͱ΋Ͱ͖·͢
  8.  EJSFDU@TVCNJU@DPOUSPMMFSKT import { Controller } from "@hotwired/stimulus" // Connects

    to data-controller="direct-submit" export default class extends Controller { static targets = [ "form" ] submit() { this.formTarget.requestSubmit() } } 4VCNJUΞΫγϣϯ͕ݺ͹ΕͨΒGPSNʹ͋ͨΔཁૉΛTVCNJU͢Δ
  9.  )5.-͔Βͷ࢖͍ํ = form_with model: users_query, scope: :q, url: {},

    method: :get, data: { controller: "direct-submit", "direct-submit-target": "form" } do |f| = f.check_box :unpaid, data: { action: "change->direct-submit#submit" } = f.label :unpaid, "ະೲ͋Γ" ͜͜ͰDIBOHFΠϕϯτ͕͖ͨΒ EJSFDUTVCNJUTVCNJUΞΫγϣϯΛݺΜͰͶ EJSFDUTVCNJUDPOUSPMMFSΛ࢖͏Α ͜Ε͕zGPSNzʹ౰ͨΔཁૉͩΑ
  10. બ୒ࢶͷධՁ 63-Λೖख͢Δखஈ " αʔό͔Β༩͑Δ˕ # +4Ͱ૊ΈཱͯΔ✕ (&5ͰભҠ͢Δखஈ Ξ BλάΛΫϦοΫ͢Δ̋ Π

    '03.ͷTVCNJU˚ ΢ 5VSCPWJTJU ̋ αʔόʹ੍ޚΛूΊ͍ͨͷͰආ͚Δ BDUJPOଐੑ಺ͷ63-Λม͑Δͱ$43'͕໘౗ ݻఆ63-ͩͱΫΤϦʔετϦϯάͰμαΠ
  11. ͜ͷ͕̎ͭྑͦ͞͏ 63-Λೖख͢Δखஈ " αʔό͔Β༩͑Δ # +4Ͱ૊ΈཱͯΔ (&5ͰભҠ͢Δखஈ Ξ BλάΛΫϦοΫ͢Δ Π

    '03.ͷTVCNJU ΢ 5VSCPWJTJU ҊBΛग़͢ Ҋ63-ΛPQUJPOͷ 
 WBMVFͱͯ͠౉͢ ൚༻త γϯϓϧ
  12.  MJOL@TFMFDU@DPOUSPMMFSKT import { Controller } from "@hotwired/stimulus" // Connects

    to data-controller="link-select" export default class extends Controller { move(event) { document.getElementById(event.target.value).click() } } NPWFΞΫγϣϯ͕ݺ͹ΕͨΒɺ બ͹Ε͍ͯΔબ୒ࢶͷ஋͕JEͰ͋ΔΑ͏ͳ BཁૉΛΫϦοΫͨ͜͠ͱʹ͢Δ
  13.  ࢖͍ํ = form_tag "#", method: :get, data: { controller:

    "link- select" } do - year_and_months.each do |year, month| = link_to "#{year}/#{month}", reports_path(year:, month:), style: "display:none;", id: "link_reports_#{year}_#{month}" = select_tag :target_month, options_for_select(year_and_months.map{|year, month| ["#{year}/#{month}", "link_to_reports_#{year}_#{month}"]}, "link_to_reports_#{current_year}_#{current_month}"), data: { action: "change->link-select#move" } B JE ηϨΫτϘοΫεͷDIBOHFΞΫγϣϯͰ બ͹ΕͨPQUJPOͷWBMVF͕JEͳ ϦϯΫ͕ΫϦοΫ͞ΕΔ ίϯτϩʔϥͷࢦఆ JEΛ PQUJPOͷ WBMVFʹ
  14.  ϑΥʔΧε͍ͨ͠ ʮϊʔτʯొ࿥ը໘Ͱ͸ 
 Ұ൪্ͷςΩετϑΟʔϧυʹ 
 ը໘ͷ๚໰௚ޙ΍ɺ 
 ผλϒ͔Β໭ͬͨʢ࠶ඳըʣ࣌ʹ 


    ϑΥʔΧε͕͋ͨΓɺ 
 ͙͢ೖྗͰ͖ΔΑ͏ʹ͍ͨ͠ ϊʔτͷ໊લ ˞ϑΥʔΧε͸BVUPGPDVTଐੑͰαʔόࢦࣔͷΈͰͰ͖Δͱ͍͏͝ࢦఠΛ͍͖ͨͩ·ͨ͠ɻ ΧʔιϧҐஔௐ੔Λ͍ͨ͠౳ʹಡΈସ͍͚͑ͯͨͩΕ͹ͱࢥ͍·͢ɻ
  15.  GPDVT@DPOUSPMMFSKT import { Controller } from "@hotwired/stimulus" // Connects

    to data-controller="focus" export default class extends Controller { static targets = [“initial"] connect() { this.exec() } morphed() { this.exec() } exec() { this.initialTarget.focus() } } NPSQIJOHͰը໘͕ߋ৽͞Εͨͱ͖ݺ͹ΕΔ ॳظදࣔͰݺ͹ΕΔ l*OJUJBMzཁૉʹϑΥʔΧε
  16. ࢀߟ೥΍ͬͯΔݸਓΞϓϦʢडݧࢧԉΞϓϦʣͷ 4UJNVMVTίϯτϩʔϥΛ෼ྨͯ͠Έ·ͨ͠ ᶃ)5.-ɾϒϥ΢βͷ֦ு EJSFDU@TVCNJU 
 MJOL@TFMFDU 
 DMJQCPBSE 
 HIPTU@GPSN

    
 υϦϧμ΢ϯηϨΫλ 
 ࢉ਺༻πʔϧϘοΫε 
 ࣌ؒϑΟʔϧυ෼ࠁΈϘλϯ 
 ϥϕϧ෇͖ෳ਺બ୒ηϨΫτ 
 ෳ਺৚݅·ͱΊηοτϘλϯ 
 Ұׅબ୒Ϙλϯ 
 ਖ਼ղώϯτϞʔμϧΛग़͢ ᶄαʔόॲཧΛ଴ͭ४උ ϘλϯΛԡͨ͠௚ޙͷը໘มԽ ᶅඳըͷ֦ு GPDVT 
 .BUIKBYʢ਺ࣜදࣔʣ ᶆαʔόʹΑΒͳ͍ը໘มߋ ղ౴ͱ࠾఺ϘλϯΛݟͤΔ 
 ࢖Θͳ͍ϑΟʔϧυΛӅ͢
  17. ൚༻ੑʹ͍ͭͯ৭෼͚ͯ͠ΈΔ ᶃ)5.-ɾϒϥ΢βͷ֦ு EJSFDU@TVCNJU 
 MJOL@TFMFDU 
 DMJQCPBSE 
 HIPTU@GPSN 


    υϦϧμ΢ϯηϨΫλ 
 ࢉ਺༻πʔϧϘοΫε 
 ࣌ؒϑΟʔϧυ෼ࠁΈϘλϯ 
 ϥϕϧ෇͖ෳ਺બ୒ηϨΫτ 
 ෳ਺৚݅·ͱΊηοτϘλϯ 
 Ұׅબ୒Ϙλϯ 
 ਖ਼ղώϯτϞʔμϧΛग़͢ ᶄαʔόॲཧΛ଴ͭ४උ ϘλϯΛԡͨ͠௚ޙͷը໘มԽ ᶅඳըͷ֦ு GPDVT 
 .BUIKBYʢ਺ࣜදࣔʣ ᶆαʔόʹΑΒͳ͍ը໘มߋ ղ౴ͱ࠾఺ϘλϯΛݟͤΔ 
 ࢖Θͳ͍ϑΟʔϧυΛӅ͢ ൚༻త Ϟσϧʹ ରԠ ಛఆը໘ ઐ༻