WebStorm/PhpStormが備える差分抽出(Diff)機能まとめ

WebStorm/PhpStorm(というかJetBrains製のIDE全般)には多彩なバリエーションの差分抽出(Diff)機能が搭載されているのだけど、あまりにも多彩なのでいったんまとめてみることにした。

まとめてみた結果、これはもう外部の差分抽出・マージ専用ツールは不要だなと思えるほど充実していた。

もくじ

  1. 特定の2つのファイルを比較する
  2. 現在開いているファイルと、特定のファイルを比較する
  3. クリップボードの内容と、ファイルを比較する
  4. クリップボードの内容と、ファイル内の特定領域のテキストを比較する
  5. 特定の2つのディレクトリを比較する
  6. リモートファイル(サーバー上にあるファイル)と比較する
  7. リモートファイル(サーバー上にあるファイル)と複数ファイル同時に比較する
  8. ローカル履歴と現在のファイルを比較する
  9. Gitのブランチどうしを比較する
  10. 現在開いているファイルと、Gitの別ブランチにある当該ファイルを比較する
  11. 現在開いているファイルと、Gitの同一バージョンのファイルを比較する
  12. 現在開いているファイルと、リポジトリの最新バージョンのファイルを比較する
  13. 現在開いているファイルと、リポジトリの特定バージョンのファイルを比較する
  14. 特定の2つのコミットを比較する
  15. おまけ

特定の2つのファイルを比較する

まずは定番、2つのファイルの比較。

  1. プロジェクトビューでCtrl+クリックを使い、ファイルを2つ選択する。
  2. 右クリックメニューから[Compare Two Files]を選択する。
    もしくはCtrl+Dのショートカットを実行する。

現在開いているファイルと、特定のファイルを比較する

  1. 比較先のファイルをあらかじめ開いておく。
  2. プロジェクトビューからファイルを選択する。
  3. 右クリックメニューから[Compare File with Editor]を選択する。

クリップボードの内容と、ファイルを比較する

  1. 比較したい文字列をコピーするなりして、あらかじめクリップボードに置いておく。
  2. 比較したいファイルを開き、エディター内の右クリックメニューから[Compare with Clipboard]を選択する。

クリップボードの内容と、ファイル内の特定領域のテキストを比較する

  1. 比較したい文字列をコピーするなりして、あらかじめクリップボードに置いておく。
  2. 比較したいファイルを開き、比較したい文字列を選択する。
  3. 右クリックメニューから[Compare with Clipboard]を選択する。

特定の2つのディレクトリを比較する

  1. プロジェクトビューでCtrl+クリックを使い、ディレクトリを2つ選択する。
  2. 右クリックメニューから[Compare Directories]を選択する。
  3. 各ディレクトリ内のファイルが再帰的に差分抽出され、差分があれば表示される。

この機能は、WebStormを立ち上げずともコマンドラインで実行できる。
$ <WebStorm実行ファイルまでのパス> diff <path_1> <path_2>
path_1 と path_2 はそれぞれ比較したいディレクトリのパス。
詳細: Running WebStorm as a Diff or Merge Command Line Tool

リモートファイル(サーバー上にあるファイル)と比較する

WebStormにはリモート情報を設定しておくと、IDE上でファイルアップロード/ダウンロードの操作ができたり、差分の比較ができたりする機能がある。

  1. あらかじめリモート情報を入力し、接続できる状態にしておく([Tools]→[Deployment]→[Configuration])。
  2. リモートホストビューを表示する。
  3. ファイルを選択し、右クリックメニューから[Compare With Local Version]を選択する。

リモートファイル(サーバー上にあるファイル)と複数ファイル同時に比較する

ローカルのファイルとリモートのファイル、両方を突き合わせながら、最新の状態を目視で確認していきたいときに便利。サーバー側にある対象ファイルがすべてダウンロードされたのちに比較されるので、対象ファイルの数によっては時間がかかることがある。ディレクトリ内も再帰的に比較される。

  1. あらかじめリモート情報を入力し、接続できる状態にしておく([Tools]→[Deployment]→[Configuration])。
  2. プロジェクトビューから比較したいファイル、もしくはディレクトリを選択する。
  3. 右クリックメニューから[Sync with Deployed to …]を選択する。
  4. 各ディレクトリ内のファイルが再帰的に差分抽出され、差分があれば表示される。

ローカル履歴と現在のファイルを比較する

