「diff オンライン」のツールに業務テキストを貼るのが怖くて、ブラウザ完結のdiffツールを自作した話
オンラインのテキスト比較ツールはサーバー送信の有無が不明なものが多い。だからブラウザ内で完結するdiffツールをMyers法の自前実装で作った。LCSとの関係、計算量爆発への対策、空白無視オプションの実務価値まで。
open →$ ls ./tools
ツール比較
開発者向けツール・サービスの比較レビュー - 23 件の記事
無料QRコード作成サイトの「有効期限切れ」の正体を調べたら、自分で作ることにした
無料をうたうQRコード作成サイトの多くは動的QR方式で、期限が切れるとリダイレクトが止まり読めなくなる。仕組みを調べて、期限なし・透かしなし・ブラウザ内完結のQRコード作成ツールを自作した話。誤り訂正レベルとWIFI:形式の話も。
open →カラーコード変換ツールを自作してOKLCHの変換行列を書いたら、HSLの「明度」がどれだけ当てにならないか数値でわかった
HEX・RGB・HSL・OKLCH相互変換ツールを自作した記録。OKLCHの変換行列を実装したら、HSLで同じ明度50%の黄色と青が知覚明度96.8%と45.2%に割れる現実が数値で見えた。WCAGコントラスト比4.5:1の実装と意味も。
open →Markdownプレビューを自作して痛感した、「貼られたHTMLをそのまま表示してはいけない」問題（marked+DOMPurify）
ブログ記事186本超をMarkdownで書いてきた立場でオンラインのMarkdownプレビューを自作した。一番気を使ったのは混入したHTMLをそのまま描画しないこと。marked+DOMPurifyの2段構え、img onerrorの実例、GFMと改行の方言問題まで。
open →Cursor Agent モード vs GitHub Copilot Workspace どっちが効率的【2026年5月比較】
Cursor Agent と GitHub Copilot Workspace を実測比較。マルチファイル編集、自律実行、コスト、チーム開発での使い分けを解説【2026年5月最新】
open →Cursor IDE .cursorrules パターン集【2026年4月最新】プロジェクト固有ルールで開発効率を最大化
Cursor IDE の .cursorrules を使ったプロジェクト固有ルール設定の実践ガイド。Next.js・Astro・Laravel など実務で使えるルールパターン集と、チーム開発での運用ノウハウを解説
open →Cursor Composer でマルチファイルリファクタリングを一括実行する手順【実践】
Cursor Composer の Agent モードとルールパターンを組み合わせて、複数ファイルにまたがるリファクタリングを安全かつ効率的に実行する実践ガイド。2026年4月最新機能を図解。
open →Cursor IDE Composer モード 使い方【2026年4月最新】マルチファイル編集で開発効率5倍
Cursor IDE の Composer モードを使ったマルチファイル同時編集・リファクタリング・機能追加の実践テクニックを解説。AI エージェント型開発で効率を5倍にする方法
open →Claude Code による Web制作プロジェクト管理｜ファイル操作・リファクタリング・デバッグの実践テクニック【2026年4月】
Claude Code のプロジェクト管理機能を徹底解説。ファイル操作、リファクタリング、デバッグの実践テクニックで開発効率を劇的に向上させる方法を紹介します。
open →Vercel v1.40 新機能でフロントエンドデプロイを自動化｜環境変数管理・プレビューデプロイ・分析機能の活用【2026年最新】
Vercel CLI v1.40（2026年3月リリース）の新機能を徹底解説。環境変数の一括管理、プレビューデプロイの条件分岐、Speed Insights連携など、実務で使える自動化テクニックを紹介します。
open →Biome 完全入門｜ESLint+Prettier を代替する次世代ツール【2026年最新】
Biomeの導入から設定まで完全解説。ESLint + Prettier の代替として10倍以上高速な統合ツールの使い方、移行手順、VSCode連携までを実例付きで紹介。
open →Chrome DevToolsで実際に使っている機能だけの話｜LCP計測とCanvasゲームのデバッグ
DevToolsのテクニック集は数あれど、毎回開くパネルは少ない。このブログのLCP計測と自作Canvasゲームのデバッグで本当に使っているNetwork・Performance・Memory・デバイスモードの使いどころを実例で書く。
open →Docker 完全入門ガイド｜初心者向けに図解で解説【2026年版】
Docker の基礎から実践まで完全解説。コンテナの仕組み、Dockerfile、docker-compose、Volume、ネットワークなど初心者が最短で実務投入できる内容を網羅。
open →GitFlow・GitHub Flow・Trunk Basedの使い分け｜一人+AIエージェント2体のGit運用で決めたこと
GitFlow・GitHub Flow・Trunk Basedの違いと選び方を、一人開発+AIエージェント2種の実体験から整理。旧クローンからボットがpushし続けて毎朝behindになった事故と、そこから決めた運用ルールも書く。
open →GitHub Actions で CI/CD を組む実践ガイド｜ワークフロー・シークレット・再利用
GitHub Actions の使い方を実例付きで完全解説。CI/CD ワークフローの基礎、再利用可能ワークフロー、シークレット管理、キャッシュ活用まで実務に使えるテクニック。
open →Vercel・Cloudflare Pages・Netlifyの選び分け。ブログをCloudflare Pagesで実運用している立場から
このブログ(clvr.lol)はCloudflare Pagesの無料枠で運用している。帯域無制限の恩恵とビルド500回/月の制限、VercelやNetlifyを選ぶべき場面、自前VPSとの使い分けまで運用者目線で書く。
open →npmで複数プロジェクトを運用して困ったことと、yarn・pnpm・bunに乗り換える判断基準
VPS上のNode.jsプロジェクトをnpmで運用して実際に困ったのはキャッシュ権限とnode_modulesの肥大だった。どの症状が出たらyarn・pnpm・bunを検討すべきか、npmユーザー目線の判断基準で書く。
open →PlaywrightをVPSで毎日cron運用して学んだこと。壊れないセレクタと待機処理の実践
Playwright+ChromeをVPSで毎日cron運用して得た実践知。CSSクラス依存セレクタが壊れた話、waitForSelectorとnetworkidleの使い分け、リトライとログ設計、メモリ制約下のChrome運用をE2Eテストに落とし込む。
open →Turbopack vs Vite 完全比較｜次世代ビルドツールの選び方【2026年版】
Turbopack と Vite の特徴・パフォーマンス・対応フレームワークを実測比較。Rust 製 Turbopack と esbuild/Rollup ベース Vite のどちらを選ぶべきか徹底解説。
open →Storybook 完全入門｜コンポーネントカタログの作り方【2026年版】
Storybook の導入から活用まで完全解説。コンポーネントカタログの作成、インタラクションテスト、デザインシステム構築など実務で使える内容を網羅。
open →VS Code おすすめ拡張機能2026【Web開発者向け厳選20選】
2026年版のVS Codeおすすめ拡張機能を厳選して紹介。Web開発の生産性を劇的に向上させるエディタ設定とワークフローを解説。
open →Astro vs Next.js vs Hugo：静的サイトを2つAstroで運用している自分の選び方
ブログとポートフォリオをAstro 5で、案件管理アプリをNext.jsで実運用中の筆者が、SSG選びの実感を書く。Hugoを選ばなかった理由と、コンテンツはAstro・アプリはNext.jsという使い分けの根拠。
open →Figma からコーディングを効率化するワークフロー【実践編】
FigmaデザインからHTML/CSSへの変換を効率化するワークフローを解説。デザイントークンの抽出、コンポーネント設計、AIツール活用まで。
open →