Hotwire的な設計を追求して「Web紙芝居」に行き着いた話

)PUXJSFతͳઃܭΛ௥ٻͯ͠ ʮ8FCࢴࣳډʯʹߦ͖ண͍ͨ࿩ !OBZେ৔ೡࢠ

ࣗݾ঺հ !OBZʢେ৔ೡࢠʣ גࣜձࣾສ༿ͷ૑ۀऀɾࣾ௕ 3BJMTΤϯδχΞ ઃܭɾ࣮૷େ޷͖ਓؒ ݩɾڝٕ͔ΔͨޒஈֆΛඳ͘ͷ͕޷͖

גࣜձࣾສ༿ 3BJMTΛ࢖ͬͨ։ൃࢧԉͷ࿝ฮ ͍͍΋ͷΛɺͨͷ͘͠ ϦϞʔτϫʔΫଟ͍ ৽ೖࣾһڭҭ༻ΧϦΩϡϥϜ ສ༿OPUF ΤϯδχΞ࠾༻Λߦ͍ͬͯ·͢ʂʂ

ສ༿͸)PUXJSFΛਪ͍ͯ͠·͢ʂ ։ൃҊ݅ʹ)PUXJSFΛ׆༻ ݚڀɾ৘ใൃ৴׆ಈ ສ༿OPUF 5VSCP)BOECPPLͷ຋༁

5VSCP)BOECPPL ೔ຊޠ༁αΠτΛެ։͠·ͨ͠ IUUQTFWFSZMFBGHJUIVCJPIPUXJSF@KB

຋༁ϓϩδΣΫτ օ͞ΜͱҰॹʹ຋༁Λ͍͚ͯ͠ΔΑ͏ɺίϯτϦϏϡʔ γϣϯΨΠυͷࡦఆΛߦ͍ͬͯ͘༧ఆ ຋༁ͱ͍͏Ξϓϩʔν͔Β)PUXJSFͷཧղΛਂΊΒΕΔ ͝ڵຯͷ͋Δํ͸ͥͻҰॹʹ΍Γ·͠ΐ͏

Ͱ͸ຊ୊

·ͣڭ͍͑ͯͩ͘͞

ʲ࣭໰ʳ )PUXJSFΛ࢖ͬͯ ։ൃͨ͜͠ͱ͕͋Δํʁ

ʲ࣭໰ʳ )PUXJSF ؾʹೖͬͯΔํʁ

ʲ࣭໰ʳ )PUXJSF ਖ਼௚ͬ͘͠Γདྷ͍ͯͳ͍ํʁ

)PUXJSFͱࢲ )PUXJSFΛ࢖ͬͨେ͖ΊͷΞϓϦ։ൃΛܦݧ ݁࿦ɺ)PUXJSFศརɹجຊతʹ)PUXJSFͰ࡞Γ͍ͨ Ͱ΋ɺબ୒ࢶ͕ଟͯ͘໎͏ ࢖͍౗͠ͳ͕ΒɺϞϠϞϠͯ͠ɺ͍Ζ͍Ζߟ͑ͨ ͳΜ͔෼͔͖ͬͯͨؾ͕͢ΔͷͰͦΕΛڞ༗͍ͨ͠

ࠓ೔ͷςʔϚ )PUXJSFΛ࢖͍౗͍ͯ͘͠தͰࣗ෼ͳΓʹൃݟͨ͠ઃ ܭࢦ਑ͱɺͦͷഎܠʹ͋Δੑ࣭ʹ͍ͭͯ࿩ͯ͠Έ͍ͨ ࢦ਑͕׆༻͞ΕΔ͜ͱͰʮ)PUXJSFͰ͏·͍͘͘ʯ έʔεΛ૿΍͍ͨ͠

໰͍ 8FCΞϓϦ͸Ͳ͏ͳΕ͹ ʮ41"෩ͷ࢖͍উखʯ ʹͳΔʁ

ͨ͑͜ ը໘͕ͳΊΒ͔ʹߋ৽Ͱ͖Δ ը໘͕෦෼తʹߋ৽Ͱ͖Δʢෆศͳը໘มԽ͕ ͳ͍ʣ

ੲ෩ͷ8FCΞϓϦͷར༻্ͷܽ఺ ຖճɺը໘શମ͕ॻ͖׵ΘΔ ஗͍ɻ଴ͨ͞ΕΔɻ ͪΒͭ͘ɻμαΠɻ ࡞Γ͕ѱ͍ͱɺը໘্ͷมΘͬͯ΄͘͠ͳ͍஋ʢೖྗ஋ͳ΍ιʔ τɾߜΓࠐΈঢ়ଶ౳ʣ͕มΘͬͯ͠·ͬͨΓ͕ͪ͠ɻෆศɻ ϏδϡΞϧతʹ͔͍͍ͬ͜ಈ͖͕͚ͭʹ͍͘

