Upgrade to Pro — share decks privately, control downloads, hide ads and more …

はじめてのUniversal JavaScript

4bffe6720aa22b10feef2456e5d495bb?s=47 Ryusou
December 07, 2019

はじめてのUniversal JavaScript

【We Are JavaScripters! 3周年記念】 WeJS Festival !
でのLTです。

4bffe6720aa22b10feef2456e5d495bb?s=128

Ryusou

December 07, 2019
Tweet

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 デザインパターン(第2版)』
  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. ご静聴ありがとうございました!!