タグ

# フロントエンド

9 件の記事が見つかりました

WebSocket Server-Sent Events リアルタイム通信

WebSocketとSSEの使い分け再整理

WebSocketとSSEの本質的な違いを、双方向／単方向という通信モデルから再整理。チャット・通知・ライブ更新・株価などユースケース別に選択軸を示し、接続管理・再接続・スケール時の落とし穴まで実務視点でまとめた技術選定メモ。

Growth Lab編集部

21分公開 2026/8/7

Figma AI Code Connect

FigmaとAIの連携設計2026

Figma Dev Mode・Code Connect・Figma AIを組み合わせ、デザイン→コード変換を最短で実現する実践ガイド。Claude Code MCP連携・デザイントークン受け渡し・失敗パターンを網羅。

Growth Lab編集部

28分公開 2026/7/26

AI デザインシステム Storybook

AIとデザインシステムの共創

AIによるコンポーネント自動生成とStorybook/Chromaticを組み合わせた品質ゲート設計を解説。「AIが壊して人間が直す」負のループを断ち切り、協働ワークフローを構築する実践ガイド。AIによるコンポーネント量産が進むほど、デザインシステムとの乖離が拡大する

Growth Lab編集部

36分公開 2026/6/27

AI UIデザイン v0

AIでUIプロト爆速：v0/Locofy/Figma AI比較

v0・Locofy AI・Figma AIの3ツールを徹底比較。テキストからUIを生成する起点・Figmaデザインのコード変換・デザインシステム連携など、実務での使い分けを具体例と比較表で解説します。

Growth Lab編集部

18分公開 2026/6/22

TypeScript 型システム satisfies

TypeScript 5の型システム実務影響

TypeScript 5.x で入った satisfies 演算子・const type parameters・using 宣言・新 decorators が実務の型設計をどう変えるか。型の最新動向を「いつ使い、どこで止めるか」の判断軸で整理し、過剰な型付けの罠と現場での適用パターンをコード付きで解説する。

Growth Lab編集部

24分公開 2026/6/6

Core Web Vitals LCP INP

フロント性能改善の正しい順序: LCP→INP→CLS

フロント性能改善は何から手を付けるかで ROI が大きく変わる。本記事では web.dev 公式の Core Web Vitals を軸に、RUM/Lab の使い分け、LCP→INP→CLS の改善順序、現場で使える優先度チェックリストを実務目線で整理する。

Growth Lab編集部

35分公開 2026/5/1

Next.js Cache Components PPR

Next.js Cache Components移行設計

Next.js Cache Components（use cache / cacheLife / cacheTag）への移行を Yes/No/Defer 3分岐で1日判定。PPR との関係・段階移行手順・5つの罠・移行チェックリスト12項目・PR テンプレ + CI ガード snippet までを実務目線で整理する。

Growth Lab編集部

38分公開 2026/5/1

React Server Components Next.js App Router

RSCとClient境界の引き方 ── 迷わない4軸判定

Next.js 16でRSCが成熟したいま、'use client' をどこに付けるか毎回悩むチーム向けに、データフェッチ起点・インタラクティブ性・バンドルサイズ・SEOの4軸で境界を判断するテンプレと具体ケース5つ、アンチパターン5選、Compositionパターンを実務目線で整理する。

Growth Lab編集部

43分公開 2026/5/1

Vite Rolldown ビルドツール

Vite 8 × Rolldown 移行可否を3分で判定

Vite 8 が Rolldown を default 化。Rollup 比 10-30 倍速の公式値・破壊的変更・自社移行手順を Yes/No/Defer の3分岐で判定する移行チェックリスト＋ CI ガード GitHub Actions snippet 付き。

Growth Lab編集部

52分公開 2026/5/1