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
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
120
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
190
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
120
RailsGirls IZUMO スポンサーLT
16bitidol
0
180
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
130
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
18k
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
250
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
440
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
150
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
Unsuck your backbone
ammeep
671
58k
Designing Experiences People Love
moore
142
24k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
Site-Speed That Sticks
csswizardry
10
690
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Code Review Best Practice
trishagee
69
18k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
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Λͭ͘Δ