$30 off During Our Annual Pro Sale. View Details »

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

Ippei Sumida
September 24, 2022

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

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

#phpcon #phpcon2022

Ippei Sumida

September 24, 2022
Tweet

More Decks by Ippei Sumida

Other Decks in Programming

Transcript

  1. 1)1$POGFSFODF+BQBO ͳΔ΂͘+BWB4DSJQUΛॻ͔ͳ͍Ͱ 
 4ZNGPOZͷ6*ΛϦονʹ͢Δ 4ZNGPOZ69

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

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

  4. 4ZNGPOZ69ͱ͸

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

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

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

  8. 4ZNGPOZ69 8FCQBDL&ODPSF 4ZNGPOZ 5XJH 4ZNGPOZ69ߏ੒ ˡϑϨʔϜϫʔΫ ˡςϯϓϨʔτΤϯδϯ ˡ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. 4ZNGPOZ69Λ࢖͏ͱԿ͕ྑ͍͔

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

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

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

  16. 69༻ΦϒδΣΫτΛ࡞Δ 69༻ςϯϓϨʔτ 
 ؔ਺λάΛ࢖͏ جຊ͸͜ͷ̎ύλʔϯ

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

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


    1)1Ͱهड़ 4ZNGPOZ69ͩͱ
  19. \\SFOEFS@DIBSU ^^Ͱ+BWB4DSJQUੜ੒

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

  22. 4ZNGPOZ69ͷछྨ

  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. )PUXJSF5VSCPΛ࢖ͬͯ41"ʢͬΆ͍ಈ͖ʣʹ͠·͢ 5VSCP TZNGPOZVYUVSCP

  27. 5VSCP͸छྨ 5VSCP w 5VSCP%SJWF 
 ˠϖʔδશମʹ࡞༻ w 5VSCP'SBNF 
 ˠϖʔδͷ̍Օॴʹ࡞༻

    w 5VSCP4USFBN 
 ˠϖʔδͷෳ਺Օॴʹ࡞༻
  28. 5VSCP%SJWF ೖΕΔ͚ͩͰɺϦϯΫઌͷϖʔδΛ"KBYͰऔಘ͠දࣔΛࠩ͠ସ͑·͢

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

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

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

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

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

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

  35. lUVSCP@TUSFBNz 
 ͱ͍͏ϑΥʔϚοτͰ 
 ಛघͳσʔλΛग़ྗ

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

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

  38. 5VSCP4USFBNΞΫγϣϯͷछྨ UVSCPTUSFBNBDUJPOl\͜͜^z w BQQFOE 
 ˠࢦఆ*%λά಺ͷ࠷ޙʹ௥Ճ w QSFQFOE 
 ˠࢦఆ*%λά಺ͷ࠷ॳʹ௥Ճ

    w SFQMBDF 
 ˠࢦఆ*%λάΛॻ͖׵͑ w VQEBUF 
 ˠࢦఆ*%λά಺Λॻ͖׵͑ w SFNPWF 
 ˠࢦఆ*%λάΛ࡟আ w CFGPSF 
 ˠࢦఆ*%λάͷલʹ௥Ճ w BGUFS 
 ˠࢦఆ*%λάͷޙΖʹ௥Ճ
  39. None
  40. .&3$63& "114&37&3 .&3$63&͕44&ʢ4FSWFS4FOU&WFOUTʣͷϋϒͱͯ͠ಈ࡞ 1045 44& 44& 44&

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

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

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

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

  45. w ϦΞϧλΠϜੑͷඞཁͳ΢ΟδΣοτ w ࠲੮ࢦఆ w ͍͍ͶϘλϯʢ݅਺ʣ w QVCTVC w ίϝϯτ

    w νϟοτ w JE؅ཧ͕͔ͬ͠Γඞཁ w ηΩϡϦςΟͷߟྀ͕ඞཁ 
 ˠᷖᮣʹͭ͘Δͱݸਓ৘ใ࿙Ӯ͢Δ 5VSCP )PUXJSF5VSCPΛ࢖ͬͯ41"ʢͬΆ͍ಈ͖ʣʹ͠·͢ ஫ҙ఺ γʔϯ
  46. ˞ల։͞Εͨ)5.-͕࠶ඳը͞Ε·͢

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

  48. None
  49. None
  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௨৴ Ϩεϙϯε ϨεϙϯεΛ֘౰෦෼ʹ൓ө

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

  58. w ຊےϢʔεέʔεͱ͸ؔ܎ͳ͍෦඼Ͱ w ະಡ݅਺ w %#֎෦࿈ܞ͕ඞཁͳ෦඼ w ݕࡧϑΥʔϜ w ͓໰߹ͤϑΥʔϜ

    w ݱࡏͷΧʔτ w ༣ศ൪߸Ͱͷॅॴݕࡧ w एׯಈ͖͕͋΍͍͠ͱ͖͕͋Δ w ࣮ߦ࣌ؒ͸ͪΐͬͱ͔͔Δ -JWF$PNQPOFOU ஫ҙ఺ γʔϯ 5XJH$PNQPOFOUʹঢ়ଶอ࣋ͱΞΫγϣϯΛ௥Ճ͠·͢
  59. 3FBDUίϯϙʔωϯτΛར༻͠·͢ 3FBDU TZNGPOZVYSFBDU

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

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