記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

vscode ファイルの差分比較方法【初心者むけ】

vscodeでファイルの差分認方法を紹介。ファイルの差分を確認する際、外部サイトを利用して確認していませんか? 実はvscodeに差分を確認する機能があります。今回はvscodeでの差分確認方法を詳しく解説していきます。

カテゴリ: Visual Studio Code

vscodeを使用されている方で、2つの異なるファイルの内容の差分を確認したい。
ファイルの更新前と更新後でのファイルの内容を確認したい。
そんな時はありませんか?
外部サイトを利用しなくても、実は vscodeで簡単に確認する方法があります。

今回は vscodeで、「2つの異なるファイルの差分の確認方法」 「変更前のファイル、変更後のファイルの差分確認方法」を初心者の方向けに解説していきます。

vscodeとは?

初心者の方向けに、まずはそもそものvscodeについて簡単に説明していきます。

Visual Studio Code(vs code)とは、マイクロソフト社が無料で提供しているテキストエディタの事であり、世界中のエンジニアの中でも利用者の多い人気ソフトです。

Visual Studio Codeが人気のある理由として5点があがられます。

1.オープンソースであり、誰でも無償で利用する事ができる。
2.Windows版・macOS版・Linux版と各OSに対応している。
3.多くの言語に対応している(英語、日本語、フランス語、ドイツ語、中国語、ロシア語)などその他、各国の言語に対応している。
4.拡張機能が豊富(デバック機能、コード補完、ソースコードのシンタックスハイライトなど)
5.軽量で早く動く(余計な機能は最初から省かれているので、ストレスなく動く)

以上5点の利便性から、最も多くのユーザーに選ばれている開発ツールだと言われています。
今回は「2つの異なるファイルの差分の確認方法」 「変更前のファイル、変更後のファイルの差分確認方法」を中心に解説していきます。

ファイルの差分

ファイルの差分を確認したいケースは大きく2つ

 ①2つの異なるファイルの差を確認したい。
例えば
「index.html1」「index.html2」というファイルの内容「差」の確認
下記だったら「テキスト」という文字「ファイル」という文字が違う。

②変更前のファイル、変更後のファイルの差分確認方法
下記例は、「class=”sample”」の追加が差分

どんな時に差分を確認するのか?

①の「2つの異なるファイルの差分確認」の場合は、
スペル、文字、プログラムの違い
名簿の変更
利用規約のアップデート
などの差分を確認する際に使用されます。

②の「変更前のファイル、変更後のファイル差分確認」は、
ソースコード変更後のエラー発生の原因確認
誰かがソースコードを変更した時の確認
など変更の差分を確認する事ができます。 差分の見方を順番に解説していきます。

 ①2つの異なるファイルの差分の確認方法

まずは比較したい2つのファイルを開き、どちらか一つをアクティブ状態にして下さい。

コマンドパレットを開きます。
ショートカットキーmac:【Cmd】+【Shift】+【P】。win:【Ctrl】+【Shift】+【P】。もしくは「表示」→「コマンドパレット」をクリックします。

コマンドパレットを表示したら「Compare」と入力し、「ファイル:アクティブファイルを比較しています」をクリックします。

比較したいファイルをクリック

ファイルが2つに分かれて表示され、異なる部分・行がハイライトされます。

インラインビューで表示する方法

インラインビューとは、2つのファイルの異なった部分だけを並べて表示させる方法です。
下記のような形です。

インラインビューで表示するには、「・・・」をクリック→「インラインビュー」をクリック

このようにインラインビューで表示されます。

②変更前のファイル、変更後のファイルの差分確認方法

vscodeで、「変更前のファイル、変更後のファイルの差分確認」をするには、
まず変更前のファイルを保存しておく必要があります。
変更前のファイルを残しておくことで、変更後のファイルと比べる事ができる為です。

この変更前のファイルを残しておくために「Local History」という拡張機能を使います。

「Local History」のダウンロード方法

「Local History」
Local History – Visual Studio Marketplaceをインストール

Visual Studio Codeを開く

Visual Studio Codeを開きインストールをクリックすれば「Local History」が使えるようになります。

更新したいファイルを選択し、エクスプローラーマークを押しエクスプローラービューをだします。

変更します。今回は「AAAAA」と記載。「.history」がでてきます。

「.history」をクリック。上のファイルが変更前。

下のファイルが変更後。

ファイルで右クリック→「選択項目と比較」をクリック。

変更後、変更前の差分を比べることができます。

まとめ

今回は、 vscodeでの差分の見方について解説してきました。

ファイルの差分を確認したいケースは2つ

①2つの異なるファイルの差
②変更前のファイル、変更後のファイルの差

①の2つの異なるファイルの差を確認する方法は
コマンドパレットを表示→「Compare」と入力→「ファイル:アクティブファイルを比較しています」を選択→比較ファイルをクリックし比較する。

②の変更前のファイル、変更後のファイルの差分を確認するには
「Local History」を使用し変更前のファイルを保存し、変更後のファイルと比べ、変更の差を確認しました。

いかがだったでしょうか?本記事を参考にしていただき、効率的な開発をしていただけたら幸いです。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。