41"΋)PUXJSF΋͜ͷ՝୊ΛղܾͰ͖Δ 41" )PUXJSF ஗͍ ˕ ˕ ͪΒͭ͘ ˕ ˕ ෆศͳը໘มԽ
˕ ˕ ϏδϡΞϧޮՌ ˕ ̋ ˞ݸਓతײ৮Ͱ͢

)PUXJSF 5VSCP ը໘ભҠ΍4VCNJUΛεϜʔζɾߴ଎ʹͯ͠ɺ෦෼ߋ৽΍ɺ8FC4PDLFU ʹΑΔߋ৽ͳͲΛΧόʔɻ+4Λॻ͔ͣʹ͜ΕΒΛ࣮ݱͤͯ͘͞ΕΔɻ 4UJNVMVT 5VSCP͚ͩͰ͸र͑ͳ͍ը໘ଆͰ+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ͩʂ

΍Γ͕ͪͳ൑அϑϩʔ ෦෼ߋ৽͕ඞཁͩʂ มߋՕॴ͕ ཁૉʹ·ͱ·Δʁ 5VSCP4USFBNT 5VSCP'SBNFT ελʔτ ·ͱ·Δ ·ͱ·Βͳ͍

5VSCPͰ΍Γ͕ͪͳൃ૝ᶄ ͜ͷʮ෦෼ߋ৽ʯͬͯɺ   ίϯϙʔωϯτΈ͍ͨͳҐஔ͚ͮʹͯ͠ɺ   ൚༻ԽͰ͖ΔΜ͡Όͳ͍͔ͳʁ

໨ࢦ͕ͪ͠ͳํ޲ੑ ʮ࠷ॳͷϖʔδʯͱʮ෦෼ߋ৽ʯͰ͸ɺͳΔ΂͘ॲཧͷ ॏͳΓ͕ͳ͍΄͏͕Α͍ɻ੹຿Λ෼͚Α͏ɻ ίϯϙʔωϯτͬΆ͘ɺγϯϓϧͳ੹຿ͷΞΫγϣϯΛ ࡞ͬͯɺͦΕΛ5VSCP'SBNFT͔5VSCP 4USFBNTͰݺͼग़ͯ͠ߦ͜͏ɻ

΍Γ͕ͪͳ͜ͱ·ͱΊ ʮ෦෼ߋ৽ʯ͋Γ͖Ͱߟ͑Δ ʮ෦෼ߋ৽ʯΛಠཱͨ͠੹຿ʹରԠ͢Δίϯϙʔ ωϯτతͳΠϝʔδͰ࡞Δ

੹຿ͷ෼཭ͬͯѱ͍ͷʁʁ ͜͜ͳΜͰ͢Α ࢲͨͪ͸ɺ੹຿ͷ෼཭͕େ޷͖ Ͱ΋ɺ)PUXJSFͰ͸஫ҙ͕ඞཁͳ͜ͱʹؾ ͍ͮͨʢ݁ߏɺিܸΛड͚ͨʣ ޙͰৄ͘͠આ໌͠·͢

ᶃʮ෦෼ߋ৽ʯ͋Γ͖Ͱ ߟ͑ͳ͍Α͏ʹ͢Δʹ͸ʁ

ελʔτΛม͑Δ ෦෼ߋ৽͕ඞཁͩʂ ը໘ঢ়ଶΛ"ˠ#ʹม͑Δ

ը໘ঢ়ଶΛ"ˠ#ʹม͑Δํ๏Λ બͿͨΊͷϑϩʔνϟʔτ Ͱ͖Δ ओʹ(&5 ࢖͏ ·ͱ·Δ ·ͱ·Βͳ͍ #͸୯ಠͰ ΞΫηεͰ͖Δʁ มߋՕॴ͕
ཁૉʹ·ͱ·Δʁ 5VSCP'SBNFT 5VSCP%SJWF 8FC 4PDLFU 5VSCP4USFBNT ࢖Θͳ͍ Ͱ͖ͳ͍ 1045 (&5PS1045 มߋՕॴ͕ ཁૉʹ·ͱ·Δʁ ·ͱ·Βͳ͍ ·ͱ·Δ ෦඼త ը໘త

