なるべくJavaScriptを書かないで SymfonyのUIをリッチにする Symfony UX

PHP Conference Japan 2022でお話しした内容です。

#phpcon #phpcon2022

Transcript

1. 1)1$POGFSFODF+BQBO
   ͳΔ΂͘+BWB4DSJQUΛॻ͔ͳ͍Ͱ
   

   4ZNGPOZͷ6*ΛϦονʹ͢Δ
   4ZNGPOZ69
   

   View Slide

2. ֯ాɹҰฏʢ͢Έ͍ͩͬ΃͍ʣ
   w ޿ౡݝग़਎ɺେࡕ෎ࡏॅ
   w ϑϦʔϥϯε8FCσϕϩούʔ
   w 4ZNGPOZ.FFUVQ,BOTBJӡӦ౳
   

   ίϛϡχςΟ׆ಈ΍ͬͯ·͢
   

   View Slide

3. "(&/%"
   w 4ZNGPOZ69ͱ͸
   w 4ZNGPOZ69Λ࢖͏ͱԿ͕ྑ͍͔
   w 4ZNGPOZ69ͷ͓͢͢Ίίϯϙʔωϯτ
   

   View Slide

4. 4ZNGPOZ69ͱ͸
   

   View Slide

5. όοΫΤϯυͱϑϩϯτΤϯυΛ
   ͭͳ͙ڮ
   

   View Slide

6. ϑϩϯτΤϯυ
   όοΫΤϯυ
   

   View Slide

7. 4ZNGPOZ69
   ϑϩϯτΤϯυ
   όοΫΤϯυ
   ˣͳΔ΂͘؆୯ʹϑϩϯτΤϯυͷΧελϚΠζΛߦ͑ΔΑ͏ʹ
   

   View Slide

8. 4ZNGPOZ69
   8FCQBDL&ODPSF
   4ZNGPOZ
   5XJH
   4ZNGPOZ69ߏ੒
   ˡϑϨʔϜϫʔΫ
   ˡςϯϓϨʔτΤϯδϯ
   ˡ8FCQBDL౷߹ϥΠϒϥϦ
   ˡ69ϥΠϒϥϦ
   

   View Slide

9. ओͳػೳ
   w 69ܥ+BWB4DSJQUϥΠϒϥϦΛར༻
   w 69༻ςϯϓϨʔτλάɾΫϥεͰ+BWB4DSJQUͷࣗಈੜ੒
   w 1)1ͷ஋Λ+BWB4DSJQU΁εϜʔζʹ౉͢
   69ʹؔΘΔػೳ֦ு
   Λఏڙ
   

   View Slide

