OpenReplay ブログ
Network タブから API リクエストをコピーする方法
Chrome、Edge、FirefoxのNetworkタブからAPIリクエストをcURL、fetch、HARでコピーし、エラーの再現とデバッグに使えます。
JavaScript Builder パターンによる柔軟なオブジェクト生成
JavaScriptのBuilder Patternで、オブジェクトを段階的に生成する方法を解説。fluent API、メソッドチェーン、検証、デフォルト値も紹介。
コードゴルフと極小プログラムの技法
コードゴルフの基礎を解説。ソースコードの短縮、バイナリサイズコーディング、JavaScriptの技、CSSBattle、VyxalとGolfScriptを紹介。
キーボードショートカットでコーディングを高速化する
VS Codeのキーボードショートカットで、移動、編集、検索、リファクタリング、デバッグを効率化し、マウス操作を減らします。
Charts.css: 純粋なCSSでチャートを構築する
Charts.cssは純粋なCSSとセマンティックなHTMLテーブルで、JavaScriptなしに棒・折れ線・円グラフを作成し、データもアクセシブルに保ちます。
JavaScriptによるタッチデバイスの検出
JavaScriptでタッチ対応を判定する方法を解説。maxTouchPoints、Pointer Events、CSSのpointerメディアクエリでハイブリッド端末にも対応。
モダンなWebプロジェクトにおけるCSSの整理方法
cascade layers、design tokens、CSS Modules、浅いネストでCSSを整理し、保守しやすい現代的なWeb制作に。
ブラウザにおけるオンデバイスAIの現状
ブラウザ内オンデバイスAIを解説。Chromeの組み込みAPI、Transformers.js、ONNX Runtime Web、WebGPU、WebNN、ハイブリッド代替まで。
GitHub Contributions Graphを使ったクリエイティブなテクニック
GitHubのcontributions graphをSVG、snakeアニメーション、GitHub Actionsで自動更新されるREADME統計カードでカスタマイズします。
Val Town: ブラウザで動作するサーバーレスJavaScript
Val Townは、ブラウザで使えるサーバーレスJavaScriptとTypeScriptのプラットフォーム。vals、Deno、SQLite、blob storage、email、OpenAIを備えます。
データベーストランザクションを理解する
データベーストランザクション、ACID、分離レベル、MVCCを解説。信頼性の高い並行処理とロールバックの実践ポイントも紹介。
NativeWindでTailwind CSSをReact Nativeに導入する
NativeWindはReact NativeにTailwind CSSのスタイルを導入し、className、ダークモード、バリアント、設定、制約を解説します。
OpenCode: ターミナルファーストなAIコーディングエージェント
OpenCodeはターミナル中心のオープンソースAIコーディングエージェントで、利用中のプロバイダを使え、Plan/Build、LSP、MCP、カスタムコマンドに対応します。
開発者向け無料ストックフォトリソース
開発者向けの無料ストック写真資源。ライセンス詳細、API利用、帰属表記のルール、Unsplash、Pexels、Pixabay、Openverseの再利用制限を解説。
React Adminでデータ駆動型アプリを構築する
React Adminの構成を解説。dataProviderの仕組み、CRUDビュー、認証、再利用できる一覧・編集画面でバックエンド非依存のアプリを構築します。
ブラウザでCORSエラーをデバッグする方法
DevTools、コンソールのエラー、preflight OPTIONSでブラウザのCORSエラーを診断。mixed content、TLS、認証設定の問題を素早く特定します。
Node.jsでAPIからデータを取得する方法
Node.jsのfetchでAPIリクエスト、POST、タイムアウト、エラー処理を行う方法を解説。undici PoolやAxiosを使う場面も紹介。
TypeScriptにおける型安全なイベントエミッター
TypeScriptの型安全なevent emitter: event map、汎用エミッター、Node.js EventEmitterで টাইपोやpayload不一致をコンパイル時に検出します。
Shaders.comでUIにWebGPUエフェクトを追加する
Shaders.comは、React、Vue、Svelte、Solid向けに90以上のWebGPUエフェクトを提供し、ビジュアルエディタとブラウザ用フォールバックも備えます。
HTTPリクエストにおけるリンクとフォームの違い
HTTPリクエストでのリンクとフォーム: <a>、GETフォーム、POSTフォームの使い分けと、method=linkが無効な理由を解説。
JavaScriptでオンライン・オフライン状態を検出する方法
JavaScriptでオンライン/オフライン状態を判定。navigator.onLine、online/offlineイベント、fetchで接続確認まで解説。
CSSのcross-fade()を使った画像のブレンド
CSS cross-fade() は画像を1つの宣言で合成します。割合指定、旧 -webkit 構文、@supports のフォールバック、対応状況を解説。
人気のJavaScriptゲームエンジンを比較
Phaser、Babylon.js、PlayCanvas、Excalibur、melonJSを比較し、2D・3Dブラウザゲームに合うJavaScriptゲームエンジンを選べます。
Canvas を使用した画像の Base64 への変換
Canvasで画像をBase64に変換。toDataURLとtoBlobの違い、PNG/JPEG/WebP対応、CORSでtainted canvasを避ける方法を解説。