はじめてのUniversal JavaScript

はじめての 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 diﬀerent 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 デザインパターン(第２版）』

やってみた②　環境フロントエンド　- 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

ご静聴ありがとうございました！！

はじめてのUniversal JavaScript

はじめてのUniversal JavaScript

Ryusou

More Decks by Ryusou

Other Decks in Programming

Featured

Transcript