Server Side Rendering with WebComponents

WebComponents.kyoto Meetup #2の発表資料です。
https://wc-kyoto.connpass.com/event/78690/

1. 4FSWFS
   4JEF
   3FOEFSJOH
   XJUI
   8FC$PNQPOFOUT ͓ͷ͏͑
   !MJLS
   8FC$PNQPOFOUTLZPUP
   .FFUVQ
   
2. ࣗݾ঺հ w ͓ͷ͏͑
   w ژ౎େֶ
   ֶࡍ༥߹ڭҭݚڀਪਐηϯλʔ
 ੓ࡦͷͨΊͷՊֶϢχοτ
   ಛఆॿڭ
   w ՄࢹԽɺ࠷దԽɺΞϧΰϦζϜͷݚڀ
   w OHLZPUPΦʔΨφΠβʔɺ
 8FC$PNQPOFOUT΍Γ͍ͨϚϯ
3. ֓ཁ w ϋΠύϑΥʔϚϯεͳ8FCαΠτΛߏங͢Δ্Ͱɺ 4FSWFS
   4JEF
   3FOEFSJOH
   443 ͸ແࢹͰ͖ͳ͘ͳΓͭ ͭ͋Γ·͢ɻ
   8FC$PNQPOFOUTͱ4FSWFS4JEFϨϯμ Ϧϯάͷؔ܎ʹ͍ͭͯ޲͖߹ͬͯΈ͍ͨͱࢥ͍·͢ɻ
4. ޲͖߹ͬͯΈͨ
5. ͕ɺ
6. ݁࿦͸ಛʹͳ͍
7. ಺༰ w 4FSWFS
   4JEF
   3FOEFSJOH
   443 ͷඞཁੑʹ͍ͭͯɺ
 1SPHSFTTJWF
   8FC
   "QQT
   18" ͷಈ޲ͱڞʹղઆ
   w 8FC$PNQPOFOUTͱ443ͷ෇͖߹͍ํʹ͍ͭͯߟ͑Δ
   w ͜Ε͔Βͷ8FCϑϩϯτΤϯυ։ൃʹ͍ͭͯߟ͑Δ
   w ·ͩ·ͩ໛ࡧதͰ͢
8. 8FC$PNQPOFOUT͕΍͖ͬͯͨ
9. ͜Ε͔Βͷ8FC։ൃ w 8FC$PNQPOFOUT
   w )5.-ɺ$44ɺ+BWB4DSJQUͷίϯϙʔωϯτԽ
   w 1SPHSFTTJWF
   8FC
   "QQT
   w 3FMJBCMFɺ'BTUɺ&OHBHJOH
10. 1SPHSFTTJWF
    8FC
    "QQT
    18" w IUUQTEFWFMPQFSTHPPHMFDPNXFCQSPHSFTTJWF XFCBQQT
    w 18"Λ࡞Δ࣌ͷࢦ਑
    w IUUQTEFWFMPQFSTHPPHMFDPNXFC QSPHSFTTJWFXFCBQQTDIFDLMJTU
    w -JHIUIPVTF
    w 18"
    
    lྑ͍8FCαΠτz
11. -JHIUIPVTF
    "VEJU
    5PPM w 8FCαΠτΛղੳͯ͠఺਺Խ
    w $ISPNFʹ૊ΈࠐΈ
    w 1SPHSFTTJWF
    8FC
    "QQ
    w 1FSGPSNBODF
    w "DDFTTJCJMJUZ
    w #FTU
    1SBDUJDFT
12. 18"ϑΝʔετͳઃܭ w ޙ෇͚Ͱ18"ʹ͢Δͷ͸೉͍͠
    w ࠷ॳ͔Β18"Λҙࣝͨ͠ઃܭ 18"ϑΝʔετ
    w 18"ͷ࡞Γํ
     41"Λ͔ͬ͠Γ࡞Δ
     4FSWJDF
    8PSLFSɺ8FC
    "QQ
    .BOJGFTUʹରԠ͢Δ
    w 41"͕࡞ΕΕ͹18"։ൃ͸೉͘͠ͳ͍
    w ͨͩ͠ύϑΥʔϚϯε࠷దԽΛআ͘
