OpenReplay ブログ
モバイルWebの5つの小さな不具合(とその修正方法)
CSSビューポート単位、セーフエリア変数、overscrollの制御、適切なタッチターゲットサイズを活用して、モバイルの一般的な不具合を修正する方法を解説する。
2026年に使うべきJavaScript機能
Set メソッド、イテレータヘルパー、配列グルーピング、Promise.try など、モダン JavaScript の機能は安定しており、本番コードをすぐに簡潔化できる。
VitestでVueテストにおけるAPIコールのモック化
VitestでVueテストのAPIコールをモック化する手法として、モジュールレベルのモックとMock Service WorkerによるHTTPレイヤー傍受を解説する。
Tailscaleでローカルウェブアプリに安全にアクセスする
Tailscale ServeとFunnelを使い、ポート転送やファイアウォール設定、不安定なngrokトンネルなしに、ローカルウェブアプリを複数デバイス間で安全に共有できる。
Transformers.jsでブラウザ上で直接AIモデルを実行する
Transformers.jsとONNX Runtime、WebAssemblyを活用し、バックエンド不要でブラウザ上からAIモデルをオフライン推論する手法を紹介。
Web アプリケーションのための RAG クイックガイド
RAGはベクトル埋め込みと検索パイプライン、LangChain・LlamaIndex・pgvectorを用いてLLMの回答を独自データに基づかせる。
Interop Project の解説
Interop Projectは、Web Platform Testsと共通の重点領域を用いて、ブラウザベンダー間のCSSとJavaScriptの非互換性を修正する取り組みです。
React Doctorを使ってReactコードのアンチパターンをスキャンする
React DoctorはReactコードベースのプロップドリリング、デッドコード、アクセシビリティ問題をスキャンし、CLIで0から100のコード健全性スコアを出力する。
フロントエンドワークフローのためのClaude Codeスキル
Claude Codeのスキルを活用し、フロントエンドワークフローの自動化、デザインシステムルール適用、スラッシュコマンドによるコンポーネントのスキャフォールディングを実現する。
Invoker Commands API クイックガイド
Invoker Commands API は commandfor と command 属性を使い、JavaScript 不要でボタンをダイアログやポップオーバーに宣言的に接続できる。
アイデアからアプリへ:5つのNext.js SaaSスターター
認証、Stripe決済、データベース設定を含む5つのNext.js SaaSスターターを比較し、次のプロダクトに適したボイラープレートを選ぶための情報を提供する。
BunでMarkdownをネイティブにパースする
BunにはネイティブのMarkdownパーサーが組み込まれており、追加パッケージやプラグイン設定なしでMarkdownをHTML、React要素、またはカスタム出力に変換できる。
ES Modules での JSON インポート(Fetch 不要、バンドラー不要)
ネイティブのimport attributes構文を使い、fetchやバンドラーなしでES modulesにJSONをインポートする方法を解説。
ゼロから始めるゲーム開発入門
Unity、Godot、Phaser、Unreal Engineを比較しながら、ゲームループ・衝突検出・オブジェクト状態管理の基礎概念を用いて小規模な完成品ゲームを制作する。
Google の Antigravity IDE 初心者ガイド
Google Antigravity IDE の自律エージェントによるコード計画・生成・検証と、Agent Manager・Artifacts・Planning モードを解説する。
Varlockを使ったWebアプリのための安全な環境変数管理
Varlockは、JavaScriptアプリにスキーマ駆動のENVバリデーションを導入し、Astro、Vite、Next.jsのビルドで機密情報の漏洩や設定漏れを早期に検出する。
npm セキュリティベストプラクティス
ポストインストールスクリプト無効化、依存関係ロック、WebAuthn 2FA 有効化、OIDC トラステッドパブリッシングで npm サプライチェーンリスクを低減する。
開発者向け無料AI学習リソース
Google、OpenAI、Hugging Face、Anthropicの無料リソースを活用し、APIやエージェント、生成AI開発など実践的なAIアプリケーションを構築できる。
JavaScriptなしでサイトをテストする:何を、なぜ行うのか
Chrome DevToolsでJavaScriptを無効化し、脆弱なHTML基盤を検出してNext.js、Remix、Astroでプログレッシブエンハンスメントを適用する。
Rspress: Rustで駆動するサイトジェネレーターのご紹介
RspressはRspackを使用してReactとMDXのドキュメントサイトを構築し、高速ビルド、カスタマイズ可能なテーマ、AIツール向けの静的Markdown出力を提供する。
JavaScriptで数値をパースする方法
parseInt、parseFloat、Number、BigIntを比較し、JavaScriptで文字列を数値に変換する方法とエッジケースを解説する。
FileReader APIを使用したファイル操作
FileReader APIはイベントやエンコードオプション、データURLを用いてファイルを非同期に読み取り、Blobメソッドはよりシンプルな代替手段を提供する。
Node開発におけるAdonisJSの検証
AdonisJSとExpressをNode.js開発で比較し、Lucid ORM・VineJS・TypeScript対応がバックエンドワークフローに与える影響を検証する。
モダンなWebアプリのための最適なSVGアイコンライブラリ
Lucide、Heroicons、Phosphor、TablerなどのSVGアイコンライブラリを比較し、モダンなWebアプリプロジェクトに適した選択肢を検討する。