Open7
Web関連用語の調査
TooFuuNegiポリフィルについて
ブラウザ間の違いを吸収するためのコード。基本的にJSで記述されている。
- 最新の機能をサポートしていないブラウザでもその機能を使えるようにする
- レンダリングエンジンの差異を吸収する
- JQueryはポリフィルの典型例だった
- 現代のブラウザ間の差異は昔ほど大きくないため、2の意味でポリフィルを使うことは一般的ではなくなった
- ネイティブAPIの方が多機能だしパフォーマンスが良い
参考文献
TooFuuNegiモジュールとスクリプト
モジュール
- import, exportがファイル内にある
- 機能ごとにファイルを作り、それらを読み込む事で分割することができる
- htmlに読み込ませるときは基本的にバンドラーで1ファイルにまとめたものを使う
- モジュールであることを明示的にするために
.mjsという拡張子が使われることもあるみたい
スクリプト
- import, exportがない
- 全てを1ファイルで表現するので、大きいプログラムには不向き
参考文献
TooFuuNegiバンドラー
バンドラーとは
- 複数ファイルを1ファイルにまとめる（バンドル）するためのもの
- 例えば以下のようなものがある
- webpack
- vite (ヴィートと発音)
TooFuuNegiECMAScript
- ES
TooFuuNegiモジュールシステム
CommonJS
- サーバーサイドでJSを使う時に作られたモジュールシステム
- 既存の言語仕様を変えずにモジュールシステムを実現した
- require()とmodule.exportsを使う
ESモジュール
TooFuuNegistrictMode
キーワード
- strictMode
- useEffect
- レンダー
- react
- 副作用
- 純粋関数
導入
- reactにはstrictModeというものがある
- strictModeを使っていると開発時にuseEffectなどが2回実行される
- なぜか?
なぜstrictModeは2回実行させるのか？
- react公式によると2回実行されるのはバグを見つけやすくするため
- なぜ2回実行されるとバグを見つけやすいのか？
なぜ2回実行されるとバグを見つけやすいのか？
- 同じ入力に対して異なる結果を返しているのを見つけやすくなる
- 背景知識: 副作用、純粋関数
同じ入力に対して異なる結果となるのは良くないのか？
- 基本的には良くない
- 同じ入力に対して異なる結果が出る事を副作用があるという
- 副作用: その関数の外部の状態を変更すること。由来は薬品などで言われる副作用。つまり、本来の意図とは異なる結果が発生することを指す。
- 副作用があると、ある関数を呼び出した時の結果の予測可能性が低下してしまう。
- これはバグの温床となりうる
- したがって副作用の少ない関数、プログラムを書くのが望ましい。
- 純粋関数: ある引数に対して常に同じ結果を返す関数。数学における関数と同じ考え方。常に同じ結果を返すということは副作用がないことを意味する。究極的には全ての関数を純粋関数にできれば良い。ただし、純粋関数は副作用がない。つまり外部の状態を変化させない。これは他に影響を与えないという意味で、観測されない、存在しないと同義。なので、現実的には副作用を最小化しつつ、副作用を明示的に扱うことが望ましい。
useEffectが2回実行されるのは問題なのか？
- 同じ結果になっていれば問題はないと思われる
2回通信が行われるのは迷惑なのでどうにかできないか？
- キャッシュなどを利用して、同じクエリの場合は通信を行わないなどの工夫が考えられる
- ライブラリなどを使えばキャッシュなどをよしなにやってくれる
レンダー
- reactでは状態？（曖昧な理解）が変わると再レンダーが行われる
- 再レンダーが行われるコンポーネントにある関数はレンダーの度に実行される
- これはレンダーと処理を一つのシステムでやっている以上仕方がないこと
- キーワード: VMC (View, Model, Controller)
参考文献
- 副作用について(zenn)
- notionに保存済み
- useEffect (react.dev)
- react系は全てreact.dev
TooFuuNegiCORSについて
キーワード
- CORS
- Origin (オリジン)
- Access-Control-Allow-Origin