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

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

#phpcon #phpcon2022

Transcript

1. 1)1
   $POGFSFODF
   +BQBO
    ͳΔ΂͘+BWB4DSJQUΛॻ͔ͳ͍Ͱ 
 4ZNGPOZͷ6*ΛϦονʹ͢Δ
   4ZNGPOZ
   69
2. ֯ాɹҰฏʢ͢Έ͍ͩͬ΃͍ʣ w ޿ౡݝग़਎ɺେࡕ෎ࡏॅ
   w ϑϦʔϥϯε
   8FCσϕϩούʔ
   w 4ZNGPOZ
   .FFUVQ
   ,BOTBJӡӦ౳ 
 ίϛϡχςΟ׆ಈ΍ͬͯ·͢
3. "(&/%" w 4ZNGPOZ
   69ͱ͸
   w 4ZNGPOZ
   69Λ࢖͏ͱԿ͕ྑ͍͔
   w 4ZNGPOZ
   69ͷ͓͢͢Ίίϯϙʔωϯτ
4. 4ZNGPOZ
   69ͱ͸
5. όοΫΤϯυͱϑϩϯτΤϯυΛ ͭͳ͙ڮ
6. ϑϩϯτΤϯυ όοΫΤϯυ
7. 4ZNGPOZ
   69 ϑϩϯτΤϯυ όοΫΤϯυ ˣͳΔ΂͘؆୯ʹϑϩϯτΤϯυͷΧελϚΠζΛߦ͑ΔΑ͏ʹ
8. 4ZNGPOZ
   69 8FCQBDL
   &ODPSF 4ZNGPOZ 5XJH 4ZNGPOZ
   69
   ߏ੒ ˡ
   ϑϨʔϜϫʔΫ ˡ
   ςϯϓϨʔτΤϯδϯ ˡ
   8FCQBDL౷߹ϥΠϒϥϦ ˡ
   69ϥΠϒϥϦ
9. ओͳػೳ w 69ܥ+BWB4DSJQUϥΠϒϥϦΛར༻
   w 69༻ςϯϓϨʔτλάɾΫϥεͰ+BWB4DSJQUͷࣗಈੜ੒
   w 1)1ͷ஋Λ+BWB4DSJQU΁εϜʔζʹ౉͢ 69ʹؔΘΔػೳ֦ு Λఏڙ
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
11. 1)1ύοέʔδΠϯετʔϧ QBDLBHFKTPO௥ه Πϯετʔϧ
12. 4ZNGPOZ
    69Λ࢖͏ͱԿ͕ྑ͍͔
13. ݟͨ໨͸େࣄͩΑʂ Ξχϝʔγϣϯ͍ͨ͠ ͳΜ͔γϡοͱ͍ͨ͠ ݕࡧΛ͔ͬ͜Αͯ͘͠ ؅ཧը໘࢖͍ͮΒ͍ʂ ೔ʑɺ͍Ζ͍Ζͳཁ๬͕ͱͲ͖·͢
14. +BWB4DSJQU಺ʹ
    ςϯϓϨʔτͷίʔυΛ
    ॻ͘৔߹͕͋Δɻ
15. +BWB4DSJQUͷͨΊͷ"1*Λ
    ࡞Δඞཁ͕͋Δɻ
16. 69༻ΦϒδΣΫτΛ࡞Δ 69༻ςϯϓϨʔτ 
 ؔ਺λάΛ࢖͏ جຊ͸͜ͷ̎ύλʔϯ
17. +BWB4DSJQUͰॻ͍ͨ৔߹ ྫ͑͹$IBSUKTΛ
18. DIBSU#VJMEFSDSFBUF$IBSU \άϥϑछผ^ 
    ˠάϥϑΦϒδΣΫτ࡞੒ DIBSUTFU%BUB \σʔλ^ 
    ˠάϥϑͷσʔλΛηοτ +BWB4DSJQUͰઃఆ͢ΔσʔλΛ 
 1)1Ͱهड़ 4ZNGPOZ
    69ͩͱ
