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
6
2.7k
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
62
39k
Hotwire的な設計を追求して「Web紙芝居」に行き着いた話
nay3
9
4.3k
「Rubyメソッドかるた」 王者への道 ~ 万葉チームのガチな取り組みを大公開 ~
nay3
3
330
The Better RuboCop World to enjoy Ruby
nay3
1
13k
強いエンジニアという灯
nay3
51
22k
万葉のRails新人研修のコードレビューコメントを分析してみました
nay3
7
9.4k
"Railsで開発できる" への道
nay3
7
1.1k
自立したRuby技術者を育てる - 万葉の新人教育の仕組み
nay3
13
2.3k
A Training System of Ruby Programmers / Rubyプログラマが育つ仕組み - Rubyでの受託開発を10年回してみて -
nay3
17
7.5k
Other Decks in Technology
See All in Technology
新R25、乃木坂46 Mobileなどのファンビジネスを支えるマルチテナンシーなプラットフォームの全体像 / cam-multi-cloud
cyberagentdevelopers
PRO
1
130
RAGのためのビジネス文書解析技術
eida
3
230
Amazon_CloudWatch_ログ異常検出_導入ガイド
tsujiba
4
1.7k
運用イベント対応への生成AIの活用 with Failure Analysis Assistant
suzukyz
0
150
「視座」の上げ方が成人発達理論にわかりやすくまとまってた / think_ perspective_hidden_dimensions
shuzon
2
10k
バクラクにおける可観測性向上の取り組み
yuu26
3
430
生成AIの強みと弱みを理解して、生成AIがもたらすパワーをプロダクトの価値へ繋げるために実践したこと / advance-ai-generating
cyberagentdevelopers
PRO
1
190
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
49k
来年もre:Invent2024 に行きたいあなたへ - “集中”と“つながり”で楽しむ -
ny7760
0
510
GitHub Universe: Evaluating RAG apps in GitHub Actions
pamelafox
0
180
コンテンツを支える 若手ゲームクリエイターの アートディレクションの事例紹介 / cagamefi-game
cyberagentdevelopers
PRO
1
130
AWS re:Invent 2024 Kansai Standby
hiroramos4
PRO
0
110
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
4 Signs Your Business is Dying
shpigford
180
21k
Build The Right Thing And Hit Your Dates
maggiecrowley
32
2.4k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
How GitHub (no longer) Works
holman
311
140k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
41
2.1k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
A better future with KSS
kneath
238
17k
Designing on Purpose - Digital PM Summit 2013
jponch
115
6.9k
A designer walks into a library…
pauljervisheath
202
24k
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ͷύϫʔΛ ࠷େݶʹ׆༻Ͱ͖Δ ίʔυঢ়ଶΛΩʔϓ͠Α͏
ޫͷಓΛɺͨͷ͘͠ า͍͍͖ͯ·͠ΐ͏ʂʂ