OpenReplay ブログ
Chrome DevTools MCPとは?
Chrome DevTools MCPは、AIエージェントにブラウザへのライブアクセスを提供し、コンソールエラー、ネットワークリクエスト、DOM状態を検査できる。
VS Code Planning Mode: コーディング前に考える
VS Code Planning Modeは、GitHub Copilotの分析とコード実行を分離し、ファイル変更前に構造化された実装計画を確認できる機能。
AST の内部:ツールがコードを理解する仕組み
抽象構文木(AST)はESLint、Prettier、Babelを支える仕組みで、パーサーが構築するトラバース可能なノードがリント・フォーマット・コード変換を実現する。
Valibotを始めよう
ValibotでTypeScriptのランタイムデータ検証を実践する。スキーマの定義、型の推論、コンポーザブルなパイプラインの構築により、バンドルサイズを最小限に抑えられる。
JavaScriptでBigIntが必要になるのはどんな時か?
JavaScript BigIntは、安全なNumber範囲を超える整数における精度の暗黙的な損失を解決し、大きなIDやWebAssemblyの64ビット値にも対応する。
BunでTypeScriptアプリをセットアップする
BunでTypeScriptプロジェクトをセットアップし、ビルドステップを省略してTypeScriptファイルをランタイムとパッケージマネージャーで直接実行する。
Git リポジトリを LLM 対応テキストに変換する:クイックガイド
Gitingest、Repomix、repo2txt で Git リポジトリを構造化 LLM 対応テキストに変換し、コードベースをトークン効率よく AI モデルへ入力できる。
WebアプリでのBattery Status APIの使用
Battery Status APIはバッテリー残量と充電状態をJavaScriptに公開する。ブラウザサポートとプライバシー制約を考慮した適応型Webアプリの構築方法を解説する。
Tailwind CSS プラグインでアニメーションを追加する
Tailwind CSS のアニメーション追加方法を、組み込みユーティリティからプラグイン、v4 のカスタムキーフレームまで、アクセシビリティを考慮しながら整理する。
Node.jsにおける安全なユーザー入力の取り扱い
Zodとパラメータクエリ、明示的な引数を用いた安全なNode.js入力処理により、SQLインジェクション、プロトタイプ汚染、マスアサインメント攻撃を防ぐ。
HTML Sanitizer APIの初見レビュー
HTML Sanitizer APIはXSS対策をブラウザに組み込む仕組みで、安全なメソッドとDOMPurifyのフォールバック比較、許可リストの設定方法を解説する。
モダンWebアプリに最適なCDN
Cloudflare Workers、Fastly Instant Purge、AWS CloudFront、Akamai Ionを比較し、適切なCDNを選ぶ際の指針を解説。
テキストでDOM要素を検索する方法
querySelector フィルタリング、TreeWalker、XPath と document.evaluate を使ったテキストベースのDOM要素選択方法を解説する。
Laravel Livewireを始める
PHPコンポーネントとBladeテンプレートを記述し、フォームバリデーションやリアクティブなDOM更新を自動処理するLivewireで動的なLaravel UIを構築する。
CSS random() 関数の探求
CSS random() 関数はスタイルシートでネイティブな数値を生成し、構文・キャッシュキー・フォールバックを用いてJavaScriptなしに視覚的なバリエーションを実現する。
htmx SSE拡張機能によるリアルタイムUX
htmx SSE拡張機能とserver-sent events、HTML属性を使い、JavaScriptフレームワーク不要でリアルタイムUIを実装する方法を解説。
モダンCSSによるSelect要素のスタイリング
appearance:noneとbase-selectでselect要素をスタイリングし、clip-pathやfocusスパンの適用とブラウザ間の段階的拡張を紹介する。
TypeScriptにおける`!`の使用に注意すべき理由
TypeScriptの非nullアサーション演算子はコンパイラの警告を抑制するだけで実行時の保護を追加しないため、コンパイル時のエラーが追跡困難なnullクラッシュに変わる。
CSSにおける相対カラー構文の解説
CSSの相対カラー構文を使うと、OKLCHなどのモダンなカラー関数で、単一の基準色からtint、shade、透明度のバリアントを導出できる。
Promise.tryでより明瞭な非同期チェーンを書く
Promise.tryは同期的な例外をrejectionとして捕捉し、非同期チェーンをクリーンに保つ。代替手法との比較や、条件付きデータ読み込みパターンへの応用を解説する。
Babylon.jsとは？簡単な紹介
Babylon.jsはWebGLとWebGPU上に構築されたオープンソースのJavaScript製3Dエンジンです。Three.jsとの比較や、実現できる開発内容を紹介します。
CSSにおける動的ビューポート単位の理解
CSSのビューポート単位svh、lvh、dvhは、ブラウザUIによるモバイルレイアウトのクリッピングを解消し、レスポンシブやフルスクリーンレイアウトに適した単位選択を可能にする。
WordPressサイトを保護する方法
プラグインの更新、2FAの有効化、ファイルパーミッションの適切な設定、CloudflareやWordfenceなどWAFの導入でWordPressサイトを保護する。
フレームワークよりもバニラJavaScriptを選ぶべき理由
バニラJavaScript、Web Components、ESモジュール、ネイティブブラウザAPIがReactやVueより有効なケースをプロジェクト要件ごとに評価する。