19. \\
    SFOEFS@DIBSU
    ^^
    Ͱ+BWB4DSJQUੜ੒
21. w ඞཁҎ্ʹ+BWB4DSJQUΛॻ͔ͳͯ͘Α͘ͳΔ
    w ඞཁҎ্ʹ"1*Λ࡞Δඞཁ͕ͳ͘ͳΔ
    w طଘͷϓϩδΣΫτʹ؆୯ʹಋೖͰ͖Δ
    w ຌϛε͕ݮΔʢྫɿ+4ͷจࣈྻ݁߹Ͱ
    zz
    ࢖ͬͯͨʣ 4ZNGPOZ
    69Λ࢖͏͜ͱͰʜ গͳ͍࿑ྗͰݟͨ໨Λվળʂ
22. 4ZNGPOZ
    69ͷछྨ
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
24. ϖʔδ಺ʹΞΫγϣϯΛ͚ͭΔͷʹศར ϖʔδ ϖʔδ " # ΠϯλϥΫςΟϒͳ ϖʔδ " $
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 ͦΕͧΕʹಛੑ͋Γ
26. )PUXJSF
    5VSCPΛ࢖ͬͯ41"ʢͬΆ͍ಈ͖ʣʹ͠·͢ 5VSCP TZNGPOZVYUVSCP
27. 5VSCP͸छྨ 5VSCP w 5VSCP
    %SJWF 
 ˠϖʔδશମʹ࡞༻
    w 5VSCP
    'SBNF 
 ˠϖʔδͷ̍Օॴʹ࡞༻
    w 5VSCP
    4USFBN 
 ˠϖʔδͷෳ਺Օॴʹ࡞༻
28. 5VSCP
    %SJWF ೖΕΔ͚ͩͰɺϦϯΫઌͷϖʔδΛ"KBYͰऔಘ͠දࣔΛࠩ͠ସ͑·͢
29. ϑΥʔϜૹ৴࣌ɺಉҰ63-Λ࠶ඳը͢Δ͜ͱ͕Ͱ͖ͳ͍ʂʂ
30. 5VSCP
    'SBNF ը໘ͷҰ෦͚ͩΞΫγϣϯઌͷϖʔδΛ"KBYͰऔಘ͠දࣔΛࠩ͠ସ͑·͢
31. UVSCPGSBNFͰғΉͱ͚ͦͩ͜࠶ඳը͠·͢
32. TSDࢦఆͰ஗Ԇಡࠐ͠·͢
33. ϑΥʔϜૹ৴࣌ɺෳ਺ՕॴΛ࠶ඳը͢Δ͜ͱ͕Ͱ͖ͳ͍ʂʂ
34. 5VSCP
    4USFBN ΞΫγϣϯͰෳ਺ՕॴΛ"KBYͰऔಘ͠දࣔΛࠩ͠ସ͑·͢
35. lUVSCP@TUSFBNz 
 ͱ͍͏ϑΥʔϚοτͰ 
 ಛघͳσʔλΛग़ྗ
36. UVSCPTUSFBNͰғΉ λʔήοτ*%Λத৺ʹ࠶ඳը
37. BDUJPOlVQEBUFzɿλʔήοτͰࢦఆͨ͠*%λά಺Λ࠶ඳը͠·͢
38. 5VSCP4USFBNΞΫγϣϯͷछྨ UVSCPTUSFBN
    BDUJPOl\͜͜^z w BQQFOE 
 ˠࢦఆ*%λά಺ͷ࠷ޙʹ௥Ճ
    w QSFQFOE 
 ˠࢦఆ*%λά಺ͷ࠷ॳʹ௥Ճ
    w SFQMBDF 
 ˠࢦఆ*%λάΛॻ͖׵͑
    w VQEBUF 
 ˠࢦఆ*%λά಺Λॻ͖׵͑ w SFNPWF 
 ˠࢦఆ*%λάΛ࡟আ
    w CFGPSF 
 ˠࢦఆ*%λάͷલʹ௥Ճ
    w BGUFS 
 ˠࢦఆ*%λάͷޙΖʹ௥Ճ
