OpenReplay ブログ
ブラウザとターミナルにおけるASCIIアート
ピクセルの輝度と文字のマッピング、Unicode点字・ブロック要素によるASCIIアートの拡張、Canvas・WebGL・ANSIターミナルでのレンダリング手法を解説する。
リアクティビティモデルの比較:React、Vue、Angular、Svelte
React、Vue、Angular、Svelteのリアクティビティの実装方式を比較し、粗粒度のレンダーサイクルから細粒度のシグナル、コンパイラ駆動のDOM更新まで解説する。
TypeScript で API レスポンスに型を付ける方法
インターフェース、Zodスキーマ、OpenAPI生成を活用したAPIレスポンスの型付けにより、実行時のデータ不一致を防ぎ、型の正確性を維持できる。
Svelteでドラッグ&ドロップを実装する方法
ネイティブHTML5 APIまたはsvelte-dnd-actionを使い、アニメーションやタッチ対応、複数リストボードを含むドラッグ&ドロップをSvelteで実装する。
Ripple: 注目すべき新しいTypeScript UIフレームワーク
Rippleは、コンパイラ駆動のTypeScript UIフレームワークで、細粒度のリアクティブプリミティブにより、仮想DOMの差分計算と手動の依存関係追跡を排除する。
JavaScript ジェネレータのユースケース
JavaScript ジェネレータは、遅延イテレーション、非同期ページネーション、Iterator Helpers API を用いたパイプライン構築に活用できる。
100vhが嘘をつくとき:モバイルビューポート問題の解決法
svh、dvh、lvhの各単位がvhとどう異なるかを理解し、安定したフルハイトレイアウトのためにモバイルビューポートのクリッピングを修正する方法を解説する。
TypeScriptプロジェクトにおける型定義の整理方法
インラインファイル、共有ディレクトリ、アンビエント宣言ファイルにわたる明確なコロケーション戦略を適用し、TypeScriptの型定義を効果的に整理する方法を解説する。
MCP Apps: AI会話にインタラクティブUIを追加する
MCP Appsは、AI会話内でインタラクティブなUIコンポーネントを実現する仕組みだ。MCPサーバーがext-apps SDKでダッシュボードやフォームをレンダリングする方法を紹介する。
Koaで初めてのAPIを構築する
KoaでREST APIを構築する方法を解説。ルーティングの設定、JSONボディの解析、ミドルウェアカスケードモデルを活用したGETおよびPOSTエンドポイントの実装を取り上げる。
Error LensでVS Codeのエラー表示をより良くする方法
Error LensはVS CodeへESLintとTypeScriptの診断をインライン表示し、エディタを離れずエラーを素早く修正できる。
user-select: none を使うべき場面(そしてUX/アクセシビリティの落とし穴となる場面)
CSS の user-select: none がインタラクティブなコントロールに有効な場面と、アクセシビリティや翻訳ツールに悪影響を与える場面を解説する。
JavaScriptのパフォーマンスを測定する方法
DevTools、Performance API、Core Web VitalsでJavaScriptの実行をプロファイリングし、ボトルネックの特定と実ユーザーのINP計測を行う。
高パフォーマンスインターフェースのための仮想スクロール
仮想スクロールは表示中のDOMノードのみをレンダリングし、大規模データを高速化する。ウィンドウイングやTanStack Virtualの仕組みを解説する。
OpenClaw: 新しいオープンソースAIアシスタント
OpenClawは、シェルコマンドの実行やブラウザ操作に対応し、Slack・Telegram・WhatsAppと連携できるセルフホスト型AIエージェントです。
Web開発者のためのStreams解説
Web Streams APIのReadableStreamとTransformStreamを使い、fetchレスポンスをチャンク単位で処理してメモリ効率とパフォーマンスを改善する。
Key-Valueデータベース(Redis、Memcachedなど)の仕組み
Redis、Memcachedなどのキーバリューデータベースは、インメモリのハッシュテーブルを使い、高速なルックアップ、キャッシング、セッションストレージを実現する。
CSSにおける絶対値の取得 - abs()関数
CSSのabs()関数を使うと、符号付きカスタムプロパティを間隔・アニメーションタイミング・レイアウト計算で安全に扱えるため、JavaScriptによる回避策が不要になる。
Lynx.jsとは?初心者向けガイド
Lynx.jsはByteDance製のクロスプラットフォームフレームワークで、React・CSS・デュアルスレッド構成でiOS/AndroidのネイティブUIを描画する。
OpenAPIとTypeScriptで型安全なAPIクライアントを構築する
openapi-typescript、openapi-fetch、OrvalでOpenAPI仕様からTypeScript型を生成し、型安全なAPIクライアントを構築する。
JavaScriptでの二分探索の実装
JavaScriptで二分探索を反復処理と再帰の両方で実装し、ソート済み配列の必要性と線形探索より優れるケースを解説する。
Linux テキスト処理チートシート
grep、sed、awk、ripgrep、jq を活用してログファイルの解析やカラム抽出、構造化テキストデータの変換を効率化するターミナル生産性向上ガイド。
CSS Aspect Ratioの仕組み
CSSのaspect-ratioはボックスサイズを制御し、paddingハックを置き換え、object-fitとの併用でレイアウトシフトを防ぐ。
VueでToast通知を実装する方法
カスタムコンポーザブルまたはVue Toastificationを用いて、アクセシブルなマークアップとComposition APIでVue 3のToast通知を実装する。