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
220
Hydrogenで 2022年〜を感じる
nozaki
0
620
microCMSでimgixに入門する
nozaki
0
1.1k
Jamstack Conf 2021を見てブログ構成を見直した話
nozaki
1
1.4k
ユーザーが編集中の状態管理について考えよう
nozaki
3
6.9k
Other Decks in Programming
See All in Programming
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
240
CSC509 Lecture 06
javiergs
PRO
0
260
All About Angular's New Signal Forms
manfredsteyer
PRO
0
160
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
110
CSC509 Lecture 04
javiergs
PRO
0
300
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
2
860
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
1k
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
220
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
140
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
130
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1.1k
Leading Effective Engineering Teams in the AI Era
addyosmani
5
420
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
980
Speed Design
sergeychernyshev
32
1.2k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
4 Signs Your Business is Dying
shpigford
185
22k
The World Runs on Bad Software
bkeepers
PRO
72
11k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Become a Pro
speakerdeck
PRO
29
5.5k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
870
Visualization
eitanlees
149
16k
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
ご静聴ありがとうございました!!