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.4k
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
45k
Hotwire的な設計を追求して「Web紙芝居」に行き着いた話
nay3
9
4.8k
「Rubyメソッドかるた」 王者への道 ~ 万葉チームのガチな取り組みを大公開 ~
nay3
3
390
The Better RuboCop World to enjoy Ruby
nay3
1
14k
強いエンジニアという灯
nay3
52
23k
万葉のRails新人研修のコードレビューコメントを分析してみました
nay3
7
9.7k
"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
AIで進化するソフトウェアテスト:mablの最新生成AI機能でQAを加速!
mfunaki
0
140
MCPを活用した検索システムの作り方/How to implement search systems with MCP #catalks
quiver
11
6.4k
似たような課題が何度も蘇ってくるゾンビふりかえりを撲滅するため、ふりかえりのテーマをフォーカスしてもらった話 / focusing on the theme
naitosatoshi
0
450
DuckDB MCPサーバーを使ってAWSコストを分析させてみた / AWS cost analysis with DuckDB MCP server
masahirokawahara
0
1.2k
CloudWatch 大好きなSAが語る CloudWatch キホンのキ
o11yfes2023
0
170
新卒エンジニアがCICDをモダナイズしてみた話
akashi_sn
2
210
OpenSearchでレガシーな検索処理の大幅改善をやってやろう
dznbk
2
170
SmartHR プロダクトエンジニア求人ガイド_2025 / PdE job guide 2025
smarthr
0
100
LiteXとオレオレCPUで作る自作SoC奮闘記
msyksphinz
0
590
SDカードフォレンジック
su3158
1
600
開発視点でAWS Signerを考えてみよう!! ~コード署名のその先へ~
masakiokuda
3
160
SREからゼロイチプロダクト開発へ ー越境する打席の立ち方と期待への応え方ー / Product Engineering Night #8
itkq
2
510
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
What's in a price? How to price your products and services
michaelherold
245
12k
RailsConf 2023
tenderlove
30
1.1k
Fireside Chat
paigeccino
37
3.4k
Producing Creativity
orderedlist
PRO
344
40k
Building Adaptive Systems
keathley
41
2.5k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2k
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ͷύϫʔΛ ࠷େݶʹ׆༻Ͱ͖Δ ίʔυঢ়ଶΛΩʔϓ͠Α͏
ޫͷಓΛɺͨͷ͘͠ า͍͍͖ͯ·͠ΐ͏ʂʂ