高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025

by Naofumi Kagami

Slide 1

Slide 1 text

Ճʑඒ௚࢙!OBPGVNJ ,BJHJPO3BJMT ߴ౓ͳ6*69ͦ͜ )PUXJSFͰ࡞Ζ͏

Slide 2

Slide 2 text

(JUIVCOBPGVNJ ੡ༀاۀͰόΠΦܥݚڀऀ όΠΦؔ࿈ϚʔέςΟϯά ೥ʹόΠΦܥϝσΟΞ 3BJMT Ͱىۀ ೥ΦϨΦϨ41"ϑϨʔϜϫʔΫ ,BNJTIJCBJKT όΠΦؔ࿈ηʔϧε όΠΦ੡ༀ޻৔؅ཧ ೥͔ΒϑϦʔϥϯε 3BJMT !OBPGVNJ

Slide 3

Slide 3 text

K2VFSZͰ;FOOͷ τοϓΛऔͬͨΓ ͍ͪૣ͘,BNBMΛਪͨ͠Γ

Slide 4

Slide 4 text

3FBDUΛ3BJMTʹ౷߹͢Δํ๏Λ HFNʹͨ͠Γ ϑϩϯτΤϯυϦϓϨΠεͷ ϓϩδΣΫτʹ͍ͭͯޠͬͨΓ

Slide 5

Slide 5 text

ϑϩϯτΤϯυ 3BJMT ΤϯδχΞ )PUXJSFਪ͠ͷ

Slide 6

Slide 6 text

/FYUKTΞϓϦΛ ,BNBMͰσϓϩΠ "1*SPVUFT্ͷ&+4Ͱ )PUXJSFΛՔಇ /FYUKT3FBDUͱ)PUXJSFͰ ಉ͡6*Λ࡞੒͠ɺσϞͱղઆ /FYUKTWT)PUXJSF IUUQTIPUXJSFOOFYUDBTUMFDPN

Slide 7

Slide 7 text

3BJMTΞϓϦΛ ,BNBMͰσϓϩΠ )PUXJSFʹ͍ͭͯࢥͬͨ͜ͱ ίʔυྫͱσϞ ߟ͑ํ )PUXJSFΑ΋΍·࿩ IUUQTIPUXJSFBOFDEPUBDBTUMFDPN

Slide 8

Slide 8 text

ͦ΋ͦ΋)PUXJSFͬͯͳʹʁ

Slide 9

Slide 9 text

ೆేཚΕΔ࣌ ๺ేݱΔ 3FBDU )PUXJSF

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

)PUXJSF 4UJNVMVTΠϕϯτॲཧΛఆܕԽɾ؆ུԽ K2VFSZϕετϓϥΫςΟεϥΠϑαΠΫϧΈ͍ͨͳײ͡ 5VSCPαʔό௨৴Λ؆ུԽɾ࠷దԽ

Slide 12

Slide 12 text

3FBDU ׶͑ͯεςʔτҰຊʹߜΔ 0OFXBZEBUBqPXΛڧ੍ εςʔτ%0.Λ࠷దԽ IUUQTKBSFBDUEFWMFBSOUIJOLJOHJOSFBDU 3FBDUͷྲّྀ

Slide 13

Slide 13 text

3FBDU ׶͑ͯεςʔτҰຊʹߜΔ 0OFXBZEBUBqPXΛڧ੍ εςʔτ%0.Λ࠷దԽ IUUQTKBSFBDUEFWMFBSOUIJOLJOHJOSFBDU 3FBDUͷྲّྀ ଞͷબ୒ࢶΛࣺͯͨ ͷ͕ಛ௃

Slide 14

Slide 14 text

)PUXJSF εςʔτΛ࢖͍͍ͨ࣌͸ 4UJNVMVTͷWBMVFTUBUF͕ศར εςʔτߋ৽ εςʔτߋ৽ εςʔτߋ৽

Slide 15

Slide 15 text

IUUQTTUJNVMVTIPUXJSFEEFWSFGFSFODFWBMVFT

Slide 16

Slide 16 text

)PUXJSFϞʔμϧ +4ͳ͠ɺͦΕͱ΋͋Γ )PUXJSF͸5VSCP4UJNVMVT ແཧʹ+BWB4DSJQUΛলུͤͣɺΉ͠Ζੵۃతʹ+BWB4DSJQUΛ׆༻͢Δ ΋ ͬ ͞ Γ ײ

Slide 17

Slide 17 text

ࠓ೔ͷຊ୊

Slide 18

Slide 18 text

ʮ؅ཧը໘͸)PUXJSFͰ࡞Γɺ ɹϢʔβը໘͸3FBDUͰ࡞Ζ͏ʯ ͳ ͥ ʁ Α͘ฉ͘ݴ༿

