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
Perl でも React.js の server-side rendering がしたい! ...
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
zoncoen
June 24, 2015
Programming
2.3k
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Perl でも React.js の server-side rendering がしたい! / perl meets javascript with reactjs
Gotanda.pm#5 LT 資料
zoncoen
June 24, 2015
More Decks by zoncoen
See All by zoncoen
About Merpay Engineering Productivity Team
zoncoen
0
2k
Perl の HTTP/2 事情 / HTTP2 in Perl
zoncoen
0
510
YAPC::Asia 2014
zoncoen
0
2.7k
同期的にプレゼンテーションするツールをつくった話
zoncoen
1
1k
Gunosy.go #4 ~ flag.go ~ #gunosygo
zoncoen
0
260
Gunosy.go #3 ~ expvar.go ~ #gunosygo
zoncoen
1
770
初心者がGoでpercol実装してみた話 / Golang + Reveal.js + Websocket で同期的にプレゼンテーションしたい #hikarie_go
zoncoen
0
2.6k
Other Decks in Programming
See All in Programming
初めての模倣学習とVLA
natsutan
0
250
【デモ】Kiroで体験する仕様駆動開発|設計からコーディングまでAIと進める開発フロー
cmkudo
0
390
仕様駆動開発の消費期限
watany
20
9k
My Marp Sample
sinoue0108
0
120
170k Jobs a Day on GKE: Scaling Mercari's CI Platform - and What's Next for AI-Native Development
junyaokabe
0
120
属人化した知識を、 AIが辿れる地図にする
pkshadeck
PRO
1
210
Hono + Inertia + React で LP を構築した話
oukayuka
2
170
【QA Test Talk Vol.8】AI-DLC による Whole Team Approach の加速
pkshadeck
PRO
0
240
Oxlintはいいぞ(続)
yug1224
1
450
React本体のコードリーディング
high_g_engineer
1
160
使いながら育てる Claude Code — 開発フローの1コマンド化 × 繰り返し指摘の自動仕組み化
shiki_kakaku
1
2k
FastAPI の並行処理モデルを完全に理解する
hoto17296
8
3k
Featured
See All Featured
Highjacked: Video Game Concept Design
rkendrick25
PRO
1
440
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
minecr
1
360
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
133
19k
What does AI have to do with Human Rights?
axbom
PRO
1
2.3k
GraphQLの誤解/rethinking-graphql
sonatard
75
12k
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
helenjbeal
1
280
svc-hook: hooking system calls on ARM64 by binary rewriting
retrage
2
520
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
3
820
Fireside Chat
paigeccino
42
4k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
32
3k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
reverentgeek
1
580
What the history of the web can teach us about the future of AI
inesmontani
PRO
1
670
Transcript
Perl Ͱ React.js ͷ server-side rendering ͕͍ͨ͠ʂ Gotanda.pm #5 @zoncoen
ͱ͍͏ਓ͍Δ͔͠Εͳ͍ ʢੈք͍ʣ
Ͱ͖ΔΑ
What is React.js • JavaScript view library • Facebook
Why server-side rendering? • ॳظϩʔυ࣌ؒͷվળ • SEO ! React.js ରԠͯ͠Δ
• React.renderToString() • ReactElement ͷ initial HTML Λฦ͢ with Node.js
web server React.renderToString(React.createElement(MyClass, {data: data})); <div data-reactid=".1emne5x67eo" data-react-checksum="154602720"></div>
with other languages • Ruby (on Rails): react-rails ! •
Python: python-react ! → ֤ݴޠ͔Β JavaScript ͷؔΛ࣮ߦ react_component('MyComponent', {data: data}, {prerender: true}) render_component('my-component.jsx', {'data': data}, to_static_markup=true)
Perl ͰΕΔʢͣ | ͖ʣ
How to implement • renderToString() ͷ࣮ߦ݁Ռ͕͋Ε͍͍ → Perl ͔Β JavaScript
ͷؔΛ࣮ߦ
JavaScript::V8 • Perl interface to the V8 JavaScript engine •
Latest version released on 28 Dec 2012 … ! • ͱΓ͋͑ͣ V8 v3.14.5.8 Ͱಈ͘͜ͱΛ֬ೝ
Example #!/usr/bin/env perl use strict; use warnings; use utf8; !
use JavaScript::V8; ! my $context = JavaScript::V8::Context->new(); ! my $result = $context->eval(q| (function () { return 'Hello, JavaScript world!'; })(); |); ! print "$result\n";
Demo https://github.com/zoncoen-sample/reactjs_server-side- rendering_with_perl