$30 off During Our Annual Pro Sale. View Details »

はじめてのUniversal JavaScript

Ryusou
December 07, 2019

はじめてのUniversal JavaScript

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

Ryusou

December 07, 2019
Tweet

More Decks by Ryusou

Other Decks in Programming

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

  4. Universal JavaScriptとは?①
    Isomorphic JavaScriptや
    SSR(サーバーサイドレンダリン
    グ)とほぼ同意義で使われている
    ことも多い。
    2015年のMichael Jackson氏の記
    事にて言及された。
    https://cdb.reacttraining.com/unive
    rsal-javascript-4761051b7ae9

    View Slide

  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

    View Slide

  6. やってみた① 題材
    (著)Mario Casciro, Luciano Mammino / 2019/5/18
    Universal JavaScriptについてのハンズオン形式の
    章がある。
    『Node.js デザインパターン(第2版)』

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide