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
430
再実装 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
WebDriver BiDiとは何なのか
yotahada3
1
140
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
770
GAEログのコスト削減
mot_techtalk
0
110
時計仕掛けのCompose
mkeeda
1
280
個人アプリを2年ぶりにアプデしたから褒めて / I just updated my personal app, praise me!
lovee
0
340
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
210
[JAWS-UG横浜 #79] re:Invent 2024 の DB アップデートは Multi-Region!
maroon1st
1
140
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
550
Immutable ActiveRecord
megane42
0
130
Honoをフロントエンドで使う 3つのやり方
yusukebe
4
2.1k
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
120
CNCF Project の作者が考えている OSS の運営
utam0k
5
690
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
90
5.8k
The Invisible Side of Design
smashingmag
299
50k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Adopting Sorbet at Scale
ufuk
74
9.2k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Six Lessons from altMBA
skipperchong
27
3.6k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The World Runs on Bad Software
bkeepers
PRO
67
11k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
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
ご静聴ありがとうございました!!