13. 'JSTU
    MPBE
    GBTU
    FWFO
    PO
    ( w IUUQTEFWFMPQFSTHPPHMFDPNXFCQSPHSFTTJWF XFCBQQTDIFDLMJTUpSTUMPBEGBTUFWFOPOH
    w ಡΈࠐΈඵҎ಺ʢ3"*-
    1FSGPSNBODF
    .PEFMʣ
    w IUUQTEFWFMPQFSTHPPHMFDPNXFC GVOEBNFOUBMTQFSGPSNBODFSBJM
    w (ͷԼΓ࠷େཧ࿦஋
    .CQTʢ)4%1"ʣ
    w ࣮ޮ଎౓͸ʙ.CQT
    w 8FCϖʔδʹڐ͞ΕΔ௨৴༰ྔ͸.#ఔ౓
14. 18"ͰͷύϑΥʔϚϯε࠷దԽ w ௨৴αΠζΛݮΒ͢
    w ෆཁͳ΋ͷ͸ಡΈࠐ·ͳ͍
    w NJOJGZɺѹॖ
    w ฒྻಡΈࠐΈ
    w )551
    w ΫϦςΟΧϧϨϯμϦϯάύεͷ୹ॖ
    w 4FSWFS
    4JEF
    3FOEFSJOH
15. ΫϦςΟΧϧϨϯμϦϯάύε w IUUQTEFWFMPQFSTHPPHMFDPNXFC GVOEBNFOUBMTQFSGPSNBODFDSJUJDBMSFOEFSJOH QBUI
    w IUUQTEFWFMPQFSTHPPHMFDPNXFC GVOEBNFOUBMTQFSGPSNBODFDSJUJDBMSFOEFSJOH QBUIDPOTUSVDUJOHUIFPCKFDUNPEFM
16. 18" )5.-ɺ+4 ϒϥ΢β Ωϟογϡ "1* ॳճΞΫηε ճ໨Ҏ߱ΞΫηε $44ɺFUD
    "QQ
    4IFMM
    *OTUBMM ௿଎ͳωοτϫʔΫ
17. 18"
    XJUI
    443 )5.-ɺ+4 ϒϥ΢β Ωϟογϡ "1* ॳճΞΫηε ճ໨Ҏ߱ΞΫηε $44ɺFUD
    "QQ
    4IFMM
    *OTUBMM 443
    1BHF ௿଎ͳωοτϫʔΫ
