はじめてのUniversal JavaScript

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

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 デザインパターン(第２版）』
   

   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