Slide 19

Slide 19 text

)PUXJSF͸ߴ଎։ൃͰ͖Δ͔Β ؅ཧը໘޲͖ Ͱ΋ෳࡶͰߴ౓ͳ6*69͸3FBDU ͡Όͳ͚Ε͹࡞Εͳ͍ ຊ ౰ ʁ +40/"1*͍ Β ͳ ͍ ͠ ͦ Γ Ό ͦ ͏ ͩ Ͷ

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

ࠓ೔ͷ࿩୊ * )PUXJSF͸༗໊αΠτͷϢʔβը໘Ͱ࢖༻͞Ε͍ͯΔ ͱ͍͏ࣄ࣮ ** /FYUKTΑΓ΋)PUXJSFͷํ͕ྑ͍6*69͕࡞Γ΍͍͢ ͱ͍͏ࣄ࣮ *** )PUXJSFͰෳࡶͳ6*͕࡞ΕΔͱ͍͏ࣄ࣮ ࡞Γํͷίπ

Slide 22

Slide 22 text

3VCZPO3BJMTͷੜՈ w ΠϯϥΠϯฤूͳͲΛ࢖༻ w ߴ଎ͳը໘ભҠ #BTFDBNQ

Slide 23

Slide 23 text

ແ ྉ ϓ ϥ ϯ ʂ IUUQTCBTFDBN QDPN

Slide 24

Slide 24 text

IUUQTUFDIMJGFDPPLQBEDPN FOUSZ )PUXJSF

Slide 25

Slide 25 text

Slide 26

Slide 26 text

3FBDUͱ&3#K2VFSZͷݟ෼͚ͬͯͭ͘ʁ ϨΨγʔϑϩϯτΤϯυΛ/FYUKTʹϦϓϨΠε ʮ։ൃੜ࢈ੑͷ޲্ʯΛײͤͯ͘͡͞Εͨͭͷ͜ͱ IUUQTMPHNJKQNBJOUFDIOPMPHZ ௕͘ࡏ੶͍ͯ͠ΔਓͰ΋ ʮͬͯ͜͜3FBDUͩͬͨΜͩʯ ʮͬͯ͜͜3BJMTͩͬͨΜͩʯ Έ͍ͨͳձ࿩͕ग़ͯ͘Δ ݟ෼͚͸͔ͭͳ͍Β͍͠ʂ

Slide 27

Slide 27 text

3FBDUͷϖʔδͱ3BJMTͷϖʔδ ͷݟ෼͚ํ

Slide 28

Slide 28 text

஫ҙ⚠ ͔͜͜ΒϑϩϯτΤϯυ༻ޠ͕ ͨ͘͞Μग़͖ͯ·͢

Slide 29

Slide 29 text

/FYUKTQBHFTSPVUFSͷ443͕ ΋ͬ͞Γ͢Δͷ͸Α͋͘Δ՝୊ )PUXJSF5VSCP%SJWF͸ σϑΥϧτͰରࡦࡁΈ σϑΥϧτͷϩʔσΟϯά6* 483ܕͷΩϟογϡ ϖʔδભҠ IUUQTIPUXJSFOOFYUDBTUMFDPNBQJIPUXJSFVTFST

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

483 4UBMF8IJMF3FWBMJEBUF ܕΩϟογϡ Ωϟογϡͷ໰୊఺Λղফ͠ɺ ྑ͍ͱ͜औΓΛͯ͘͠ΕΔ

Slide 32

Slide 32 text

෦෼తͳը໘ͷॻ͖׵͑ 1SFGFUDI΋ޮ͍ͯψϧαΫ 5VSCP'SBNFT λϒϝχϡʔ IUUQTIPUXJSFOOFYUDBTUMFDPNBQJIPUXJSFUBCCFE@TFHNFOUT@UVSCPGSBNFT

Slide 33

Slide 33 text

/FYUKT1BSBMMFM3PVUFTͰλϒΛ࣮૷

Slide 34

Slide 34 text

)PUXJSF5VSCP'SBNFTͰλϒΛ࣮૷

Slide 35

Slide 35 text

)PUXJSF5VSCP'SBNFTͰλϒΛ࣮૷ λϒΛඇಉظͰ ࠩ͠ସ͑ 63-Λಉظͯ͠ ϒοΫϚʔΫՄೳ

Slide 36

Slide 36 text

සൟʹ࢖͏6*69Ͱ͸ )PUXJSFͷํ͕༏Ε͍ͯΔ

Slide 37

Slide 37 text

࡞Γࠐ·ͳ͍ݶΓ )PUXJSFͷํ͕6*69͕ྑ͍

Slide 38

Slide 38 text

