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
はじめてのUniversal JavaScript
Search
Ryusou
December 07, 2019
Programming
1
2.4k
はじめてのUniversal JavaScript
【We Are JavaScripters! 3周年記念】 WeJS Festival !
でのLTです。
Ryusou
December 07, 2019
Tweet
Share
More Decks by Ryusou
See All by Ryusou
Astro 3.0入門
nozaki
0
460
再実装 React Testing Library
nozaki
0
210
Hydrogenで 2022年〜を感じる
nozaki
0
620
microCMSでimgixに入門する
nozaki
0
1.1k
Jamstack Conf 2021を見てブログ構成を見直した話
nozaki
1
1.3k
ユーザーが編集中の状態管理について考えよう
nozaki
3
6.8k
Other Decks in Programming
See All in Programming
GUI操作LLMの最新動向: UI-TARSと関連論文紹介
kfujikawa
0
1k
フロントエンドのmonorepo化と責務分離のリアーキテクト
kajitack
2
140
管你要 trace 什麼、bpftrace 用下去就對了 — COSCUP 2025
shunghsiyu
0
470
あのころの iPod を どうにか再生させたい
orumin
2
2.5k
TDD 実践ミニトーク
contour_gara
0
150
Google I/O recap web編 大分Web祭り2025
kponda
0
2.9k
AWS Serverless Application Model入門_20250708
smatsuzaki
0
130
サーバーサイドのビルド時間87倍高速化
plaidtech
PRO
0
490
オープンセミナー2025@広島「君はどこで動かすか?」アンケート結果
satoshi256kbyte
0
210
兎に角、コードレビュー
mitohato14
0
150
コーディングエージェント時代のNeovim
key60228
1
100
WebAssemblyインタプリタを書く ~Component Modelを添えて~
ruccho
1
910
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
20k
The Cult of Friendly URLs
andyhume
79
6.5k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Facilitating Awesome Meetings
lara
55
6.5k
Bash Introduction
62gerente
614
210k
Making Projects Easy
brettharned
117
6.3k
Balancing Empowerment & Direction
lara
2
590
Side Projects
sachag
455
43k
Transcript
はじめての Universal JavaScript Yohei Nozaki @ryusou_mtkh
・自己紹介 名前: Yohei Nozaki Twitter: @ryusou-mtkh 社会科の先生。エンジニアではありません! 教育を変えたくて、プログラミングの勉強をしています! 普段は卑弥呼のこととか教えたり、めちゃくちゃレガシーなことしてます。
・話すこと Universal JavaScriptとは? 実装するポイントや感想などを共有できたらと思います。 著書『Node.jsデザインパターン』の紹介 ・話さ(せ)ないこと Next.jsを用いた実装などとの比較はしません。 本当はTypeScriptで実装したかったのです。。。
Universal JavaScriptとは?① Isomorphic JavaScriptや SSR(サーバーサイドレンダリン グ)とほぼ同意義で使われている ことも多い。 2015年のMichael Jackson氏の記 事にて言及された。
https://cdb.reacttraining.com/unive rsal-javascript-4761051b7ae9
Universal JavaScriptとは?② 「What we need is a word that describes
the same code but running in a different environment. Nowadays we run JavaScript code not only on servers and in browsers, but on mobile and embedded devices as well」 同じコードを異なる環境で動作させる。 クライアント・サーバー/モバイル...etc 同じ思想・哲学で書かれたJavaScript
やってみた① 題材 (著)Mario Casciro, Luciano Mammino / 2019/5/18 Universal JavaScriptについてのハンズオン形式の 章がある。
『Node.js デザインパターン(第2版)』
やってみた② 環境 フロントエンド - React サーバーサイド - Node(Express) 物理 -
やってみた③ ルーティング フロントエンド ー React Router サーバーサイド ー Expressのルーティングを React Routerに置き換える!
React RouterをExpressのルーティングの中で使う
※RouterContextよりもこっちの方が良いかも https://reacttraining.com/react-router/web/guides/server-rendering
やってみた④ ユニバーサルHTTPクライアント サーバー側:requestなどのライブラリが使える。 ブラウザ側:XHR,AJAXで呼び出さなければならない。 axios クライアントとサーバーの両方で使用可能。 各環境のHTTPリクエストを送る仕組みの違いをなくす。
このように、例えばAPIをブラウザから叩くのか、ウェブサーバーから叩くのかに よって、APIプレフィックスを設定するモジュールを作成 やってみた⑤ ユニバーサルAPIクライアントモジュール
感想・まとめ ・『Node.jsデザインパターン』では、現在でも使われているデザインパターンを学べる ・React Routerを制するものはSSRを制する(気がする) ・フロント/サーバーをJavaScriptで書く → 幸せの極み(難しいが)
Universal JavaScriptをどう実現する? みなさんのお話を聞いてみたいです!!
参考: 文献: 『Node.jsデザインパターン』 著者:Mario Casciro, Luciano Mammino 翻訳:武舎広幸, 阿部 和也 2019年 O`Reilly
Japan Webサイト: 「Universal JavaScript」https://cdb.reacttraining.com/universal-javascript-4761051b7ae9 「React Document」https://ja.reactjs.org/docs/react-dom.html 「React Router Document」https://reacttraining.com/react-router/web/guides/server-rendering
ご静聴ありがとうございました!!