Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Server Side Rendering with WebComponents
Search
Yosuke Onoue
March 04, 2018
Programming
0
490
Server Side Rendering with WebComponents
WebComponents.kyoto Meetup #2の発表資料です。
https://wc-kyoto.connpass.com/event/78690/
Yosuke Onoue
March 04, 2018
Tweet
Share
More Decks by Yosuke Onoue
See All by Yosuke Onoue
ネットワーク可視化の世界
likr
7
6.5k
Think About Front-end Web Development with Rust
likr
2
530
Yewにおけるoff-the-main-thread
likr
1
760
行政事業レビューデータの可視化 / Visualization of Japan's National Budget with JUDGIT!
likr
1
230
モダンJavaScript再入門 / Re-introduction to Modern JavaScript
likr
24
11k
Web-based Data Visualization with Rust and WebAssembly
likr
4
5.8k
Introduction to Graph Drawing
likr
0
510
20190707Ionic_Meetup.pdf
likr
0
440
About the end of the web
likr
2
530
Other Decks in Programming
See All in Programming
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
1.1k
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
11
4.8k
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
470
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
450
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
240
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
270
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
620
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
1k
PicoRuby on Rails
makicamel
3
140
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
0
120
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
110
型で語るカタ
irof
0
700
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
GraphQLとの向き合い方2022年版
quramy
49
14k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Writing Fast Ruby
sferik
628
62k
The Cult of Friendly URLs
andyhume
79
6.5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Practical Orchestrator
shlominoach
189
11k
Transcript
4FSWFS4JEF3FOEFSJOH XJUI8FC$PNQPOFOUT ͓ͷ͏͑ !MJLS 8FC$PNQPOFOUTLZPUP.FFUVQ
ࣗݾհ w ͓ͷ͏͑ w ژେֶֶࡍ༥߹ڭҭݚڀਪਐηϯλʔ ࡦͷͨΊͷՊֶϢχοτಛఆॿڭ w ՄࢹԽɺ࠷దԽɺΞϧΰϦζϜͷݚڀ w OHLZPUPΦʔΨφΠβʔɺ
8FC$PNQPOFOUTΓ͍ͨϚϯ
֓ཁ w ϋΠύϑΥʔϚϯεͳ8FCαΠτΛߏங͢Δ্Ͱɺ 4FSWFS4JEF3FOEFSJOH 443 ແࢹͰ͖ͳ͘ͳΓͭ ͭ͋Γ·͢ɻ8FC$PNQPOFOUTͱ4FSWFS4JEFϨϯμ Ϧϯάͷؔʹ͍͖ͭͯ߹ͬͯΈ͍ͨͱࢥ͍·͢ɻ
͖߹ͬͯΈͨ
͕ɺ
݁ಛʹͳ͍
༰ w 4FSWFS4JEF3FOEFSJOH 443 ͷඞཁੑʹ͍ͭͯɺ 1SPHSFTTJWF8FC"QQT 18" ͷಈͱڞʹղઆ w 8FC$PNQPOFOUTͱ443ͷ͖߹͍ํʹ͍ͭͯߟ͑Δ
w ͜Ε͔Βͷ8FCϑϩϯτΤϯυ։ൃʹ͍ͭͯߟ͑Δ w ·ͩ·ͩࡧதͰ͢
8FC$PNQPOFOUT͕͖ͬͯͨ
͜Ε͔Βͷ8FC։ൃ w 8FC$PNQPOFOUT w )5.-ɺ$44ɺ+BWB4DSJQUͷίϯϙʔωϯτԽ w 1SPHSFTTJWF8FC"QQT w 3FMJBCMFɺ'BTUɺ&OHBHJOH
1SPHSFTTJWF8FC"QQT 18" w IUUQTEFWFMPQFSTHPPHMFDPNXFCQSPHSFTTJWF XFCBQQT w 18"Λ࡞Δ࣌ͷࢦ w IUUQTEFWFMPQFSTHPPHMFDPNXFC QSPHSFTTJWFXFCBQQTDIFDLMJTU
w -JHIUIPVTF w 18"lྑ͍8FCαΠτz
-JHIUIPVTF "VEJU5PPM w 8FCαΠτΛղੳͯ͠Խ w $ISPNFʹΈࠐΈ w 1SPHSFTTJWF8FC"QQ w 1FSGPSNBODF
w "DDFTTJCJMJUZ w #FTU1SBDUJDFT
18"ϑΝʔετͳઃܭ w ޙ͚Ͱ18"ʹ͢Δͷ͍͠ w ࠷ॳ͔Β18"Λҙࣝͨ͠ઃܭ 18"ϑΝʔετ w 18"ͷ࡞Γํ
41"Λ͔ͬ͠Γ࡞Δ 4FSWJDF8PSLFSɺ8FC"QQ.BOJGFTUʹରԠ͢Δ w 41"͕࡞ΕΕ18"։ൃ͘͠ͳ͍ w ͨͩ͠ύϑΥʔϚϯε࠷దԽΛআ͘
'JSTUMPBEGBTUFWFOPO( w IUUQTEFWFMPQFSTHPPHMFDPNXFCQSPHSFTTJWF XFCBQQTDIFDLMJTUpSTUMPBEGBTUFWFOPOH w ಡΈࠐΈඵҎʢ3"*-1FSGPSNBODF.PEFMʣ w IUUQTEFWFMPQFSTHPPHMFDPNXFC GVOEBNFOUBMTQFSGPSNBODFSBJM w
(ͷԼΓ࠷େཧ.CQTʢ)4%1"ʣ w ࣮ޮʙ.CQT w 8FCϖʔδʹڐ͞ΕΔ௨৴༰ྔ.#ఔ
18"ͰͷύϑΥʔϚϯε࠷దԽ w ௨৴αΠζΛݮΒ͢ w ෆཁͳͷಡΈࠐ·ͳ͍ w NJOJGZɺѹॖ w ฒྻಡΈࠐΈ w
)551 w ΫϦςΟΧϧϨϯμϦϯάύεͷॖ w 4FSWFS4JEF3FOEFSJOH
ΫϦςΟΧϧϨϯμϦϯάύε w IUUQTEFWFMPQFSTHPPHMFDPNXFC GVOEBNFOUBMTQFSGPSNBODFDSJUJDBMSFOEFSJOH QBUI w IUUQTEFWFMPQFSTHPPHMFDPNXFC GVOEBNFOUBMTQFSGPSNBODFDSJUJDBMSFOEFSJOH QBUIDPOTUSVDUJOHUIFPCKFDUNPEFM
18" )5.-ɺ+4 ϒϥβ Ωϟογϡ "1* ॳճΞΫηε ճҎ߱ΞΫηε $44ɺFUD "QQ4IFMM*OTUBMM ͳωοτϫʔΫ
18"XJUI443 )5.-ɺ+4 ϒϥβ Ωϟογϡ "1* ॳճΞΫηε ճҎ߱ΞΫηε $44ɺFUD "QQ4IFMM*OTUBMM 4431BHF
ͳωοτϫʔΫ
18"Ͱͷ4FSWFS4JEF3FOEFSJOH w Ϋϩʔϥɺ0(1ରԠ w 1SFSFOEFSJOHͰରԠՄೳ w ॳظඳըͷߴԽ w ΫϦςΟΧϧϨϯμϦϯάύεͷॖ w
ϒϥβ͕ϦιʔεΛॱ൪ʹಡΈࠐΜͰ ॲཧ͢ΔϓϩηεΛ؆ུԽ
18"XJUI8FC$PNQPOFOUT w جຊతʹ௨ৗͷ18"ͱมԽ͠ͳ͍ w ͷ69ཁૉͷίϯϙʔωϯτԽ w ίϯϙʔωϯτͷԆಡΈࠐΈ w ฒྻಡΈࠐΈ
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
/PEFKTͰͷ&4.PEVMFTαϙʔτ w /PEFW ݄ Ͱϑϥά͖αϙʔτ͕։࢝ w FYQFSJNFOUBMNPEVMFT w /PEFWͰຊ֨ීٴ͔ w
݄ࠒϦϦʔεɺ݄ࠒ-54קࠂ w ࢀরɿIUUQUFQQFJTIBUFOBCMPHDPNFOUSZ FTNPEVMFTJOOPEFKT w ʹ&4.PEVMFTͷ͕࣌ͬͯ͘Δʢ͔ʣ
8FC$PNQPOFOUTͱ443 w 41"ϑϨʔϜϫʔΫXJUI8FC$PNQPOFOUT w 41"ϑϨʔϜϫʔΫྲྀͷ443 w "OHVMBS6OJWFSTBMɺ/FYUKTɺʜ w ϑϨʔϜϫʔΫͷΦʔόϔου w
ϑϧ8FC$PNQPOFOUT w /PEFKT PSαʔόαΠυݴޠ ΛؤுΔ w 4FSWFS4JEFͰ$VTUPN&MFNFOUTΛల։͢Δ͔ʁ
ϑϧ8FC$PNQPOFOUTͰͷ443ઓུ w ΫϥΠΞϯταΠυͰͷ$VTUPN&MFNFOUTల։ w ͏·͘ϚʔΫΞοϓ͠ͳ͚ΕฒྻಡΈࠐΈͰ͖ͳ͍ w αʔόαΠυͰͷ$VTUPN&MFNFOUTల։ w /PEFKTͰ8FC$PNQPOFOUTରԠ͠ͳ͚ΕͳΒͳ͍ w
".1UP18" w ͦͦॳظདྷ๚ͷϖʔδΛผʹ༻ҙ͢Δ
͜Ε͔Βͷ8FCϑϨʔϜϫʔΫΛໝ͢Δ w "QQ4IFMMͱ69ͷ w "QQ4IFMM w 18" ΦϑϥΠϯ 443Λલఏ w
ϧʔςΟϯάɺॳظϖΠϯτʹಛԽ w 69 w 8FC$PNQPOFOUTϕʔε w εςʔτཧ͕՝
ผղɿ131-ύλʔϯ w IUUQTEFWFMPQFSTHPPHMFDPNXFC GVOEBNFOUBMTQFSGPSNBODFQSQMQBUUFSO w 1VTIɺ3FOEFSɺ1SFDBDIFɺ-B[ZMPBE w 1PMZNFS4IPQσϞ IUUQTTIPQQPMZNFSQSPKFDUPSH w
௨৴࿏ͷۭ͖࣌ؒΛ௵͢
131-WT443 w 131- w Ϧιʔεґଘؔͷఆ͕ٛॏཁ w πʔϧͷඋʹظʁ w 443 w
/PEFKTΞϓϦͷߏஙɾӡ༻εΩϧ͕ٻΊΒΕΔ w ৽ͨͳϑϨʔϜϫʔΫͷొʹظʁ
Έ w Ϋϩʔϥɺ0(1ରԠ͚ͩͳΒ1SFSFOEFSJOHͰͰ͖Δͷ Ͱ443ෆཁͱࢥͬͯͨ w 18"ͰύϑΥʔϚϯεΛٻ͢ΔͳΒͬͺΓ443 ඞཁ͔ʁ w Ͱ443ߏஙӡ༻ෳࡶ͗͢ͳ͍͔ʁ w
&4.PEVMFTͱ131-ύλʔϯΛపఈ͢Ε443ͬ ͺΓ͍Βͳ͍ʁ
·ͱΊ w 18"ʹ8FC$PNQPOFOUTΈࠐΈՄೳ w ϋΠύϑΥʔϚϯεΛࢦ͢ͳΒ443ආ͚ΒΕͳ͍ w 8FC$PNQPOFOUTͷ׆༻Λਅ໘ʹߟ͑Δ࣌ظ w ԿΛඪͱ͢Δ͔ݟۃΊΔ w
૯߹֨ಆٕͱͯ͠ͷ18"ઃܭ w ࣝΛ૯ಈһͯ͠lྑ͍8FCαΠτzΛͭ͘Δ