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

Transcript

1. Ճʑඒ௚࢙
   !OBPGVNJ
   ,BJHJ
   PO
   3BJMT
    ߴ౓ͳ6*69ͦ͜
   )PUXJSFͰ࡞Ζ͏
2. (JUIVC
   OBPGVNJ ੡ༀاۀͰόΠΦܥݚڀऀ
   όΠΦؔ࿈ϚʔέςΟϯά
   ೥ʹόΠΦܥϝσΟΞ 3BJMT Ͱىۀ
   ೥
   ΦϨΦϨ41"ϑϨʔϜϫʔΫ
   ,BNJTIJCBJKT
   όΠΦؔ࿈ηʔϧε
   όΠΦ੡ༀ޻৔؅ཧ
   ೥͔ΒϑϦʔϥϯε 3BJMT !OBPGVNJ
3. K2VFSZͰ;FOOͷ
   τοϓΛऔͬͨΓ ͍ͪૣ͘,BNBMΛਪͨ͠Γ
4. 3FBDUΛ3BJMTʹ౷߹͢Δํ๏Λ
   HFNʹͨ͠Γ ϑϩϯτΤϯυϦϓϨΠεͷ
   ϓϩδΣΫτʹ͍ͭͯޠͬͨΓ
5. ϑϩϯτΤϯυ
   3BJMT
   ΤϯδχΞ )PUXJSFਪ͠ͷ
6. /FYUKTΞϓϦΛ
   ,BNBMͰσϓϩΠ
   "1*
   SPVUFT্ͷ&+4Ͱ
   )PUXJSFΛՔಇ
   /FYUKT3FBDUͱ)PUXJSFͰ
   ಉ͡6*Λ࡞੒͠ɺσϞͱղઆ /FYUKT
   WT
   )PUXJSF IUUQTIPUXJSFOOFYUDBTUMFDPN
7. 3BJMT
   ΞϓϦΛ
   ,BNBMͰσϓϩΠ
   )PUXJSFʹ͍ͭͯࢥͬͨ͜ͱ
   ίʔυྫͱσϞ
   ߟ͑ํ )PUXJSFΑ΋΍·࿩ IUUQTIPUXJSFBOFDEPUBDBTUMFDPN
8. ͦ΋ͦ΋)PUXJSFͬͯͳʹʁ
9. ೆేཚΕΔ࣌
   ๺ేݱΔ 3FBDU )PUXJSF
11. )PUXJSF 4UJNVMVT
    ΠϕϯτॲཧΛఆܕԽɾ؆ུԽ
    K2VFSZϕετϓϥΫςΟε
    
    ϥΠϑαΠΫϧΈ͍ͨͳײ͡
    5VSCP
    αʔό௨৴Λ؆ུԽɾ࠷దԽ
12. 3FBDU ׶͑ͯεςʔτҰຊʹߜΔ
    0OFXBZ
    EBUB
    qPXΛڧ੍
    εςʔτ
    
    %0.Λ࠷దԽ IUUQTKBSFBDUEFWMFBSOUIJOLJOHJOSFBDU 3FBDUͷྲّྀ
13. 3FBDU ׶͑ͯεςʔτҰຊʹߜΔ
    0OFXBZ
    EBUB
    qPXΛڧ੍
    εςʔτ
    
    %0.Λ࠷దԽ IUUQTKBSFBDUEFWMFBSOUIJOLJOHJOSFBDU 3FBDUͷྲّྀ ଞͷબ୒ࢶΛࣺͯͨ
    ͷ͕ಛ௃
14. )PUXJSF εςʔτΛ࢖͍͍ͨ࣌͸
    4UJNVMVTͷWBMVF
    TUBUF͕ศར εςʔτߋ৽ εςʔτߋ৽ εςʔτߋ৽
15. IUUQTTUJNVMVTIPUXJSFEEFWSFGFSFODFWBMVFT
16. )PUXJSF
    Ϟʔμϧ
    +4ͳ͠ɺͦΕͱ΋͋Γ )PUXJSF͸5VSCP
    
    4UJNVMVT
    ແཧʹ+BWB4DSJQUΛলུͤͣɺΉ͠Ζੵۃతʹ+BWB4DSJQUΛ׆༻͢Δ ΋ ͬ ͞ Γ ײ
17. ࠓ೔ͷຊ୊
18. ʮ؅ཧը໘͸)PUXJSFͰ࡞Γɺ
    ɹϢʔβը໘͸3FBDUͰ࡞Ζ͏ʯ ͳ ͥ ʁ Α͘ฉ͘ݴ༿
