OpenReplay ブログ
パスワードレスログインの仕組み:内部動作を理解する
パスキーが公開鍵暗号、WebAuthn フロー、FIDO2 オリジンバインディングを活用してフィッシング耐性のあるパスワードレス認証を実現する仕組みを解説する。
SvelteKit Remote Functions 初心者ガイド
SvelteKit の remote functions は型安全なサーバー呼び出しで手動 API を置き換える。query・form・command・prerender の違いを解説。
フレームワークの下層:Webのプリミティブを信頼する
Popover API、View Transitions、Navigation API、CSSプリミティブをフレームワーク代替として評価し、Baselineで安全な導入を判断する。
Refs解説: フレームワークがDOM直接アクセスを処理する方法
React、Vue、Angular、SvelteにおけるDOM refsは、宣言的なパターンが不十分な場面でフレームワークの保証を損なわずに直接DOMへアクセスする手段を提供する。
開発者がNext.jsからTanStack Startに移行する理由
TanStack StartとNext.jsをルーティング、サーバー関数、Vite統合の観点から比較し、チームに適したReactフレームワークを選択するための情報を提供する。
アプリケーションのパフォーマンスを低下させるデータベースクエリを見つける方法
クエリプラン、スロークエリログ、OpenTelemetryスパンを活用して、N+1問題やロック競合、インデックス不足など遅いデータベースクエリを特定する方法を解説する。
Reactのカスタムファイルアップロードコンポーネントの構築
ドラッグ&ドロップ、バリデーション、プレビュー、XHR進捗追跡を備えた非制御のReactカスタムファイルアップロードコンポーネントの構築方法を解説する。
バックエンドなしでウェブサイトに検索機能を追加する方法
Pagefind、Lunr、Fuse.js、Algoliaを使い、バックエンド不要で静的サイトやJAMstackサイトにクライアントサイド検索を追加する方法を紹介する。
テーブルは Div ではない: 真の表形式データのためのシンプルな API
HTML table DOM API のネイティブメソッドを使い、XSS リスクを回避しながらセマンティックでアクセシブルな表形式データを構築する方法を解説する。
サイトの速度を落とさずにYouTube動画を埋め込む方法
YouTube のiframeはLCPとINPスコアを低下させる。ファサードパターンはクリックで再生するプレースホルダーを使い、ユーザー操作前のメインスレッド処理を削減する。
JavaScriptにおける実用的なメモ化パターン
オブジェクト参照や非同期処理のエッジケース、キャッシュの削除、React の useMemo を適切に扱い、メモリリークやバグを防ぐ安全なメモ化の実装方法を解説する。
フォームが応答する必要がある場合は、Output要素を使用する
HTML output要素は、for属性・name属性・HTMLOutputElement valueプロパティを使って入力値とリンクし、フォームの結果をリアルタイムで表示する。
Webフォームビルダーを選ぶためのチェックリスト
フォームビルダーの選定では、統合モデル・WCAGサポート・GDPRデータレジデンシー・webhookセキュリティ・バリデーションルールを評価し、移行コストを抑える。
npm-check-updatesでより賢いパッケージ更新を実現する
npm-check-updatesは、package.jsonの範囲を更新し、semverの境界を守りながら、CIパイプラインを壊さずにロックファイルを同期する。
Strixを使ってアプリのセキュリティギャップを見つける方法
Strixは自律型AIエージェントを活用し、壊れたアクセス制御・インジェクションの欠陥・ビジネスロジックのバグを本番環境に到達する前に検出する。
JavaScriptで配列の最後にマッチする値を取得する方法
findLastとfindLastIndexメソッドを使うと、データの変更や手動ループなしに、条件に一致する最後の要素やインデックスを取得できる。
Google AI Studioを使ってAngularアプリを構築する方法
Google AI StudioのBuildモードでAngularアプリを構築し、GitHubへエクスポートする手順と、バックエンドプロキシによるAPIキー管理を紹介する。
Reactでスクロールアウェアコンポーネントを構築する
Intersection Observer、refs、useSyncExternalStoreを使い、不要な再レンダリングなしにReactのスクロール位置を追跡してジャンクを防ぐ。
2026年のPreactの新機能
Preactのセキュリティパッチ、Preact 11ベータの変更点、ViteやPreact-isoを含む更新されたツールを評価し、本番環境での判断に役立てる。
Docusaurus でドキュメントサイトを構築する
Docusaurus v3 で MDX・バージョン管理・Algolia 検索・React テーマを活用した、保守性の高い静的ドキュメントサイトを構築する手順を紹介する。
フロントエンド開発者のための実用的なカラーツール
OKLCHカラーツール、ブラウザのDevTools、アクセシビリティチェッカーを比較し、CSSでWCAGコントラスト比を満たす知覚的に均一なパレットを構築する方法を解説。
TSX と型付きフロントエンドコンポーネントの台頭
props の型付け、イベント処理、children パターン、React 19 のサーバーとクライアントコンポーネント分割を網羅した TSX コンポーネントの型定義解説。
REST vs RPC: API設計における2つの考え方
RESTとRPCのAPIデザインをキャッシュ、型安全性、ストリーミングの観点から比較し、gRPC、Connect、HTTPリソース指向エンドポイントの使い分けを解説する。
AppsmithでシンプルなCRUDアプリを構築する方法
Appsmithでデータベースに接続し、Tableウィジェットでレコードを表示しつつ、作成・更新・削除フォームを組み合わせたCRUDアプリを構築する。