ը໘తΞϓϩʔν͸ ͦ΋ͦ΋ݕ౼͔Β࿙Ε͕ͪ

෦඼తΞϓϩʔνʁ ը໘తΞϓϩʔνʁ ·ͣ͜͜Λ͸͖ͬΓͤ͞Α͏ʂ

ͭͷΞϓϩʔνͷҧ͍ ෦඼తͳΞϓϩʔν ʮ෦෼Λߋ৽͢ΔʯॲཧΛॻ͘ ը໘తͳΞϓϩʔν ʮ෦෼͕ߋ৽͞Εͨ݁Ռը໘ʯ΁ભҠ͢Δ ʮ8FCࢴࣳډʯͱ໊෇͚ͨ

มԽ̍ ᶃ ᶄ มԽ มԽ มԽ ᶃ ᶄ ෦඼తΞϓϩʔν ը໘తΞϓϩʔνʢ8FCࢴࣳډʣ
ʮࢴࣳډʯ΍ʮΞχϝʯΈ͍ͨ

෦඼తΞϓϩʔν͸ ͞Βʹ̎ͭʹ෼ྨͰ͖Δ ෦඼తΞϓϩʔν ʮ͋Δը໘ͷ͋Δ෦෼ߋ৽ʯʹಛԽͨ͠ॲཧΛॻ͜͏ ಠཱͨ͠੹຿Λ࣋ͭ൚༻తͳ෦඼ʢίϯϙʔωϯτʣ Λ࡞Ζ͏ˡ΍Γ͕ͪͳൃ૝ᶄ

ͭ·Γ͜͏͍͏ײ͡ ը໘తΞϓϩʔν ෦෼ߋ৽ͳ͠5VSCP%SJWFͷΈ ෦෼ߋ৽͋Γ5VSCP'SBNFTར༻ ෦෼తΞϓϩʔν ಛఆը໘ઐ༻ ൚༻ίϯϙʔωϯτ

ࢲͷॴײ ը໘తΞϓϩʔν ෦෼ߋ৽ͳ͠5VSCP%SJWFͷΈ ෦෼ߋ৽͋Γ5VSCP'SBNFTར༻ ෦෼తΞϓϩʔν ಛఆը໘ઐ༻ ൚༻ίϯϙʔωϯτ ݟಀ͞Ε͕͚ͪͩͲ ༗ޮʂʂ (00%
ةݥੑ͕͋Δ

۩ମྫͰઆ໌͠·͢ ˞͜Ε͸τʔΫ༻ͷྫͰ͋Γ Ͳͷઃܭ͕߹͏͔͸ ͦͷ࣌ͷঢ়گʹΑΔͱࢥ͍·͢

ྫ Ұཡը໘্ʹ ΞΠςϜͷৄࡉΤϦΞΛ ද͍ࣔͨ͠

ɹΞΠςϜ̍ ɹΞΠςϜ̎ ɹΞΠςϜ̏ ɹΞΠςϜ̐ ɹɾɾɾɾ ɹΞΠςϜ̍ ɹΞΠςϜ̎ ɹΞΠςϜ̏ ɹΞΠςϜ̐ ɹɾɾɾɾ
ΞΠςϜͷৄࡉ ɾɾɾɾɾɾ ɾɾɾɾɾɾ ɾɾɾɾɾɾ $MJDL ΫϦοΫͨ͠Β ৄࡉΤϦΞ͕දࣔ͞ΕΔ ˞༧Ίશ෦࢓ࠐΉબ୒ࢶ΋ߟ͑ΒΕ·͕͢ɺຊτʔΫͷओࢫʹ͸ؔ܎ͳ͍ͨΊ৮Ε·ͤ Μɻৄࡉදࣔͷίετ͕૬౰ߴ͍ͱ͔ɺҰཡͷදࣔྔ͕ଟ͍ͳͲͷཧ༝ͰͦΕΛબ୒͠ͳ ͍ɺৄࡉ৘ใΛ݅ͱΔͨΊͷΞΫγϣϯ͸ผʹ༻ҙ͢Δͱ͍͏લఏͰฉ͍͍ͯͩ͘͞ɻ

ྫ෦඼తͳΞϓϩʔν   ʢ൚༻ίϯϙʔωϯτʣ   ͷઃܭྫ มԽ̍ ᶃ ᶄ มԽ

෦඼తͳΞϓϩʔνͷൃ૝ ը໘಺ͷʮৄࡉΤϦΞʯʹ ৄࡉͷ಺༰Λදࣔͤ͞ΔΑ͏ͳ ॲཧΛ༻ҙ͠Α͏ʂ