19. )PUXJSF͸ߴ଎։ൃͰ͖Δ͔Β
    ؅ཧը໘޲͖ Ͱ΋ෳࡶͰߴ౓ͳ6*69͸3FBDU
    ͡Όͳ͚Ε͹࡞Εͳ͍ ຊ ౰ ʁ +40/
    "1*͍ Β ͳ ͍ ͠
    ͦ Γ Ό ͦ ͏ ͩ Ͷ
20. ࠓ೔ͷ࿩୊ * )PUXJSF͸༗໊αΠτͷϢʔβը໘Ͱ࢖༻͞Ε͍ͯΔ
    ͱ͍͏ࣄ࣮
    ** /FYUKTΑΓ΋)PUXJSFͷํ͕ྑ͍6*69͕࡞Γ΍͍͢
    ͱ͍͏ࣄ࣮
    *** )PUXJSFͰෳࡶͳ6*͕࡞ΕΔͱ͍͏ࣄ࣮
    ࡞Γํͷίπ
21. 3VCZ
    PO
    3BJMTͷੜՈ w ΠϯϥΠϯฤूͳͲΛ࢖༻
    w ߴ଎ͳը໘ભҠ #BTFDBNQ
22. ແ ྉ ϓ ϥ ϯ ʂ IUUQTCBTFDBN QDPN 
23. IUUQTUFDIMJGFDPPLQBEDPN FOUSZ )PUXJSF
24. ࠓ೔ͷ࿩୊ * )PUXJSF͸༗໊αΠτͷϢʔβը໘Ͱ࢖༻͞Ε͍ͯΔ
    ͱ͍͏ࣄ࣮
    ** /FYUKTΑΓ΋)PUXJSFͷํ͕ྑ͍6*69͕࡞Γ΍͍͢
    ͱ͍͏ࣄ࣮
    *** )PUXJSFͰෳࡶͳ6*͕࡞ΕΔͱ͍͏ࣄ࣮
    ࡞Γํͷίπ
25. 3FBDUͱ&3#
    
    K2VFSZͷݟ෼͚ͬͯͭ͘ʁ ϨΨγʔϑϩϯτΤϯυΛ/FYUKTʹϦϓϨΠε
    ʮ։ൃੜ࢈ੑͷ޲্ʯΛײͤͯ͘͡͞Εͨͭͷ͜ͱ
    IUUQTMPHNJKQNBJOUFDIOPMPHZ ௕͘ࡏ੶͍ͯ͠ΔਓͰ΋
    ʮͬͯ͜͜3FBDUͩͬͨΜͩʯ
    ʮͬͯ͜͜3BJMTͩͬͨΜͩʯ
    Έ͍ͨͳձ࿩͕ग़ͯ͘Δ ݟ෼͚͸͔ͭͳ͍Β͍͠ʂ
26. 3FBDUͷϖʔδͱ3BJMTͷϖʔδ ͷݟ෼͚ํ
27. ஫ҙ
    ⚠
    ͔͜͜ΒϑϩϯτΤϯυ༻ޠ͕
    ͨ͘͞Μग़͖ͯ·͢
28. /FYUKT
    QBHFT
    SPVUFSͷ443͕ ΋ͬ͞Γ͢Δͷ͸Α͋͘Δ՝୊ )PUXJSF5VSCP%SJWF͸
    σϑΥϧτͰରࡦࡁΈ
    σϑΥϧτͷϩʔσΟϯά6*
    483ܕͷΩϟογϡ ϖʔδભҠ IUUQTIPUXJSFOOFYUDBTUMFDPNBQJIPUXJSFVTFST
30. 483
    4UBMF8IJMF3FWBMJEBUF ܕΩϟογϡ Ωϟογϡͷ໰୊఺Λղফ͠ɺ
    ྑ͍ͱ͜औΓΛͯ͘͠ΕΔ
31. ෦෼తͳը໘ͷॻ͖׵͑
    1SFGFUDI΋ޮ͍ͯψϧαΫ 5VSCP'SBNFT λϒϝχϡʔ IUUQTIPUXJSFOOFYUDBTUMFDPNBQJIPUXJSFUBCCFE@TFHNFOUT@UVSCPGSBNFT
32. /FYUKT
    1BSBMMFM
    3PVUFTͰλϒΛ࣮૷
33. )PUXJSF5VSCP
    'SBNFTͰλϒΛ࣮૷
34. )PUXJSF5VSCP
    'SBNFTͰλϒΛ࣮૷ λϒΛඇಉظͰ
    ࠩ͠ସ͑ 63-Λಉظͯ͠
    ϒοΫϚʔΫՄೳ
35. සൟʹ࢖͏6*69Ͱ͸
    )PUXJSFͷํ͕༏Ε͍ͯΔ
36. ࡞Γࠐ·ͳ͍ݶΓ
    )PUXJSFͷํ͕6*69͕ྑ͍
37. ຊ౰ʹ6*69ͷͨΊʹ
    3FBDUΛ࢖͍ͬͯΔͷʁ
