Hotwire光の道とStimulus

)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 3BJMT΋41"΋ +4 3BJMTͰߏ੒͞Ε͍ͯΔΑ͏ʹݟ͑Δ

3BJMT 3BJMT 3FBDU౳ )PUXJSF )PUXJSFͬͯ Ͳ͜·Ͱ3FBDUͱଝ৭ͳ͘࡞Ε·͔͢ʁ ҧ࿨ײ

)PUXJSFͱ3FBDU ౳ ͕ ಉ͡ϨΠϠʔͷ୅ସ෺ͱͯ͠ ରԠ͍ͯ͠ΔΘ͚Ͱ͸ͳ͍

8FCΞϓϦͷ੍ޚΛ ࣍ͷΑ͏ʹ෼ղ͢Δͱɾɾɾ ɹϢʔβʔ ૢ࡞ ΠϕϯτϋϯυϦϯά ը໘ͷมߋ σʔλͷมߋ

41" ɹϢʔβʔ ૢ࡞ ΠϕϯτϋϯυϦϯά +4 ը໘ͷมߋ +4 σʔλͷมߋ 3BJMT

)PUXJSF 3BJMT ɹϢʔβʔ ૢ࡞ ΠϕϯτϋϯυϦϯά +4 +4 ը໘ͷมߋ ʢσʔλͷมߋʣ 3BJMT
3BJMT ը໘ͷมߋ ը໘ͷมߋ +4

ͭ·Γ

)PUXJSF͸3BJMTͱηοτͰ 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

ΞϓϦಠࣗͷΠϕϯτϋϯυϦϯά͸ 4UJNVMVTͰ͔͠Ͱ͖ͳ͍ ɹϢʔβʔ ૢ࡞ ΠϕϯτϋϯυϦϯά +4 +4 ը໘ͷมߋ ʢσʔλͷมߋʣ 3BJMT
3BJMT ը໘ͷมߋ ը໘ͷมߋ +4 ˞σϑΥͷΠϕϯτϋϯυϦϯάΛ8FCͱ5VSCP͕୲౰

ΠϕϯτϋϯυϦϯάޙɺ4UJNVMVTͰ ը໘Λมߋ͍ͨ͜͠ͱ͕͋Δ ɹϢʔβʔ ૢ࡞ ΠϕϯτϋϯυϦϯά +4 +4 ը໘ͷมߋ ʢσʔλͷมߋʣ 3BJMT

ϝΠϯͷը໘มߋ͸ 3BJMT 5VSCPʹߦΘͤΔ ɹϢʔβʔ ૢ࡞ ΠϕϯτϋϯυϦϯά +4 +4 ը໘ͷมߋ ʢσʔλͷมߋʣ

3BJMT͔Βը໘Λग़ྗͨ͠ޙʹ +BWB4DSJQUͰ͔͠ Ͱ͖ͳ͍͜ͱ΋4UJNVMVTͰରԠ ɹϢʔβʔ ૢ࡞ ΠϕϯτϋϯυϦϯά +4 +4 ը໘ͷมߋ σʔλͷมߋ

ॲཧͷྲྀΕΛ౿·͑ͯ ໨తผʹ෼ྨͯ͠ΈΔ

ΠϕϯτϋϯυϦϯά ը໘มߋ Λॻ͘ͱ͖ͷ໨త ɹϢʔβʔ ૢ࡞ ΠϕϯτϋϯυϦϯά +4 +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ͷύϫʔΛ ࠷େݶʹ׆༻Ͱ͖Δ ίʔυঢ়ଶΛΩʔϓ͠Α͏

ޫͷಓΛɺͨͷ͘͠ า͍͍͖ͯ·͠ΐ͏ʂʂ

Hotwire光の道とStimulus

Hotwire光の道とStimulus

More Decks by Yasuko Ohba

Other Decks in Technology

Featured

Transcript