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.3k
はじめての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
440
再実装 React Testing Library
nozaki
0
190
Hydrogenで 2022年〜を感じる
nozaki
0
600
microCMSでimgixに入門する
nozaki
0
1k
Jamstack Conf 2021を見てブログ構成を見直した話
nozaki
1
1.3k
ユーザーが編集中の状態管理について考えよう
nozaki
3
6.7k
Other Decks in Programming
See All in Programming
PHPバージョンアップから始めるOSSコントリビュート / how2oss-contribute
dmnlk
1
970
いまさら聞けない生成AI入門: 「生成AIを高速キャッチアップ」
soh9834
15
4.4k
AI Agents with JavaScript
slobodan
0
210
Kamal 2 – Get Out of the Cloud
aleksandrov
1
170
リアルタイムレイトレーシング + ニューラルレンダリング簡単紹介 / Real-Time Ray Tracing & Neural Rendering: A Quick Introduction (2025)
shocker_0x15
1
290
Java 24まとめ / Java 24 summary
kishida
3
440
地域ITコミュニティの活性化とAWSに移行してみた話
yuukis
0
230
DomainException と Result 型で作る型安全なエラーハンドリング
karszawa
0
880
php-fpm がリクエスト処理する仕組みを追う / Tracing-How-php-fpm-Handles-Requests
shin1x1
5
2.9k
Go1.24 go vetとtestsアナライザ
kuro_kurorrr
2
820
remix + cloudflare workers (DO) docker上でいい感じに開発する
yoshidatomoaki
0
130
アプリを起動せずにアプリを開発して品質と生産性を上げる
ishkawa
0
2.5k
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
2.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.3k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
9
740
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.5k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
23
2.6k
BBQ
matthewcrist
88
9.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Why Our Code Smells
bkeepers
PRO
336
57k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.3k
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
ご静聴ありがとうございました!!