設定ファイルやコードの差分を確認するとき、IDEを開くほどでもない場面は意外と多いと思います。
そんなときに、貼るだけ・クリック不要で使えるシンプルなテキスト diff ツールを作りました。
👉 https://webdiff.notegridx.dev
👉 https://github.com/notegridx/webdiff
入力したその場に、差分が重なって表示されるのがこのツールの特徴です。
webdiff の概要
- ブラウザだけで動作（入力したテキストは外部に送信しない）
- 左右にテキストを貼るだけで即座に差分を表示
- 入力エリアと差分表示を分けず、その場で確認できる
できるだけ少ない手順で差分を確認することを目的にしています。
このツールで重視したこと
作業を邪魔しないシンプルさ
比較作業に不要な装飾や要素をできるだけ排除し、テキストそのものに集中できる画面にしています。
貼るだけ、クリックなし
操作は左右にテキストを貼り付けるだけです。貼り付けや入力と同時に差分が更新されます。
入力と結果を分けない
入力している位置で、そのまま差分を確認できます。結果を見るために別エリアへ視線を移動する必要はありません。
テキスト量に応じて自動で拡張
テキストを貼ると内容の長さに応じてエディタが縦に拡張され、画面をはみ出した場合はブラウザのスクロールでまとめて確認できます。
差分表示の仕様
差分の粒度は文字単位のみです。
- 左側：削除された文字をピンクで表示
- 右側：追加された文字を緑で表示
左右で役割を分けることで、差分の方向が直感的に分かるようにしています。
テーマ・言語対応
- Light / Dark / Auto（OS設定に追従）
- 選択状態は localStorage に保存
- ブラウザ言語に応じて日本語 / 英語を自動切替
技術構成
/
├─ index.html
├─ styles.css
├─ app.js
└─ vendor/
└─ diff.min.js (jsdiff v5.2.0)
- 依存関係は vendoring
- ビルド不要、オフライン動作可
- 入力データは外部送信なし
まとめ
webdiff は、操作と表示を極力シンプルにした単機能の diff ツールです。
「この2つのテキスト、どこが違う？」という場面で、できるだけ手早く答えを得たいときに使ってもらえれば嬉しいです。
👉 https://webdiff.notegridx.dev
👉 https://github.com/notegridx/webdiff