# Functional Component 化

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

ラッピング例:

```typescript
class MyComponentSubstance extends React.Component { ... }


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

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

export default MyComponent;
```

# TypeScript 化

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


# :memo: 簡単に 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 もこれになる

## :memo: なぜ SPA にしないのか

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

## :memo: Optimization for js/css

- Optimize とは
    - js ファイルの分割、minify, uglify
    - css ファイルの分割、minify, uglify
    - 適切なページで適切なアセットをロードする必要がある
- Next.js を使わなかったら…
    - 君は Webpack 職人になりたいか？？
        - https://github.com/weseek/growi/blob/master/config/webpack.common.js
        - https://github.com/weseek/growi/blob/master/config/webpack.dev.js
        - https://github.com/weseek/growi/blob/master/config/webpack.prod.js
    - 君は gulp 職人になりたかったか…？？
- Next.js での考え方
    - https://nextjs.org/blog/next-9-2
    - Next.js の人達が職人芸をやってくれていることを信じよう
- もし Next.js を使わないなら？
    - 上記のようなことをどのフレームワークがやってくれるのかを意識する
    - よしなにやってくれるフレームワークを使っていなければ、自身で検討する必要がある

## :memo: GROWI を Next.js 化するには

- SSR 可能なコンポーネントを作る ＝ **Universal Code**
- 非 Universal なコードとは？
    - https://github.com/weseek/growi/blob/master/src/client/js/components/Navbar/PersonalDropdown.jsx
        - クライアントサイドのサービス層・グローバルステートストアとなる unstated に依存している
        - 戦略: :arrow_right: Universal Component の境界を考え、`import dynamic from 'next/dynamic';` を使う
        - 解: :arrow_right: PersonalDropdown.jsx, PersonalDropdownMenu.jsx
    - https://github.com/weseek/growi/blob/master/src/lib/util/helpers.js
        - `__dirname` が一意であることを前提にしている
        - 戦略: どちらでも使えるように改修
        - 解: :arrow_right: project-dir-utils.ts






# SWR 化

- SWR とは？の前に...

## ステート管理

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

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

### 第1世代(勝手に命名)

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

<div class="card border-danger">
<div class="card-header text-danger h2">

HOC…滅びよ… :skull: :skull: :skull: :skull: :skull:

</div>
<div class="card-body text-danger p-0">

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

</div>
</div>

### 第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世代(勝手に命名)

- 基礎技術は？
    - React Hooks
        - React Context
    - 
- フレームワーク・ライブラリは？
    - SWR
        - [SWRはローカルの状態管理としても使える](https://zenn.dev/tak_iwamoto/articles/39aefec675c323)
        - [Next.js + Vercel + swr + TypeScript (No Redux + No SSR) で短期間チーム開発した](https://matamatanot.hatenablog.com/entry/2020/05/05/204119)
    - react-query
- 要するに？
    - What: (K/V, Atom) x (Auto Caching, Auto Refetching)
    - How: Hooks


<div class="card border-info">
<div class="card-header text-info">Tips</div>
<div class="card-body text-info">

[/資料/開発ガイドライン/SWRによるグローバルステート＆カスタムhooks](https://dev.growi.org/637355d1c29dff4657eb5e2d) も読みましょう

</div>
</div>



---

## Page Navigation

- Canonical URL: https://dev.growi.org/資料/開発ガイドライン/Modernize
- Permalink: https://dev.growi.org/5f74fad16711480049ff1938
- Parent: [開発ガイドライン](/5cff50c29f29ed003e5d2984.md)
- Children: 0 total
- Total descendants: 0
- Siblings: 12 total
  - [ADR - Architecture Decision Record](/6522ae62c305143ea046a16e.md)
  - [Field制限に関するModel層での責務について](/5f3e0b4e21b23d00487da698.md)
  - [Mongooseメソッド](/5cff5ed49f29ed003e5d2987.md)
  - [Next.js 化](/5f7ad6de2906df004819a9af.md)
  - [PaginationWrapperを使いたい](/5d1dc3608c18400041e56649.md)
  - [SWRによるグローバルステート＆カスタムhooks](/637355d1c29dff4657eb5e2d.md)
  - [USER_PUBLIC_FIELDS の扱いについて](/605016625ea133004833567e.md)
  - [i18n](/5eca4d8e7bc0b20049fd2760.md)
  - [デザイン規定とポリシー](/5ed49039abdc3e0048a2256d.md)
  - [モデルインターフェースのTypescript化](/61ea77b416b45b44403d246d.md)
  - [動作確認タスクの進め方](/5ee18e85615ff10048fac7a4.md)
  - [英語表記基準](/5cefa1ca927e6e003e203577.md)
- Last updated: 2022-11-15T09:06:10.706Z by yuki
- Full page listing (all children regardless of count): https://dev.growi.org/_api/v3/page-listing/children?id=5f74fad16711480049ff1938