18. 18"Ͱͷ4FSWFS
    4JEF
    3FOEFSJOH w Ϋϩʔϥɺ0(1ରԠ
    w 1SFSFOEFSJOHͰ΋ରԠՄೳ
    w ॳظඳըͷߴ଎Խ
    w ΫϦςΟΧϧϨϯμϦϯάύεͷ୹ॖ
    w ϒϥ΢β͕ϦιʔεΛॱ൪ʹಡΈࠐΜͰ
 ॲཧ͢ΔϓϩηεΛ؆ུԽ
19. 18"
    XJUI
    8FC$PNQPOFOUT w جຊతʹ͸௨ৗͷ18"ͱมԽ͠ͳ͍
    w ຤୺ͷ69ཁૉͷίϯϙʔωϯτԽ
    w ίϯϙʔωϯτͷ஗ԆಡΈࠐΈ
    w ฒྻಡΈࠐΈ
20. 8FC$PNQPOFOUTΛ༻͍ͨ41"։ൃ w 41"ϑϨʔϜϫʔΫ
    
    8FC$PNQPOFOUT
    w ϑϨʔϜϫʔΫͷ຤୺Ͱ8FC$PNQPOFOUTΛར༻
    w IUUQTDVTUPNFMFNFOUTFWFSZXIFSFDPN
    w ϑϧ8FC$PNQPOFOUT
    w 8FC$PNQPOFOUTϕʔεϑϨʔϜϫʔΫͷར༻
    w 1PMZNFSɺ4LBUF+4ɺ4UFO$*-
    w 6OJWFSTBM
    &4
    .PEVMFT
21. /PEFKTͰͷ&4
    .PEVMFTαϙʔτ w /PEF
    W ೥݄ Ͱϑϥά෇͖αϙʔτ͕։࢝
    w ŠFYQFSJNFOUBMNPEVMFT
    w /PEF
    WͰຊ֨ීٴ͔
    w ೥݄ࠒϦϦʔεɺ݄ࠒ-54קࠂ
    w ࢀরɿIUUQUFQQFJTIBUFOBCMPHDPNFOUSZ FTNPEVMFTJOOPEFKT
    w ೥ʹ͸&4
    .PEVMFTͷ࣌୅͕΍ͬͯ͘Δʢ͔΋ʣ
22. 8FC$PNQPOFOUTͱ443 w 41"ϑϨʔϜϫʔΫ
    XJUI
    8FC$PNQPOFOUT
    w 41"ϑϨʔϜϫʔΫྲྀͷ443
    w "OHVMBS
    6OJWFSTBMɺ/FYUKTɺʜ
    w ϑϨʔϜϫʔΫͷΦʔόϔου
    w ϑϧ8FC$PNQPOFOUT
    w /PEFKT PS
    αʔόαΠυݴޠ ΛؤுΔ
    w 4FSWFS4JEFͰ$VTUPN
    &MFNFOUTΛల։͢Δ͔ʁ
23. ϑϧ8FC$PNQPOFOUTͰͷ443ઓུ w ΫϥΠΞϯταΠυͰͷ$VTUPN
    &MFNFOUTల։
    w ͏·͘ϚʔΫΞοϓ͠ͳ͚Ε͹ฒྻಡΈࠐΈͰ͖ͳ͍
    w αʔόαΠυͰͷ$VTUPN
    &MFNFOUTల։
    w /PEFKTͰ8FC$PNQPOFOUTରԠ͠ͳ͚Ε͹ͳΒͳ͍
    w ".1
    UP
    18"
    w ͦ΋ͦ΋ॳظདྷ๚ͷϖʔδΛผʹ༻ҙ͢Δ
24. ͜Ε͔Βͷ8FCϑϨʔϜϫʔΫΛໝ૝͢Δ w "QQ4IFMMͱ69ͷ෼཭
    w "QQ4IFMM
    w 18" ΦϑϥΠϯ
    
    443Λલఏ
    w ϧʔςΟϯάɺॳظϖΠϯτʹಛԽ
    w 69
    w 8FC$PNQPOFOUTϕʔε
    w εςʔτ؅ཧ͕՝୊
25. ผղɿ131-ύλʔϯ w IUUQTEFWFMPQFSTHPPHMFDPNXFC GVOEBNFOUBMTQFSGPSNBODFQSQMQBUUFSO
    w 1VTIɺ3FOEFSɺ1SFDBDIFɺ-B[ZMPBE
    w 1PMZNFS
    4IPQσϞ
 IUUQTTIPQQPMZNFSQSPKFDUPSH
    w ௨৴࿏ͷۭ͖࣌ؒΛ௵͢
26. 131-
    WT
    443 w 131-
    w Ϧιʔεґଘؔ܎ͷఆ͕ٛॏཁ
    w πʔϧͷ੔උʹظ଴ʁ
    w 443
    w /PEFKTΞϓϦͷߏஙɾӡ༻εΩϧ͕ٻΊΒΕΔ
    w ৽ͨͳϑϨʔϜϫʔΫͷొ৔ʹظ଴ʁ
27. ೰Έ w Ϋϩʔϥɺ0(1ରԠ͚ͩͳΒ1SFSFOEFSJOHͰͰ͖Δͷ Ͱ443͸ෆཁͱࢥͬͯͨ
    w 18"ͰύϑΥʔϚϯεΛ௥ٻ͢ΔͳΒ΍ͬͺΓ443͸ ඞཁ͔΋ʁ
    w Ͱ΋443͸ߏங΋ӡ༻΋ෳࡶ͗͢ͳ͍͔ʁ
    w &4
    .PEVMFTͱ131-ύλʔϯΛపఈ͢Ε͹443͸΍ͬ ͺΓ͍Βͳ͍ʁ
28. ·ͱΊ w 18"ʹ8FC$PNQPOFOUT͸૊ΈࠐΈՄೳ
    w ϋΠύϑΥʔϚϯεΛ໨ࢦ͢ͳΒ443͸ආ͚ΒΕͳ͍
    w 8FC$PNQPOFOUTͷ׆༻Λਅ໘໨ʹߟ͑Δ࣌ظ
    w ԿΛ໨ඪͱ͢Δ͔ݟۃΊΔ
    w ૯߹֨ಆٕͱͯ͠ͷ18"ઃܭ
    w ஌ࣝΛ૯ಈһͯ͠lྑ͍8FCαΠτzΛͭ͘Δ