Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Hotwire光の道とStimulus
Search
Yasuko Ohba
October 26, 2024
Technology
7
4.1k
Hotwire光の道とStimulus
Kaigi on Rails 2024 のトーク資料です。Hotwireを活用するための指針をStimulusの側から整理しています。
Yasuko Ohba
October 26, 2024
Tweet
Share
More Decks by Yasuko Ohba
See All by Yasuko Ohba
えにしテックさん15周年に寄せて〜万葉と私のこれまでの学び〜
nay3
64
44k
Hotwire的な設計を追求して「Web紙芝居」に行き着いた話
nay3
9
4.7k
「Rubyメソッドかるた」 王者への道 ~ 万葉チームのガチな取り組みを大公開 ~
nay3
3
370
The Better RuboCop World to enjoy Ruby
nay3
1
13k
強いエンジニアという灯
nay3
51
22k
万葉のRails新人研修のコードレビューコメントを分析してみました
nay3
7
9.6k
"Railsで開発できる" への道
nay3
7
1.2k
自立したRuby技術者を育てる - 万葉の新人教育の仕組み
nay3
13
2.4k
A Training System of Ruby Programmers / Rubyプログラマが育つ仕組み - Rubyでの受託開発を10年回してみて -
nay3
17
7.7k
Other Decks in Technology
See All in Technology
データマネジメントのトレードオフに立ち向かう
ikkimiyazaki
6
1.2k
あなたが人生で成功するための5つの普遍的法則 #jawsug #jawsdays2025 / 20250301 HEROZ
yoshidashingo
2
230
RayでPHPのデバッグをちょっと快適にする
muno92
PRO
0
190
Reading Code Is Harder Than Writing It
trishagee
2
120
システム・ML活用を広げるdbtのデータモデリング / Expanding System & ML Use with dbt Modeling
i125
1
320
内製化を加速させるlaC活用術
nrinetcom
PRO
2
130
プロダクトエンジニア 360°フィードバックを実施した話
hacomono
PRO
0
140
Windows の新しい管理者保護モード
murachiakira
0
200
サイト信頼性エンジニアリングとAmazon Web Services / SRE and AWS
ymotongpoo
7
1.3k
遷移の高速化 ヤフートップの試行錯誤
narirou
6
1k
Raycast Favorites × Script Command で実現するお手軽情報チェック
smasato
1
140
JavaにおけるNull非許容性
skrb
2
2.5k
Featured
See All Featured
Speed Design
sergeychernyshev
27
810
How to train your dragon (web standard)
notwaldorf
91
5.9k
Become a Pro
speakerdeck
PRO
26
5.2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Visualization
eitanlees
146
15k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
Automating Front-end Workflow
addyosmani
1368
200k
Making Projects Easy
brettharned
116
6k
Designing for Performance
lara
604
68k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
Transcript
)PUXJSFޫͷಓͱ4UJNVMVT େೡࢠ!OBZ
ࣗݾհ େೡࢠʢ!OBZ גࣜձࣾສ༿ͷࣾ 3BJMTΤϯδχΞ ஶॻʹݱ3BJMT ࣮େ͖ɾߏਥ
)PUXJSFޫͷಓ
)PUXJSFͰ ΞϓϦΛ࡞ΔதͰ ʮ͏·͍͘͘ઃܭࢦʯ͕ ݟ͖͑ͯͨʢؾ͕ͨ͠ʣ
ϋϚΔͱ ΊͪΌͪ͘Όշద ੜ࢈ੑߴ͍
ͦͷࢦΛݸਓతʹ l)PUXJSFޫͷಓz ͱݺΜͰ͍·͢
՝ҙࣝ )PUXJSFޫͷಓͰշదʹ։ൃͰ͖Δ͜ͱΘ͔ͬͨ ͰɺͦΕʹ͔ͬͯ༠ಋ͞ΕΔϨʔϧʹͳͬͯͳ͍ ։ൃऀ͕Θ͔͍ͬͯΔඞཁ͕ߴ͍ Θ͔ͬͯͳ͍ͱɺͩΜͩΜͭΒ͘ͳΔ͔
Θ͔ͬͯͳ͍ͱ Կ͕ى͖Δʁ
Θ͔͍ͬͯͳ͍ͱԿ͕͓͖Δʁ 4UJNVMVTίʔυ͕ଟ͘ͳΔ 3VCZͱ+BWB4DSJQUͰಉ͡Α͏ͳϩδοΫ͕૿͑Δ %3:Ͱͳ͍ɺϝϯςͮ͠Β͍ίʔυʹͳΔ 41"ͷ΄͏͕ϕλʔʹײ͡ΒΕΔ͔
͡Ό͋ɺԿΛΘ͔͍ͬͯΕ Α͍ͷ͔ʁ
ᶃαʔόαΠυͷઃܭࢦ
,BJHJPO3BJMTͰ αʔόαΠυͷ ઃܭࢦͷΛ͠·ͨ͠
,BJHJPO3BJMT
લճͷ͋Β͢͡ 5VSCPͬͯબࢶ͕ ݁ߏ͋Γ·͢ΑͶ 5VSCP%SJWF͚ͩ 5VSCP'SBNF
5VSCP4USFBN ͦΕΛ͔ͭͬͨઃܭํɺ ෳ͋Γ·͢ ϞσϧΛத৺ʹ ίϯϙʔωϯτͬΆ͘ ͯ͢Λը໘ભҠͰߟ͑Δ ʮ8FCࢴࣳډʯ
લճͷ͋Β͢͡ ϞσϧΛத৺ʹίϯϙʔωϯτͬΆ͘࡞Δͱྑͦ͞͏ʁ ྑ͘ͳ͍ ը໘ଆʢ+4ʣͰΔ͜ͱ͕૿͑Δ ϝϯςφϯεͮ͠Β͘ͳ͍ͬͯ͘
લճͷ͋Β͢͡ 2ͳͥը໘ଆʢ+4ʣͰΔ͜ͱ͕૿͑Δʁ αʔόΛίϯϙʔωϯτతʹ࡞Δͱɺը໘͕ͦΕΛ ΦʔΨφΠζ͠ͳ͚ΕͳΒͳ͍͔Β αʔό͕ݱࡏͷը໘ͷঢ়ଶΛΒͳ͍ͨΊʹɺը໘͠ ͔ରॲͰ͖ͳ͍ࣄฑ͕͋Δ͔Β
લճͷ͋Β͢͡ 2ͳͥϝϯςφϯεͮ͠Β͘ͳ͍ͬͯ͘ʁ 4UJNVMVTίʔυΛޙ͔ΒநԽɾߏԽͯ͠ ࠶ར༻͢Δͷ͘͠ɺ ࣅͯඇͳΔίʔυ͕૿͍͑͢ 3VCZͱ+4Ͱಉ͡Α͏ͳϩδοΫΛ
ೋॏͰॻ͘͜ͱʹͳΓ͕ͪ
લճͷ͋Β͢͡ ͔ͩΒʮ8FCࢴࣳډʯ͕Α͍ ը໘Λม͑Δ࣍ͷը໘ʹભҠ͢Δ 5VSCP͕͋Εݱతʹݟ͑Δ ॲཧ͕શ෦αʔόʹू·ͬͯɺ3VCZͷύϫʔΛ༗ޮ׆༻Ͱ͖Δ ͜Εͧʮޫͷಓʯʂʂ มԽ มԽ ᶃ
ᶄ
େݪଇ ੍ޚΛαʔόʹूΊΔ ը໘͔͠Βͳ͍͜ͱΛ࡞Βͳ͍
ᶄΫϥΠΞϯταΠυͷ ઃܭࢦ
ࠓճ ʮޫͷಓʯʹԊ͏ͨΊʹ 4UJNVMVTΛ Ͳ͏ॻ͘ͱΑ͍ͱࢥ͏͔Λ ͠·͢
͜ͷͷείʔϓ Α͋͘ΔɺϞμϯͳ8FCΞϓϦͰ͏ +4ΛΠϝʔδ͍ͯ͠·͢ ήʔϜΈ͍ͨͳɺάϦάϦಈ͘ܥ είʔϓ֎Ͱ͢
Ξϯέʔτ
4UJNVMVTίʔυΛ ͔ͬ͠Γॻ͍ͨΓ ಡΜͩΓͨ͜͠ͱ͕ ·ͩͳ͍ํϊ
4UJNVMVTίʔυΛ ৗతʹͨ·ʹ ॻ͔Ε͍ͯΔํɺ खΛ͍͋͛ͯͩ͘͞ϊ
Έͳ͞Μ 4UJNVMVTίϯτϩʔϥʔΛ ͲΜͳ୯ҐͰ࡞͍ͬͯ·͔͢ʁ ʢ࡞Ζ͏ͱΠϝʔδ͞Ε·͔͢ʁʣ
ͨͱ͑ɺϢʔβʔҰཡը໘ͷ ͨΊͷ+BWB4DSJQUίʔυΛ ॻ͘ͱ͖ʹ
ͱΓ͋͑ͣɺ VTFST@DPOUSPMMFSKTΛ ࡞͍ͬͯ·ͤΜ͔ʁ
3BJMTͷը໘͝ͱʹ +BWB4DSJQUϑΝΠϧΛ ࡞Δ͜ͱ ΘΓͱҰൠతͰ͕͢
4UJNVMVTͰ ୈҰબࢶʹ͠ͳ͍΄͏͕Α͍ ͱࢲࢥ͍·͢
ը໘͝ͱʹ4UJNVMVTίʔυΛ ࡞Βͳ͍΄͏͕ྑ͍ཧ༝ ʮը໘͝ͱʯʹ࡞ΒΕͨ+4ίʔυಉ࢜ͷڞ௨Λ ޙ͔Βநग़͠ɺߏԽ͢Δͷ͍͠ ޙͷ։ൃऀɺ୲͍ͯ͠ͳ͍ը໘ͷ+4Λ৮Γͨ͘ͳ͍ʂ ϦϑΝΫλͷͨΊʹಛఆͷཁૉ*%ͳͲΛണ͕͢ͷେม ࣮ɺଟ͘ͷέʔεͰը໘ผʹ͢Δඞવੑ͕ͳ͍
೦ͷҝɿը໘ઐ༻ͷ4UJNVMVTίʔυΛ બͨ͠΄͏͕Α͍߹͋Δ ಠಛͷෳࡶͳॲཧ͕͋Δը໘͋Γ͑Δ நԽɾ൚༻Խͮ͠Β͍࣌ը໘ઐ༻Ͱ࡞Ε͍͍ ίϐʔ͞Εͯ૿৩͑͞͠ͳ͚Εɺ࠷ॳը໘ઐ༻Ͱ ࡞ͬͯɺ͋ͱͰϦϑΝΫλ͢Δ͜ͱͰ͖Δ
ը໘͝ͱͷ 4UJNVMVTίʔυΛ ࡞Βͳ͍߹ɺͲ͏͢Δͷ͔ʁ
4UJNVMVTͰ ԿΛΓ͍͔ͨΛ Α͘ߟ͑ͯ ൚༻తʹ࡞Γ·͢
4UJNVMVTͰ ԿΛΓ͍͔ͨ
̎ஈߏ͑Ͱߟ͑Δඞཁ͕͋Δ 4UJNVMVTͦͦԿΛ୲͢Δ͖͔ ࠓճɺࣗͷ࡞Γ͍ͨͷԿ͔ 3BJMT 5VSCPͰ Δ͖͜ͱΛ ͬͪΌμϝ
4UJNVMVT ͦͦԿΛ୲͢Δ͖͔ ·ͨɺԿΛ୲͖͢Ͱͳ͍͔
ࡳຈͰર͍ͨ ύϥμΠϜͷ͔Β͡Ί·͢
)PUXJSF 3BJMT ͱ41" ύϥμΠϜ͕ҧ͏
3BJMT 3BJMT +4 3FBDU +4 )PUXJSF )PUXJSF 3BJMT41" +4 3BJMTͰߏ͞Ε͍ͯΔΑ͏ʹݟ͑Δ
3BJMT 3BJMT 3FBDU )PUXJSF )PUXJSFͬͯ Ͳ͜·Ͱ3FBDUͱଝ৭ͳ͘࡞Ε·͔͢ʁ ҧײ
)PUXJSFͱ3FBDU ͕ ಉ͡ϨΠϠʔͷସͱͯ͠ ରԠ͍ͯ͠ΔΘ͚Ͱͳ͍
8FCΞϓϦͷ੍ޚΛ ࣍ͷΑ͏ʹղ͢Δͱɾɾɾ ɹϢʔβʔ ૢ࡞ ΠϕϯτϋϯυϦϯά ը໘ͷมߋ σʔλͷมߋ
41" ɹϢʔβʔ ૢ࡞ ΠϕϯτϋϯυϦϯά +4 ը໘ͷมߋ +4 σʔλͷมߋ 3BJMT
)PUXJSF 3BJMT ɹϢʔβʔ ૢ࡞ ΠϕϯτϋϯυϦϯά +4 +4 ը໘ͷมߋ ʢσʔλͷมߋʣ 3BJMT
3BJMT ը໘ͷมߋ ը໘ͷมߋ +4
ͭ·Γ
)PUXJSF3BJMTͱηοτͰ 3FBDUͷྖҬͱରԠ͍ͯ͠Δ )PUXJSF 3BJMT 41" ΠϕϯτϋϯυϦϯά ը໘ͷมߋ σʔλͷมߋ 3BJMT )PUXJSF
3FBDU 3BJMT ʂʂ
)PUXJSF 3BJMTͰ ը໘มߋͷͱ͜Ζʹ͍બࢶ͕͋Δ͕ ɹϢʔβʔ ૢ࡞ ΠϕϯτϋϯυϦϯά +4 +4 ը໘ͷมߋ ʢσʔλͷมߋʣ
3BJMT 3BJMT ը໘ͷมߋ ը໘ͷมߋ +4
جຊతʹ ը໘มߋ3BJMTΛओʹ͍ͨ͠ )PUXJSF 3BJMT 41" ΠϕϯτϋϯυϦϯά ը໘ͷมߋ σʔλͷมߋ 3BJMT )PUXJSF
3FBDU 3BJMT ʂʂ
ͳͥͳΒલड़ͷͱ͓Γ େݪଇͱͯ͠ ੍ޚΛαʔόʹूΊ͍͔ͨΒ
)PUXJSFʹ͓͚Δ+4ͷ͏ͪ 4UJNVMVTͷར༻γʔϯʁ ɹϢʔβʔ ૢ࡞ ΠϕϯτϋϯυϦϯά +4 +4 ը໘ͷมߋ ʢσʔλͷมߋʣ 3BJMT
3BJMT ը໘ͷมߋ ը໘ͷมߋ +4
ΞϓϦಠࣗͷΠϕϯτϋϯυϦϯά 4UJNVMVTͰ͔͠Ͱ͖ͳ͍ ɹϢʔβʔ ૢ࡞ ΠϕϯτϋϯυϦϯά +4 +4 ը໘ͷมߋ ʢσʔλͷมߋʣ 3BJMT
3BJMT ը໘ͷมߋ ը໘ͷมߋ +4 ˞σϑΥͷΠϕϯτϋϯυϦϯάΛ8FCͱ5VSCP͕୲
ΠϕϯτϋϯυϦϯάޙɺ4UJNVMVTͰ ը໘Λมߋ͍ͨ͜͠ͱ͕͋Δ ɹϢʔβʔ ૢ࡞ ΠϕϯτϋϯυϦϯά +4 +4 ը໘ͷมߋ ʢσʔλͷมߋʣ 3BJMT
3BJMT ը໘ͷมߋ ը໘ͷมߋ +4
ϝΠϯͷը໘มߋ 3BJMT 5VSCPʹߦΘͤΔ ɹϢʔβʔ ૢ࡞ ΠϕϯτϋϯυϦϯά +4 +4 ը໘ͷมߋ ʢσʔλͷมߋʣ
3BJMT 3BJMT ը໘ͷมߋ ը໘ͷมߋ +4
3BJMT͔Βը໘Λग़ྗͨ͠ޙʹ +BWB4DSJQUͰ͔͠ Ͱ͖ͳ͍͜ͱ4UJNVMVTͰରԠ ɹϢʔβʔ ૢ࡞ ΠϕϯτϋϯυϦϯά +4 +4 ը໘ͷมߋ σʔλͷมߋ
3BJMT 3BJMT ը໘ͷมߋ ը໘ͷมߋ +4
ॲཧͷྲྀΕΛ౿·͑ͯ తผʹྨͯ͠ΈΔ
ΠϕϯτϋϯυϦϯά ը໘มߋ Λॻ͘ͱ͖ͷత ɹϢʔβʔ ૢ࡞ ΠϕϯτϋϯυϦϯά +4 +4 ը໘ͷมߋ ʢσʔλͷมߋʣ
3BJMT 3BJMT ը໘ͷมߋ ը໘ͷมߋ +4
ᶃ)5.-ɾϒϥβͷ֦ு )5.-ͷσϑΥϧτʹͳ͍Α͏ͳɺಠࣗͷɺݟӫ͑ͷ͍͍ศརͳ ෦ΛՃ͢Δ ಛఆͷ෦ಉ͕࢜࿈ಈͯ͠ಈ͘Α͏ʹ͢Δ TVCNJUͰ߹͕ྑ͍ύϥϝʔλΛૹΕΔΑ͏ʹIJEEFO@ fi FMEΛ ௐ͢ΔFUD Ϣʔβʔ ૢ࡞
Πϕϯτ ϋϯυϦϯά ը໘ͷมߋ ʢσʔλͷมߋʣ ը໘ͷมߋ ը໘ͷมߋ
ᶄαʔόॲཧΛͭ४උ αʔόͷϨεϙϯεΛͨͣɺ͙͢ʹϢʔβʔʹϑΟʔυόο ΫΛฦ͍ͨ͠ ʮ͓͍ͪͩ͘͞ʯΛग़͢ͱ͔ ͖͞ʹը໘Λม͑ͯɺαʔόʹσʔλมߋ͚ͩͤ͞Δͱ͔ Ϣʔβʔ ૢ࡞ Πϕϯτ ϋϯυϦϯά
ը໘ͷมߋ ʢσʔλͷมߋʣ ը໘ͷมߋ ը໘ͷมߋ
ᶅαʔόʹΑΒͳ͍ը໘มߋ ܰඍͳঢ়ଶมԽΛը໘ଆ͚ͩͰࡁ·͍ͤͨಈػ ಛఆΤϦΞͷදࣔඇදࣔΛΓସ͑ΔͳͲ͕ଟ͍ ʮαʔόʹूΊΔʯݪଇͷҧʹͭͳ͕ΔͷͰཁҙ ˞ཁҙ͕ͩɺ͜Ε͕ྑ͍߹ʢ·Εʹʣ͋Δ Ϣʔβʔ ૢ࡞ Πϕϯτ ϋϯυϦϯά
ը໘ͷมߋ
αʔόʹΑΒͳ͍ը໘มߋ ͲΜͳͱ͖ͳΒ0,͔ʁ +4ͰมԽͨ͠༰Λαʔό͕ײɾཧ͢Δඞཁ͕ຊʹͳ ͍߹ʢʹܰඍͳมԽͰɺঢ়ଶهԱΛ͠ͳ͍ʣ ࡞ͬͨͱ͖ʮඞཁͳ͍ʯͱࢥͬͯɺޙ͔Βʮඞཁͩͬ ͨʯͱΘ͔Δ͜ͱ͋Δ ͞ɾૢ࡞ײ͕ಛʹॏཁͰɺͦͷͨΊʹϝϯςφϯείετΛ ٘ਜ਼ʹ͢ΔՁ͕͋Δ߹
ᶆඳըͷ֦ு αʔό͔Βͷը໘ʹɺαʔό͕༩͑ΒΕͳ͍ॳظঢ়ଶΛϓϥε͍ͨ͠ ϑΥʔΧεΛઃఆ͢Δ εΫϩʔϧҐஔΛม͑Δ ඳը༰ΛՃʢ༁ʣ͢ΔFUD Ϣʔβʔ ૢ࡞ Πϕϯτ ϋϯυϦϯά
ը໘ͷมߋ ը໘ͷมߋ ը໘ͷมߋ ʢσʔλͷมߋʣ
ྨ͓ΘΓ ओʹ͜ΕΒ͕ɺ4UJNVMVTͰ ୲͖͢ࣄͩͱߟ͑Α͏
·ͱΊɿ4UJNVMVTͦͦ ԿΛ୲͖͔͢ )5.-ɾϒϥβͷ֦ு αʔόॲཧΛͭ४උ αʔόʹΑΒͳ͍ը໘มߋ ʢཞ༻ҙʣ
ඳըͷ֦ு )PUXJSF 3BJMT Πϕϯτ ϋϯυϦϯά ը໘ͷมߋ σʔλͷมߋ 4UJNVMVT 5VSCP 3BJMT
ɹԿΛ୲͖͢Ͱͳ͍͔ ը໘ͷมߋ ɹɹɹ˞ݪଇతʹ )PUXJSF 3BJMT 41" Πϕϯτ ϋϯυϦϯά
ը໘ͷมߋ σʔλͷมߋ 4UJNVMVT 5VSCP 3BJMT 3FBDU 3BJMT 3FBDU͔ΒҠߦ͢Δ߹ɺ3FBDUˠ4UJNVMVTͰ ͳ͘ɺ3FBDUˠ3BJMTɾ5VSCPɾ4UJNVMVTͱͳΔ
͕Θ͔ͬͨͱ͜ΖͰ ࣮ࡍʹࣗͷ࡞Γ͍ͨͷʹ͍ͭͯߟ͑Δ 4UJNVMVTͦͦԿΛ୲͢Δ͖͔ ࠓճɺࣗͷ࡞Γ͍ͨͷԿ͔ 3BJMT 5VSCPͰ Δ͖͜ͱΛ ͬͪΌμϝ
ྨΛҙࣝ͠ͳ͕Β ը໘ઐ༻ͷ+4Ͱͳ͘ ൚༻తʹ͑Δʮػೳʯͱͯ͠ Γ͍ͨ͜ͱΛσβΠϯ͢Δ
ίʔυྫΛΈͯ ཧղΛਂΊ͍͖ͯ·͠ΐ͏
ݕࡧϑΟʔϧυͰԿ͔ૢ࡞ͨ͠Β ࣗಈͰݕࡧΛΒ͍ͤͨ ͍͍ͪͪʮݕࡧʯϘλϯΛԡ͞ͳ͍Ͱɺ ʮະೲ͋ΓʯνΣοΫϘοΫε͕ 0/0''͞ΕͨΒ ະೲͷ͋ΔϢʔβʔΛ
ؚΊͨΓ֎ͨ͠Γͯ͠ݕࡧɾ࠶ද͍ࣔͨ͠ ະೲ͋Γ Ϣʔβʔݕࡧ ݕࡧ݁Ռ ɾɾɾɾɾɾɾɾ
ଦੑͰίϯτϩʔϥʔΛ࡞Βͳ͍ ͱΓ·ɺVTFST@ TFBSDI@ DPOUSPMMFSKTΛ࡞Ζ͏
తͷྨʁ ᶃ)5.-ɾϒϥβͷ֦ு ᶄαʔόॲཧΛͭ४උ ᶅαʔόʹΑΒͳ͍ը໘มߋ ᶆඳըͷ֦ு ະೲ͋Γ Ϣʔβʔݕࡧ ݕࡧ݁Ռ ɾɾɾɾɾɾɾɾ
νΣοΫϘοΫεΛ ΫϦοΫͨ͠Β ݕࡧΞΫγϣϯΛݺΜͰ ݁ՌΛ͔͖͔͍͑ͨ
ͲΜͳ֦ுΛ͍ͨ͠ͷ͔ʁ νΣοΫϘοΫεͷPOPGGૢ࡞Ͱ ϑΥʔϜͷTVCNJUϘλϯ͕ԡ͞ΕΔ ͦΜͳνΣοΫϘοΫεʹͳΔΑ͏ʹ֦ு͢Δ DIBOHFΠϕϯτ GPSNͷTVCNJU ʮݕࡧ͢Δʯʮ݁ՌΛॻ͖͑Δʯ3BJMT 5VSCPͷࣄͳͷͰɺ 4UJNVMVTͷؔ৺ࣄ͔Βআ͍ͯɺΰʔϧΛʮTVCNJUʯͱͯ͠நԽͰ͖Δ
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() } }
4UJNVMVTίʔυͷجຊᶃ import { Controller } from "@hotwired/stimulus" // Connects to
data-controller="direct-submit" export default class extends Controller { … } SBJMTHTUJNVMVTEJSFDU@TVCNJU (FOFSBUPSͰΨϫΛ࡞Δ
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.-͔ΒݺͿʣ
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Ҏ֎ͷํ๏ͰͰ͖·͢
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͢Δ
)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ʹͨΔཁૉͩΑ
͔ͳΓγϯϓϧͩͱࢥ͍·͢
͍Ζ͍ΖͳϑΟʔϧυ͔Β͑Δ ະೲ͋Γ Ϣʔβʔݕࡧ ݕࡧ݁Ռ ɾɾɾɾɾɾɾɾ ୀձࡁΈ ϥΠτίʔε˝ ίʔε GPSNͷTVCNJU DIBOHF
GPSNͷTVCNJU DIBOHF GPSNͷTVCNJU DIBOHF ֤ཁૉʹBDUJPODIBOHFʜΛॻ͚͍͍
DIBOHFҎ֎ͷΠϕϯτͰ͑Δ DMJDLΠϕϯτ GPSNͷTVCNJU BDUJPODMJDLʜΛॻ͚͍͍
ݕࡧҎ֎ͷ༻్Ͱ͑Δ ϝʔϧ௨ ઃఆ GPSNͷTVCNJU DIBOHF νΣοΫϘοΫεΛ ΫϦοΫͨ͠Β ߋ৽ΞΫγϣϯΛݺΜͰ ࣗಈอଘ͍ͨ͠
ͱͯศརʂ جຊతͳ+4ͱͯͬͯ͠·͢
ηϨΫτͰભҠ͢Δ ݄ͷηϨΫτϘοΫεͰ ʮ݄ʯΛબΜͩΒ ʮSFQPSUTʯʹ ભҠ͍ͨ͠ ʢ݄࣍ͷͷը໘ͰΑ͋͘Δͭʣ ݄ͷϨϙʔτ
ɾɾɾɾɾɾɾɾ ˝ SFQPSUT
ଦੑͰίϯτϩʔϥʔΛ࡞Βͳ͍ ͱΓ·ɺSFQPSUT@DPOUSPMMFSKTΛ࡞Ζ͏ DIBOHFSFQPSUTNPWFͳΞΫγϣϯΛ࡞Ζ͏
తͷྨʁ ηϨΫτϘοΫε͔ΒΛબͨ͠Β ରԠ͢Δ63-ʹભҠ͍ͨ͠ ݄ͷϨϙʔτ ɾɾɾɾɾɾɾɾ ˝ SFQPSUT ᶃ)5.-ɾϒϥβͷ֦ு ᶄαʔόॲཧΛͭ४උ
ᶅαʔόʹΑΒͳ͍ը໘มߋ ᶆඳըͷ֦ு
ͲΜͳ֦ுΛ͍ͨ͠ͷ͔ʁ ηϨΫτϘοΫεͷબͰ ҙͷ63-ΞΫηε͍ͨ͠ ͦΕ͕࣮ݱͰ͖ΔΑ͏ʹηϨΫτϘοΫεΛ֦ு͢Δ DIBOHFΠϕϯτ (&5 63- ʮ݄̋ͷϨϙʔτҰཡΛදࣔ͢ΔʯͰͳ͘ɺ ʮબΕͨબࢶʹରԠ͢ΔͳΜΒ͔ͷ63-ભҠ͢Δʯͱߟ͑Δͱ
൚༻ੑ্͕͕Δ
ͪΐͬͱߟ͑Δ͜ͱ͕ଟ͍ 63-Λೖख͢Δखஈ " αʔό͔Β༩͑Δ # +4ͰΈཱͯΔ (&5ͰભҠ͢Δखஈ Ξ BλάΛΫϦοΫ͢Δ Π
'03.ͷTVCNJU 5VSCPWJTJU
બࢶͷධՁ 63-Λೖख͢Δखஈ " αʔό͔Β༩͑Δ˕ # +4ͰΈཱͯΔ✕ (&5ͰભҠ͢Δखஈ Ξ BλάΛΫϦοΫ͢Δ̋ Π
'03.ͷTVCNJU˚ 5VSCPWJTJU ̋ αʔόʹ੍ޚΛूΊ͍ͨͷͰආ͚Δ BDUJPOଐੑͷ63-Λม͑Δͱ$43'͕໘ ݻఆ63-ͩͱΫΤϦʔετϦϯάͰμαΠ
͜ͷ͕̎ͭྑͦ͞͏ 63-Λೖख͢Δखஈ " αʔό͔Β༩͑Δ # +4ͰΈཱͯΔ (&5ͰભҠ͢Δखஈ Ξ BλάΛΫϦοΫ͢Δ Π
'03.ͷTVCNJU 5VSCPWJTJU ҊBΛग़͢ Ҋ63-ΛPQUJPOͷ WBMVFͱͯ͢͠ ൚༻త γϯϓϧ
͜͜ͰҊΛ͝հ͠·͢ (&5͚ͩͰͳ͘1045৫Γަ͔ͥͨͬͨ αʔόଆͷग़ྗίʔυ3VCZͳͷͰɺෳࡶͰߏΘͳ͍ ը໘ଆͷ൚༻ੑΛॏࢹ
ҊηϨΫτʹBଐ࡞ઓ ηϨΫτϘοΫεͷ֤ީิʹରԠ͢Δ BλάΛ͋Β͔͡ΊඇදࣔͰग़ྗ ηϨΫτϘοΫεͷPQUJPOͷWBMVFʹɺ ରԠ͢ΔBλάͷཁૉJEΛೖΕΔ ɹɹྫMJOL@SFQPSUT@@ ݄ͷϨϙʔτ
ɾɾɾɾɾɾɾɾ ˝ SFQPSUT TFMFDU PQUJPO PQUJPO B B JE JE
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ཁૉΛΫϦοΫͨ͜͠ͱʹ͢Δ
͍ํ = 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ʹ
গ͠τϦοΩʔ͚ͩͲ BͰͰ͖Δ͜ͱ ͳΜͰͰ͖Δ҆৺ײ UVSCP@NFUIPEQPTUͰ 1045ͰૹΕΔ
ʮϦϯΫ͕ηοτʹͳ͍ͬͯΔ ηϨΫτϘοΫεʯΛ ൚༻తʹ σβΠϯ͍ͯ͠ΔΠϝʔδ
͠ɺ͜͏͍ͯͨ͠Βɾɾɾʁ ʮηϨΫτϘοΫεͷީิ͕બΕͨΒɺ+4Ͱ63-Λ࡞ͬͯɺ 5VSCPWJTJU ͢ΔʯΛબΜͰ͍ͨΒ 63-ͷ͕ࣝαʔόʢSPVUFTSCʣͱ+4ͷೋՕॴʹͳΓɺมߋ ࣌྆ํม͑ͳ͚ΕͳΒͳ͍ ભҠઌʢ݄࣍Ϩϙʔτ63-ʣʹର͢Δ͕ࣝίʔσΟϯά͞Εͯ ͍Δ+BWB4DSJQUɺผͷػೳͰར༻Ͱ͖ͳ͍ SFQPSUT@DPOUSPMMFSKTʹॻ͘͜ͱʹͳΔɻ൚༻తͰͳ͍ίʔ υͷ૯ྔ͕૿͑Δ
ϑΥʔΧε͍ͨ͠ ʮϊʔτʯొը໘Ͱ Ұ൪্ͷςΩετϑΟʔϧυʹ ը໘ͷ๚ޙɺ ผλϒ͔Βͬͨʢ࠶ඳըʣ࣌ʹ
ϑΥʔΧε͕͋ͨΓɺ ͙͢ೖྗͰ͖ΔΑ͏ʹ͍ͨ͠ ϊʔτͷ໊લ ˞ϑΥʔΧεBVUPGPDVTଐੑͰαʔόࢦࣔͷΈͰͰ͖Δͱ͍͏͝ࢦఠΛ͍͖ͨͩ·ͨ͠ɻ ΧʔιϧҐஔௐΛ͍ͨ͠ʹಡΈସ͍͚͑ͯͨͩΕͱࢥ͍·͢ɻ
ଦੑͰίϯτϩʔϥΛ࡞Βͳ͍ ͱΓ·ɺOPUF@GPSN@DPOUSPMMFSKTΛ࡞Ζ͏
తͷྨʁ ॳظදࣔ࠶ඳըͰ ϑΥʔΧεΛ͍ͯͨ ᶃ)5.-ɾϒϥβͷ֦ு ᶄαʔόॲཧΛͭ४උ ᶅαʔόʹΑΒͳ͍ը໘มߋ ᶆඳըͷ֦ு ϊʔτͷ໊લ
ඳըΛͲ͏֦ு͍ͨ͠ͷ͔ʁ ҙਤͨ͠ཁૉʹϑΥʔΧεΛͯ ͍ͨ αʔό͔ΒͷࢦࣔͰɺඳըͱηο τͰߦΘΕΔΑ͏ʹ֦ு͢ΔΠ ϝʔδ ϊʔτͷ໊લ
ඳը࣌ʹΔ4UJNVMVTίʔυ ॳظදࣔͰDPOOFDU Λ͏ 5VSCP'BSNFTͰ࠶ඳը͞ΕΔͱ͖ɺҎલ DPOOFDU ͰͰ͖͍͕ͯͨɺNPSQIJOHΛ͏ͱ DPOOFDU ͕ݺΕͳ͍
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ཁૉʹϑΥʔΧε
ॳظϑΥʔΧε͍ͨ͠ͱ͖ʹ ڞ௨తʹ͑Δʂ
͜ͷ΄͔ɺສ༿OPUFͰ ҰྫΛ͝հ͍ͯ͠·͢
งғؾ ΘΓ·ͨ͠Ͱ͠ΐ͏͔ʁ
γϯϓϧͰ൚༻తͳ 4UJNVMVTίϯτϩʔϥʔΛ ͍Ζ͍Ζͳը໘Ͱ ࠶ར༻͢Δ
΄ΜͱʹͦΜͳʹ ൚༻తʹ࡞ΕΔͷʁ
ࢀߟͬͯΔݸਓΞϓϦʢडݧࢧԉΞϓϦʣͷ 4UJNVMVTίϯτϩʔϥΛྨͯ͠Έ·ͨ͠ ᶃ)5.-ɾϒϥβͷ֦ு EJSFDU@TVCNJU MJOL@TFMFDU DMJQCPBSE HIPTU@GPSN
υϦϧμϯηϨΫλ ࢉ༻πʔϧϘοΫε ࣌ؒϑΟʔϧυࠁΈϘλϯ ϥϕϧ͖ෳબηϨΫτ ෳ݅·ͱΊηοτϘλϯ ҰׅબϘλϯ ਖ਼ղώϯτϞʔμϧΛग़͢ ᶄαʔόॲཧΛͭ४උ ϘλϯΛԡͨ͠ޙͷը໘มԽ ᶅඳըͷ֦ு GPDVT .BUIKBYʢࣜදࣔʣ ᶆαʔόʹΑΒͳ͍ը໘มߋ ղͱ࠾ϘλϯΛݟͤΔ Θͳ͍ϑΟʔϧυΛӅ͢
൚༻ੑʹ͍ͭͯ৭͚ͯ͠ΈΔ ᶃ)5.-ɾϒϥβͷ֦ு EJSFDU@TVCNJU MJOL@TFMFDU DMJQCPBSE HIPTU@GPSN
υϦϧμϯηϨΫλ ࢉ༻πʔϧϘοΫε ࣌ؒϑΟʔϧυࠁΈϘλϯ ϥϕϧ͖ෳબηϨΫτ ෳ݅·ͱΊηοτϘλϯ ҰׅબϘλϯ ਖ਼ղώϯτϞʔμϧΛग़͢ ᶄαʔόॲཧΛͭ४උ ϘλϯΛԡͨ͠ޙͷը໘มԽ ᶅඳըͷ֦ு GPDVT .BUIKBYʢࣜදࣔʣ ᶆαʔόʹΑΒͳ͍ը໘มߋ ղͱ࠾ϘλϯΛݟͤΔ Θͳ͍ϑΟʔϧυΛӅ͢ ൚༻త Ϟσϧʹ ରԠ ಛఆը໘ ઐ༻
͚ͬ͜͏͍͚·͢
Α͔ͭ͘͏൚༻తͳͷ ผΞϓϦؒͰ ؆୯ʹ࠶ར༻Ͱ͖ΔΑ͏ʹ ϥΠϒϥϦԽ͍ͨ͠ؾ͢Δ ʢΞυόΠεٻΉʣ
4UJNVMVTઃܭͷίπ ·ͱΊ
ݸผػೳ͝ͱͷ 4UJNVMVTίϯτϩʔϥΛ ࡞Δલʹ ౿ΈͱͲ·ͬͯߟ͑Δ
తΛҙࣝͯ͠ɺ ͳΔ͘൚༻తʹ࡞Δ ᶃ)5.-ɾϒϥβͷ֦ு ᶄαʔόॲཧΛͭ४උ ᶅαʔόʹΑΒͳ͍ը໘มߋ ᶆඳըͷ֦ு ᶅɺ3BJMT 5VSCPͰΔ͖͜ͱΛΒͳ͍Α͏ʹؾΛ͚ͭΔ
ݸผͷը໘ɾཁૉͱૄ݁߹ʹ͢Δ ઃܭஈ֊ͰͳΔ͘൚༻తʹߟ͑Δ ۩ମతͳ*%63-ͳͲͷࣝΛ+4ίʔυʹೖΕࠐ· ͣɺαʔό͔Β༩͑ΒΕͨͷΛ͏Α͏ʹ͢Δ UBSHFUTɺFWFOUUBSHFUɺFWFOUDVSSFOU5BSHFUɺ UIJTFMFNFOUɺEBUBଐੑΛ׆༻͢Δ
࠷ޙʹɺશମઃܭͱͷ ؔʹ͍ͭͯ ҙשى͠·͢
4UJNVMVTͷઃܭ શମઃܭͷҰ෦
શମઃܭઓུ 4UJNVMVTͷॻ͖ํઓज़
શମઃܭ͕ ʮޫͷಓʯʹԊ͍ͬͯͳ͚Ε 4UJNVMVTͰॻ͘͜ͱ͕૿͑Δ ˠඞͣࢄΒ͔Δ
ͦ͜Ͱ ޫͷಓͬΆ͍શମઃܭΛ ΠϝʔδͰ͖ΔΑ͏ͳ ྫΛ͝հ͓͖ͯ͠·͢
ྫʣλϒʹΑΔΓସ͑ ը໘ͷதʹλϒ͕͋Δ # "
ํը໘ɾ+4ͰΓସ͑ ຕͷը໘Λ༻ҙ ը໘ɺ̎ͭͷλϒͷ༰Λ྆ ํग़ྗ͓͖ͯ͠ɺยํΛӅ͢ λϒ͕ԡ͞ΕͨΒΞΫςΟϒͳ λϒΛΓସ͑Δ #
"
ͦ͏͡Όͳ͍ʂʂ ͜ͷൃ͕᠘ʂʂ
+4͚ͩͰը໘Λม͑Δ͜ͱʹ৻ॏʹ # " ᶃ)5.-ɾϒϥβͷ֦ு ᶄαʔόॲཧΛͭ४උ ᶅαʔόʹΑΒͳ͍ը໘มߋ ᶆඳըͷ֦ு αʔόαΠυͷ ઃܭΛࣦഊ͢Δͱ
ෆඞཁͳᶅ͕૿͑ͯ͠·͏
ํ̎ը໘ ෦ɾ+4ͰΓସ͑ ը໘ͱ෦Λ༻ҙ͢Δ ॳظදࣔ༻ͷը໘ #λϒͷ༰Λఏڙ͢Δ෦ "λϒͷ༰Λఏڙ͢Δ෦
+4ͰλϒΓସ͑Λ࣮ݱ # "
ͬͱةݥʂʂ ͜Ε41"తͳʮίϯϙʔωϯτࢦʯ ը໘͕ΦʔΨφΠβʔʹͳͬͯ͠·͏
ํ̏ը໘ɾࢴࣳډͰΓସ͑ ͭͷը໘Λ༻ҙ͢Δ "͕બΕ͍ͯΔը໘ #͕બΕ͍ͯΔը໘ #λϒΛԡͨ͠Βɺ#͕બΕͯ ͍Δը໘ʹભҠ͢Δ
# "
ํ̏ࢴࣳډ # " " #
͜Ε͕ޫͷಓͰ͢ʂʂ
4UJNVMVTίʔυͷ࣏҆ ͜ͷஅʹ͔͔͍ͬͯΔ ํɾ λϒΛΓସ͑ΔͨΊͷ+4͕ඞཁ ݱࡏબ͞Ε͍ͯΔλϒը໘͔͠Β ͣɺঢ়ଶʹؔ͢Δ+4ίʔυ͕૿͑Δ ͜ͷը໘ઐ༻ͷ+4Λॻ͘͜ͱʹͳΔ ํ 4UJNVMVTίʔυͳ͠ #
"
ॲཧޮෆ۩߹ͷग़͢͞ҧ͏ ํ ͋·ΓΘͳ͍λϒͷͨΊͷ%#ݕࡧͳͲ͕ͬͯॏ͘ͳ Δ͜ͱ͋Δ ӅΕͯΔ΄͏ͷλϒͱཁૉ*%͕ॏෳ͢Δࣄނى͖͍͢ ํ̍ɾ ݕࡧΤϥʔΛग़ͨ͠Βλϒ͕ͬͪΌͬͨɺΈ͍ͨͳ͜ͱ ʹͳΓ͍͢ ํ ඞཁͳॲཧ͔͠͠ͳ͍͠ɺ͕ಧ͘
# "
·ͱΊ
)PUXJSFΛ׆༻͢Δʹ αʔόʹ੍ޚΛدͤΔ
ը໘ͷมߋ جຊతʹ 3BJMT 5VSCPʹͬͯΒ͏
4UJNVMVTͰ Δ͔͠ͳ͍ྖҬ 4UJNVMVTΛॻ͘
̐ͭͷతྨΛҙࣝͯ͠ ൚༻తʹॻ͘
શମઃܭΛޡΔͱ +4͕૿͑Δ 8FCࢴࣳډΛҙࣝͯ͠ ϛχϚϜͳ+4ͰࡁΉΑ͏ʹ͢Δ
3VCZͷύϫʔΛ ࠷େݶʹ׆༻Ͱ͖Δ ίʔυঢ়ଶΛΩʔϓ͠Α͏
ޫͷಓΛɺͨͷ͘͠ า͍͍͖ͯ·͠ΐ͏ʂʂ