Diff ビューアー
テキストやコードの差分をリアルタイム表示。並列・統合・行単位・文字単位に切り替えられます。
📄
テキストを入力すると差分を表示します
使い方
- 「変更前」「変更後」の2つのテキストエリアにそれぞれテキストを入力してください
- 差分が自動的に計算され、追加（緑）・削除（赤）・変更（黄）で色分けされます
- 「並列表示」で左右比較、「統合表示」で+/-記号付きの一覧を確認できます
- 「文字単位」に切り替えると、変更行内のどの文字が変わったか詳細にわかります
- プリセットでコード・文章・設定ファイルのサンプルをすぐに試せます
目で見比べるのは何行が限界？
5行くらいのコードなら目視で違いを見つけられる。でも20行を超えると、1文字の違い（セミコロンの有無、スペルミス）を見落とす確率が一気に上がる。
このDiffビューアーは、変更箇所を色で強調するから見落としがない。 「どこを変えたか」が一目で分かるので、コードレビューや文章の校正が格段に速くなる。
こんな場面で使える
- 先生の模範解答と自分のコードを比較 — 「どこが違うか分からない」とき、両方を貼り付ければ差分が色付きで表示される。
- バグ修正の前後を確認 — 修正前のコードと修正後のコードを比較して、意図しない変更が混ざっていないかチェックできる。
- レポートや作文の推敲 — 初稿と修正稿を比較すれば、どこを直したか一覧で確認できる。先生に「ここを直しました」と説明するときにも便利。
- 設定ファイルの変更確認 —
package.jsonや.envを変更したとき、何が変わったか正確に把握できる。
よくある質問
- Q. git diff と何が違う？
- git diff はGitリポジトリ内のファイル変更を表示するコマンド。このツールはGit不要で、任意のテキスト2つを比較できる。Gitをまだ使っていない段階でも差分確認ができる。
- Q. 日本語の文章でも使える？
- 使える。文字単位モードにすれば、日本語の1文字の違いもハイライトされる。作文の推敲に最適。
- Q. 大きなファイルでも動く？
- 数千行程度なら問題なく動作する。ただしブラウザ上で処理するため、数万行になると重くなる場合がある。
Diff（差分）とは
Diff は2つのテキスト間の「違い」を表示する技術です。Git でコードを管理するときや、
文章を校正するときに活躍します。このツールは LCS（最長共通部分列）アルゴリズムを使って差分を計算しています。
git diff コマンドも同じ考え方で動いているので、実務でも直接役立つ知識です。