40. .&3$63& "11
    4&37&3 .&3$63&͕44&ʢ4FSWFS4FOU&WFOUTʣͷϋϒͱͯ͠ಈ࡞ 1045 44& 44& 44&
41. 5VSCP4USFBN 5VSCP4USFBN 5VSCPTUSFBN .&3$63& "11
    4&37&3 44&Ͱ5VSCP4USFBNΛૹ৴͢Δ͜ͱ͕Մೳ 1045
42. IVCQVCMJTI OFX
    6QEBUF  ࢦఆ͞ΕͨτϐοΫͰ44&ૹ৴ τϐοΫ 5VSCP4USFBN
43. lDIBUz 
 τϐοΫΛϦοεϯ 44&Λड͚औΔͱ࠶ඳը ʢෳ਺*%΋Մೳʣ
44. QVCTVC͕+BWB4DSJQUΛߦ΋ॻ͔ͣʹ࣮ݱͰ͖·͢
45. w ϦΞϧλΠϜੑͷඞཁͳ΢ΟδΣοτ
    w ࠲੮ࢦఆ
    w ͍͍ͶϘλϯʢ݅਺ʣ
    w QVCTVC
    w ίϝϯτ
    w νϟοτ w JE؅ཧ͕͔ͬ͠Γඞཁ
    w ηΩϡϦςΟͷߟྀ͕ඞཁ 
 ˠᷖᮣʹͭ͘Δͱݸਓ৘ใ࿙Ӯ͢Δ
    5VSCP )PUXJSF
    5VSCPΛ࢖ͬͯ41"ʢͬΆ͍ಈ͖ʣʹ͠·͢ ஫ҙ఺ γʔϯ
46. ˞ల։͞Εͨ)5.-͕࠶ඳը͞Ε·͢
47. 5XJHͱΫϥεΛ࢖ͬͯίϯϙʔωϯτΛ࡞Γ·͢ 5XJH
    $PNQPOFOU TZNGPOZVYUXJHDPNQPOFOU
50. QVCMJD
    QSJWBUFʹΑΔΞΫηε੍ޚ Կ΋ܧঝ͍ͯ͠ͳ͍Ϋϥε ΦʔτϫΠϠϦϯάʹΑΔ%* 5XJHͰࢦఆ͞ΕΔ͜ͱͰ
    ɹ࣮ߦ͞ΕΔϝιου
51. DPNQVUFEΛ࢖͏ͱ࣮ߦ݁ՌΛอ࣋͠ɺ࣍ճҎ߱͸࣮ߦ݁ՌΛฦ͠·͢
52. 5XJH$PNQPOFOUʹঢ়ଶอ࣋ͱΞΫγϣϯΛ௥Ճ͠·͢ -JWF
    $PNQPOFOU TZNGPOZVYMJWFDPNQPOFOU
53. <-JWF1SPQT> <-JWF"DUJPO> ˠ
    εςʔτϑϧͳϓϩύςΟ ˠ
    ΞΫγϣϯϝιου <"T-JWF$PNQPOFOU> ˠ
    -JWF$PNQPOFOUએݴ
54. \\
    BUUSJCVUF
    ^^ 
 ˠඞཁͳଐੑΛ௥Ճ EBUBBDUJPOlMJWFBDUJPOz
    EBUBBDUJPOOBNFlϝιου໊z
    ˠࢦఆͨ͠ϝιουΛ࣮ߦ EBUBNPEFMlϓϩύςΟ໊z 
 ˠࢦఆͨ͠ϓϩύςΟΛඥ෇͚ όΠϯυ
