コード差分ビューア

Monaco Editorベースの専門的なテキスト比較エディタで、高度なコード差分表示および編集機能を提供します。シンタックスハイライト、並列比較、インライン編集などをサポートし、コードレビュー、バージョン比較、文書校正、正確なテキスト差分解析に最適です。

主な機能

Monaco Editorコア

Visual Studio CodeのエディタコアであるMonaco Editorを搭載し、VS Codeと同じ編集体験を提供します。サポート機能:

• インテリジェントなコード補完
• シンタックスハイライト
• コード折りたたみ
• マルチカーソル編集
• 検索と置換
• キーボードショートカット

VS Codeユーザーはシームレスに作業を開始できます。

並列比較モード

左右のペインに元のバージョンと修正バージョンを表示し、差分を強調表示:

• 赤い背景:削除されたコンテンツ
• 緑の背景:追加されたコンテンツ
• 黄色の枠:修正された行
• 接続線:対応関係を表示

差分注釈は文字レベルで正確で、微妙な変更を簡単に発見できます。

双方向編集

読み取り専用の差分ビューアとは異なり、このツールは両側の直接編集をサポート:

• 左側の元のバージョンは編集可能(originalEditable: true)
• 右側の修正バージョンは編集可能
• リアルタイムの差分注釈更新

比較中にエラーを修正したり変更をマージしたりするのに適しています。

差分ナビゲーション

クイックナビゲーション機能を提供:

• 前の差分/次の差分ボタン
• 差分統計の概要
• スクロールバーミニマップで差分分布を表示

大きなファイルで変更位置を素早く特定します。

インライン差分表示

インラインモード(renderSideBySide: false)への切り替えをサポートし、差分を単一列形式で表示して画面スペースを節約します。狭い画面デバイスやコンテキストに焦点を当てる必要がある場合に適しています。

シンタックスハイライト

複数のプログラミング言語とファイルタイプを自動認識:

• JavaScript/TypeScript
• HTML/CSS/SCSS
• Python/Java/C++
• JSON/YAML/XML
• Markdown
• SQL
• 100以上の言語

ファイル拡張子または内容に基づいて自動検出し、正確なシンタックスカラーリングを提供します。

使用例

コードレビュー

プルリクエストやマージリクエストをレビューする際に、古いコードバージョンと新しいコードバージョンを比較します。修正を直感的に表示し、潜在的な問題を特定し、改善提案を提供します。

バージョン管理

Git、SVN、またはその他のバージョン管理システムでのファイル変更を表示します。コミット間の差分を比較して、コードの進化履歴を理解します。

文書校正

異なる文書バージョンを比較して、編集変更が期待に沿っているか確認します。技術文書、APIドキュメント、ユーザーマニュアルなどのレビューに適しています。

設定ファイル比較

開発、テスト、本番環境間の設定ファイルを比較して、設定の一貫性を確保し、環境の問題を回避します。

データ移行検証

SQLスクリプト、JSONデータ、CSVファイルなどを移行する際、ソースファイルとターゲットファイルを比較してデータの整合性と正確性を検証します。

使用例

リファクタリング前後のコード比較

シナリオ:関数をリファクタリングし、ロジックの一貫性を確認する必要があります。

手順:

1. 左側にリファクタリング前のコードを貼り付け
2. 右側にリファクタリング後のコードを貼り付け
3. 緑(追加)と赤(削除)のハイライトを観察
4. ナビゲーションボタンを使用して各差分を確認
5. コアロジックが変更されておらず、コード構造のみが最適化されたことを確認

マージコンフリクトの解決

シナリオ:Gitマージコンフリクト、手動解決が必要です。

手順:

1. 左側にベースバージョンのコードを貼り付け
2. 右側にフィーチャーブランチのコードを貼り付け
3. 差分を比較してコンフリクトの原因を理解
4. 右側で直接編集し、必要な変更を保持
5. コンフリクトマーカーを削除し、最終バージョンを生成

APIドキュメント変更追跡

シナリオ:APIインターフェースのアップグレード、古いドキュメントと新しいドキュメントを比較します。

手順:

1. 左側に古いAPIドキュメントを貼り付け(Markdown形式)
2. 右側に新しいAPIドキュメントを貼り付け
3. 新しく追加されたインターフェースを表示(緑の注釈)
4. 削除されたインターフェースを表示(赤の注釈)
5. 破壊的変更を記録し、関連開発者に通知

キーボードショートカット

よく使用されるショートカット(VS Codeと同じ):

編集操作

• Ctrl/Cmd + Z:元に戻す
• Ctrl/Cmd + Shift + Z:やり直し
• Ctrl/Cmd + C/V/X:コピー/貼り付け/切り取り
• Ctrl/Cmd + F:検索
• Ctrl/Cmd + H:置換
• Alt + 上/下:行を移動

マルチカーソル

• Alt + クリック:カーソルを追加
• Ctrl/Cmd + Alt + 上/下:上/下にカーソルを追加
• Ctrl/Cmd + D:次の一致を選択

コード折りたたみ

• Ctrl/Cmd + Shift + [:折りたたみ
• Ctrl/Cmd + Shift + ]:展開

重要な注意事項

大きなファイルのパフォーマンス

非常に大きなファイル(>1MB)を比較するとパフォーマンスに影響する可能性があります。推奨事項:

• 必要な部分のみを比較し、無関係なコンテンツを削除
• ミニマップを無効にしてレンダリングのオーバーヘッドを削減
• 最新のブラウザ(Chrome、Edge)を使用してより良いパフォーマンスを得る

改行の違い

Windows(\r\n)、Unix(\n)、Mac(\r)は異なる改行を使用し、ファイル全体が赤く表示される可能性があります。Monaco Editorはこれを自動的に処理しますが、実際の差分が改行の不整合であるかどうかに注意してください。

文字エンコーディング

比較前に両方のファイルが同じ文字エンコーディング(UTF-8推奨)を使用していることを確認してください。そうでない場合、文字化けや誤った差分判定が発生する可能性があります。

空白文字

デフォルトでは、スペースとタブの差分を表示します。空白文字の差分を無視するには、編集後に手動でフォーマットを調整してください。

類似ツールとの比較

diffchecker.com、Beyond Compare、VS Code Diff Editor、および類似ツールと比較して、このツールの特徴:

1. Monaco Editorベース、プロフェッショナルな編集体験
2. 双方向編集をサポート、表示だけでなく変更も可能
3. 100以上の言語のシンタックスハイライト、包括的なカバレッジ
4. 純粋なブラウザ操作、ソフトウェアのインストール不要
5. ローカルデータ処理、プライバシー保護
6. レスポンシブレイアウト、さまざまな画面サイズに適応

比較プロセス中に直接編集が必要な一時的なコードまたはテキスト比較が必要な開発者に最適です。