OpenReplay ブログ
日常的なJavaScriptユーティリティとしてes-toolkitを使う
es-toolkitは、型付きでtree-shake可能なJavaScriptユーティリティを提供し、Lodashの軽量代替として小さなバンドルと移行手段を備えます。
Pure CSSによるツールチップの作成
::after、data-tooltip、opacityのトランジションで純CSSのツールチップを作成し、focus-visible対応とアクセシビリティの限界も解説。
Fetch では得られない、Axios が今なお提供してくれるもの
Axios vs Fetch: インターセプター、自動HTTPエラー処理、共有インスタンス、アップロード進捗、タイムアウトでAxiosが有利な点を整理します。
boneyard による Skeleton Screen の自動生成
boneyard-jsは、実際のコンポーネントレイアウトから開発時にskeleton loaderを自動生成し、レスポンシブな.bones.jsonとVite対応を備えます。
Kubernetes の実践的な概要
Kubernetesの概要。アーキテクチャ、Pods、Deployments、Services、Ingress、ConfigMapsでWebアプリをクラスタ運用・拡張する方法。
npmx で実現する新しい npm パッケージブラウジング
npmxは、npmパッケージの調査を左右比較、バンドルサイズ、モジュール形式、依存関係、脆弱性確認まで一画面で整理します。
StylelintでCSSをLintする方法
StylelintでCSSをチェックする設定、ルール、コマンドを解説。エラー検出、標準化、PrettierとCI連携まで対応。
skills.sh で AI エージェントに再利用可能な機能を追加する
skills.shは、AIエージェント向けの再利用可能なskillを追加し、SKILL.md、段階的公開、CLI導入、MCP比較を解説します。
JavaScript バンドラーの現状
2026年のJavaScriptバンドラー比較: Webpack、Vite、Turbopack、Rspack、esbuild、Rollup、Parcelの役割と選び方。
OpenNextでNext.jsをVercel以外にデプロイする方法
Next.jsをVercel以外でセルフホストまたはOpenNextでAWSとCloudflareにデプロイ。Node.js、Docker、新しいAdapter APIを比較。
コードブロック用のコピーボタンを作成する
Clipboard APIでコードブロックのコピー按钮を作成し、textContent、try/catch、視覚的フィードバック、aria-labelを使います。
npm サプライチェーン攻撃に対するシンプルな防御策
npmのサプライチェーン攻撃をignore-scripts=true、min-release-age、CI検査で防ぎ、新しいインストールスクリプトの実行前に検知します。
`::search-text` で Ctrl+F の検索結果をスタイリングする
ブラウザのページ内検索結果を::search-textと:currentで装飾。CSS対応、使えるプロパティ、Chromium限定の制約を解説。
CSSでリストをスタイリングする創造的な方法
セマンティックHTML、::marker、::before、カウンター、@counter-styleでCSSのリストを整え、カスタム箇条書きと番号をアクセシブルに実現。
WordPressでカスタム投稿タイプを作成する
WordPressのカスタム投稿タイプをregister_post_type、show_in_rest、プラグイン設定、アーカイブと個別表示のテンプレートで作成します。
Node.jsにおけるパストラバーサル攻撃の防止
Node.jsのpath traversal対策を解説。path.resolveとpath.sepでの範囲確認、ユーザー入力ではなくIDベースのファイル取得を紹介。
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、ハイブリッド代替まで。