[随時更新]雑に調べたことをまとめておくスクラップ
Saeラウンドトリップ
データパケットが宛先に送信されるのにかかる時間と、そのパケットの確認応答が発信元で受信されるのにかかる時間の長さです
https://developer.mozilla.org/ja/docs/Glossary/Round_Trip_Time
ネットワークリクエストしてから応答されるまでの時間。
100ﾐﾘ秒以内に収めると良き。
Saeお勧め拡張機能を共有する方法(VSCode)
.vscode/extensions.jsonを作成すると、拡張機能のおすすめ欄に出てくる。
チーム開発時はこれをgithub上で管理し、チーム内で共有すること良き
SaeVSCode拡張機能
GitLens
Editconfig
SaeAAA(Arrange-Act-Assert)
SaePartial<T>
プロパティを全てオプショナルにするユーティリティ型。
SaeMockedProvider
GraphQLのクエリのモックデータを提供する。
テスト環境で実際にサーバーとの通信を行わず、あらかじめ設定したモックを返すことができる。
- mocks
モックデータを定義したオブジェクトの配列。各クエリやミューテーションに対して予想されるレスポンスを定義する。 - children
MockedProviderでラップしたいコンポーネント。実際にテストされる対象。
SaevariableMatcher
MockedProviderでモックレスポンスを設定する際に、動的な変数に基づいてテストを行いたい場合に使用する。
SaenthCalledWith
複数回呼ばれる関数のn回目をテストしたい際に使用する
SaewaitFor
- 特定の時間待機する必要がある際に使用する
- 期待値を満たすまで待つことができる
SaeUU(Unique User)
Webサイトに訪問したユーザー数のこと。一人のユーザーが何度も訪問してもカウントは1。
SaeTesting Library
- テストは実際の使われ方と近いほど信頼できる。
デバッグ方法について
Saegraphql-codegen
- GraphQLスキーマやクエリをもとに自動的に型を生成する。
SaeCookie / Session
-
なぜCookieやSessionが必要なのか
HTTPはステートレスなプロトコルなので状態を保持できない -
Cookie
Cookieはサーバーからクライアントに保存して欲しい情報を送ってもらう。
次回以降にブラウザからサーバーに自動で送信されるテキストデータ。
Cookieは平文で保存されるため書き換え可能。盗聴、改ざんされる恐れが。 -
Session
Cookieを応用した仕組み
CookieにランダムなセッションIDを持たせてサーバーではセッションIDをもとにユーザーの特定を行う
Cookieに保存するのはセッションIDのみ
SaePromise.try
コールバック関数が同期でも非同期に関わらず、処理を統一的に扱える。
コールバック結果はPromiseオブジェクトで返却される。
Promise.try(func)
SaeVOC(Voice of Customer)
- 顧客の声
- 自社の商品やサービスを実際に使った顧客の声や感想など
https://coorum.jp/cxin/column/vocvoice-of-customer/
アドオン(add on)
ソフトウェアへ新たな機能を増やすプログラム、拡張機能
SaeBarrelファイル
複数のモジュールのエクスポートを一つのエントリーポイントとして扱う方法
projectディレクトリ配下にmoduleが3つ存在していた場合、下記のようなimportを行うことになる
import { value1 } from "./module1"
import { value2 } from "./module2"
import { value3 } from "./module3"
Barrelファイルを使用することで下記のようないimportになる
import { value1 , value2, value3 } from "./index.ts"
メリット
- importプロセスが整理、簡略化される
デメリット
- 複雑になる
- パフォーマンス低下
- 競合の可能性
気になったのであとで調べたい
- パフォーマンスの観点
- RSCが混在しているPJでも使用できるのか
SaeContainer/Presentationalパターン
- ロジックとUIを分けることで関心の分離を図るデザインパターン
- 影響範囲を狭めることができ、保守性を高める
Container
ロジック、API、状態管理。
独自で要素はレンダリングしない。スタイルは持たない。
Presentational
propsで受け取った値をどう表示するか。原則状態は持たない。
UIに関するものは持つケースもある。
SaewaitForを使用するケース
- API からデータを取得して表示するコンポーネント
- useEffect でデータを非同期に更新するコンポーネント
- 遅延描画（例: setTimeout など）をしているコンポーネント