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.2k
はじめての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
180
Hydrogenで 2022年〜を感じる
nozaki
0
580
microCMSでimgixに入門する
nozaki
0
1k
Jamstack Conf 2021を見てブログ構成を見直した話
nozaki
1
1.3k
ユーザーが編集中の状態管理について考えよう
nozaki
3
6.7k
Other Decks in Programming
See All in Programming
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
870
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
280
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
1.1k
AI Agent系IDEを使って 開発生産性を爆アゲする
ouchi2501
1
100
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.5k
ソフトウェアエンジニアの成長
masuda220
PRO
12
2k
2025.2.14_Developers Summit 2025_登壇資料
0101unite
0
140
仕様変更に耐えるための"今の"DRY原則を考える
mkmk884
9
2.9k
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
1
210
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
230
AIプログラミング雑キャッチアップ
yuheinakasaka
11
2k
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
It's Worth the Effort
3n
184
28k
How GitHub (no longer) Works
holman
314
140k
Docker and Python
trallard
44
3.3k
Building an army of robots
kneath
303
45k
Statistics for Hackers
jakevdp
797
220k
4 Signs Your Business is Dying
shpigford
182
22k
Fireside Chat
paigeccino
34
3.2k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Writing Fast Ruby
sferik
628
61k
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
ご静聴ありがとうございました!!