GROWI Developers Wiki
GROWI Developers Wiki
helpdelete
Redirected: You are redirected from /GROWI勉強会/20201005/TS／Next.js／SWR化 .

Functional Component 化

  • hooks を使えるようにするには必須
  • 大変そうであれば、とりあえずラップするだけでも意味はある

ラッピング例:

class MyComponentSubstance extends React.Component { ... }


const MyComponent = (props) => {
  const { t } = useTranslation();
    
  ...

  return (
    <MyComponentSubstance
      {...props}
      t={t}
    />
  );
};

export default MyComponent;

TypeScript 化

  • やらなくても動くけどやる
    • js は動かすまで正常動作するかどうかがわからない 
      const result = axios.get(...);
const { pages } = result;
pages.forEach(page => ...);
    • TS なら書いている途中で動かないことがわかる

📝 簡単に SSR とか CSR とか SPA とか

  • HTTP
    • 1req - 1res
  • MVCフレームワーク
    • 1req - 1res(w/ HTML)
    • ページ遷移も 1req - 1res(w/ HTML)
  • jquery や部分的な React 化されたシステム
    • 1req - 1res(w/ HTML) の後、CSR
      • CSR = DOM操作したり shadow DOM 使ってコンポーネントレンダリングしたり
    • ページ遷移も 1req - 1res(w/ HTML)
      • レンダリングの度に js 初期化が走る
  • SPA
    • 1req - 1res(w/ HTML) の後、CSR
    • 「ページ遷移」は擬似的
      • js がページ遷移したかのように見せる
      • 必ずしも HTTP req は発生しない
  • SSR
    • 1req - 1res(w/ HTML and Server-Side-Redered Component) の後、CSR]
      • CSR 時は、SSR されたコンポーネントとの突合も行う
  • SSR するが SPA ではないシステム
    • GROWI.cloud はこれ
      • React Router に触りたくなかった
    • GROWI もこれになる

📝 なぜ SPA にしないのか

  • GROWI では「一般ユーザー向けページ」と「管理者ユーザー向けページ」を SPA に統合する必要がない
    • 同様にログインページや /me など特殊なページに関しても同様のことが言える

📝 Optimization for js/css

📝 GROWI を Next.js 化するには

SWR 化

  • SWR とは？の前に...

ステート管理

  • React との闘いは、ステートとの闘い
    • コンポーネント props, state との闘い
    • バケツリレーとの闘い
    • グローバルステートとの闘い

グローバルステート管理手法

第1世代(勝手に命名)

  • 基礎技術は？
    • React Component State
  • フレームワーク・ライブラリは？
    • redux 
      import { createStore } from 'redux';
    • unstated
  • 要するに？
    • What: state の塊
    • How: HOC
      • Provider で囲って、Subscriber で囲って…

HOC…滅びよ… 💀 💀 💀 💀 💀

  • Higher-Order Components
  • Decorator パターン
  • 型やインターフェースなんて JS の世界にはないのに wrap してしまうので「モノが変わる」

第1.5世代(勝手に命名)

  • Mobx なら decorator (= annotation, ≠ Decorator パターン) で DI できる

第2世代(勝手に命名)

  • 基礎技術は？
    • React Hooks
      • 脱HOC!!!
      • React Context
  • フレームワーク・ライブラリは？
    • (使わない)
    • unstated-next
  • 要するに？
    • What: state の塊なのは変わらず
    • How: Hooks

第3世代(勝手に命名)

  • 基礎技術は？
    • React Hooks
      • React Context
  • フレームワーク・ライブラリは？
    • Recoil
  • 要するに？
    • What: K/V, Atom
    • How: Hooks

第3.5世代(勝手に命名)

Tips

/資料/開発ガイドライン/SWRによるグローバルステート＆カスタムhooks も読みましょう