55. -JWF$PNQPOFOU ϖʔδ ίϯϙʔωϯτ಺ͷಈ͖Λ؂ࢹͯ͠ɺ౎౓ϦΫΤετɾϨεϙϯε 
    όΠϯυͨ͠ϓϩύςΟͷ஋มߋɾΞΫγϣϯ࣮ߦ 
    ϝιου࣮ߦ 
    BKBY௨৴ 
    Ϩεϙϯε 
    ϨεϙϯεΛ֘౰෦෼ʹ൓ө
57. ϦΞϧλΠϜʹϑΥʔϜͷόϦσʔγϣϯ͕ՄೳʹͳΓ·͢
58. w ຊےϢʔεέʔεͱ͸ؔ܎ͳ͍෦඼Ͱ
    w ະಡ݅਺
    w %#֎෦࿈ܞ͕ඞཁͳ෦඼
    w ݕࡧϑΥʔϜ
    w ͓໰߹ͤϑΥʔϜ
    w ݱࡏͷΧʔτ
    w ༣ศ൪߸Ͱͷॅॴݕࡧ w एׯಈ͖͕͋΍͍͠ͱ͖͕͋Δ
    w ࣮ߦ࣌ؒ͸ͪΐͬͱ͔͔Δ -JWF
    $PNQPOFOU ஫ҙ఺ γʔϯ 5XJH$PNQPOFOUʹঢ়ଶอ࣋ͱΞΫγϣϯΛ௥Ճ͠·͢
59. 3FBDUίϯϙʔωϯτΛར༻͠·͢ 3FBDU TZNGPOZVYSFBDU
61. ίϯϙʔωϯτͷωετՄೳ
62. 7VFίϯϙʔωϯτΛར༻͠·͢ 7VF
63. ஫ҙ఺ γʔϯ w طଘͷ3FBDUίʔυͷҠ২
    w ίϯϙʔωϯτͦͷ··ར༻΋Մ
    w 3FBDUґଘͳͳ6*Λ࠾༻
    w ϑϩϯτΤϯυΤϯδχΞͱ෼ۀ
    w 3FBDUଆ͸ϑϩϯτΤϯυ
    w ஋ͷҾ͖౉͠΍ར༻͸όοΫΤϯυ
    w Ϟμϯͳ8FCϑϩϯτΤϯυͷ 
 ઴ਐతͳಋೖ w 3FBDU಺Ͱ͸5XJHͷػೳ͸࢖͑ͳ͍
    w ಈతͳ஋͸5XJHଆ͔Β౉͢
    w ͔͜͜Βઌ͸+4ͷੈք
    3FBDU 3FBDUίϯϙʔωϯτΛར༻͠·͢
64. ·ͱΊ
65. ঺հͨ͠ίϯϙʔωϯτ·ͱΊ 5VSCP -JWF 3FBDU w উखʹ41"Խ
    w ϦΞϧλΠϜʹ 
 ࠷৽ͷঢ়ଶʹมߋͰ͖Δ
    w ෳ਺Օॴͷมߋ͕༰қ
    w एׯ͕ͤͭ͘Α͍ w ࢖͍׳Εͨ4ZNGPOZͷ 
 ॻ͖ํͰ࡞੒Ͱ͖Δ
    w ϑΥʔϜͷόϦσʔγϣϯ
    w +4͸΄΅օແ w طଘͷ3FBDUͷҠ২͕ 
 Ͱ͖Δ
    w ϑϩϯτΤϯυͱ෼ۀՄ
    w ͔͜͜Β͖͞͸+4
66. 4ZNGPOZ
    69͸ w +4ΛͳΔ΂͘ॻ͔ͣʹϑϩϯτΤϯυΛϦονʹ͢Δ
    w େ·͔ʹݟͨ໨ɺϑΥʔϜɺ5XJHɺ౷߹ͷछྨ
    w طଘʹ΋৽نʹ΋ಋೖ͸ൺֱత༰қʢҰ෦Ͱ΋Մʣ
    w ϊ΢ϋ΢͸ͦ͜·Ͱཷ·ͬͯͳ͍ͷͰɺτϥΠˍΤϥʔ͕ඞཁ
67. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