Web Design Leaves

ファイルを比較

タイムラインのエントリーを選択すると、その時点の編集状態と現在のファイルが表示されます。その際、差分がハイライト表示され、追加された行の横には ＋ が、削除された行の横には ‐ が表示されます。

変更を比較しながら右側の画面の現在のファイルを編集することもできます。左側の履歴ファイル（選択したエントリーのファイル）は読み取り専用です。

変更箇所には矢印（→）が表示され、クリックするとその時点の状態に戻すことができます。

操作を取り消すには control + z を押します。

変更箇所が複数ある場合は、それぞれに矢印（→）が表示されるので、個別に元に戻すことができます。

また、エントリーを右クリックして表示される「前と比較」を選択すると、1つ前の状態を比較することができます。

例えば、上記の場合現在のファイルと1つ前のファイルを比較していますが、「前と比較」を選択すると1つ前と2つ前のファイルを比較できます（この場合、両方とも読み取り専用です）。

エントリーを右クリックして表示される「コンテンツを表示」を選択すると、その時点のファイルの内容が表示されます。

ファイルを復元（元に戻す）

タイムラインで選択したエントリーの状態にファイルを復元する（戻す）ことができます。

復元したい時点のエントリーを選択して右クリックし、「コンテンツの復元」を選択します。

以下のような「保存されていない全ての変更は破棄される」という警告が表示されるので、問題なければ「復元」をクリックします。

選択したエントリーの状態に戻ります。

この時点で control + z を押して保存すると、復元前の状態に戻ります。

履歴ファイルの表示

エクスプローラービューでファイルを選択し、タイムラインで表示したいエントリーを選択して右クリックから「Finder で表示します」を選択します。

メニュー項目の「Finder で表示します」は Mac の場合です。他の OS では異なるかと思います。

以下のような選択したエントリーが含まれるフォルダーが開き、選択したエントリーのファイルが選択された状態で表示されます。

このフォルダーの1つ上のフォルダ（History）がローカル履歴全体の保存場所です。

この例の場合、index.html の履歴ファイルを表示しているので、その他のファイルも index.html の他のバージョンのファイルになります。

entries.json にはエントリーの情報が記述されています。

{"entries":[{"id":"SMue.html","timestamp":1694419364367},{"id":"aoG6.html","timestamp":1694419643562},{"id":"6R17.html","timestamp":1694419663261},{"id":"qAOJ.html","timestamp":1694420183514},{"id":"y81A.html","source":"undoRedo.source","timestamp":1694427619361},{"id":"5kUF.html","timestamp":1694428314054},{"id":"635M.html","source":"undoRedo.source","timestamp":1694428411976},{"id":"zhDt.html","timestamp":1694472336507},{"id":"w89S.html","source":"localHistoryRestore.source","timestamp":1694476470299},{"id":"mtOO.html","source":"undoRedo.source","timestamp":1694476667217},{"id":"qNhK.html","timestamp":1694483741838}]}

保存場所のパス名（Mac の場合）

ローカル履歴全体の保存場所フォルダ（History）のパス名は、ウィンドウ下部のステータスバーのフォルダ名（History）を右クリックして「History のパス名をコピー」でコピーできます。

同名のファイルを作成

例えば、以下の style.css を誤って削除してしまった場合、

削除してしまったファイル style.css はタイムラインには表示されません。

削除したファイルと同じ名前のファイル（style.css）を作成するとタイムラインに過去のエントリーが表示されます。エントリーから復元したいファイル（例えば最新のエントリー）を選択します。

以下のように差分が表示されます。エントリーを右クリックして「コンテンツの復元」を選択します。

以下が表示されるので、「復元」をクリックします。

ファイルが復元されます。

コマンドパレットを使う

同名のファイルを作成してもタイムラインに過去のエントリーが表示されない場合は、コマンドパレットを使って削除したファイルを検索することができます。

コマンドパレットに local h や local history などと入力すると、Local History（ローカル履歴）の操作が表示されるので「ローカル履歴：復元するエントリの検索」を選択します。

コマンドセンターの場合は入力欄にカーソルを置いて「コマンドの表示と実行」を選択するか > と入力すればコマンドパレットになります。

以下のようにファイルの一覧が表示されるので、ファイル名やその一部を入力して絞り込みます。

削除したファイル名 style.css を入力すると以下のように候補が表示されます。パスの表示されていないものは現在のプロジェクトのファイルなので、この例ではそのファイルを選択します。

復元するエントリーのリストが表示されるので、復元したいエントリーを選択します。

選択した履歴ファイルが表示されるのでファイルを確認し、右上のチェックボタン（）をクリックすると、その履歴ファイルで復元できます。

以下が表示されるので「復元」をクリックして復元ます。

選択した履歴ファイルで復元されます。

履歴ファイルを検索する

前述のいずれの方法でも復元できない場合は、履歴ファイルが保存されているフォルダーを検索して目的のファイルを見つけて復元することができます。

以下は Mac の場合の例です。

Mac ではターミナルで grep コマンドを使って検索できます。

履歴ファイルの保存場所は$HOME/Library/Application Support/Code/User/Historyになります。または /Users/ユーザー名/Library/Application Support/Code/User/History/でも同じです。

grep コマンドに -r オプションを指定するとサブディレクトリを含めて再帰的に検索して検索文字列を含むファイル名を取得できます。-i は大文字と小文字の区別をしないようにするオプションです。

この例では、検索文字列にはファイルに含まれる文字列として「style sheet for local history sample」を指定しています（スペースが含まれるので引用符で囲みます）。

% grep -r -i "style sheet for local history sample" "$HOME/Library/Application Support/Code/User/History"  // 改行されて表示されていますが1行です。
/Users/username/Library/Application Support/Code/User/History/4338b74a/wwbb.css:/* style sheet for local history sample */
/Users/username/Library/Application Support/Code/User/History/4338b74a/r4vq.css:/* style sheet for local history sample */
/Users/username/Library/Application Support/Code/User/History/4338b74a/YuGb.css:/* style sheet for local history sample */

上記の場合、History フォルダ内の 4338b74a という名前のフォルダに3つの該当するファイルが見つかったので、それらを cat コマンドなどで内容を確認します。

% cat /Users/username/Library/Application\ Support/Code/User/History/4338b74a/YuGb.css  // 改行されて表示されていますが1行です。
/* style sheet for local history sample */
.sample {
  border: 1px solid #CCC;
  background-color: #efefef;
}
.sample h3 {
  margin: 20px;
  font-size: 20px;
}
.sample .content p {
  color: blue;
}

History フォルダのパスの「Application Support」はスペースを含むので、前述の例のようにスペースを \ でエスケープするかパス全体を引用符で囲みます。

% cat "/Users/username/Library/Application Support/Code/User/History/4338b74a/YuGb.css"  // 改行されて表示されていますが1行です。
/* style sheet for local history sample */
.sample {
  border: 1px solid #CCC;
  background-color: #efefef;
}
.sample h3 {
  margin: 20px;
  font-size: 20px;
}
.sample .content p {
  color: blue;
}

必要な履歴ファイルが見つかったら、以下のように cat の結果をファイルに保存すれば復元できます。

% cat "/Users/username/Library/Application Support/Code/User/History/4338b74a/YuGb.css" > style.css //cat の結果を保存