38. ຊ౰ʹ6*69ͷͨΊʹ
    3FBDUΛ࢖͍ͬͯΔͷʁ ϑϩϯτΤϯυͷϦϓϨΠεʹɺ͍ͭ·Ͱ͔͚ΔΜͩʁ %9΍ ࠾༻ͷ͜ͱ͹͔Γݴͬͯͳ͍ʁ
39. 3BJMTϑϩϯτΤϯυͷ%9ͱݴ͑͹
    .BSDP
    3PUI
    ͞Μ IUUQTLBJHJPOSBJMTPSHUBMLTNBSDPSPUIEBZ
40. ࠓ೔ͷ࿩୊ * )PUXJSF͸༗໊αΠτͷϢʔβը໘Ͱ࢖༻͞Ε͍ͯΔ
    ͱ͍͏ࣄ࣮
    ** /FYUKTΑΓ΋)PUXJSFͷํ͕ྑ͍6*69͕࡞Γ΍͍͢
    ͱ͍͏ࣄ࣮
    *** )PUXJSFͰෳࡶͳ6*͕࡞ΕΔͱ͍͏ࣄ࣮
    ࡞Γํͷίπ
41. 3FBDUʹ͔͠Ͱ͖ͳ͍ෳࡶͳ6*ͳΒ
    )PUXJSFʹຒΊࠐΊ͹ྑ͍ ͍͟ͱͳͬͨΒ
42. w DPOOFDU
    EJTDPOOFDU
    w AEBUB WBMVFA
    TUBUF
    w 7BMVF$IBOHFE
    DBMMCBDLT ຒΊࠐΈ͸4UJNVMVTͷΦϋί طଘ%0.ͱ+BWB4DSJQUίϯϙʔωϯτΛ
    ಉظͤ͞Δͷ͸ಘҙதͷಘҙ IUUQTIPUXJSFBOFDEPUBDBTUMFDPNPUIFS@MJCSBSJFTDIBSUKTTUJNVMVT
43. 3FBDU
    ຒΊࠐΈ༻ϥΠϒϥϦΛ࢖ͬͯ΋ྑ͍ IUUQTHJUIVCDPNTLSZVLPWUVSCPNPVOU
44. %BJDIJ
    ,6%0
    ͞Μ
    8FC
    $PNQPOFOUTͰ࣮ݱ͢Δ
    )PUXJSF
    ͱ
    ϑϩϯτΤϯυϑϨʔϜϫʔΫͷڮ౉͠ IUUQTLBJHJPOSBJMTPSHUBMLTLVEPBTEBZ
45. Ͱ΋࣮ࡍ໰୊ɺ)PUXJSF͚ͩͰ΋
    ෳࡶͳ6*69͸શવ࡞ΕΔ
46. ͦ΋ͦ΋ෳࡶͳ6*ͱ͸ʁ
47. ʮ)PUXJSFͰ
    ɹ͜͜·ͰͰ͖ΔΑʂʯ
48. "3FBDUؔ܎ͳ͍͡ΌΜʂ جຊ͡ΌΜͦΕͬʂ
49. ෳࡶͬΆ͍͚Ͳ؆୯ʹ࡞ΕΔ6* %BUF
    QJDLFS
    DPMPS
    QJDLFS
    EJBMPH
    QPQPWFS
    ➜
    ϒϥ΢βσϑΥϧτ͋Γ υϥοάˍυϩοϓ
    ➜
    7BOJMMB
    +4ͷϥΠϒϥϦ͋Γ ϝχϡʔɺυϩοϓμ΢ϯɺίϯϘϘοΫεɺπʔϧνοϓͳͲ
    ➜
    7BOJMMB
    +4ͷϥΠϒϥϦ͋Γ όϦσʔγϣϯ
    ➜
    ϒϥ΢βωΠςΟϒ͋Γ ෳࡶͳ6*Λ୳͢ͷ͸݁ߏେม
50. 7BOJMMB
    +4
    )FBEMFTT
    6*
    ϥΠϒϥϦ 5BJMXJOE
    1MVT
    &MFNFOUT IUUQTUBJMXJOEDTTDPNCMPHWBOJMMBKTTVQQPSUGPSUBJMXJOEQMVT
51. 7BOJMMB
    +4ʹΑΔ
    )FBEMFTT6*ϥΠϒϥϦ
    ͷ৽ைྲྀ
52. 3FBDU͕ಘҙͱ͢Δෳࡶͳ
    6*69ͱ͸Կʁ
53. IUUQTXXXZPVUVCFDPNXBUDI WQ%R+7E/B
54. 3FBDU͸ϦΞϧλΠϜ
    μογϡϘʔυ༻ʹ
    ੜ·Εͨ
