はじめてのUniversal JavaScript

Transcript

1. はじめての Universal JavaScript Yohei Nozaki @ryusou_mtkh

2. ・自己紹介 名前: Yohei Nozaki Twitter: @ryusou-mtkh 社会科の先生。エンジニアではありません！ 教育を変えたくて、プログラミングの勉強をしています！ 普段は卑弥呼のこととか教えたり、めちゃくちゃレガシーなことしてます。

3. ・話すこと Universal JavaScriptとは？ 実装するポイントや感想などを共有できたらと思います。 著書『Node.jsデザインパターン』の紹介 ・話さ(せ)ないこと Next.jsを用いた実装などとの比較はしません。 本当はTypeScriptで実装したかったのです。。。

4. Universal JavaScriptとは？① Isomorphic JavaScriptや SSR(サーバーサイドレンダリン グ)とほぼ同意義で使われている ことも多い。 2015年のMichael Jackson氏の記 事にて言及された。

   https://cdb.reacttraining.com/unive rsal-javascript-4761051b7ae9

5. 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

6. やってみた①　題材 (著）Mario Casciro, Luciano Mammino / 2019/5/18 Universal JavaScriptについてのハンズオン形式の 章がある。

   『Node.js デザインパターン(第２版）』

7. やってみた②　環境 フロントエンド　- React サーバーサイド　- Node(Express) 　物理　-

8. やってみた③　ルーティング フロントエンド　ー　React Router サーバーサイド　ー　Expressのルーティングを React Routerに置き換える！

9. React RouterをExpressのルーティングの中で使う

10. ※RouterContextよりもこっちの方が良いかも https://reacttraining.com/react-router/web/guides/server-rendering

11. やってみた④　ユニバーサルHTTPクライアント サーバー側：requestなどのライブラリが使える。 ブラウザ側：XHR,AJAXで呼び出さなければならない。 axios クライアントとサーバーの両方で使用可能。 各環境のHTTPリクエストを送る仕組みの違いをなくす。

12. このように、例えばAPIをブラウザから叩くのか、ウェブサーバーから叩くのかに よって、APIプレフィックスを設定するモジュールを作成 やってみた⑤　ユニバーサルAPIクライアントモジュール

13. 感想・まとめ ・『Node.jsデザインパターン』では、現在でも使われているデザインパターンを学べる ・React Routerを制するものはSSRを制する(気がする） ・フロント/サーバーをJavaScriptで書く　→　幸せの極み（難しいが）

14. Universal JavaScriptをどう実現する？ みなさんのお話を聞いてみたいです！！

15. 参考： 　文献： 『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

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