Kaigi on Rails 2023での「Hotwire的な設計を追求して「Web紙芝居」に行き着いた話」のトーク資料です。
)PUXJSFతͳઃܭΛٻͯ͠ʮ8FCࢴࣳډʯʹߦ͖ண͍ͨ!OBZେೡࢠ
View Slide
ࣗݾհ!OBZʢେೡࢠʣגࣜձࣾສ༿ͷۀऀɾࣾ3BJMTΤϯδχΞઃܭɾ࣮େ͖ਓؒݩɾڝٕ͔ΔͨޒஈֆΛඳ͘ͷ͕͖
גࣜձࣾສ༿3BJMTΛͬͨ։ൃࢧԉͷฮ͍͍ͷΛɺͨͷ͘͠ϦϞʔτϫʔΫଟ͍৽ೖࣾһڭҭ༻ΧϦΩϡϥϜສ༿OPUFΤϯδχΞ࠾༻Λߦ͍ͬͯ·͢ʂʂ
ສ༿)PUXJSFΛਪ͍ͯ͠·͢ʂ։ൃҊ݅ʹ)PUXJSFΛ׆༻ݚڀɾใൃ৴׆ಈສ༿OPUF5VSCP)BOECPPLͷ༁
5VSCP)BOECPPLຊޠ༁αΠτΛެ։͠·ͨ͠IUUQTFWFSZMFBGHJUIVCJPIPUXJSF@KB
༁ϓϩδΣΫτօ͞ΜͱҰॹʹ༁Λ͍͚ͯ͠ΔΑ͏ɺίϯτϦϏϡʔγϣϯΨΠυͷࡦఆΛߦ͍ͬͯ͘༧ఆ༁ͱ͍͏Ξϓϩʔν͔Β)PUXJSFͷཧղΛਂΊΒΕΔ͝ڵຯͷ͋ΔํͥͻҰॹʹΓ·͠ΐ͏
Ͱຊ
·ͣڭ͍͑ͯͩ͘͞
ʲ࣭ʳ)PUXJSFΛͬͯ։ൃͨ͜͠ͱ͕͋Δํʁ
ʲ࣭ʳ)PUXJSFؾʹೖͬͯΔํʁ
ʲ࣭ʳ)PUXJSFਖ਼ͬ͘͠Γདྷ͍ͯͳ͍ํʁ
)PUXJSFͱࢲ)PUXJSFΛͬͨେ͖ΊͷΞϓϦ։ൃΛܦݧ݁ɺ)PUXJSFศརɹجຊతʹ)PUXJSFͰ࡞Γ͍ͨͰɺબࢶ͕ଟͯ͘໎͏͍͠ͳ͕ΒɺϞϠϞϠͯ͠ɺ͍Ζ͍Ζߟ͑ͨͳΜ͔͔͖ͬͯͨؾ͕͢ΔͷͰͦΕΛڞ༗͍ͨ͠
ࠓͷςʔϚ)PUXJSFΛ͍͍ͯ͘͠தͰࣗͳΓʹൃݟͨ͠ઃܭࢦͱɺͦͷഎܠʹ͋Δੑ࣭ʹ͍ͭͯͯ͠Έ͍ͨࢦ͕׆༻͞ΕΔ͜ͱͰʮ)PUXJSFͰ͏·͍͘͘ʯέʔεΛ૿͍ͨ͠
͍8FCΞϓϦͲ͏ͳΕʮ41"෩ͷ͍উखʯʹͳΔʁ
ͨ͑͜ը໘͕ͳΊΒ͔ʹߋ৽Ͱ͖Δը໘͕෦తʹߋ৽Ͱ͖Δʢෆศͳը໘มԽ͕ͳ͍ʣ
ੲ෩ͷ8FCΞϓϦͷར༻্ͷܽຖճɺը໘શମ͕ॻ͖ΘΔ͍ɻͨ͞ΕΔɻͪΒͭ͘ɻμαΠɻ࡞Γ͕ѱ͍ͱɺը໘্ͷมΘͬͯ΄͘͠ͳ͍ʢೖྗͳιʔτɾߜΓࠐΈঢ়ଶʣ͕มΘͬͯ͠·ͬͨΓ͕ͪ͠ɻෆศɻϏδϡΞϧతʹ͔͍͍ͬ͜ಈ͖͕͚ͭʹ͍͘
41")PUXJSF͜ͷ՝ΛղܾͰ͖Δ41" )PUXJSF͍ ˕ ˕ͪΒͭ͘ ˕ ˕ෆศͳը໘มԽ ˕ ˕ϏδϡΞϧޮՌ ˕ ̋˞ݸਓతײ৮Ͱ͢
)PUXJSF5VSCPը໘ભҠ4VCNJUΛεϜʔζɾߴʹͯ͠ɺ෦ߋ৽ɺ8FC4PDLFUʹΑΔߋ৽ͳͲΛΧόʔɻ+4Λॻ͔ͣʹ͜ΕΒΛ࣮ݱͤͯ͘͞ΕΔɻ4UJNVMVT5VSCP͚ͩͰर͑ͳ͍ը໘ଆͰ+4ॻ͖͍ͨχʔζʹରԠɻ%0.ͱ+4Λ͖Ε͍ʹͯ͠ॻ͘͜ͱ͕Ͱ͖Δɻ4USBEBωΠςΟϒɾ8FCͷϋΠϒϦουܕͷϞόΠϧΞϓϦ͚ࠓओʹ͜ͷΛ͠·͢
ͪͳΈʹ5VSCPɺ5VSCPMJOLTͷࠒͱײ৮͕͕͔ͪͬͯͯͳΓ͍͍͢Ͱ͢
5VSCPʹΑΔը໘ߋ৽ͷڞ௨"DUJPOϦΫΤετϨεϙϯεʢ)5.-ʣ+4ը໘ߋ৽Λൃੜͤ͞ΔͨΊʹ৽͘͠ΞΫγϣϯΛݺͿɻͦͷϨεϙϯεΛ+4 5VSCP͕͏·͍͜ͱը໘ʹөͯ͘͠ΕΔ
5VSCPʹΑΔը໘ߋ৽ͷख๏ͱಛ෦ߋ৽ߋ৽ൣғͷࣗ༝୯ಠͰΞΫηεભҠ͢Δ5VSCP%SJWF ☓ ˕ ˕ ˕5VSCP'SBNFT ˕ ˚ ˕ ✕5VSCP4USFBNT ˕ ˕ ☓ ✕
ख๏͕ෳ͋ΔͷͰ໎͍͕ੜ͡Δ
࣮ͷํʹ෯͕Ͱ͖Δ
ྑ͍ํͱΠϚΠνͳํ͕͋Δ͜ͱʹؾ͍ͮͨ
ʮը໘ͷҰ෦͚ͩΛߋ৽͍ͨ͠ʯͱߟ͑Δ߹
5VSCPͰΓ͕ͪͳൃᶃҰ෦Λߋ৽͢ΔΜ͔ͩΒɺ5VSCP'SBNFT͔5VSCP4USFBNTͩͳࠓճҰՕॴʹ·ͱ·͍ͬͯΔ͔Βɺ5VSCP'SBNFT͕͍͍Μ͡Όͳ͍ʁ෦ߋ৽͕ඞཁͩʂ 5VSCP'SBNFTͩʂ
Γ͕ͪͳஅϑϩʔ෦ߋ৽͕ඞཁͩʂมߋՕॴ͕ཁૉʹ·ͱ·Δʁ5VSCP4USFBNT5VSCP'SBNFTελʔτ·ͱ·Δ·ͱ·Βͳ͍
5VSCPͰΓ͕ͪͳൃᶄ͜ͷʮ෦ߋ৽ʯͬͯɺ ίϯϙʔωϯτΈ͍ͨͳҐஔ͚ͮʹͯ͠ɺ ൚༻ԽͰ͖ΔΜ͡Όͳ͍͔ͳʁ
ࢦ͕ͪ͠ͳํੑʮ࠷ॳͷϖʔδʯͱʮ෦ߋ৽ʯͰɺͳΔ͘ॲཧͷॏͳΓ͕ͳ͍΄͏͕Α͍ɻΛ͚Α͏ɻίϯϙʔωϯτͬΆ͘ɺγϯϓϧͳͷΞΫγϣϯΛ࡞ͬͯɺͦΕΛ5VSCP'SBNFT͔5VSCP4USFBNTͰݺͼग़ͯ͠ߦ͜͏ɻ
Γ͕ͪͳ͜ͱ·ͱΊ ʮ෦ߋ৽ʯ͋Γ͖Ͱߟ͑Δ ʮ෦ߋ৽ʯΛಠཱͨ͠ʹରԠ͢ΔίϯϙʔωϯτతͳΠϝʔδͰ࡞Δ
ͷͬͯѱ͍ͷʁʁ͜͜ͳΜͰ͢Αࢲͨͪɺͷ͕େ͖Ͱɺ)PUXJSFͰҙ͕ඞཁͳ͜ͱʹؾ͍ͮͨʢ݁ߏɺিܸΛड͚ͨʣޙͰৄ͘͠આ໌͠·͢
ᶃʮ෦ߋ৽ʯ͋Γ͖Ͱߟ͑ͳ͍Α͏ʹ͢Δʹʁ
ελʔτΛม͑Δ෦ߋ৽͕ඞཁͩʂը໘ঢ়ଶΛ"ˠ#ʹม͑Δ
ը໘ঢ়ଶΛ"ˠ#ʹม͑Δํ๏ΛબͿͨΊͷϑϩʔνϟʔτͰ͖Δ ओʹ(&5͏ ·ͱ·Δ·ͱ·Βͳ͍#୯ಠͰΞΫηεͰ͖ΔʁมߋՕॴ͕ཁૉʹ·ͱ·Δʁ5VSCP'SBNFT5VSCP%SJWF8FC4PDLFU5VSCP4USFBNTΘͳ͍Ͱ͖ͳ͍1045 (&5PS1045มߋՕॴ͕ཁૉʹ·ͱ·Δʁ·ͱ·Βͳ͍ ·ͱ·Δ෦తը໘త
ը໘తΞϓϩʔνͦͦݕ౼͔Β࿙Ε͕ͪ
෦తΞϓϩʔνʁը໘తΞϓϩʔνʁ·ͣ͜͜Λ͖ͬΓͤ͞Α͏ʂ
ͭͷΞϓϩʔνͷҧ͍ ෦తͳΞϓϩʔνʮ෦Λߋ৽͢ΔʯॲཧΛॻ͘ ը໘తͳΞϓϩʔνʮ෦͕ߋ৽͞Εͨ݁Ռը໘ʯભҠ͢Δʮ8FCࢴࣳډʯͱ໊͚ͨ
มԽ̍ᶃ ᶄมԽมԽ มԽᶃ ᶄ෦తΞϓϩʔνը໘తΞϓϩʔνʢ8FCࢴࣳډʣʮࢴࣳډʯʮΞχϝʯΈ͍ͨ
෦తΞϓϩʔν͞Βʹ̎ͭʹྨͰ͖Δ෦తΞϓϩʔνʮ͋Δը໘ͷ͋Δ෦ߋ৽ʯʹಛԽͨ͠ॲཧΛॻ͜͏ಠཱͨ͠Λ࣋ͭ൚༻తͳ෦ʢίϯϙʔωϯτʣΛ࡞Ζ͏ˡΓ͕ͪͳൃᶄ
ͭ·Γ͜͏͍͏ײ͡ը໘తΞϓϩʔν෦ߋ৽ͳ͠5VSCP%SJWFͷΈ෦ߋ৽͋Γ5VSCP'SBNFTར༻෦తΞϓϩʔνಛఆը໘ઐ༻൚༻ίϯϙʔωϯτ
ࢲͷॴײը໘తΞϓϩʔν෦ߋ৽ͳ͠5VSCP%SJWFͷΈ෦ߋ৽͋Γ5VSCP'SBNFTར༻෦తΞϓϩʔνಛఆը໘ઐ༻൚༻ίϯϙʔωϯτݟಀ͞Ε͕͚ͪͩͲ༗ޮʂʂ(00%ةݥੑ͕͋Δ
۩ମྫͰઆ໌͠·͢˞͜ΕτʔΫ༻ͷྫͰ͋ΓͲͷઃܭ͕߹͏͔ͦͷ࣌ͷঢ়گʹΑΔͱࢥ͍·͢
ྫҰཡը໘্ʹΞΠςϜͷৄࡉΤϦΞΛද͍ࣔͨ͠
ɹΞΠςϜ̍ɹΞΠςϜ̎ɹΞΠςϜ̏ɹΞΠςϜ̐ɹɾɾɾɾɹΞΠςϜ̍ɹΞΠςϜ̎ɹΞΠςϜ̏ɹΞΠςϜ̐ɹɾɾɾɾΞΠςϜͷৄࡉɾɾɾɾɾɾɾɾɾɾɾɾɾɾɾɾɾɾ$MJDLΫϦοΫͨ͠ΒৄࡉΤϦΞ͕දࣔ͞ΕΔ˞༧Ίશ෦ࠐΉબࢶߟ͑ΒΕ·͕͢ɺຊτʔΫͷओࢫʹؔͳ͍ͨΊ৮Ε·ͤΜɻৄࡉදࣔͷίετ͕૬ߴ͍ͱ͔ɺҰཡͷදࣔྔ͕ଟ͍ͳͲͷཧ༝ͰͦΕΛબ͠ͳ͍ɺৄࡉใΛ݅ͱΔͨΊͷΞΫγϣϯผʹ༻ҙ͢Δͱ͍͏લఏͰฉ͍͍ͯͩ͘͞ɻ
ྫ෦తͳΞϓϩʔν ʢ൚༻ίϯϙʔωϯτʣ ͷઃܭྫมԽ̍ᶃ ᶄมԽ
෦తͳΞϓϩʔνͷൃը໘ͷʮৄࡉΤϦΞʯʹৄࡉͷ༰Λදࣔͤ͞ΔΑ͏ͳॲཧΛ༻ҙ͠Α͏ʂ
൚༻ίϯϙʔωϯτͷൃΛϓϥεৄࡉͷ༰Λදࣔ͞ΕΔॲཧͬͯΛ͚ͯ൚༻తͳίϯϙʔωϯτΈ͍ͨʹߟ͑ΒΕΔΑͶ
͍·ίίͰ͖Δ ओʹ(&5͏ ·ͱ·Δ·ͱ·Βͳ͍#୯ಠͰΞΫηεͰ͖ΔʁมߋՕॴ͕ཁૉʹ·ͱ·Δʁ5VSCP'SBNFT5VSCP%SJWF8FC4PDLFU5VSCP4USFBNTΘͳ͍Ͱ͖ͳ͍1045 (&5PS1045มߋՕॴ͕ཁૉʹ·ͱ·Δʁ·ͱ·Βͳ͍ ·ͱ·Δ
มߋՕॴ͕ՕॴͳͷͰ5VSCP'SBNFTΛબ
ख๏ܾఆʂͰ͖Δ ओʹ(&5͏ ·ͱ·Δ·ͱ·Βͳ͍#୯ಠͰΞΫηεͰ͖ΔʁมߋՕॴ͕ཁૉʹ·ͱ·Δʁ5VSCP'SBNFT5VSCP%SJWF8FC4PDLFU5VSCP4USFBNTΘͳ͍Ͱ͖ͳ͍1045 (&5PS1045มߋՕॴ͕ཁૉʹ·ͱ·Δʁ·ͱ·Βͳ͍ ·ͱ·Δ
෦తΞϓϩʔνͷઃܭྫJOEFYΞΫγϣϯৄࡉදࣔͷ͜ͱ͚ͩΛΔʂ͕Γ͚ΒΕ͍ͯͯඒ͍͠ʂҰཡը໘ɹΞΠςϜ̍ɹΞΠςϜ̎ɹΞΠςϜ̏ɹΞΠςϜ̐ɹɾɾɾɾΞΠςϜͷৄࡉΤϦΞΞΠςϜͷৄࡉɾɾɾɾɾɾɾɾɾɾɾɾɾɾɾɾɾɾ$MJDLTIPXΞΫγϣϯJUFNTJUFNT QBHF
ίʔυྫdef index@items = Item.allenddef show@item = Item.find(params[:id])end.row.col-6…Ұཡදࣔ….col-6turbo-frame#itemDetailFrameturbo-frame#itemDetailFrame…ৄࡉදࣔ…JUFNT@DPOUSPMMFSSC JOEFYIUNMTMJNTIPXIUNMTMJNී௨ͷ$36%ͷܗͰը໘ʹຒΊࠐΊͯΩϨΠ
ྫ8FCࢴࣳډͷઃܭྫมԽ มԽᶃ ᶄ
8FCࢴࣳډͷൃΞΠςϜͷৄࡉ͕։͍ͨϖʔδͬͯΞΫηεͰ͖ͨΒศརͳΜ͡Όͳ͍͔ͳʁͦ͏͍͏ը໘ΛҰཡͱผʹ༻ҙ͠Α͏
༨ஊ͜ͷΑ͏ʹ5VSCP'SBNFT྆ํͷΞϓϩʔνͰબͼಘΔ
8FCࢴࣳډͷઃܭྫJOEFYΞΫγϣϯࢴࣳډͷʮ࣍ͷຕʯΛఏڙʂ͕͔Ε͓ͯΒͣɺటष͍Ұཡը໘ɹΞΠςϜ̍ɹΞΠςϜ̎ɹΞΠςϜ̏ɹΞΠςϜ̐ɹɾɾɾɾΞΠςϜͷৄࡉΤϦΞ͕։͍͍ͯΔҰཡը໘ɹΞΠςϜ̍ɹΞΠςϜ̎ɹΞΠςϜ̏ɹΞΠςϜ̐ɹɾɾɾɾΞΠςϜͷৄࡉɾɾɾɾɾɾɾɾɾɾɾɾɾɾɾɾɾɾTIPXΞΫγϣϯJUFNT QBHF$MJDLJUFNT QBHF
.row.col-6…Ұཡදࣔ….col-6turbo-frame#itemDetailFrame- if @item…ৄࡉදࣔ….row.col-6…Ұཡදࣔ….col-6turbo-frame#itemDetailFramedef indexprepare_itemsenddef show@item = Item.find(params[:id])prepare_itemsrender action: :indexendprivatedef prepare_items@items = Item.allendίʔυྫJUFNT@DPOUSPMMFSSC JOEFYIUNMTMJNTIPXIUNMTMJN͕͋͞Δ
෦తͳΞϓϩʔνʢ൚༻ίϯϙʔωϯτʣʹΑΔઃܭͷ΄͏͕ϞμϯͰඒ͍͠
Ͱɺ࣮8FCࢴࣳډͷઃܭʹར͕͋Δ
ࠓ͓͍͑ͨ͜͠ͱΦϒδΣΫτࢦʹ׳ΕͨΤϯδχΞɺ෦తͳΞϓϩʔνͰઃܭ͕͔ͪ͠͠͠ɺ࣮෦తͳΞϓϩʔνͷઃܭͱ)PUXJSFͷ૬ੑͦ͜·Ͱྑ͘ͳ͍😱ʮ8FCࢴࣳډͷઃܭʯબࢶʹೖΕͯऔΓೖΕ͍ͯ͘ͷ͕͓͢͢Ί
෦తͳΞϓϩʔνͷઃܭͱ)PUXJSFͷ૬ੑͦ͜·Ͱྑ͘ͳ͍😱ͦΕͳͥʁͦͷͨΊͷ)PUXJSF͡Όͳ͍ͷʁ
3BJMTͰ෦తΞϓϩʔνͷઃܭΛ͢Δͱ੍ޚ͕ʮը໘ʯʹد͍ͬͯ͘
۩ମྫ
෦తͳΞϓϩʔνͷઃܭJOEFYΞΫγϣϯҰཡը໘ɹΞΠςϜ̍ɹΞΠςϜ̎ɹΞΠςϜ̏ɹΞΠςϜ̐ɹɾɾɾɾΞΠςϜͷৄࡉΤϦΞΞΠςϜͷৄࡉɾɾɾɾɾɾɾɾɾɾɾɾɾɾɾɾɾɾ$MJDLTIPXΞΫγϣϯJUFNTJUFNT QBHF༻ҙͯ͋͠ΔৄࡉΤϦΞΛUVSCPGSBNFཁૉʹͯ͠༰Λྲྀ͠ࠐ͏ʂ
࠶ܝɿίʔυྫdef index@items = Item.allenddef show@item = Item.find(params[:id])end.row.col-6…Ұཡදࣔ….col-6turbo-frame#itemDetailFrameturbo-frame#itemDetailFrame…ৄࡉදࣔ…JUFNT@DPOUSPMMFSSC JOEFYIUNMTMJNTIPXIUNMTMJNී௨ͷ$36%ͷܗͰը໘ʹຒΊࠐΊͯΩϨΠ
࡞ͬͨޙᘳʹ͓͞·͍ͬͯͯػೳվળ͕Γʹ͍͘߹͕͋Δ
ཁᶃৄࡉΛ։͍͍ͯΔΞΠςϜΛҰཡͰ͔Γ͍ͨ͘͢͠ɹΞΠςϜ̍ɹΞΠςϜ̎ɹΞΠςϜ̏ɹΞΠςϜ̐ɹɾɾɾɾΞΠςϜͷৄࡉɾɾɾɾɾɾɾɾɾɾɾɾɾɾɾɾɾɾϦϯΫ͕ΫϦοΫ͞ΕͨΒ+4ͰσβΠϯม͑Α͏ৄࡉดͨ͡ͱ͖+4ͰσβΠϯม͑Α͏·͋ɺ4UJNVMVTॻ͔͘
+4͕૿͑࢝ΊΔshow(event) {this.rowTargets.forEach((element) => {element.classList.remove("bg-warning")})event.currentTarget.parentElement.parentElement.classList.add("bg-warning")}close(event) {this.rowTargets.forEach((element) => {element.classList.remove("bg-warning")})}JUFNT@DPOUSPMMFSKT
ཁᶄҰཡը໘͚ͩͷχʔζͱͯ͠ɺಛఆͷΞΠςϜΛৄࡉදࣔͨ͠ͱ͖ʹɺܯࠂΛը໘্෦ʹද͍ࣔͨ͠ɹΞΠςϜ̍ɹΞΠςϜ̎ɹΞΠςϜ̏ɹΞΠςϜ̐ɹɾɾɾɾΞΠςϜͷৄࡉɾɾɾɾɾɾɾɾɾɾɾɾɾɾɾɾɾɾ8BSOJOH՝w ཁૉʹ·ͱ·Βͳ͍w ܯࠂΞΠςϜৄࡉຊདྷͷ ͡Όͳ͍
ෆࣗ༝͞Λײ͍ͯ͘͡5VSCP'SBNFTͷ߹ܾΊͨΤϦΞͷ֎ߋ৽͠Α͏ͱ͢Δͱ ్ʹ໘ʹͳΔτϨʔυΦϑͷ͋ΔબΛ͠ͳ͚ΕͳΒͳ͍ಘΔͷ ࣦ͏ͷ༷ΛଥڠʢৄࡉΤϦΞʹܯࠂදࣔʣͷʢগ͠ଥڠʣ༷ͷ࣮ݱ5VSCP4USFBNTʹมߋ༷ͷ࣮ݱ ͷ+4Ͱผ్ܯࠂΛग़͢ ͷ ։ൃɾอकੑ
ඒ͠͞ΛकΔˣΞΫγϣϯͷΛখ͘͞อͭˣ+4͕૿͑Δ4UJNVMVTͰҎલΑΓշదͰɺ૿͑Εେม
Կ͕ى͖͍ͯΔ͔
ຊ࣭తʹɺΞϓϦͷը໘ͷҰ෦͕ಠཱ͍ͯ͠Δ͜ͱอূ͞Εͳ͍ɻը໘ͷύʔπɺ૬ޓʹؔ࿈ͯ͠มԽ͢ΔՄೳੑ͕͋Δɻ
૬ޓʹؔ࿈ͯ͠มԽͤ͞Δ͜ͱͪΖΜٕज़ʹΑͬͯղܾՄೳ
͔͠͠
)PUXJSFͰͦͷղܾͷओઓ͕ը໘ +4ʹͳͬͯ͠·͏ɾɾɾৄ͍͠ཧ༝ޙड़͠·͢
41"ͷ߹ͱൺͯͦ͏͍͏ղܾ͕͖Ε͍ʹॻ͚ͳ͍
αʔόαΠυʢ3VCZʣͱΫϥΠΞϯταΠυʢ+4ʣͰೋॏॲཧੜ׆
͕ΜΔˣർΕΔˣͦΕΛղܾ͢ΔͨΊͷ41"͡Όͳ͔͚ͬͨͬʜˣ41"ճؼ
ͦ͏͍͏࠳ં͕ى͖ͳ͍͔৺Ͱ͢ͳͷͰɺ͜ͷτʔΫΛ͍ͨ͠ͱࢥ͍·ͨ͠
͔ͩΒ8FCࢴࣳډతͳઃܭΛબࢶʹೖΕΔ͜ͱΛ͓͢͢Ί͍ͨ͠
ผͷݴ͍ํΛ͢Δͱ41"తϚΠϯυηοτ͔Β)PUXJSFతϚΠϯυηοτͷΓସ͑
41"తίϯϙʔωϯτࢦ)PUXJSFతੲ͔Βͷ3BJMT
ը໘ʹ੍ޚ͕د͖ͬͯͨͱײͨ͡ΒઃܭํͷΓସ͑Λߟ͑ͯΈΔͱྑ͍
͖ͬ͞ͷྫ8FCࢴࣳډతͳઃܭͰɺͲ͏ͳΔ͔ʁ
8FCࢴࣳډͷઃܭJOEFYΞΫγϣϯҰཡը໘ɹΞΠςϜ̍ɹΞΠςϜ̎ɹΞΠςϜ̏ɹΞΠςϜ̐ɹɾɾɾɾΞΠςϜͷৄࡉΤϦΞ͕։͍͍ͯΔҰཡը໘ɹΞΠςϜ̍ɹΞΠςϜ̎ɹΞΠςϜ̏ɹΞΠςϜ̐ɹɾɾɾɾΞΠςϜͷৄࡉɾɾɾɾɾɾɾɾɾɾɾɾɾɾɾɾɾɾTIPXΞΫγϣϯJUFNT QBHF$MJDLJUFNT QBHFৄࡉΤϦΞΛUVSCPGSBNFʹ͢Δ4IPXΞΫγϣϯҰཡৄࡉ
.row.col-6…Ұཡදࣔ….col-6turbo-frame#itemDetailFrame- if @item…ৄࡉදࣔ….row.col-6…Ұཡදࣔ….col-6turbo-frame#itemDetailFramedef indexprepare_itemsenddef show@item = Item.find(params[:id])prepare_itemsrender action: :indexendprivatedef prepare_items@items = Item.allend࠶ܝɿίʔυྫJUFNT@DPOUSPMMFSSC JOEFYIUNMTMJNTIPXIUNMTMJN͕͋͞Δ
ͨͿΜ͜ͷ࣌ͩͱ͜ͷઃܭΛબͿརཧղ͞ΕͮΒ͍˞ҰԠɺ୯ಠͰΞΫηεͰ͖ΔʢύʔϚωϯτϦϯΫ͕͋Δʣͱ͍͏ϝϦοτ͢Ͱʹ͋Γ·͢
ཁᶃৄࡉΛ։͍͍ͯΔΞΠςϜΛҰཡͰ͔Γ͍ͨ͘͢͠ɹΞΠςϜ̍ɹΞΠςϜ̎ɹΞΠςϜ̏ɹΞΠςϜ̐ɹɾɾɾɾΞΠςϜͷৄࡉɾɾɾɾɾɾɾɾɾɾɾɾɾɾɾɾɾɾ4UJNVMVTͰ͍͍͚Ͳ5VSCP%SJWFͰ͍͔ͬ!JUFN͚ͩσβΠϯม͑ͯग़ྗͯ͋͛͠Ε͍͍ΑͶ
ख๏Λ5VSCP%SJWFʹมߋͰ͖Δ ओʹ(&5͏ ·ͱ·Δ·ͱ·Βͳ͍#୯ಠͰΞΫηεͰ͖ΔʁมߋՕॴ͕ཁૉʹ·ͱ·Δʁ5VSCP'SBNFT5VSCP%SJWF8FC4PDLFU5VSCP4USFBNTΘͳ͍Ͱ͖ͳ͍1045 (&5PS1045มߋՕॴ͕ཁૉʹ·ͱ·Δʁ·ͱ·Βͳ͍ ·ͱ·Δ
+4͕૿͑ͳ͍.row.col-6…ϔομ…- @items.each do |item|.row.m-1 class="#{item == @item ? "bg-warning" : ‘'}"..1ߦͷදࣔ...col-6- if @item…ৄࡉදࣔ…TIPXIUNMTMJNͲͷৄࡉΛද͍͔ࣔͨ͠ΞΫγϣϯݺͼग़࣌͠ͰΘ͔ΔͷͰ͋Β͔͡ΊσβΠϯΛࢦఆUVSCPGSBNFফͨ͠
ཁᶄҰཡը໘͚ͩͷχʔζͱͯ͠ɺಛఆͷΞΠςϜΛৄࡉදࣔͨ͠ͱ͖ʹɺܯࠂΛը໘্෦ʹද͍ࣔͨ͠ɹΞΠςϜ̍ɹΞΠςϜ̎ɹΞΠςϜ̏ɹΞΠςϜ̐ɹɾɾɾɾΞΠςϜͷৄࡉɾɾɾɾɾɾɾɾɾɾɾɾɾɾɾɾɾɾ8BSOJOH5VSCP%SJWFͩ͠ಛʹͳ͍ͬ͢
+4͕૿͑ͳ͍- if @item&.old?.alert.alert-danger role="alert"| ͜ͷΞΠςϜར༻ظݶΛա͍͗ͯ·͢!!…Ұཡɾৄࡉදࣔ…TIPXIUNMTMJN
͍͢͝ʂʂ
ͳΜͰαʔόαΠυͰͰ͖Δʂʂ
ɾɾɾ࣮ࡍݹయతͳ8FCΞϓϦͳ͚ͩ
5VSCP%SJWFͷ͓͔͛ͰΩϨΠʹΈ͑Δٯʹ͍͏ͱ5VSCP%SJWF͕ͳ͚Ε બࢶʹͰ͖ͳ͔ͬͨ৽͍͠બࢶ
ίϩϯϒεͷཛ౮Լ҉͠ݪճؼ
8FCࢴࣳډతͳઃܭͱࢴࣳډͷΑ͏ͳ8FCΞϓϦΛ5VSCPͰΩϨΠʹݟͤΔը໘ͷঢ়ଶ͝ͱʹ63-Λ༻ҙ͢Δ෦ߋ৽ΛΦϓγϣφϧͳཁ݅ͱߟ͑ΔมԽ มԽᶃ ᶄ
8FCࢴࣳډͷઃܭͷϝϦοτ
αʔόαΠυͰ੍ޚͰ͖Δʂʂʂ
αʔόαΠυͰ੍ޚͰ͖Δ͜ͱ͕3BJMTͷྑ͞Λ࠷େݶʹڗड͢Δ͜ͱʹͭͳ͕Δ
αʔόαΠυ੍ޚͳΒ3VCZͰॻ͚ΔˠߏԽɺϝλϓϩͳͲ͕͍͢͠ҰՕॴʹॻ͚ΔʢαʔόΫϥΠΞϯτͰೋॏཧ͠ͳͯ͘ࡁΉʣͲ͜ʹͦͷॲཧ͕͋Δ͔୳͍͢͠ʢॲཧ͕·ͱ·Γ͍͢ʣ
ͱ͜ΖͰ
͜͜Ͱͪΐͬͱͬ͘͡Γݟ͍͖͍ͯͨͷ͕
෦తͳΞϓϩʔνͷઃܭ͕ը໘ʹ੍ޚΛدͤΔ͜ͱʹͭͳ͕Γ͍͢ͷͳ͔ͥʁͱ͍͏͜ͱ
͍͍·දࣔ͞Ε͍ͯΔʮը໘ʯͷঢ়ଶΛαʔόαΠυ͕Ѳ͍ͯ͠Δ͔ʁ
Ұཡͷ͋ͱʹʮಠཱͨ͠ৄࡉΞΫγϣϯʯΛݺͿJOEFYΞΫγϣϯҰཡը໘TIPXΞΫγϣϯৄࡉϞʔμϧͷத$MJDLͲͪΒͷΞΫγϣϯࠓͷը໘ͷঢ়ଶΛΒͳ͍
ࠓͷը໘Λ͍ͬͯΔͷը໘͚ͩJOEFYΞΫγϣϯҰཡը໘TIPXΞΫγϣϯৄࡉϞʔμϧͷத$MJDL͕ࣗΔ͔͠ͳ͍Ͱ͢Ͷ
͔ͩΒը໘ʹ੍ޚ͕دͬͯ͠·͏
)PUXJSFͷෆ߹ͳਅ࣮͔͠Εͳ͍෦ߋ৽͕ڧԽ͞Εͯศརͳ)PXJSF෦ߋ৽ɺજࡏతʹɺը໘ʹ੍ޚΛҾ͖دͤΔ
ͰɺαʔόαΠυʹॲཧΛدͤΔʹʁ
ը໘ͷঢ়ଶΛαʔό͕͍ͬͯΔঢ়ଶʹ͢ΔϢʔβʔ͕ૢ࡞ͨ͠Βɺαʔόߦͬͯɺ࠷ऴը໘ঢ়ଶΛαʔόʹΒͤͳ͕Βɺը໘Λߋ৽͢ΔΞΫγϣϯ ը໘ঢ়ଶը໘ঢ়ଶΛද͢63-ΞΫγϣϯ ࣍ͷը໘ঢ়ଶ࣍ͷը໘ঢ়ଶΛද͢63-Ϣʔβʔૢ࡞
ը໘ঢ়ଶΛද͢63-ͷྫ͋ΔΧςΰϦͰߜΓࠐΜͩҰཡJUFNT DBUFHPSZDBUFHPSJFTJUFNT͋ΔΧςΰϦͰߜΓࠐΜͩҰཡͰɺಛఆͷΞΠςϜͷৄࡉΛ։͍͍ͯΔը໘JUFNT DBUFHPSZDBUFHPSJFTJUFNT
Ұݟɺී௨Ͱͳ͍ײ͡ʹݟ͑Δ͔͠Εͳ͍͚ΕͲαʔόαΠυʹॲཧΛूΊΔͱ͜͏͍͏͜ͱͩͱࢥ͏ΞΫγϣϯ ը໘ঢ়ଶը໘ঢ়ଶΛද͢63-ΞΫγϣϯ ࣍ͷը໘ঢ়ଶ࣍ͷը໘ঢ়ଶΛද͢63-Ϣʔβʔૢ࡞
8FCࢴࣳډతͳઃܭͱαʔόαΠυʹը໘ͷঢ়ଶΛ੍ͯ͑ͯͯ͢͢ޚͤ͞Δઃܭࢦ
ΠϝʔδͰ͖͖ͯ·ͨ͠Ͱ͠ΐ͏͔ʁ
8FCࢴࣳډͷઃܭʹ͍ͭͯ͏গ͠͠·͢
Ͱɺ%3:͡Όͳ͍Ͱ͢ΑͶ
Ҋ֎ͦ͏Ͱͳ͍
3VCZͳΒڞ௨Խ͓खͷͷ
ίϯτϩʔϥͷॲཧը໘ग़ྗڞ௨ԽͰ͖ΔJOEFYΞΫγϣϯҰཡը໘ɹΞΠςϜ̍ɹΞΠςϜ̎ɹΞΠςϜ̏ɹΞΠςϜ̐ɹɾɾɾɾΞΠςϜͷৄࡉϞʔμϧ͕։͍͍ͯΔҰཡը໘ɹΞΠςϜ̍ɹΞΠςϜ̎ɹΞΠςϜ̏ɹΞΠςϜ̐ɹɾɾɾɾΞΠςϜͷৄࡉɾɾɾɾɾɾɾɾɾɾɾɾɾɾɾɾɾɾTIPXΞΫγϣϯJUFNT QBHFJUFNT QBHFҰཡΛग़͢४උNFUIPEҰཡ෦QBSUJBM
Ͱɺॲཧ͕Ͱॏ͍Ͱ͢ΑͶ
ͦΕͦ͏ॲཧͷແବ͋Δ͕༨͋Δ5VSCP'SBNFTͷ߹ɺ5VSCP'SBNFTϦΫΤετ͔Ͳ͏͔ͰҰ෦ͷॲཧɾඳըΛলུ͢ΔίʔυΛॻ͘͜ͱՄೳΩϟογϡΫϥΠΞϯτ੍ޚͷࡶ͞Λආ͚ΔϝϦοτͷ΄͏͕େ͖͍߹͕͋Δ
ͳΜ͔ඒ͘͠ͳ͍ɾɾɾ
ύϥμΠϜ͕ҧ͏͚ͩҟͳΔඒ͕͋͠͞Δ
ঢ়ଶ͝ͱʹ63-͕͋Δ͜ͱͷඒ͠͞
෦తΞϓϩʔνʢಛʹ൚༻ίϯϙʔωϯτࢦʣ8FCࢴࣳډΞΫγϣϯΛԿͰ͚Δͷ͔ओͳ ը໘ͷঢ়ଶඒ͠͞ ͷ͔Εํը໘ঢ়ଶʢ63-ʣͷ͔Εํ՝ը໘ʢ+4ʣͰͷ੍ޚ͕େมॲཧͷॏෳ՝ͷରࡦ 41"ʹ͢Δ ɾТɾAίϯτϩʔϥͱQBSUJBMςϯϓϨʔτΛߏԽɾڞ௨ԽॲཧͷΧϦΧϦʹ%3:ʹͰ͖Δʂ3VCZͳΒʂύʔϚωϯτϦϯΫͱ૬ੑ
༨ஊɿٻ͢Δͱ৽ͨͳઓ͕ੜ·ΕΔʢΠϝʔδͷΈ͓͑͠·͢ʣύϥϝʔλͷѻ͍Ϟʔμϧ։͍ͯΔΈ͍ͨͳͱ͖ʹલը໘ͷαʔόʹΒͤͨ͘ͳͬͯ63-͑ͨΓ͢Δ͍ύϥϝʔλΛѻ͑ΔΑ͏ʹ1045Λར༻ͨ͠ΓɺηογϣϯʢflBTIʣΛܰ͘ར༻ٖͯ͠ࣅతʹαʔόʹใΛ͑ΒΕΔΑ͏ʹ͢ΔSPVUFTੜϢʔςϦςΟಉ͡ύλʔϯͰෳ63-Λ༻ҙ͍ͨ͜͠ͱ͕૿͑ͯɺ؆୯ʹએݴͨ͘͠ͳΔ
·ͱΊ
)PUXJSFศར͚ͩͲબࢶ͕ଟͯ͘໎͏
ը໘ͷ෦ߋ৽ͷख๏ཱ͕ͭͷͰɺ෦ߋ৽͋Γ͖ͷൃͰɺ෦తͳΞϓϩʔνͷઃܭΛߦ͍͕ͪ
෦తͳΞϓϩʔνͷઃܭΛ͢Δͱɺ੍ޚ͕ʮը໘ʯʹد͍͖͍ͬͯ͢
੍ޚ͕ʮը໘ʯʹدΔͱΫϥΠΞϯτଆͷ+4͕૿͑ͯͭΒ͘ͳΔ
ͦ͏ͳΒͳ͍ͨΊʹ
ୈҰʹɺը໘తͳΞϓϩʔνʢ8FCࢴࣳډͷઃܭʣͷՄೳੑΛेʹݕ౼͢Δͱྑ͍
ը໘ঢ়ଶΛ"ˠ#ʹม͑Δํ๏ΛબͿͨΊͷϑϩʔνϟʔτͰ͖Δ ओʹ(&5͏ ·ͱ·Δ·ͱ·Βͳ͍#୯ಠͰΞΫηεͰ͖ΔʁมߋՕॴ͕ཁૉʹ·ͱ·Δʁ5VSCP'SBNFT5VSCP%SJWF8FC4PDLFU5VSCP4USFBNTΘͳ͍Ͱ͖ͳ͍1045 (&5PS1045มߋՕॴ͕ཁૉʹ·ͱ·Δʁ·ͱ·Βͳ͍ ·ͱ·Δը໘త
ίπɿ"ˠ#Λ̎ͭͷͷݟํͰͱΒ͑Δʮը໘Λม͑Δૢ࡞ʯͰ#ʹ͢Δˠ෦తΞϓϩʔν#ͱ͍͏ը໘ʹͳΊΒ͔ʹભҠ͢Δˠը໘తΞϓϩʔνʢ8FCࢴࣳډ
ୈೋʹɺ෦తͳΞϓϩʔν༻๏ɾ༰ྔΛकΔ
൚༻తͳɺͷ͔Εͨ෦Λ࡞Ζ͏͜ͷը໘ʹดͨ͡ઐ༻ͷߋ৽ॲཧΛ࡞Ζ͏જࡏతʹةݥɻΦʔΨφΠζ͢Δ͕ը໘ʹू·Γ͍͢ܯռ͕ඞཁͨͿΜ҆શɻը໘ઐ༻ͳΒ࠷ޙ5VSCP4USFBNTͰͳΜͱͰͳΔ%3:ʹ͢ΔͷϦΫΤετΑΓখ͍͞୯ҐͰ
෦తͳΞϓϩʔν൚༻ੑɾಠཱੑΛ͍ٻΊͳ͍Ͱ΄Ͳ΄ͲͷྔʹͱͲΊͨ΄͏͕Α͍
ಛʹ5VSCP'SBNFTΛ෦తʹ͓͏ͱ͢Δͱ͕͔Εͯඒ͘͠ײͯ͡᠘ʹ·Γ͕ͪͩͱࢥ͍·͢ը໘తʹ5VSCP%SJWFʹಀ͛Δͷɺ෦తʹ5VSCP4USFBNTʹಀ͛Δͷɺඒ͠͞Λଛͳ͏ײ͕ͯ͡͠͠·ͬͯɺ+4ͰͳΜͱ͔ͨ͘͠ͳΔ᠘ʜ
ͳΔ͘αʔόαΠυʹॲཧΛدͤΔΑ͏ʹҙࣝ͢Δ
41"తͳϚΠϯυηοτ͔Β)PUXJSFʢ3BJMTʣతͳϚΠϯυηοτίϯϙʔωϯτࢦ͔Β8FCࢴࣳډ
αʔόαΠυʹدͤͨͪΐͬͱͨ͠ΓΛ4UJNVMVTͰखܰʹղܾ˞நԽཻ͕·ͪ·ͪʹͳͬͯࢄΒ͔Γ͕ͪͳ͜ͱΛΈʹࢥ͍ͬͯ·͕͢ࠓͷͰͳ͍ͷͰ͜͜ͰϘϠ͚ͩ͘ʹ͠·͢
͜Ε͕)PUXJSFͷޫͷಓ
)PUXJSFͰ͍͍͢ΞϓϦΛരɾշదʹ։ൃ͠Α͏ʂʂ
nay3
tkikuchi1002
picardparis
oldbigbuddha
pospome
chumajin
niftycorp
leveragestech
yuj1osm
replu
coconala_engineer
cimadai
knsg16
eileencodes
smashingmag
chriscoyier
62gerente
sugarenia
mthomps
philhawksworth
andyhume
lara
tammielis
chrislema
holman