55. (P'
    .FEJBUPSύλʔϯ
    3FBDU͸TUBUFͱPOF
    XBZ
    EBUB
    qPXʹΑΔNFEJBUPSΛڧ੍
    +49ʹΑΓɺTUBUF͔ΒྲྀΕΔ
    એݴత6*Λఏڙ 3FBDUͷڧΈ
56. IUUQTSFGBDUPSJOHHVSVEFTJHOQBUUFSOTNFEJBUPS # εύήοςΟ (P'
    .FEJBUPS
    1BUUFSO 0OFXBZ
    EBUB
    qPX
57. 3FBDUόʔδϣϯ
    εςʔτ͸ϑϩϯτͰ؅ཧ
    )PUXJSF
    5VSCPόʔδϣϯ
    εςʔτ͸αʔόͰ؅ཧ
    4UJNVMVTόʔδϣϯ
    εςʔτ͸ϑϩϯτͰ؅ཧ "QQMF
    4UPSF໛ࣸ IUUQTIPUXJSFBOFDEPUBDBTUMFDPNFYBNQMFTTUPSF
59. εύήοςΟԽ
    ͠΍͍͢
60. 3FBDU
    POFXBZ
    EBUB
    qPX
61. αʔόαΠυ
    ΢Σϒ.7$ αʔόαΠυ.7$͸
    POFXBZ
    EBUB
    qPXʹ
    ͳΔ͔͠ͳ͍ 5VSCP͸NPSQIJOH࢖༻
    
    3FBDUͷࠩ෼ݕग़ॲཧͬΆ͍
62. 4UJNVMVT
    POFXBZ
    EBUB
    qPX
63. Πϕϯτϋϯυϥ ࠶ϨϯμϦϯά એݴత
    6*ߋ৽
65. )PUXJSFͰ΋TUBUF͓Αͼ
    POFXBZ
    EBUB
    qPXΛ࢖͏ͱ
    ෳࡶͳ6*͕࡞Γ΍͍͢
66. )PUXJSFͰάϩʔόϧεςʔτ؅ཧ
    ;VTUBOEΛ࢖ͬͯΈΔ
67. 7BOJMMB
    +4Ͱ΋࢖͑Δ
    άϩʔόϧεςʔτ؅ཧ
    1VC
    4VCػೳ ;VTUBOE
68. IUUQTIPUXJSFBOFDEPUBDBTUMFDPNFYBNQMFTESBXFS
70. ;VTUBOEͷTUPSF
    
    TMJEF%SBXFS4UPSF
    
71. 4UJNVMVT
    $POUSPMMFS
    4MJEF%SBXFS$POUSPMMFS
72. άϩʔόϧεςʔτͰͰ͖Δ͜ͱ ΫϥΠΞϯταΠυ͚ͩͰʮԼॻ͖ʯʮอଘʯػೳ
73. άϩʔόϧεςʔτͰͰ͖Δ͜ͱ ΫϥΠΞϯταΠυ͚ͩͰϚϧνεςοϓͷϑΥʔϜ
74. ࠓ೔ͷ࿩୊ * )PUXJSF͸༗໊αΠτͷϢʔβը໘Ͱ࢖༻͞Ε͍ͯΔ
    ͱ͍͏ࣄ࣮
    ** /FYUKTΑΓ΋)PUXJSFͷํ͕ྑ͍6*69͕࡞Γ΍͍͢
    ͱ͍͏ࣄ࣮
    *** গͳ͘ͱ΋3FBDUఔ౓ʹ͸ ෳࡶͳ6*͕࡞ΕΔͱ͍͏ࣄ࣮
    ࡞Γํͷίπ
75. )PUXJSFͷ·ͱΊ ༗໊αΠτͷϢʔβ޲͚ը໘ʹ࢖༻͞Ε͍ͯΔ සൟʹ࢖༻͢Δ6*69Ͱ͸ͱͯ΋༏Ε͍ͯΔ 3FBDUͳΒͰ͸ͷෳࡶͳ6*69Λ୳ͯ͠Έ͕ͨʜ
    )PUXJSF͸$IBSUKT౳΍3FBDUΛ؆୯ʹຒΊࠐΊΔ
    )PUXJSFͰ΋TUBUFΛҙࣝ͠ɺPOFXBZ
    EBUB
    qPXΛ࢖͏ͱྑ͍
    4UJNVMVTͷWBMVF
    TUBUF͸ศརʂ
    ;VTUBOE΋࢖͑Δʂ
76. +40/
    جૅ޻ࣄ $ ࣮͸͕͜͜
    ݁ߏෳࡶ
77. ʮ؅ཧը໘͸)PUXJSFͰ࡞Γɺ
    ɹϢʔβը໘΋)PUXJSFͰ࡞Ζ͏ʯ