ຊ౰ʹ6*69ͷͨΊʹ 3FBDUΛ࢖͍ͬͯΔͷʁ

Slide 39

Slide 39 text

ຊ౰ʹ6*69ͷͨΊʹ 3FBDUΛ࢖͍ͬͯΔͷʁ ϑϩϯτΤϯυͷϦϓϨΠεʹɺ͍ͭ·Ͱ͔͚ΔΜͩʁ %9΍ ࠾༻ͷ͜ͱ͹͔Γݴͬͯͳ͍ʁ

Slide 40

Slide 40 text

3BJMTϑϩϯτΤϯυͷ%9ͱݴ͑͹ .BSDP3PUI͞Μ IUUQTLBJHJPOSBJMTPSHUBMLTNBSDPSPUIEBZ

Slide 41

Slide 41 text

Slide 42

Slide 42 text

3FBDUʹ͔͠Ͱ͖ͳ͍ෳࡶͳ6*ͳΒ )PUXJSFʹຒΊࠐΊ͹ྑ͍ ͍͟ͱͳͬͨΒ

Slide 43

Slide 43 text

w DPOOFDU EJTDPOOFDU w AEBUBWBMVFATUBUF w 7BMVF$IBOHFE DBMMCBDLT ຒΊࠐΈ͸4UJNVMVTͷΦϋί طଘ%0.ͱ+BWB4DSJQUίϯϙʔωϯτΛ ಉظͤ͞Δͷ͸ಘҙதͷಘҙ IUUQTIPUXJSFBOFDEPUBDBTUMFDPNPUIFS@MJCSBSJFTDIBSUKTTUJNVMVT

Slide 44

Slide 44 text

3FBDUຒΊࠐΈ༻ϥΠϒϥϦΛ࢖ͬͯ΋ྑ͍ IUUQTHJUIVCDPNTLSZVLPWUVSCPNPVOU

Slide 45

Slide 45 text

%BJDIJ,6%0͞Μ 8FC$PNQPOFOUTͰ࣮ݱ͢Δ)PUXJSFͱ ϑϩϯτΤϯυϑϨʔϜϫʔΫͷڮ౉͠ IUUQTLBJHJPOSBJMTPSHUBMLTLVEPBTEBZ

Slide 46

Slide 46 text

Ͱ΋࣮ࡍ໰୊ɺ)PUXJSF͚ͩͰ΋ ෳࡶͳ6*69͸શવ࡞ΕΔ

Slide 47

Slide 47 text

ͦ΋ͦ΋ෳࡶͳ6*ͱ͸ʁ

Slide 48

Slide 48 text

ʮ)PUXJSFͰ ɹ͜͜·ͰͰ͖ΔΑʂʯ

Slide 49

Slide 49 text

"3FBDUؔ܎ͳ͍͡ΌΜʂ جຊ͡ΌΜͦΕͬʂ

Slide 50

Slide 50 text

ෳࡶͬΆ͍͚Ͳ؆୯ʹ࡞ΕΔ6* %BUFQJDLFS DPMPSQJDLFS EJBMPH QPQPWFS➜ϒϥ΢βσϑΥϧτ͋Γ υϥοάˍυϩοϓ➜7BOJMMB+4ͷϥΠϒϥϦ͋Γ ϝχϡʔɺυϩοϓμ΢ϯɺίϯϘϘοΫεɺπʔϧνοϓͳͲ ➜7BOJMMB+4ͷϥΠϒϥϦ͋Γ όϦσʔγϣϯ➜ϒϥ΢βωΠςΟϒ͋Γ ෳࡶͳ6*Λ୳͢ͷ͸݁ߏେม

Slide 51

Slide 51 text

7BOJMMB+4)FBEMFTT6*ϥΠϒϥϦ 5BJMXJOE1MVT&MFNFOUT IUUQTUBJMXJOEDTTDPNCMPHWBOJMMBKTTVQQPSUGPSUBJMXJOEQMVT

Slide 52

Slide 52 text

7BOJMMB+4ʹΑΔ )FBEMFTT6*ϥΠϒϥϦ ͷ৽ைྲྀ

Slide 53

Slide 53 text

3FBDU͕ಘҙͱ͢Δෳࡶͳ 6*69ͱ͸Կʁ

Slide 54

Slide 54 text

IUUQTXXXZPVUVCFDPNXBUDI WQ%R+7E/B

Slide 55

Slide 55 text

3FBDU͸ϦΞϧλΠϜ μογϡϘʔυ༻ʹ ੜ·Εͨ

Slide 56

Slide 56 text

