front-end tips

フロントエンドの実践Tipsをゆるっと研究。

ReactやTypeScriptなどのモダンな技術から、
現場で地味に役立つCSSの小ネタまで幅広くシェアします。

「これ明日から使えるな」という現実的な知恵を、あなたの武器に。

#FE_Tips_Labo #frontend

[front-end tips @FE_Tips_labo]

外部CDNのフォントやAPI、計測タグなど別ドメイン通信が多いサイトほど効果が大きく、接続確立の数百ミリ秒を丸ごと短縮できます。ただし指定しすぎると逆効果なので、本当に必須な2〜3ドメインに絞るのが鉄則です。

[front-end tips @FE_Tips_labo]

【HTML】preconnectとdns-prefetchで接続を先回り

外部ドメインへのDNS解決・TCP接続・TLSハンドシェイクを、実際のリクエストが発生する前に済ませておきます。

#HTML #WebSpeed #パフォーマンス #FE_Tips_labo

[front-end tips @FE_Tips_labo]

同期版のreadFileSyncはサーバー全体のイベントループを止めるため、リクエスト処理内では致命的です。try/catchで例外処理も統一でき、コールバックのネストも解消されます。

[front-end tips @FE_Tips_labo]

【Node】fs/promisesで非同期I/Oを素直に書く

コールバック版ではなくPromiseを返すAPIを使い、async/awaitでファイル操作を記述します。

#Node.js #非同期処理 #FE_Tips_labo

[front-end tips @FE_Tips_labo]

手作業でのリサイズや形式変換が不要になり、CLSとLCPが同時に改善します。ファーストビューの画像にpriorityを付ければ先読みされ、逆に付けすぎると効果が薄れる点に注意が必要です。

[front-end tips @FE_Tips_labo]

【Next】next/imageで画像を自動最適化

WebP/AVIFへの変換、サイズ別の生成、遅延読み込み、領域の事前確保を1コンポーネントで担います。

#Next.js #パフォーマンス #画像最適化 #FE_Tips_labo

[front-end tips @FE_Tips_labo]

ツールチップやドロップダウンメニューのためにライブラリを入れる必要がなくなります。トップレイヤーに描画されるためz-indexの積み上げ地獄からも解放され、親要素のoverflow:hiddenで切れる問題も起きません。

[front-end tips @FE_Tips_labo]

【HTML】popover属性でJS不要のポップオーバー

popover属性とpopovertarget属性を紐付けるだけで、開閉制御・ESCキーで閉じる・外側クリックで閉じるライトディスミスが標準で動きます。

#HTML #UI #モダンHTML #FE_Tips_labo

[front-end tips @FE_Tips_labo]

設定オブジェクトをループしてobj[key]でアクセスした際の「暗黙のany」エラーを解消できます。この挙動は構造的部分型の仕様上の妥協点であることを理解した上で、ヘルパー関数に閉じ込めるのが実務的です。

[front-end tips @FE_Tips_labo]

【TS】Object.keysがstring[]になる問題への対処

Object.keysの戻り値は仕様上string[]です。実際のキーに絞りたい場合はアサーションで明示します。

#TypeScript #型安全 #トラブル解決 #FE_Tips_labo

[front-end tips @FE_Tips_labo]

エンドポイント定義、fetch処理、型の共有という3点セットを書かずに更新処理が完成します。JSが無効な環境でもフォームが動作するため、堅牢性の面でも優れています。

[front-end tips @FE_Tips_labo]

【Next】Server Actionsでフォーム送信を完結

サーバー上で実行される関数を直接フォームのactionに渡し、クライアントからのAPI呼び出しを省略します。

#Next.js #ServerActions #フォーム #FE_Tips_labo

[front-end tips @FE_Tips_labo]

CSSクラスを付け外ししてtransitionendを待つ回りくどい実装から解放されます。完了をawaitできるので「フェードアウトしてからDOMを削除する」といった順序制御が確実になります。

[front-end tips @FE_Tips_labo]

【JS】Element.animate()でJSからアニメーション

Web Animations APIでキーフレームと再生設定をJSから直接指定し、Promiseで完了を待てます。

#JavaScript #アニメーション #FE_Tips_labo

[front-end tips @FE_Tips_labo]

存在しないキー名を渡した時点でコンパイルエラーになり、戻り値も正確な型で受け取れます。汎用ユーティリティ関数を作る際、anyに逃げずに再利用性と型安全を同時に満たせます。

[front-end tips @FE_Tips_labo]

【TS】ジェネリクスに制約をつけて安全に絞る

extendsで型変数が満たすべき条件を指定し、渡せる型の範囲を限定しつつ推論を効かせます。

#TypeScript #Generics #型安全 #FE_Tips_labo

[front-end tips @FE_Tips_labo]

色をすべてCSS変数で管理していれば、このメディアクエリ数行でダークモード対応が完了します。夜間の閲覧が多いサービスでは目の負担が減り、滞在時間の改善にもつながります。

[front-end tips @FE_Tips_labo]

【CSS】prefers-color-schemeでダークモード対応

OSやブラウザのテーマ設定を検知し、CSS変数の値だけを差し替えてサイト全体の配色を切り替えます。

#CSS #ダークモード #アクセシビリティ #FE_Tips_labo

[front-end tips @FE_Tips_labo]

1つのContextに詰め込むと、値の一部が変わるだけで購読している全コンポーネントが再描画されます。dispatchだけを使う子は再描画されなくなるため、規模の大きい画面ほど効果が顕著です。

[front-end tips @FE_Tips_labo]

【React】Contextを分割して再描画を抑える

頻繁に変わる値と変わらない値、状態と更新関数を別々のContextに分けて提供します。

#React #パフォーマンス #設計 #FE_Tips_labo