OpenReplay ブログ
メールアドレスの検証にRegexを使うべきでない理由
メールの正規表現が失敗する理由を解説。正しいアドレスを拒否し、配信不能なものを通し、ReDoSも招きます。HTML5のemail入力かライブラリを使いましょう。
Svelte 5のRunesによるState Management
Svelte 5のrunesによる状態管理: $state、$derived、$effectでコンポーネント間のstate共有とSvelteKitのSSR漏れを防ぎます。
クライアントサイド vs サーバーサイドの認可：両方が必要な理由
ReactとNext.jsのクライアント側とサーバー側の認可: 権限はサーバーで強制し、クライアントはUXに使い、403のずれを防ぐ。
AdonisJSでCRUD APIを構築する方法
AdonisJS v7でCRUD APIを構築。postsルート、Lucidモデル、VineJS検証、curlで動作確認するJSONレスポンスまで解説。
JavaScriptの新しいSetメソッド実践ガイド
JavaScriptのSet新メソッドを解説。union、intersection、difference、symmetricDifference、部分集合判定に加え、Map対応とブラウザ対応を紹介。
タグ付きテンプレートリテラル：JavaScriptでミニDSLを構築する
JavaScriptのタグ付きテンプレートリテラルを解説。cookedとraw、WeakMapキャッシュ、安全なHTML、SQL、ミニDSL例まで。
LLMハーネス：モデルよりもラッパーが重要な理由
LLMの成否はモデルだけでなくハーネスで決まる。オーケストレーション、ツール、文脈、検証がAI機能を左右する。
WebCodecs APIによるリアルタイム動画処理
MediaStreamTrackProcessor、TransformStream、VideoTrackGeneratorを使うWebCodecs動画処理。frame.close、backpressure、worker、対応状況も解説。
Reactが不要な5つのこと
5つのネイティブブラウザAPIが、dialog、Popover、Custom Elements、container queries、View TransitionsなどのReactコンポーネントを置き換えます。
BunアプリケーションをDockerizeする方法
Bunアプリを本番向けDockerfile、.dockerignore、0.0.0.0バインド、healthcheck、Compose、SIGTERM終了でDocker化します。
2026年、まだポリフィルを使っている人はいるのか？
2026年のpolyfillは必要？ core-js、Browserslist、Babelを監査し、不要な負荷を削減しつつTemporalとpolyfill.ioを見直します。
TypeScriptにおける`infer`の理解
TypeScriptのinferを解説。条件型で戻り値、配列要素、タプル、テンプレートリテラル、組み込みAwaitedを抽出する方法。
Web Serial APIでできるクールなこと
Web Serial APIで作る監視ツール、ファームウェア書き込み、G-code送信、テレメトリ表示、画面制御、機器設定UIの例を紹介。
ブラウザでダウンロード可能なファイルを作成する方法
Blob、オブジェクトURL、downloadリンクでブラウザのファイル保存を実装し、クロスオリジン、CSVのBOM、iOS Safari、大容量のストリーミングも解説します。
@propertyを使った型付きCSS変数の活用
@propertyで型付きCSS変数を使い、カスタムプロパティを検証し、値を滑らかにアニメーションし、静かなフォールバックと構文、対応状況を理解します。
Ladybird：非Chromiumブラウザプロジェクトの探求
LadybirdはChromium非依存の新しいブラウザエンジン。独自設計、Rust移行、WPT進捗、2026年アルファ計画を解説。
モダンCSSにおける!importantの実践的な使い方
モダンCSSでの!importantの実用例を解説。reduced-motion対応、外部スタイルの上書き、ユーティリティ、カスケードの不具合調査まで。
なぜRemix 3はAIコーディングエージェントを念頭に設計されているのか
Remix 3とAIコーディングエージェント: フレームワークがagent skills、明確なAPI設計、runtime-first設計を備える理由を解説。
開発者が知っておくべき5つのバージョンマネージャー
nvm、pyenv、rustup、mise、SDKMAN!を比較し、バージョン管理、プロジェクト固定、CI整合、各ランタイムに合うツールを把握できます。
DevToolsでガタつくCSSアニメーションをデバッグする
Chrome DevToolsのRendering、Performance、Animations、LayersパネルでCSSアニメーションのカクつきを診断し、フレーム落ちの原因を特定します。
ローカルファースト・アーキテクチャとプログレッシブウェブアプリ
PWA向けのlocal-first設計を解説。Service Worker、IndexedDBやSQLite、同期エンジンでデータをオフラインでも一貫して保持します。
npqによるnpmパッケージセキュリティチェックの自動化
npqでnpmパッケージの安全性をインストール前に自動チェック。pre-commitフック、npmエイリアス、pnpm対応、ヒューリスティック監査を解説。
私たちが忘れていたフロントエンドパフォーマンスの技術
フロントエンド性能の基本は今も重要です。画像サイズ、font-display、preconnect、lazy loading、defer、async、イベント制御を整理します。
Claude CodeとRemotionで動画を作成する
Claude CodeとRemotionで、プロンプトからMP4動画を生成し、フレーム計算を読み、Sequenceを修正し、Studioでレンダリングをデバッグする方法。