OpenReplay ブログ
JavaScript開発者のためのセキュアコーディング
ブラウザー向けJavaScriptの安全な書き方: DOM XSSを防ぎ、eval()を避け、CSPを使い、トークンを守り、postMessageと依存関係を強化する。
WebTransportによる低レイテンシブラウザ通信
ブラウザ向けWebTransport: WebSockets、datagram、streamを比較し、HTTP/3で低遅延通信を実現する仕組みを解説。
開発者が知っておくべき5つのGit Dotファイル
Gitの主要なdotfile 5つを解説。.gitconfig、.gitignore、.gitattributes、.git-blame-ignore-revs、.mailmapで作業を整理。
TypeScript 6.0の新機能
TypeScript 6.0の既定値変更、旧オプションの非推奨化、ES2025対応、Temporal型、TypeScript 7.0移行の要点を解説します。
ネイティブWeb APIでアニメーションライブラリを置き換える
GSAPやFramer Motionを、Web Animations API、CSS Scroll-Driven Animations、View Transitionsで置き換える方法を解説します。
Linux ファイルパーミッションの解説
Linuxのファイルパーミッション、所有権、chmod、chown、umask、setuidやスティッキービットなどを解説し、システムのセキュリティ設定を網羅する。
CSS `zoom` を使用した UI 要素のスケーリング
CSS の zoom と transform scale をレイアウトフロー、ブラウザサポート、UI スケーリングの実用例で比較し、適切な手法を選択するための指針を解説する。
開発環境でローカルHTTPSを有効にする方法
mkcertを使って信頼済みのローカルHTTPSを構築し、ViteやNext.jsの開発サーバーを設定して、自己署名証明書の警告を回避する方法を解説する。
SolidJSを使った開発のベストプラクティス
SolidJSの細粒度リアクティビティ、シグナルスコープ、props処理、store活用、createResourceによる非同期パターンの落とし穴と対策を解説。
Turso:RustベースのSQLiteの進化形
TursoとlibSQLを比較し、Rust・非同期API・MVCCがエッジデプロイメントとモダンなアプリケーションアーキテクチャ向けにSQLiteを拡張する仕組みを解説する。
Vue 3アプリケーションでのPDF表示
Vue 3でPDFを表示する方法として、ネイティブ埋め込み、PDF.js、Vueラッパーコンポーネントを比較し、CORS・workers・バンドルサイズのトレードオフを解説する。
リレーショナルデータベース設計の基礎
主キー、外部キー、正規化、制約を活用して信頼性の高いリレーショナルデータベーススキーマを構築し、テーブルを適切に構造化してデータ異常を防ぐ方法を解説する。
CMSとしてMarkdownを使用することの良い点と悪い点
CMSとしてMarkdownを使う際のトレードオフを、Gitワークフロー、MDX、Tina CMS、そして構造化ヘッドレスCMSが適切な場面を踏まえて解説する。
Node.jsミドルウェアによるリクエストのログ記録
Morgan、Pino、AsyncLocalStorageを使いExpressに構造化HTTPリクエストログを追加し、相関IDの追跡と機密データの除外を実現する方法を解説。
5 モダンフレームワークが無償で提供するセキュリティ機能
Next.js、SvelteKit、Djangoなどのモダンフレームワークは、XSSエスケープ、CSRFトークン、サーバーサイドのシークレット分離をデフォルトで自動的に提供する。
ダッシュボード構築に最適なJavaScriptライブラリ
Chart.js、Apache ECharts、Recharts、AG Grid、TanStack Tableを比較し、最適なダッシュボードライブラリを選ぶ指針。
新しい HTML Geolocation 要素
新しいgeolocation要素はHTMLに宣言的なロケーションアクセスをもたらし、navigator.geolocationのコールバックを簡潔なパーミッション処理に置き換える。
モダンCSSで要素を中央揃えする方法
CSS Flexbox、Grid、autoマージンを活用し、各レイアウトの文脈に合った方法で要素を水平・垂直方向に中央揃えする手法を紹介する。
ResizeObserver vs Window Resize:それぞれをいつ使うべきか
ResizeObserver とウィンドウの resize イベントを比較し、ビューポートの変化、要素サイズの追跡、CSS コンテナクエリに適したツールの選び方を解説する。
Charmでターミナル UI を構築する
Charmエコシステムの Bubble Tea、Lip Gloss、Bubblesを用い、Model・Update・ViewアーキテクチャでGoのターミナル UIを構築する。
開発者向けAIプロンプティングのヒント
構造化出力、few-shotプロンプティング、コンテキストエンジニアリングを活用し、本番環境で予測可能なLLMインテグレーションを構築する手法を解説。
モダンなWebアプリケーションのためのPostgresベストプラクティス
PostgreSQLのスキーマ設計、インデックス戦略、PgBouncerによる接続プーリング、安全なマイグレーションを用いて本番品質のWebアプリを構築する。
Chrome DevToolsでCookieを検査・編集する方法
Chrome DevToolsのApplicationパネルやNetworkパネルを使い、HttpOnly・Secure・SameSiteなどのフィールドを含むCookieを検査・編集・削除する方法を解説。
Fetch を使ってブラウザにデータをストリーミングする方法
ReadableStream、TextDecoder、AbortController を使い、Fetch API のレスポンスを段階的にブラウザへ表示する方法を解説する。