WebStormにはローカル履歴機能がある。これはプロジェクト内のすべてのファイルに対して、変更の履歴を逐一保管してくれる機能。ローカル履歴と現在のファイルを比較するとはつまり、「20分前のこのファイルの状態と、今のファイルとで比較したい!」ということ。

  1. 比較したいファイルをあらかじめ開いておく。
  2. メニューバーから [VCS]→[Local History]→[Show History]を選択する。
  3. ローカル履歴が表示される。比較したいバージョンを選択する。

もちろんディレクトリまるごと比較もできる。

  1. プロジェクトビューから比較したいディレクトリを選択する。
  2. 右クリックメニューから[Local History]→[Show History]を選択する。

Gitのブランチどうしを比較する

バージョン管理システムにて現在チェックアウトしているブランチと選択したブランチの内容を比較する。Gitに限らずほかのバージョン管理システムでもできると思うが、Gitしか普段つかわないので。

  1. 比較元になるブランチをチェックアウトしておく。
  2. メニューバーから[VCS]→[Git]→[Branches…]を選択する。
  3. 比較先のブランチを選択し、[Merge]を選択する。

開くダイアログ上にはブランチどうしのコミットレベルの差分、ファイルレベルの差分が確認でき、同時にマージ作業も行えるようになっている。

現在開いているファイルと、Gitの別ブランチにある当該ファイルを比較する

前述の「Gitのブランチどうしを比較する」の手順を踏んで比較したいファイルを選択してもよいが、ファイルを直接別ブランチの当該ファイルと比較もできる。

  1. 比較したいファイルをあらかじめ開いておく。
  2. メニューバーから[VCS]→[Git]→[Compare with Branch…]を選択する。
  3. 比較先のブランチを選択する。

ディレクトリごと比較したい場合。

  1. プロジェクトビューから比較したいディレクトリを選択する。
  2. 右クリックメニューから[Git]→[Compare with Branch…]を選択する。

ディレクトリごと比較したい場合、の手順は、以下の項目についても同様。

現在開いているファイルと、Gitの同一バージョンのファイルを比較する

つまり、最後にCommit/Push/Pullした状態からの差分をとる。

  1. 比較したいファイルをあらかじめ開いておく。
  2. メニューバーから[VCS]→[Git]→[Compare with the Same Repository Version]を選択する。

ディレクトリごとの比較も可能。

現在開いているファイルと、リポジトリの最新バージョンのファイルを比較する

つまり、現在開いているファイルと、Gitのoriginに登録されているリポジトリとの差分、だと思う……。

  1. 比較したいファイルをあらかじめ開いておく。
  2. メニューバーから[VCS]→[Git]→[Compare with the Latest Repository Version]を選択する。

ディレクトリごとの比較も可能。

現在開いているファイルと、リポジトリの特定バージョンのファイルを比較する

  1. 比較したいファイルをあらかじめ開いておく。
  2. メニューバーから[VCS]→[Git]→[Compare with…]を選択する。
  3. 比較したいコミットを選択する。

もしくは。

  1. 比較したいファイルをあらかじめ開いておく。
  2. メニューバーから[VCS]→[Git]→[Show History]を選択する。
  3. 比較したいコミットを右クリックし、[Compare with Local]を選択する。

ディレクトリごとの比較も可能。

特定の2つのコミットを比較する

  1. 比較したいファイルをあらかじめ開いておく。
  2. メニューバーから[VCS]→[Git]→[Show History]を選択する。
  3. 比較したい2つのコミットをCtrl+クリックで選択する。
  4. 右クリックメニューから[Compare]を選択する。
    もしくはCtrl+Dのショートカットを実行する。

たぶん組み合わせパターン次第で、上にあげた以外にもいろいろな比較パターンがあると思う。しかしWebStormは要望に応えてくれる。どう比較したいかを思い浮かべながら、直観の赴くままに操作してみると、望んだとおりの結果を返してくれるのだ。すげえぜWebStorm!

おまけ

比較の雰囲気が伝わると思って、比較中のスクリーンショットを公式ヘルプから引用してみる。

複数ファイルの比較をしているところ。

複数ファイルの比較をしているところ。

Local History(ファイル履歴機能)からの差分抽出。

Local History(ファイル履歴機能)からの差分抽出。

ファイル比較とマージのイメージ

ファイル比較とマージのイメージ

Diff機能の設定。

Diff機能の設定。

以上、WebStorm / PhpStorm Advent Calendar 2014の7日目の記事でした。