10. ݟͨ໨ܥ ϑΥʔϜܥ
    5XJHܥ
    w5XJH$PNQPOFOU
    w-JWF$PNQPOFOU
    w$IBSUKT
    w-B[Z*NBHF
    w4XVQ
    w5VSCP
    w5ZQFE
    w/PUJGZ
    w"VUPDPNQMFUF
    w*NBHF$SPQQFS
    w4UZMJ[FE%SPQ[POF
    ౷߹ܥ
    w3FBDU
    w7VF /FX
    

    View Slide

11. 1)1ύοέʔδΠϯετʔϧ
    QBDLBHFKTPO௥ه
    Πϯετʔϧ
    

    View Slide

12. 4ZNGPOZ69Λ࢖͏ͱԿ͕ྑ͍͔
    

    View Slide

13. ݟͨ໨͸େࣄͩΑʂ
    Ξχϝʔγϣϯ͍ͨ͠
    ͳΜ͔γϡοͱ͍ͨ͠
    ݕࡧΛ͔ͬ͜Αͯ͘͠ ؅ཧը໘࢖͍ͮΒ͍ʂ
    ೔ʑɺ͍Ζ͍Ζͳཁ๬͕ͱͲ͖·͢
    

    View Slide

14. +BWB4DSJQU಺ʹ
    ςϯϓϨʔτͷίʔυΛ
    ॻ͘৔߹͕͋Δɻ
    

    View Slide

15. +BWB4DSJQUͷͨΊͷ"1*Λ
    ࡞Δඞཁ͕͋Δɻ
    

    View Slide

16. 69༻ΦϒδΣΫτΛ࡞Δ
    69༻ςϯϓϨʔτ
    

    ؔ਺λάΛ࢖͏
    جຊ͸͜ͷ̎ύλʔϯ
    

    View Slide

17. +BWB4DSJQUͰॻ͍ͨ৔߹
    ྫ͑͹$IBSUKTΛ
    

    View Slide

18. DIBSU#VJMEFSDSFBUF$IBSU \άϥϑछผ^
    
    ˠάϥϑΦϒδΣΫτ࡞੒
    DIBSUTFU%BUB \σʔλ^
    
    ˠάϥϑͷσʔλΛηοτ
    +BWB4DSJQUͰઃఆ͢ΔσʔλΛ
    

    1)1Ͱهड़
    4ZNGPOZ69ͩͱ
    

    View Slide

19. \\SFOEFS@DIBSU
    ^^Ͱ+BWB4DSJQUੜ੒
    

    View Slide

20. View Slide

21. w ඞཁҎ্ʹ+BWB4DSJQUΛॻ͔ͳͯ͘Α͘ͳΔ
    w ඞཁҎ্ʹ"1*Λ࡞Δඞཁ͕ͳ͘ͳΔ
    w طଘͷϓϩδΣΫτʹ؆୯ʹಋೖͰ͖Δ
    w ຌϛε͕ݮΔʢྫɿ+4ͷจࣈྻ݁߹Ͱzz࢖ͬͯͨʣ
    4ZNGPOZ69Λ࢖͏͜ͱͰʜ
    গͳ͍࿑ྗͰݟͨ໨Λվળʂ
    

    View Slide

22. 4ZNGPOZ69ͷछྨ
    

    View Slide

23. ݟͨ໨ܥ ϑΥʔϜܥ
    5XJHܥ
    w5XJH$PNQPOFOU
    w-JWF$PNQPOFOU
    w$IBSUKT
    w-B[Z*NBHF
    w4XVQ
    w5VSCP
    w5ZQFE
    w/PUJGZ
    w"VUPDPNQMFUF
    w*NBHF$SPQQFS
    w4UZMJ[FE%SPQ[POF
    ౷߹ܥ
    w3FBDU
    w7VF
    ࠓճ঺հ͢Δίϯϙʔωϯτ
    /FX
    

    View Slide

24. ϖʔδ಺ʹΞΫγϣϯΛ͚ͭΔͷʹศར
    ϖʔδ ϖʔδ
    " #
    ΠϯλϥΫςΟϒͳ
    ϖʔδ
    "
    $
    

    View Slide

25. ݟͨ໨ܥ ϑΥʔϜܥ
    5XJHܥ
    w5XJH$PNQPOFOU
    w-JWF$PNQPOFOU
    w$IBSUKT
    w-B[Z*NBHF
    w4XVQ
    w5VSCP
    w5ZQFE
    w/PUJGZ
    w"VUPDPNQMFUF
    w*NBHF$SPQQFS
    w4UZMJ[FE%SPQ[POF
    ౷߹ܥ
    w3FBDU
    w7VF
    ࠓճ঺հ͢Δίϯϙʔωϯτ
    /FX
    ͦΕͧΕʹಛੑ͋Γ
    

    View Slide

26. )PUXJSF5VSCPΛ࢖ͬͯ41"ʢͬΆ͍ಈ͖ʣʹ͠·͢
    5VSCP
    TZNGPOZVYUVSCP
    

    View Slide

27. 5VSCP͸छྨ
    5VSCP
    w 5VSCP%SJWF
    

    ˠϖʔδશମʹ࡞༻
    w 5VSCP'SBNF
    

    ˠϖʔδͷ̍Օॴʹ࡞༻
    w 5VSCP4USFBN
    

    ˠϖʔδͷෳ਺Օॴʹ࡞༻
    

    View Slide

28. 5VSCP%SJWF
    ೖΕΔ͚ͩͰɺϦϯΫઌͷϖʔδΛ"KBYͰऔಘ͠දࣔΛࠩ͠ସ͑·͢
    

    View Slide

29. ϑΥʔϜૹ৴࣌ɺಉҰ63-Λ࠶ඳը͢Δ͜ͱ͕Ͱ͖ͳ͍ʂʂ
    

    View Slide

30. 5VSCP'SBNF
    ը໘ͷҰ෦͚ͩΞΫγϣϯઌͷϖʔδΛ"KBYͰऔಘ͠දࣔΛࠩ͠ସ͑·͢
    

    View Slide

31. UVSCPGSBNFͰғΉͱ͚ͦͩ͜࠶ඳը͠·͢
    

    View Slide

32. TSDࢦఆͰ஗Ԇಡࠐ͠·͢
    

    View Slide

33. ϑΥʔϜૹ৴࣌ɺෳ਺ՕॴΛ࠶ඳը͢Δ͜ͱ͕Ͱ͖ͳ͍ʂʂ
    

    View Slide

34. 5VSCP4USFBN
    ΞΫγϣϯͰෳ਺ՕॴΛ"KBYͰऔಘ͠දࣔΛࠩ͠ସ͑·͢
    

    View Slide

35. lUVSCP@TUSFBNz
    

    ͱ͍͏ϑΥʔϚοτͰ
    

    ಛघͳσʔλΛग़ྗ
    

    View Slide

36. UVSCPTUSFBNͰғΉ
    λʔήοτ*%Λத৺ʹ࠶ඳը
    

    View Slide

37. BDUJPOlVQEBUFzɿλʔήοτͰࢦఆͨ͠*%λά಺Λ࠶ඳը͠·͢
    

    View Slide

38. 5VSCP4USFBNΞΫγϣϯͷछྨ
    UVSCPTUSFBNBDUJPOl\͜͜^z
    w BQQFOE
    

    ˠࢦఆ*%λά಺ͷ࠷ޙʹ௥Ճ
    w QSFQFOE
    

    ˠࢦఆ*%λά಺ͷ࠷ॳʹ௥Ճ
    w SFQMBDF
    

    ˠࢦఆ*%λάΛॻ͖׵͑
    w VQEBUF
    

    ˠࢦఆ*%λά಺Λॻ͖׵͑
    w SFNPWF
    

    ˠࢦఆ*%λάΛ࡟আ
    w CFGPSF
    

    ˠࢦఆ*%λάͷલʹ௥Ճ
    w BGUFS
    

    ˠࢦఆ*%λάͷޙΖʹ௥Ճ
    

    View Slide

39. View Slide

40. .&3$63&
    "114&37&3
    .&3$63&͕44&ʢ4FSWFS4FOU&WFOUTʣͷϋϒͱͯ͠ಈ࡞
    1045 44&
    44&
    44&
    

    View Slide

41. 5VSCP4USFBN
    5VSCP4USFBN
    5VSCPTUSFBN
    .&3$63&
    "114&37&3
    44&Ͱ5VSCP4USFBNΛૹ৴͢Δ͜ͱ͕Մೳ
    1045
    

    View Slide

42. IVCQVCMJTI OFX6QEBUF
    
    
    ࢦఆ͞ΕͨτϐοΫͰ44&ૹ৴
    τϐοΫ
    5VSCP4USFBN
    

    View Slide

43. lDIBUz
    

    τϐοΫΛϦοεϯ
    44&Λड͚औΔͱ࠶ඳը
    ʢෳ਺*%΋Մೳʣ
    

    View Slide

44. QVCTVC͕+BWB4DSJQUΛߦ΋ॻ͔ͣʹ࣮ݱͰ͖·͢
    

    View Slide

45. w ϦΞϧλΠϜੑͷඞཁͳ΢ΟδΣοτ
    w ࠲੮ࢦఆ
    w ͍͍ͶϘλϯʢ݅਺ʣ
    w QVCTVC
    w ίϝϯτ
    w νϟοτ
    w JE؅ཧ͕͔ͬ͠Γඞཁ
    w ηΩϡϦςΟͷߟྀ͕ඞཁ
    

    ˠᷖᮣʹͭ͘Δͱݸਓ৘ใ࿙Ӯ͢Δ
    5VSCP
    )PUXJSF5VSCPΛ࢖ͬͯ41"ʢͬΆ͍ಈ͖ʣʹ͠·͢
    ஫ҙ఺
    γʔϯ
    

    View Slide

46. ˞ల։͞Εͨ)5.-͕࠶ඳը͞Ε·͢
    

    View Slide

47. 5XJHͱΫϥεΛ࢖ͬͯίϯϙʔωϯτΛ࡞Γ·͢
    5XJH$PNQPOFOU
    TZNGPOZVYUXJHDPNQPOFOU
    

    View Slide

48. View Slide

49. View Slide

50. QVCMJD QSJWBUFʹΑΔΞΫηε੍ޚ
    Կ΋ܧঝ͍ͯ͠ͳ͍Ϋϥε
    ΦʔτϫΠϠϦϯάʹΑΔ%*
    5XJHͰࢦఆ͞ΕΔ͜ͱͰ
    ɹ࣮ߦ͞ΕΔϝιου
    

    View Slide

51. DPNQVUFEΛ࢖͏ͱ࣮ߦ݁ՌΛอ࣋͠ɺ࣍ճҎ߱͸࣮ߦ݁ՌΛฦ͠·͢
    

    View Slide

52. 5XJH$PNQPOFOUʹঢ়ଶอ࣋ͱΞΫγϣϯΛ௥Ճ͠·͢
    -JWF$PNQPOFOU
    TZNGPOZVYMJWFDPNQPOFOU
    

    View Slide

53. <-JWF1SPQT>
    <-JWF"DUJPO>
    ˠεςʔτϑϧͳϓϩύςΟ
    ˠΞΫγϣϯϝιου
    <"T-JWF$PNQPOFOU>
    ˠ-JWF$PNQPOFOUએݴ
    

    View Slide

54. \\BUUSJCVUF^^
    

    ˠඞཁͳଐੑΛ௥Ճ
    EBUBBDUJPOlMJWFBDUJPOz
    EBUBBDUJPOOBNFlϝιου໊z
    ˠࢦఆͨ͠ϝιουΛ࣮ߦ
    EBUBNPEFMlϓϩύςΟ໊z
    

    ˠࢦఆͨ͠ϓϩύςΟΛඥ෇͚ όΠϯυ
    
    

    View Slide

55. -JWF$PNQPOFOU
    ϖʔδ
    ίϯϙʔωϯτ಺ͷಈ͖Λ؂ࢹͯ͠ɺ౎౓ϦΫΤετɾϨεϙϯε
    όΠϯυͨ͠ϓϩύςΟͷ஋มߋɾΞΫγϣϯ࣮ߦ
    ϝιου࣮ߦ
    BKBY௨৴
    Ϩεϙϯε
    ϨεϙϯεΛ֘౰෦෼ʹ൓ө
    

    View Slide

56. View Slide

57. ϦΞϧλΠϜʹϑΥʔϜͷόϦσʔγϣϯ͕ՄೳʹͳΓ·͢
    

    View Slide

58. w ຊےϢʔεέʔεͱ͸ؔ܎ͳ͍෦඼Ͱ
    w ະಡ݅਺
    w %#֎෦࿈ܞ͕ඞཁͳ෦඼
    w ݕࡧϑΥʔϜ
    w ͓໰߹ͤϑΥʔϜ
    w ݱࡏͷΧʔτ
    w ༣ศ൪߸Ͱͷॅॴݕࡧ
    w एׯಈ͖͕͋΍͍͠ͱ͖͕͋Δ
    w ࣮ߦ࣌ؒ͸ͪΐͬͱ͔͔Δ
    -JWF$PNQPOFOU
    ஫ҙ఺
    γʔϯ
    5XJH$PNQPOFOUʹঢ়ଶอ࣋ͱΞΫγϣϯΛ௥Ճ͠·͢
    

    View Slide

59. 3FBDUίϯϙʔωϯτΛར༻͠·͢
    3FBDU
    TZNGPOZVYSFBDU
    

    View Slide

60. View Slide

61. ίϯϙʔωϯτͷωετՄೳ
    

    View Slide

62. 7VFίϯϙʔωϯτΛར༻͠·͢
    7VF
    

    View Slide

63. ஫ҙ఺
    γʔϯ
    w طଘͷ3FBDUίʔυͷҠ২
    w ίϯϙʔωϯτͦͷ··ར༻΋Մ
    w 3FBDUґଘͳͳ6*Λ࠾༻
    w ϑϩϯτΤϯυΤϯδχΞͱ෼ۀ
    w 3FBDUଆ͸ϑϩϯτΤϯυ
    w ஋ͷҾ͖౉͠΍ར༻͸όοΫΤϯυ
    w Ϟμϯͳ8FCϑϩϯτΤϯυͷ
    

    ઴ਐతͳಋೖ
    w 3FBDU಺Ͱ͸5XJHͷػೳ͸࢖͑ͳ͍
    w ಈతͳ஋͸5XJHଆ͔Β౉͢
    w ͔͜͜Βઌ͸+4ͷੈք
    3FBDU
    3FBDUίϯϙʔωϯτΛར༻͠·͢
    

    View Slide

64. ·ͱΊ
    

    View Slide

65. ঺հͨ͠ίϯϙʔωϯτ·ͱΊ
    5VSCP -JWF 3FBDU
    w উखʹ41"Խ
    w ϦΞϧλΠϜʹ
    

    ࠷৽ͷঢ়ଶʹมߋͰ͖Δ
    w ෳ਺Օॴͷมߋ͕༰қ
    w एׯ͕ͤͭ͘Α͍
    w ࢖͍׳Εͨ4ZNGPOZͷ
    

    ॻ͖ํͰ࡞੒Ͱ͖Δ
    w ϑΥʔϜͷόϦσʔγϣϯ
    w +4͸΄΅օແ
    w طଘͷ3FBDUͷҠ২͕
    

    Ͱ͖Δ
    w ϑϩϯτΤϯυͱ෼ۀՄ
    w ͔͜͜Β͖͞͸+4
    

    View Slide

66. 4ZNGPOZ69͸
    w +4ΛͳΔ΂͘ॻ͔ͣʹϑϩϯτΤϯυΛϦονʹ͢Δ
    w େ·͔ʹݟͨ໨ɺϑΥʔϜɺ5XJHɺ౷߹ͷछྨ
    w طଘʹ΋৽نʹ΋ಋೖ͸ൺֱత༰қʢҰ෦Ͱ΋Մʣ
    w ϊ΢ϋ΢͸ͦ͜·Ͱཷ·ͬͯͳ͍ͷͰɺτϥΠˍΤϥʔ͕ඞཁ
    

    View Slide

67. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide