OpenReplay ブログ
開発者向け Hugging Face クイックガイド
Hugging Face Hub、Transformers、Inference Providers、Inference Endpointsを使い、モデルの学習なしにウェブアプリへAI機能を追加する方法を紹介する。
ダイアログ表示中にページのスクロールを防ぐ方法
overflow hidden、overscroll-behavior、iOS Safari のスクロールロックを使い、モーダル表示中のページスクロールを防ぐ手法を紹介する。
WebGPU vs WebGL: 業界が移行する理由
WebGPUとWebGLをパイプライン、バインドグループ、コンピュートシェーダー、WGSLの観点から比較し、レンダリングワークフローの移行が適切かどうかを判断する。
2026年におけるJavaScript IDEの現状
VS Code、WebStorm、Cursor、ZedのAI統合・セキュリティ・エージェントワークフローを比較し、チームに最適なJavaScript IDEを選ぶための指針。
API キーがリポジトリに含まれてしまった場合の対処法
公開されてしまったAPIキーの失効手順、Gitの履歴クリーン方法、GitHub のプッシュ保護とシークレットスキャンを使ったシークレットの流出防止策を解説する。
Node における TypeScript: 実践的なセットアップ
ESM、tsc コンパイル、ネイティブ型ストリッピングを用いた Node.js での TypeScript セットアップと、本番向け API・スクリプト構築の手法を解説する。
Node.jsで最小限のREST APIを構築する方法
Express 5を使用し、JSONパース、適切なステータスコード、集中エラーハンドリングを備えた最小限のREST APIをNode.jsで約80行のコードで構築する方法を解説。
SQL インジェクション入門ガイド(および防止方法)
SQLインジェクション攻撃は安全でないデータベースクエリを悪用する。パラメータ化クエリと最小権限のデータベースアカウントでアプリケーションを保護する方法を解説。
Webアプリにおけるローディングインジケーターのクイックガイド
スピナー、スケルトン、オプティミスティックUIを使い分け、React SuspenseとNext.js App RouterのローディングUXを改善する方法を解説。
Immutable State を簡単に実現:Immer を理解する
Immer は JavaScript の Proxy で immutable な状態更新を実現する。Redux Toolkit での活用方法と draft ミューテーションの注意点を解説する。
開発者が知っておくべきDNSの基礎知識
DNSの名前解決・レコード種別・TTLの挙動・DNSSEC・DoH・HTTPSレコードを解説し、本番環境の障害を自信を持ってデバッグできる知識を提供する。
Changesets でリリースワークフローを簡単に
Changesets、GitHub Actions、OIDC を活用して、モノレポの npm リリースワークフローを自動化する方法を解説する。
パスワードレスログインの仕組み:内部動作を理解する
パスキーが公開鍵暗号、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プロパティを使って入力値とリンクし、フォームの結果をリアルタイムで表示する。