設定ファイルのタイポを発見
変更前
API_TIMEOUT=3000変更後
API_TIMEOUT=30000ゼロを1つ多く打っただけで、3秒のタイムアウトが30秒に化けます。diffチェッカーなら一瞬で気づけますが、.envファイルを目視で見比べるとほぼ確実に見落とします。
差分チェッカー
2つのテキストやコードを行・単語単位で並べて比較。
最終更新
オリジナル6行
変更後6行
差分+3 −3 · 3件変更なし
−
function greet(name) {+function greet(name) {−
console.log("Hello, " + name);+ console.log(`Hello, ${name}!`);−
return name;+
return name.toUpperCase();
−
}+
}
−+
−
greet("world");+greet("World");diffチェッカーとは？
diffチェッカーは、2つのテキストやコードを比較して「追加・削除・変更された箇所」をハイライトしてくれるツールです。コードレビュー、設定変更のデバッグ、APIレスポンスの突き合わせ、マイグレーションの検証、コミット前の変更内容の確認など、開発者にとって日常的に欠かせない存在です。
diffを正しく読む力は、開発者の基本スキルのひとつ。*本当に挙動が変わる変更*と単なる整形（リフォーマット）を切り分け、200行のブロックの中で1文字だけ変わった箇所を素早く見つけ出せるようになります。緑・赤・黄色のリズムが体に染み込めば、コードレビューのスピードは一気に上がります。
押さえておきたい差分の種類は2つ。「行diff」（どの行が変わったか）と、「単語diff」「文字diff」（行の中の何が変わったか）です。ソースコードの比較なのか、文章の比較なのかに応じて切り替えられるツールが理想的です。
テキスト比較で身につくこと
- 行diffは「*どこで*変更が起きたか」を、単語・文字diffは「行の中の*何が*変わったか」を教えてくれる。
- 空白の意味は文脈次第。Markdown・YAML・Pythonでは空白に意味があり、それ以外のコードではほぼ無視してOK。「空白を無視する」オプションは状況に応じて切り替える。
- 見た目は小さな差分でも、値・条件・ルーティング・環境変数・フィーチャーフラグが変わっていれば影響は大きい。
テキスト比較の手順
2つのバージョンを貼り付ける
左側に元のテキスト、右側に新しいバージョンを入れます。コード、JSON、文章、設定ファイル、何でもOKです。
行diffか単語diffを選ぶ
ソースコードや構造化データなら行diff。文章のニュアンスや言い回しを比較したいときは単語diffに切り替えましょう。
空白と大文字小文字の扱いを切り替える
意味のある変更だけ見たいなら「空白を無視」を有効化。ログや大文字小文字がどうでもよいテキストを比べるなら「大文字小文字を無視」もオン。
色分けされた結果を読む
削除された内容は左側に赤で、追加された内容は右側に緑で表示されます。修正された行は、左右にそれぞれ赤・緑として並ぶことが多いです。
編集しながら繰り返す
どちらかを編集すると差分はリアルタイムで更新されます。プルリクを出す前に、きれいなパッチに整える用途にもぴったりです。
diffの色と記号 早見表
Coddyのdiffチェッカーで使う表記は、git diff・GitHub・他の主要な差分ビューアと共通の慣習に沿っています。
| マーカー | 意味 | 表示される場所 |
|---|---|---|
赤 / - | 元の側から削除された行 | 左ペイン |
緑 / + | 新しい側で追加された行 | 右ペイン |
| 黄 / 両側 | 修正された行 — 行内に部分的な変更あり | 左右の両ペイン |
| 色なし | 変更なし — 両バージョンに共通する行 | 左右の両ペイン |
@@ ... @@ | git diffのハンクヘッダ — 行番号情報 | ターミナルのgit diff出力 |
| 単語diff | 修正行の中の文字・単語レベルの変更点 | 黄色い行の内側にハイライト表示 |
試してみたい差分の例
単語レベルの修正
変更前
The user can login.
変更後
The user can log in.
単語diffならlogin → log inの部分だけがハイライトされます。行diffだと「行ごと変更」と表示されてしまうところを、単語diffはピンポイントで本当の編集箇所を切り出してくれます。
2つのAPIレスポンスを比較
レスポンスA
{ "id": 42, "status": "draft", "published": false}レスポンスB
{ "id": 42, "status": "published", "published": true}関連する2つのフィールドがセットで変わっていることが、差分を見れば即座にわかります。状態を変更するAPI呼び出しが期待通りに動いたかを確認するには、これがいちばん速い方法です。
diffで陥りがちな落とし穴
- 空白に意味がある場面で「空白を無視」してしまう。Markdown・YAML・Pythonはどれもインデントに意味があります。
- 緑（追加）の行ばかり見て、赤（削除）の重要な行を見落とす。
- 差分がきれいに見えるからといって新バージョンが正しいとは限らない。diffはあくまで*何が変わったか*を示すだけで、*その変更が正しいか*は判断してくれません。
diffチェッカー FAQ
「テキスト比較」と「diffチェッカー」の違いは？
違いはありません。同じツールの呼び方が2つあるだけです。どちらも2つのテキストを比較して、追加・削除・修正をハイライトします。
コードもこのツールで比較できますか？
はい。テキストdiffはコード、JSON、SQL、Markdown、YAML、設定ファイル、プレーンテキストすべてに使えます。特に行diff表示はソースコードのレビューで重宝します。
なぜ開発者は毎日のようにdiffを使うのですか？
コードレビュー、変更追跡、リグレッションの原因特定、障害後の調査など、すべてdiffが土台になっています。
git diff、プルリクの差分ビュー、IDEの比較パネル、どれも同じ仕組みです。空白は無視すべきですか？
ファイル形式で空白に意味がない場合だけです。Python・YAML・Markdownでは空白が意味を持つので、そのまま比較すべき。それ以外のコードでは、空白を無視したほうがdiffがすっきり読めます。
このdiffチェッカーにデータを入れても安全ですか？
はい。比較はすべてブラウザ内で完結し、入力したテキストはアップロードも保存もされません。社内コードや設定ファイル、顧客データのサンプルでも安心して使えます。
