2023/6/19週もくもく会 ESM/React18/BFF周辺調査, Serverless Framework, ISUCON学習

ランサーズでは自己学習の場として毎朝1時間程のもくもく会を開催しています。
もくもく会を開催しようと思ったきっかけは、こちらで紹介しています。
以下は今週の取り組みになります。

今週のもくもく会

谷

ES Modules ※以下ESM（import maps, dllなど）仕様の周辺調査
- https://zenn.dev/highgrenade/scraps/74a64a56c1ddf0
  - JS標準のimport/export機構のこと
  - これまでhtml + jsでは、scriptタグを利用することでしか外部のファイルを読み込む方法が無かった
    - html側の仕様に依存
    - jsファイルの読み込み順に気をつけないといけない
  - Node.jsで、ESMが導入される前までCommonJSという独自仕様のモジュール機構が存在
    - ESMが各ブラウザで正式サポートされるまでは、これを利用することが主流
  - AMDという仕様も存在
    - フロントエンド側でCommonJSの仕様を使えるようにしたもの
    - 過去にRequireJSというものが存在した
  - Webpackの登場
    - CommonJSとAMDを同時サポート
    - UMD（Universal Module Definition）の形式でビルドファイルを書き出す
  - なぜWebpackが必要だった？
    - IEの存在の為、ESMがどう頑張っても使えない世界だった
    - ESMをはじめES2015仕様のコードをコンパイルする為に必要だった
  - IEが死んだ後の世界
    - ESMが各ブラウザで正式サポートされており
    - モジュールに関しては理論的にはWebpack/Viteなどのバンドラーを不要
    - ただ、React/Vue周辺の為に、まだまだビルドツールは必要
  - Import maps
    - namespace的にcdnを定義し、ESM仕様で利用可能
    - これまでpackage.jsonでモジュール管理をしていたけど、これが使えると、外部仕様を頼らなくてもokな世界になる
```
<script type="importmap">
{
  "imports": {
    "lodash": "<https://cdn.jsdelivr.net/npm/lodash-es@4.17.21/lodash.min.js>",
    "@" : "./sample-alert.js"
  }
}
</script>
```
```
<script type="module">
  import * as _ from 'lodash';
  import {sayMessage} from '@';

  const a = {'a': 1};
  const b = {'a': 3, 'b': 2};
  const c = _.defaults(a, b);

  sayMessage(JSON.stringify(c));// {a: 1, b: 2}
</script>
```
React 18 & 使ったことがないReact機能（Suspense, Lazy loadingなど）の周辺調査
- https://zenn.dev/highgrenade/scraps/57a0a42595d41f
- React 17 → 18でのパフォーマンスの変化
  - レンダリングのバッチ化
    - 複数状態変化の場合にレンダリングをまとめて行ってくれることで、パフォーマンス向上
  - Transition
    - 重い処理を非同期化できる
  - Suspense
    - loadingを構造的に書ける
- React 17との差分
  - アプデ方法など
- Lazy loadingについて
  - React.lazy、lazy import、lazy loadingなどのキーワードが出てくる
  - ここは深掘り

BFFの周辺調査
- https://zenn.dev/highgrenade/scraps/e8d1b065d3a4fa
- BFFは、フロントエンドとバックエンドの中間に配置され双方の複雑な処理を緩和させる責務を持つアーキテクチャ設計パターン
  - 速度が遅くならないように以下が主流
  - フロントとBFFの通信はGraphQL
  - BFFとバックエンド(マイクロサービスで作られた)間はgRPC + Go
- BFFのフレームワークとしてNest.jsが採用されるのは、上記の理由により、GraphQLとgRPCを両方扱える必要がある為
- Next.jsをサーバとして動かし、BFFとして扱うこともできる

太田

今週はWindows → Macに開発環境以降とSQL書いてた
あまりもくもくできなかった気がするので来週からがんばる

磯野

Roots StackでWordPress制作
- 前半：動画を見て基本を抑える
- 後半：実際に手を動かして触ってみる
- ページの管理や非エンジニアがうまく更新するにはとか考えると難しい。。

砂田

ServerlessFrameworkに触れてみた
- ServerlessFrameworkがやってくれること
  - AWSのアーキテクチャ構成が簡単になる
    - テンプレが使える
    - yamlで定義
  - node, pythonなどの環境
  - DynamoDBを組み合わせたりも
  - Lambdaにデプロイ
- シンプルなnode.jsをLambdaを立ててみた
  - ほとんど自動でLamdaが立った
  - エンドポイントにアクセスするとjsonが帰ってくるものができた
- Functionの中にeventを作成して実行可能
- 各eventはREST API的に操作できる
来週
- StableDiffusionをデプロイしてみる

岡田

ISUCON研修のための勉強達人が教えるWebパフォーマンスチューニング〜ISUCONから学ぶ高速化の実践基礎的なところまで
- １章　チューニングの基礎知識
  - 「推測せず計測する」「公平に比較する」「１つずつ比較する」
  - ボトルネックだけにアプローチする　解決・回避・緩和
  - 「負荷試験→結果確認→改善」の繰り返し
- ２章　モニタリング
  - Linuxコマンド：CPU利用率top, メモリ利用率free, 負荷をかけるstress
  - モニタリングツール：プル型（サーバーにリクエスト）、プッシュ型（サーバーから送信）
  - 正しい計測
    - 縦軸・横軸に注意
    - 比較するときは適用前を同じ条件

今週の報告は以上です。
週毎に取り組みを掲載していきますので、ご期待下さいませ。

2023/6/19週 もくもく会 ESM/React18/BFF周辺調査, Serverless Framework, ISUCON学習

今週のもくもく会

関連記事

2023/6/19週もくもく会 ESM/React18/BFF周辺調査, Serverless Framework, ISUCON学習