OpenReplay ブログ
煩わしい「404 favicon.ico Not Found」エラーの修正方法
favicon.icoの404エラーを修正する方法。ルートにfaviconを置き、SVG・PNG・Apple Touch Iconを適切に設定します。
Pretext とウェブテキストレイアウトの未来
Pretextは、DOM外でテキストを測定してreflowを避け、仮想化リスト、チャットフィード、masonryレイアウトを高速化するTypeScriptライブラリです。
JWT認証におけるCookieとlocalStorageの比較
JWT認証でCookiesとlocalStorageを比較。XSSとCSRFのリスク、HttpOnly・Secure・SameSite、最新のトークン保存法を解説。
GitHub ワークフローのセキュリティリスク監査
GitHub Actionsのトークン権限、スクリプト注入、pull_request_targetの危険、アクション固定、self-hosted runner、OIDCを監査します。
キャッシュしてはいけないもの
ユーザー別データ、認証レスポンス、JWT、機密ページはキャッシュしない。no-store、private、bfcacheの安全な使い方を解説。
Next.js の代替となる 5 つのフレームワーク
2026年向けのNext.js代替5選。React Router v7、Astro 5、SvelteKit、Nuxt 4、TanStack Startを比較。
ElectronアプリへのAuthentication追加方法
ElectronアプリにOAuth 2.0 PKCE、システムブラウザでのログイン、deep linkやloopback redirect、safeStorage保存で認証を追加する方法。
JavaScriptプロジェクトのための静的サイトジェネレーター選び
Astro 6、Eleventy 3、Next.js 16、Nuxt 4、SvelteKitを比較し、JavaScriptプロジェクトに最適な静的サイトジェネレーターを選ぶ。
アクセシブルなアニメーションのための prefers-reduced-motion 活用
prefers-reduced-motionでCSS、JavaScript、Motion.devのアニメーションを安全に減らし、テスト方法とWCAG対応を確認します。
CSS の `all: unset` でネイティブ要素のスタイリングを除去する
all: unsetでCSSのネイティブスタイルを外し、ボタンやフォームをリセットし、focus-visibleの操作性を戻します。
npm から pnpm に乗り換えるべきか?
npmからpnpmへ切り替えるべきか。依存関係の分離、ディスク節約、workspace機能、pnpm 11のビルドスクリプト承認を比較します。
Chrome Extension Manifest V3 徹底解説
Manifest V3を解説。service worker、declarativeNetRequest、chrome.action、Offscreen API、そしてMV2のバックグラウンドページとリモートコード廃止の理由を整理。
ブラウザタブが非アクティブになったことを検出する方法
Page Visibility APIで、ブラウザのタブが非アクティブになったタイミングを検出。visibilitychangeでポーリング、動画、分析処理を停止できます。
React Compiler vs 手動メモ化
React Compilerと手動メモ化の比較。React.memo、useMemo、useCallbackが自動化される場面と、手動制御が必要な場面を解説。
エージェント型ブラウザ入門
エージェント型ブラウザがWebアプリを変えています。Seleniumとの違い、セマンティックHTMLの重要性、開発者が備えるべきセキュリティリスクを解説します。
Knip で未使用ファイルと依存関係を削除する
KnipはJavaScriptとTypeScriptの未使用ファイル、export、依存関係を検出し、自動修正とCI運用を支援します。
ブラウザでフォームの状態を永続化する方法
ブラウザでフォーム状態を保存する方法を解説。localStorage、sessionStorage、IndexedDBで自動保存、復元、削除を安全に行います。
Scheduler API でブラウザのバックグラウンドタスクを扱う
Scheduler APIでメインスレッドの処理をscheduler.postTask()とscheduler.yield()で優先制御し、対応確認とフォールバックも解説。
Git Stash 完全ガイド
git stashの使い方、popとapplyの違い、競合の解消、未追跡ファイル、コミットせずに作業を保存・復元する手順を解説。
Node Corepack でパッケージマネージャを管理する
Node CorepackでYarnとpnpmのパッケージマネージャー版を固定する方法、Node.js 25の変更、CI設定、Docker、オフライン利用を解説。
CSS の scroll-behavior によるスムーズスクロール
CSSのscroll-behavior: smoothでアンカーリンクを滑らかにし、scroll-margin-topで固定ヘッダーの被りを防ぎ、動きの配慮もできます。
WordPress 管理者パスワードのリセット方法
WordPressの管理者パスワードをダッシュボード、パスワード再設定、WP-CLI、phpMyAdminでリセットし、復旧後の安全対策も確認できます。
デザイントークン入門
デザイン・トークンとは何か、プリミティブとセマンティックの違い、CSS変数とStyle Dictionaryの役割を解説。
Svelteを使いこなすためのベストプラクティス
Svelte 5の実践的な使い方を解説。$state、$derived、context、SvelteKitのデータ読み込み、key付きeachと最新構文まで。