(P'.FEJBUPSύλʔϯ 3FBDU͸TUBUFͱPOFXBZEBUB qPXʹΑΔNFEJBUPSΛڧ੍ +49ʹΑΓɺTUBUF͔ΒྲྀΕΔ એݴత6*Λఏڙ 3FBDUͷڧΈ

Slide 57

Slide 57 text

IUUQTSFGBDUPSJOHHVSVEFTJHOQBUUFSOTNFEJBUPS # εύήοςΟ (P'.FEJBUPS1BUUFSO 0OFXBZEBUBqPX

Slide 58

Slide 58 text

3FBDUόʔδϣϯ εςʔτ͸ϑϩϯτͰ؅ཧ )PUXJSF5VSCPόʔδϣϯ εςʔτ͸αʔόͰ؅ཧ 4UJNVMVTόʔδϣϯ εςʔτ͸ϑϩϯτͰ؅ཧ "QQMF4UPSF໛ࣸ IUUQTIPUXJSFBOFDEPUBDBTUMFDPNFYBNQMFTTUPSF

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

εύήοςΟԽ ͠΍͍͢

Slide 61

Slide 61 text

3FBDU POFXBZ EBUBqPX

Slide 62

Slide 62 text

αʔόαΠυ ΢Σϒ.7$ αʔόαΠυ.7$͸ POFXBZEBUBqPXʹ ͳΔ͔͠ͳ͍ 5VSCP͸NPSQIJOH࢖༻ 3FBDUͷࠩ෼ݕग़ॲཧͬΆ͍

Slide 63

Slide 63 text

4UJNVMVT POFXBZ EBUBqPX

Slide 64

Slide 64 text

Πϕϯτϋϯυϥ ࠶ϨϯμϦϯά એݴత6*ߋ৽

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

)PUXJSFͰ΋TUBUF͓Αͼ POFXBZEBUBqPXΛ࢖͏ͱ ෳࡶͳ6*͕࡞Γ΍͍͢

Slide 67

Slide 67 text

)PUXJSFͰάϩʔόϧεςʔτ؅ཧ ;VTUBOEΛ࢖ͬͯΈΔ

Slide 68

Slide 68 text

7BOJMMB+4Ͱ΋࢖͑Δ άϩʔόϧεςʔτ؅ཧ 1VC4VCػೳ ;VTUBOE

Slide 69

Slide 69 text

IUUQTIPUXJSFBOFDEPUBDBTUMFDPNFYBNQMFTESBXFS

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

;VTUBOEͷTUPSF TMJEF%SBXFS4UPSF

Slide 72

Slide 72 text

4UJNVMVT$POUSPMMFS 4MJEF%SBXFS$POUSPMMFS

Slide 73

Slide 73 text

άϩʔόϧεςʔτͰͰ͖Δ͜ͱ ΫϥΠΞϯταΠυ͚ͩͰʮԼॻ͖ʯʮอଘʯػೳ

Slide 74

Slide 74 text

άϩʔόϧεςʔτͰͰ͖Δ͜ͱ ΫϥΠΞϯταΠυ͚ͩͰϚϧνεςοϓͷϑΥʔϜ

Slide 75

Slide 75 text

ࠓ೔ͷ࿩୊ * )PUXJSF͸༗໊αΠτͷϢʔβը໘Ͱ࢖༻͞Ε͍ͯΔ ͱ͍͏ࣄ࣮ ** /FYUKTΑΓ΋)PUXJSFͷํ͕ྑ͍6*69͕࡞Γ΍͍͢ ͱ͍͏ࣄ࣮ *** গͳ͘ͱ΋3FBDUఔ౓ʹ͸ ෳࡶͳ6*͕࡞ΕΔͱ͍͏ࣄ࣮ ࡞Γํͷίπ

Slide 76

Slide 76 text

)PUXJSFͷ·ͱΊ ༗໊αΠτͷϢʔβ޲͚ը໘ʹ࢖༻͞Ε͍ͯΔ සൟʹ࢖༻͢Δ6*69Ͱ͸ͱͯ΋༏Ε͍ͯΔ 3FBDUͳΒͰ͸ͷෳࡶͳ6*69Λ୳ͯ͠Έ͕ͨʜ )PUXJSF͸$IBSUKT౳΍3FBDUΛ؆୯ʹຒΊࠐΊΔ )PUXJSFͰ΋TUBUFΛҙࣝ͠ɺPOFXBZEBUBqPXΛ࢖͏ͱྑ͍ 4UJNVMVTͷWBMVFTUBUF͸ศརʂ ;VTUBOE΋࢖͑Δʂ

Slide 77

Slide 77 text

+40/ جૅ޻ࣄ $ ࣮͸͕͜͜ ݁ߏෳࡶ

Slide 78

Slide 78 text

ʮ؅ཧը໘͸)PUXJSFͰ࡞Γɺ ɹϢʔβը໘΋)PUXJSFͰ࡞Ζ͏ʯ