Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Server Side Rendering with WebComponents

Server Side Rendering with WebComponents

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

0fa1c2ed2eb4a18ddec3dd70cb1f72db?s=128

Yosuke Onoue

March 04, 2018
Tweet

Transcript

  1. 4FSWFS4JEF3FOEFSJOH XJUI8FC$PNQPOFOUT ͓ͷ͏͑ !MJLS  8FC$PNQPOFOUTLZPUP.FFUVQ

  2. ࣗݾ঺հ w ͓ͷ͏͑ w ژ౎େֶֶࡍ༥߹ڭҭݚڀਪਐηϯλʔ
 ੓ࡦͷͨΊͷՊֶϢχοτಛఆॿڭ w ՄࢹԽɺ࠷దԽɺΞϧΰϦζϜͷݚڀ w OHLZPUPΦʔΨφΠβʔɺ


    8FC$PNQPOFOUT΍Γ͍ͨϚϯ
  3. ֓ཁ w ϋΠύϑΥʔϚϯεͳ8FCαΠτΛߏங͢Δ্Ͱɺ 4FSWFS4JEF3FOEFSJOH 443 ͸ແࢹͰ͖ͳ͘ͳΓͭ ͭ͋Γ·͢ɻ8FC$PNQPOFOUTͱ4FSWFS4JEFϨϯμ Ϧϯάͷؔ܎ʹ͍ͭͯ޲͖߹ͬͯΈ͍ͨͱࢥ͍·͢ɻ

  4. ޲͖߹ͬͯΈͨ

  5. ͕ɺ

  6. ݁࿦͸ಛʹͳ͍

  7. ಺༰ w 4FSWFS4JEF3FOEFSJOH 443 ͷඞཁੑʹ͍ͭͯɺ
 1SPHSFTTJWF8FC"QQT 18" ͷಈ޲ͱڞʹղઆ w 8FC$PNQPOFOUTͱ443ͷ෇͖߹͍ํʹ͍ͭͯߟ͑Δ

    w ͜Ε͔Βͷ8FCϑϩϯτΤϯυ։ൃʹ͍ͭͯߟ͑Δ w ·ͩ·ͩ໛ࡧதͰ͢
  8. 8FC$PNQPOFOUT͕΍͖ͬͯͨ

  9. ͜Ε͔Βͷ8FC։ൃ w 8FC$PNQPOFOUT w )5.-ɺ$44ɺ+BWB4DSJQUͷίϯϙʔωϯτԽ w 1SPHSFTTJWF8FC"QQT w 3FMJBCMFɺ'BTUɺ&OHBHJOH

  10. 1SPHSFTTJWF8FC"QQT 18" w IUUQTEFWFMPQFSTHPPHMFDPNXFCQSPHSFTTJWF XFCBQQT w 18"Λ࡞Δ࣌ͷࢦ਑ w IUUQTEFWFMPQFSTHPPHMFDPNXFC QSPHSFTTJWFXFCBQQTDIFDLMJTU

    w -JHIUIPVTF w 18"lྑ͍8FCαΠτz
  11. -JHIUIPVTF "VEJU5PPM w 8FCαΠτΛղੳͯ͠఺਺Խ w $ISPNFʹ૊ΈࠐΈ w 1SPHSFTTJWF8FC"QQ w 1FSGPSNBODF

    w "DDFTTJCJMJUZ w #FTU1SBDUJDFT
  12. 18"ϑΝʔετͳઃܭ w ޙ෇͚Ͱ18"ʹ͢Δͷ͸೉͍͠ w ࠷ॳ͔Β18"Λҙࣝͨ͠ઃܭ 18"ϑΝʔετ  w 18"ͷ࡞Γํ 

    41"Λ͔ͬ͠Γ࡞Δ  4FSWJDF8PSLFSɺ8FC"QQ.BOJGFTUʹରԠ͢Δ w 41"͕࡞ΕΕ͹18"։ൃ͸೉͘͠ͳ͍ w ͨͩ͠ύϑΥʔϚϯε࠷దԽΛআ͘
  13. 'JSTUMPBEGBTUFWFOPO( 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 4FSWFS4JEF3FOEFSJOH
  15. ΫϦςΟΧϧϨϯμϦϯάύε w IUUQTEFWFMPQFSTHPPHMFDPNXFC GVOEBNFOUBMTQFSGPSNBODFDSJUJDBMSFOEFSJOH QBUI w IUUQTEFWFMPQFSTHPPHMFDPNXFC GVOEBNFOUBMTQFSGPSNBODFDSJUJDBMSFOEFSJOH QBUIDPOTUSVDUJOHUIFPCKFDUNPEFM

  16. 18" )5.-ɺ+4 ϒϥ΢β Ωϟογϡ "1* ॳճΞΫηε ճ໨Ҏ߱ΞΫηε $44ɺFUD "QQ4IFMM*OTUBMM ௿଎ͳωοτϫʔΫ

  17. 18"XJUI443 )5.-ɺ+4 ϒϥ΢β Ωϟογϡ "1* ॳճΞΫηε ճ໨Ҏ߱ΞΫηε $44ɺFUD "QQ4IFMM*OTUBMM 4431BHF

    ௿଎ͳωοτϫʔΫ
  18. 18"Ͱͷ4FSWFS4JEF3FOEFSJOH w Ϋϩʔϥɺ0(1ରԠ w 1SFSFOEFSJOHͰ΋ରԠՄೳ w ॳظඳըͷߴ଎Խ w ΫϦςΟΧϧϨϯμϦϯάύεͷ୹ॖ w

    ϒϥ΢β͕ϦιʔεΛॱ൪ʹಡΈࠐΜͰ
 ॲཧ͢ΔϓϩηεΛ؆ུԽ
  19. 18"XJUI8FC$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 /PEFW ೥݄ Ͱϑϥά෇͖αϙʔτ͕։࢝ w ŠFYQFSJNFOUBMNPEVMFT w /PEFWͰຊ֨ීٴ͔ w

    ೥݄ࠒϦϦʔεɺ݄ࠒ-54קࠂ w ࢀরɿIUUQUFQQFJTIBUFOBCMPHDPNFOUSZ FTNPEVMFTJOOPEFKT w ೥ʹ͸&4.PEVMFTͷ࣌୅͕΍ͬͯ͘Δʢ͔΋ʣ
  22. 8FC$PNQPOFOUTͱ443 w 41"ϑϨʔϜϫʔΫXJUI8FC$PNQPOFOUT w 41"ϑϨʔϜϫʔΫྲྀͷ443 w "OHVMBS6OJWFSTBMɺ/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

    ".1UP18" 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 1PMZNFS4IPQσϞ
 IUUQTTIPQQPMZNFSQSPKFDUPSH w

    ௨৴࿏ͷۭ͖࣌ؒΛ௵͢
  26. 131-WT443 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Λͭ͘Δ