
Wiz Engineer 技術共有会 5月第4週
ページ遷移(Link、aタグ、ブラウザバックなど)するときに確認を促すカスタムフックを作った話
用途はフォームの入力内容に変更があった場合にページ遷移しようとすると「まだ入力内容が保存されてません」のようなメッセージを出したいときに使う
※react-routerにはこの機能があるけどnext.jsのuserRouterにはなかったので作った
↑ChatGPT先生との協働作業 (どういう質問を投げかけるかーってのが大事)
・まずは簡単なところから質問して、そこから精度をあげていく…!
・READMEも書いてもらった・・・!!
imgタグの正しい指定方法
ファーストビューにloading="lazy"は入れない方が良い(googleのガイドラインにも表記)
loading=”eager”を指定した方が良いのでは??
→基本的にはdecoding=”async”を指定しておいた方が良い
loading="eager"は明示的に「遅延読み込みしない!」と宣言するものFV部分は、必ず読み込ませたいものがあるはずなので、loading="lazy"はつけない遅延読み込みの仕組みブラウザが画像の位置を把握→画像の近くまでスクロール→損とアイミングで読み込み開始FVの画像に設定すると「あれ、表示位置だけど画像なくね?」ってなって、CSSで正しく設定しているはずなのに、おかしくなる可能性あり!!decoding属性:画像のデコード方法を制御する属性画像のデコードとレンダリング処理をどうするかーっていうもの
『便利機能』VSCode で 定義へ移動などしたあとに 戻る には Ctrl + - (Mac) だ
直前に見てたものに戻るときに使える…!(便利