൚༻ίϯϙʔωϯτͷൃ૝Λϓϥε ৄࡉͷ಺༰Λදࣔ͞ΕΔॲཧͬͯ ੹຿Λ෼͚ͯ ൚༻తͳίϯϙʔωϯτΈ͍ͨʹ ߟ͑ΒΕΔΑͶ

͍·ίί Ͱ͖Δ ओʹ(&5 ࢖͏ ·ͱ·Δ ·ͱ·Βͳ͍ #͸୯ಠͰ ΞΫηεͰ͖Δʁ มߋՕॴ͕ ཁૉʹ·ͱ·Δʁ
5VSCP'SBNFT 5VSCP%SJWF 8FC 4PDLFU 5VSCP4USFBNT ࢖Θͳ͍ Ͱ͖ͳ͍ 1045 (&5PS1045 มߋՕॴ͕ ཁૉʹ·ͱ·Δʁ ·ͱ·Βͳ͍ ·ͱ·Δ

มߋՕॴ͕ՕॴͳͷͰ 5VSCP'SBNFTΛ બ୒

ख๏ܾఆʂ Ͱ͖Δ ओʹ(&5 ࢖͏ ·ͱ·Δ ·ͱ·Βͳ͍ #͸୯ಠͰ ΞΫηεͰ͖Δʁ มߋՕॴ͕ ཁૉʹ·ͱ·Δʁ

෦඼తΞϓϩʔνͷઃܭྫ JOEFY ΞΫγϣϯ ৄࡉදࣔͷ͜ͱ͚ͩΛ΍Δʂ ੹຿͕੾Γ෼͚ΒΕ͍ͯͯඒ͍͠ʂ Ұཡը໘ ɹΞΠςϜ̍ ɹΞΠςϜ̎ ɹΞΠςϜ̏ ɹΞΠςϜ̐
ɹɾɾɾɾ ΞΠςϜͷ ৄࡉΤϦΞ ΞΠςϜͷৄࡉ ɾɾɾɾɾɾ ɾɾɾɾɾɾ ɾɾɾɾɾɾ $MJDL TIPX ΞΫγϣϯ JUFNT JUFNT QBHF

ίʔυྫ def index @items = Item.all end def show @item
= Item.find(params[:id]) end .row .col-6 …Ұཡදࣔ… .col-6 turbo-frame#itemDetailFrame turbo-frame#itemDetailFrame …ৄࡉදࣔ… JUFNT@DPOUSPMMFSSC JOEFYIUNMTMJN TIPXIUNMTMJN ී௨ͷ$36%ͷܗͰը໘ʹຒΊࠐΊͯΩϨΠ

ྫ8FCࢴࣳډͷઃܭྫ มԽ มԽ ᶃ ᶄ

8FCࢴࣳډͷൃ૝ ΞΠςϜͷৄࡉ͕։͍ͨϖʔδͬͯ ௚ΞΫηεͰ͖ͨΒ ศརͳΜ͡Όͳ͍͔ͳʁ ͦ͏͍͏ը໘Λ Ұཡͱ͸ผʹ༻ҙ͠Α͏

͍·ίί Ͱ͖Δ ओʹ(&5 ࢖͏ ·ͱ·Δ ·ͱ·Βͳ͍ #͸୯ಠͰ ΞΫηεͰ͖Δʁ มߋՕॴ͕ ཁૉʹ·ͱ·Δʁ

มߋՕॴ͕ՕॴͳͷͰ 5VSCP'SBNFTΛબ୒

ख๏ܾఆʂ Ͱ͖Δ ओʹ(&5 ࢖͏ ·ͱ·Δ ·ͱ·Βͳ͍ #͸୯ಠͰ ΞΫηεͰ͖Δʁ มߋՕॴ͕ ཁૉʹ·ͱ·Δʁ

༨ஊ ͜ͷΑ͏ʹ 5VSCP'SBNFT͸ ྆ํͷΞϓϩʔνͰ બͼಘΔ

8FCࢴࣳډͷઃܭྫ JOEFY ΞΫγϣϯ ࢴࣳډͷʮ࣍ͷຕʯΛఏڙʂ ੹຿͕෼͔Ε͓ͯΒͣɺటष͍ Ұཡը໘ ɹΞΠςϜ̍ ɹΞΠςϜ̎ ɹΞΠςϜ̏ ɹΞΠςϜ̐
ɹɾɾɾɾ ΞΠςϜͷ ৄࡉΤϦΞ͕ ։͍͍ͯΔҰཡը໘ ɹΞΠςϜ̍ ɹΞΠςϜ̎ ɹΞΠςϜ̏ ɹΞΠςϜ̐ ɹɾɾɾɾ ΞΠςϜͷৄࡉ ɾɾɾɾɾɾ ɾɾɾɾɾɾ ɾɾɾɾɾɾ TIPX ΞΫγϣϯ JUFNT QBHF $MJDL JUFNT QBHF

.row .col-6 …Ұཡදࣔ… .col-6 turbo-frame#itemDetailFrame - if @item …ৄࡉදࣔ… .row
.col-6 …Ұཡදࣔ… .col-6 turbo-frame#itemDetailFrame def index prepare_items end def show @item = Item.find(params[:id]) prepare_items render action: :index end private def prepare_items @items = Item.all end ίʔυྫ JUFNT@DPOUSPMMFSSC JOEFYIUNMTMJN TIPXIUNMTMJN ৑௕͕͋͞Δ

෦඼తͳΞϓϩʔν ʢ൚༻ίϯϙʔωϯτʣ ʹΑΔઃܭͷ΄͏͕ ϞμϯͰඒ͍͠

Ͱ΋ɺ࣮͸ 8FCࢴࣳډͷઃܭʹ΋ ར఺͕͋Δ

ࠓ೔͓఻͍͑ͨ͜͠ͱ ΦϒδΣΫτࢦ޲ʹ׳ΕͨΤϯδχΞ͸ɺ෦඼తͳ ΞϓϩʔνͰઃܭ͕ͪ͠ ͔͠͠ɺ࣮͸෦඼తͳΞϓϩʔνͷઃܭͱ )PUXJSFͷ૬ੑ͸ͦ͜·Ͱྑ͘ͳ͍😱 ʮ8FCࢴࣳډͷઃܭʯ΋બ୒ࢶʹೖΕͯऔΓೖΕ ͍ͯ͘ͷ͕͓͢͢Ί

෦඼తͳΞϓϩʔνͷઃܭͱ )PUXJSFͷ૬ੑ͸ ͦ͜·Ͱྑ͘ͳ͍😱 ͦΕ͸ͳͥʁ ͦͷͨΊͷ)PUXJSF͡Όͳ͍ͷʁ

3BJMTͰ ෦඼తΞϓϩʔνͷ ઃܭΛ͢Δͱ ੍ޚ͕ʮը໘ʯʹد͍ͬͯ͘

۩ମྫ

෦඼తͳΞϓϩʔνͷઃܭ JOEFY ΞΫγϣϯ Ұཡը໘ ɹΞΠςϜ̍ ɹΞΠςϜ̎ ɹΞΠςϜ̏ ɹΞΠςϜ̐ ɹɾɾɾɾ ΞΠςϜͷ
ৄࡉΤϦΞ ΞΠςϜͷৄࡉ ɾɾɾɾɾɾ ɾɾɾɾɾɾ ɾɾɾɾɾɾ $MJDL TIPX ΞΫγϣϯ JUFNT JUFNT QBHF ༻ҙͯ͋͠ΔৄࡉΤϦΞΛ UVSCPGSBNFཁૉʹͯ͠ ಺༰Λྲྀ͠ࠐ΋͏ʂ

࠶ܝɿίʔυྫ def index @items = Item.all end def show @item
= Item.find(params[:id]) end .row .col-6 …Ұཡදࣔ… .col-6 turbo-frame#itemDetailFrame turbo-frame#itemDetailFrame …ৄࡉදࣔ… JUFNT@DPOUSPMMFSSC JOEFYIUNMTMJN TIPXIUNMTMJN ී௨ͷ$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 $MJDL JUFNT QBHF ৄࡉΤϦΞΛUVSCPGSBNFʹ͢Δ 4IPXΞΫγϣϯҰཡ ৄࡉ

.row .col-6 …Ұཡදࣔ… .col-6 turbo-frame#itemDetailFrame - if @item …ৄࡉදࣔ… .row
.col-6 …Ұཡදࣔ… .col-6 turbo-frame#itemDetailFrame def index prepare_items end def show @item = Item.find(params[:id]) prepare_items render action: :index end private def prepare_items @items = Item.all end ࠶ܝɿίʔυྫ JUFNT@DPOUSPMMFSSC JOEFYIUNMTMJN TIPXIUNMTMJN ৑௕͕͋͞Δ

ͨͿΜ͜ͷ࣌఺ͩͱ ͜ͷઃܭΛબͿར఺͸ ཧղ͞ΕͮΒ͍ ˞ҰԠɺ୯ಠͰΞΫηεͰ͖ΔʢύʔϚωϯτϦ ϯΫ͕͋Δʣͱ͍͏ϝϦοτ͸͢Ͱʹ͋Γ·͢

ཁ๬ᶃৄࡉΛ։͍͍ͯΔΞΠςϜΛҰཡ ಺Ͱ෼͔Γ΍͍ͨ͘͢͠ ɹΞΠςϜ̍ ɹΞΠςϜ̎ ɹΞΠςϜ̏ ɹΞΠςϜ̐ ɹɾɾɾɾ ΞΠςϜͷৄࡉ ɾɾɾɾɾɾ ɾɾɾɾɾɾ
ɾɾɾɾɾɾ 4UJNVMVTͰ΋͍͍͚Ͳ 5VSCP%SJWFͰ͍͔ͬ !JUFN͚ͩσβΠϯม͑ͯ ग़ྗͯ͋͛͠Ε͹ ͍͍ΑͶ

ख๏Λ5VSCP%SJWFʹมߋ Ͱ͖Δ ओʹ(&5 ࢖͏ ·ͱ·Δ ·ͱ·Βͳ͍ #͸୯ಠͰ ΞΫηεͰ͖Δʁ มߋՕॴ͕ ཁૉʹ·ͱ·Δʁ

+4͕૿͑ͳ͍ .row .col-6 …ϔομ… - @items.each do |item| .row.m-1 class="#{item
== @item ? "bg-warning" : ‘'}" ..1ߦͷදࣔ.. .col-6 - if @item …ৄࡉදࣔ… TIPXIUNMTMJN ͲͷৄࡉΛද͍͔ࣔͨ͠ ΞΫγϣϯݺͼग़࣌͠఺ͰΘ͔ΔͷͰ ͋Β͔͡ΊσβΠϯΛࢦఆ UVSCPGSBNFফͨ͠

ཁ๬ᶄҰཡը໘͚ͩͷχʔζͱͯ͠ɺಛఆͷΞΠςϜ Λৄࡉදࣔͨ͠ͱ͖ʹɺܯࠂΛը໘্෦ʹද͍ࣔͨ͠ ɹΞΠςϜ̍ ɹΞΠςϜ̎ ɹΞΠςϜ̏ ɹΞΠςϜ̐ ɹɾɾɾɾ ΞΠςϜͷৄࡉ ɾɾɾɾɾɾ ɾɾɾɾɾɾ
ɾɾɾɾɾɾ 8BSOJOH 5VSCP%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 DBUFHPSZ DBUFHPSJFTJUFNT ͋ΔΧςΰϦͰߜΓࠐΜͩҰཡͰɺಛఆͷΞΠςϜͷৄࡉΛ։͍͍ͯ Δը໘ JUFNT DBUFHPSZ DBUFHPSJFTJUFNT

Ұݟɺී௨Ͱ͸ͳ͍ ײ͡ʹݟ͑Δ͔΋͠Εͳ͍͚ΕͲ αʔόαΠυʹॲཧΛूΊΔͱ͸ ͜͏͍͏͜ͱͩͱࢥ͏ ΞΫγϣϯ ը໘ঢ়ଶ ը໘ঢ়ଶ Λද͢63- ΞΫγϣϯ ࣍ͷը໘ঢ়ଶ
࣍ͷը໘ঢ়ଶ Λද͢63- Ϣʔβʔૢ࡞

8FCࢴࣳډతͳઃܭͱ͸ αʔόαΠυʹ ը໘ͷঢ়ଶΛ͢΂ͯ఻͑ͯ ͢΂੍ͯޚͤ͞Δ ઃܭࢦ਑

ΠϝʔδͰ͖ͯ ͖·ͨ͠Ͱ͠ΐ͏͔ʁ

8FCࢴࣳډͷઃܭʹ͍ͭͯ ΋͏গ͠࿩͠·͢

Ͱ΋ɺ%3:͡Όͳ͍Ͱ͢ΑͶ

Ҋ֎ͦ͏Ͱ΋ͳ͍

3VCZͳΒ ڞ௨Խ͸͓खͷ΋ͷ

ίϯτϩʔϥͷॲཧ΋ ը໘ग़ྗ΋ڞ௨ԽͰ͖Δ JOEFY ΞΫγϣϯ Ұཡը໘ ɹΞΠςϜ̍ ɹΞΠςϜ̎ ɹΞΠςϜ̏ ɹΞΠςϜ̐ ɹɾɾɾɾ
ΞΠςϜͷ ৄࡉϞʔμϧ͕ ։͍͍ͯΔҰཡը໘ ɹΞΠςϜ̍ ɹΞΠςϜ̎ ɹΞΠςϜ̏ ɹΞΠςϜ̐ ɹɾɾɾɾ ΞΠςϜͷৄࡉ ɾɾɾɾɾɾ ɾɾɾɾɾɾ ɾɾɾɾɾɾ TIPX ΞΫγϣϯ JUFNT QBHF JUFNT QBHF ҰཡΛग़͢४ උ NFUIPE Ұཡ෦෼ QBSUJBM

Ͱ΋ɺॲཧ͕৑௕Ͱ ॏ͍Ͱ͢ΑͶ

ͦΕ͸ͦ͏ ॲཧͷແବ͸͋Δ͕޻෉༨஍͸͋Δ 5VSCP'SBNFTͷ৔߹ɺ5VSCP'SBNFTϦΫΤετ͔Ͳ ͏͔ͰҰ෦ͷॲཧɾඳըΛলུ͢ΔίʔυΛॻ͘͜ͱ΋Մೳ Ωϟογϡ ΫϥΠΞϯτ੍ޚͷ൥ࡶ͞Λආ͚ΔϝϦοτͷ΄͏͕େ͖͍৔ ߹͕͋Δ

ͳΜ͔ඒ͘͠ͳ͍ɾɾɾ

ύϥμΠϜ͕ҧ͏͚ͩ ҟͳΔඒ͕͋͠͞Δ

ঢ়ଶ͝ͱʹ 63-͕͋Δ͜ͱͷඒ͠͞

෦඼తΞϓϩʔν ʢಛʹ൚༻ίϯϙʔωϯτࢦ޲ʣ 8FCࢴࣳډ ΞΫγϣϯΛ ԿͰ෼͚Δͷ͔ ओͳ੹຿ ը໘ͷঢ়ଶ ඒ͠͞ ੹຿ͷ෼͔Εํ ը໘ঢ়ଶʢ63-ʣͷ
෼͔Εํ ՝୊ ը໘ʢ+4ʣͰͷ ੍ޚ͕େม ॲཧͷॏෳ ՝୊΁ͷରࡦ 41"ʹ͢Δ ɾТɾA ίϯτϩʔϥ૚ͱ QBSUJBMςϯϓϨʔτΛ ߏ଄Խɾڞ௨Խ ॲཧ଎౓ͷ޻෉ ΧϦΧϦʹ%3:ʹͰ͖Δʂ3VCZͳΒʂ ύʔϚωϯτϦϯΫͱ޷૬ੑ

༨ஊɿ௥ٻ͢Δͱ৽ͨͳઓ৔͕ੜ·ΕΔ ʢΠϝʔδͷΈ͓఻͑͠·͢ʣ ύϥϝʔλͷѻ͍ Ϟʔμϧ։͍ͯ໭ΔΈ͍ͨͳͱ͖ʹલը໘ͷ෼΋αʔόʹ஌Βͤͨ͘ͳͬ ͯ63-௕௒͑ͨΓ͢Δ ௕͍ύϥϝʔλΛѻ͑ΔΑ͏ʹ1045Λར༻ͨ͠Γɺηογϣϯ ʢ fl BTIʣΛܰ͘ར༻ٖͯ͠ࣅతʹαʔόʹ৘ใΛ఻͑ΒΕΔΑ͏ʹ͢Δ SPVUFTੜ੒ϢʔςϦςΟ
ಉ͡ύλʔϯͰෳ਺63-Λ༻ҙ͍ͨ͜͠ͱ͕૿͑ͯɺ؆୯ʹએݴͨ͘͠ ͳΔ

·ͱΊ

)PUXJSFศར ͚ͩͲબ୒ࢶ͕ଟͯ͘໎͏

ը໘ͷ෦෼ߋ৽ͷ ख๏͕໨ཱͭͷͰɺ ෦෼ߋ৽͋Γ͖ͷൃ૝Ͱɺ ෦඼తͳΞϓϩʔνͷ ઃܭΛߦ͍͕ͪ

෦඼తͳΞϓϩʔνͷ ઃܭΛ͢Δͱɺ ੍ޚ͕ʮը໘ʯʹ د͍͖ͬͯ΍͍͢

੍ޚ͕ʮը໘ʯʹدΔͱ ΫϥΠΞϯτଆͷ+4͕૿͑ͯ ͭΒ͘ͳΔ

ͦ͏ͳΒͳ͍ͨΊʹ

ୈҰʹɺ ը໘తͳΞϓϩʔν ʢ8FCࢴࣳډͷઃܭʣ ͷՄೳੑΛ े෼ʹݕ౼͢Δͱྑ͍

ը໘ঢ়ଶΛ"ˠ#ʹม͑Δํ๏Λ બͿͨΊͷϑϩʔνϟʔτ Ͱ͖Δ ओʹ(&5 ࢖͏ ·ͱ·Δ ·ͱ·Βͳ͍ #͸୯ಠͰ ΞΫηεͰ͖Δʁ มߋՕॴ͕
ཁૉʹ·ͱ·Δʁ 5VSCP'SBNFT 5VSCP%SJWF 8FC 4PDLFU 5VSCP4USFBNT ࢖Θͳ͍ Ͱ͖ͳ͍ 1045 (&5PS1045 มߋՕॴ͕ ཁૉʹ·ͱ·Δʁ ·ͱ·Βͳ͍ ·ͱ·Δ ը໘త

ίπɿ"ˠ#Λ̎ͭͷ෺ͷݟํͰͱΒ͑Δ ʮը໘Λม͑Δૢ࡞ʯͰ#ʹ͢Δ ˠ෦඼తΞϓϩʔν #ͱ͍͏ը໘ʹͳΊΒ͔ʹભҠ͢Δ ˠը໘తΞϓϩʔνʢ8FCࢴࣳډ

ୈೋʹɺ ෦඼తͳΞϓϩʔν͸ ༻๏ɾ༰ྔΛकΔ

൚༻తͳɺ ੹຿ͷ෼͔Εͨ෦඼Λ࡞Ζ͏ ͜ͷը໘ʹดͨ͡ ઐ༻ͷߋ৽ॲཧΛ࡞Ζ͏ જࡏతʹةݥɻ ΦʔΨφΠζ͢Δ໾໨͕ը໘ʹू·Γ΍͍͢ ܯռ͕ඞཁ ͨͿΜ҆શɻ ը໘ઐ༻ͳΒ࠷ޙ͸ 5VSCP4USFBNTͰͳΜͱͰ΋ͳΔ
%3:ʹ͢Δͷ͸ϦΫΤετΑΓখ͍͞୯ҐͰ

෦඼తͳΞϓϩʔν͸ ൚༻ੑɾ੹຿ಠཱੑΛ ௥͍ٻΊͳ͍Ͱ ΄Ͳ΄Ͳͷ෼ྔʹ ͱͲΊͨ΄͏͕Α͍

ಛʹ5VSCP'SBNFTΛ ෦඼తʹ࢖͓͏ͱ͢Δͱ ੹຿͕෼͔Εͯඒ͘͠ײͯ͡ ᠘ʹ͸·Γ͕ͪͩͱࢥ͍·͢ ը໘తʹ5VSCP%SJWFʹಀ͛Δͷ΋ɺ ෦඼తʹ5VSCP4USFBNTʹಀ͛Δͷ΋ɺ ඒ͠͞Λଛͳ͏ײ͕ͯ͡͠͠·ͬͯɺ +4ͰͳΜͱ͔ͨ͘͠ͳΔ᠘ʜ

ͳΔ΂͘ αʔόαΠυʹ ॲཧΛدͤΔΑ͏ʹҙࣝ͢Δ

41"తͳϚΠϯυηοτ͔Β )PUXJSFʢ3BJMTʣతͳ ϚΠϯυηοτ΁ ίϯϙʔωϯτࢦ޲͔Β 8FCࢴࣳډ΁

αʔόαΠυʹدͤͨ ͪΐͬͱͨ͠࢒ΓΛ 4UJNVMVTͰ खܰʹղܾ ˞ந৅Խཻ౓͕·ͪ·ͪʹͳͬͯ ࢄΒ͔Γ͕ͪͳ͜ͱΛ೰Έʹࢥ͍ͬͯ·͕͢ ࠓ೔ͷ࿩୊Ͱ͸ͳ͍ͷͰ͜͜ͰϘϠ͚ͩ͘ʹ͠·͢

͜Ε͕ )PUXJSFͷޫͷಓ

)PUXJSFͰ ࢖͍΍͍͢ΞϓϦΛ ര଎ɾշదʹ։ൃ͠Α͏ʂʂ

Hotwire的な設計を追求して「Web紙芝居」に行き着いた話

Hotwire的な設計を追求して「Web紙芝居」に行き着いた話

More Decks by Yasuko Ohba

Other Decks in Technology

Featured

Transcript