第6回　先祖返りしたファイルを救える！ SVNのバージョン管理で変更前のファイルを取り戻そう

どんなWebデザイナーも、1度くらいは次のような出来事を経験したことはないでしょうか？

同じファイルを同時に編集していて、他の人の作業した分を知らずに上書き。ファイルが先祖返りしてしまった！
AIファイルを修正する度に、メールで送って確認していたので、ファイル名が「○○_田中修正版.ai」「⁠○○_田中修正版_20140611.ai」「⁠コピー～ ○○_クライアント提出用最終版.ai」「⁠0615_○○_クライアント提出用 (1)_最終版.ai」などカオスに。更新日付を見ても、もうどれが最新版か分からない……。
早急に画像の修正が必要なのに、元のPSDファイルは夏季休暇中のAさんしか持っていない！

場合によっては冷や汗ものです。このような事態を避けるために、Webサイト制作やシステム構築の現場では「バージョン管理システム」を使うのが一般的です。今回はそんな「バージョン管理システム」についてのお話です。

プロローグ：SVNってファイル共有ソフトじゃないの？

ここは企業のWebサイトの構築を専門としているA社の一室。悩み事に頭を抱えるWebデザイナーと、その駆け込み寺となっているインフラエンジニアがいました。

「どうしよう、どうしよう！」

「どうしたの？よくここ来るねぇ」

「新しいプロジェクトにアサインされてさ、そこでSVN使ってるんだけど……」

「SVN？ああ、Subversion？」

「そう、それ。できあがった画像ファイルをSVNでアップしたら、ちゃんとバージョン管理してくれって言われたんだよ」

「え、ちなみにその画像ファイルの名前は？」

「MainImage_20140612_Ver01.pngだよ」

「あー、うん、Subversionでそれはダメだね。バージョン管理台無しだわ」

「なんで!? SVNでバージョン管理ってそういうことじゃないの？ファイル名にちゃんと日付とバージョン番号書いてるじゃん！」

「うーん、ファイル名に日付入れたりとかもさ、みんなでやってると段々カオスになってくるでしょ。その辺をちまちまと人間が頑張らなくても、ちゃんと管理してくれるのがSubversionなのよ」

「もしかしてSVNって、ただファイルの受け渡しするだけのソフトじゃない？」

「うん、違います」

「知らなかった……」

「まあ落ち込まないで。じゃあ今日はバージョン管理システムの説明をするわ。とっつきにくいのは分かるけど、理解しちゃえば簡単よ」

バージョン管理システムにはCVSやSubversion（以下SVN⁠）⁠、それにGitなど、色々な種類がありますが、今回はSVNを題材にバージョン管理システムについて学んでいきましょう。

バージョン管理システムってなに？

SVNを始めとする「バージョン管理システム」とは、今あるファイルに手を入れたり、ファイルを追加・削除をしたりといった変更履歴を管理するためのシステムのことです。今回はSVNを題材にバージョン管理システムを紹介しますので、ここからはバージョン管理システム＝SVNとして話を進めていきます。「⁠変更履歴の管理」というとぼんやりとしていますが、その役割は大きく2つに分けられます。

1つ目は「ファイルのバックアップ」です。HTMLやCSS、PHPなどのファイルを編集していると、「⁠ああ、あの時点のファイルに戻したい。バックアップを取っておけばよかった」ということがあります。そうした後悔をしないで済むように、変更を加える前のバックアップを取っておけるのがSVNなのです。Webデザイナーの皆さんには「MacのTime Machineのようなもの」と言うと分かりやすいかもしれません。

2つ目は「複数人でのファイル編集の管理」です。Web制作会社でサイトを構築する際、複数人で同時にファイルを触ることはままあります。AさんとBさんが同時にファイルを上書き保存しても、片方の更新部分が消えてしまうことのないように、SVNはきちんと交通整理をしてくれます。

SVNを使うとどんないいことがある？

ではSVNを使って「ファイルのバックアップ」や「複数人でのファイル編集の管理」ができると、実際どんないいことがあるのでしょう？すぐに挙げられるメリットは次のとおりです。

ファイルのバージョン（世代）管理ができるのでどれが最新版か分かる
ファイルがうっかり先祖返りしてしまったときに、元の状態にすぐ戻せる
誰が見ても「誰がいつどのファイルをどういう風に変更したか」がわかるので、変更箇所を都度説明しなくて済む
自分と他の人が同時に更新してしまったファイルをうまく1つにまとめられる
ソースコードや画像の更新前と更新後が目で見て分かる

SVNで管理対象となるのは、HTMLファイルやCSSファイル、PHPファイルなどのテキストファイルだけではありません。WordやExcelなどOffice系のファイル、IllustratorのAIファイルや、PhotoshopのPSDファイル、そして画像ファイルなど、あらゆるファイルをSVNで管理することができます。

SVNなんかなくてもバックアップは取れる？

もちろん、SVNがなくても「○○_20140612.php」のように日付をつけて変更前のファイルを保存しておくことはできます。しかし、いちいち手動でファイル名を変えるのは手間ですよね。しかも他のファイルからファイル名を指定してinclude（読み込み）していると、ファイル名が変わるとプログラムが動かなくなってしまうこともあります。それに、いざ「この機能を追加をする前の状態に戻したい」と思ったときにも、日付を付加しただけのファイル名を見ただけでは、どのファイルが「機能追加前の状態」だったか分かりません。

SVNでバックアップを保存するときには「○○機能を追加。動作確認済み」のようにコメントをつけることができます。そのため、ファイルが壊れたり先祖返りしたりして、バックアップから戻したいときは、このコメントや日付を見て「このときの状態に戻す」ことがすぐにできます。

このようにSVNを使うと簡単に、そして安全に、ファイルのバージョン（世代）管理ができるのです。SVNと言うと、複数人で開発するときに使うものというイメージかもしれませんが、一人で開発する場合でもバックアップシステムとして使うととても便利です。

SVNを使ってみたい！必要なものは何？

SVNを使うときに必要なのは、SVNサーバと、SVNクライアントと呼ばれるソフトが入ったパソコンの2つです。パソコンはWindowsでもMacでも構いません。SVNのバックアップはすべて、このSVNサーバのリポジトリ（Repository）という場所に保存され、必要な最新バージョンだけをSVNクライアントを使ってパソコンへコピーします。

SVNサーバは自分で用意してもいいですが、「⁠まずはSVNを試してみたい！」という方には、Backlogのフリープランがお勧めです。容量は100MBまでですが、すぐにSVNを使い始めることができます。また、Webデザイナーの皆さんが業務でSVNを使うときは、おそらくSVNサーバはすでに用意されていると思いますので、SVNサーバを用意してくれた担当者に「リポジトリのURLと、ユーザ名とパスワードを教えてください」と確認してみましょう。

それでは自分のパソコンにSVNクライアントをインストールしてみましょう。SVNクライアントはWindowsなら無料で使えるTortoiseSVN（トータスエスブイエヌ⁠）⁠、Macなら有料のCornerstone（コーナーストーン）やVersions（バージョンズ）がお勧めです。

SVNサーバと自分のパソコンを同期させよう

まずはSVNサーバのリポジトリから、最新のファイルたちを自分のパソコンにコピーしてきましょう。この作業をチェックアウト（CheckOut）と言います。要は自分のパソコンを、SVNサーバのリポジトリと同期させるのです。

チェックアウトするときには、バックアップとして保存されている古いファイルたちをコピーしてきては困りますので、最新のファイルをチェックアウトするようにしましょう。自分のパソコンに持ってきたリポジトリのコピーを、ワーキングコピー（WorkingCopy）と呼びます。

編集したファイルをリポジトリに戻そう

チェックアウトしてきたファイルは、パソコン上で普通に開いて編集できます。ファイルの編集が済んで、「この状態で一度保存しておきたいな」と思ったら、コミット（Commit）という作業を行います。コミットをする際には「○○機能を追加。対象ブラウザで動作確認済み」のようにメッセージをつけることができます。またファイルを新たに追加した場合は「SVNで管理する対象に加える」という意味で、コミットする前に追加（Add）をする必要があります。

コミットすることによって、リポジトリのリビジョン（Revision）が1つ上がります。リビジョンは、リポジトリのバージョン番号のようなものだと思ってください。リビジョンはコミットするたびに1つずつ上がっていきますので、SVNサーバで作ったばかりのリポジトリはリビジョン0ですし、そこへAさんがコミットすればリビジョン1に、さらにBさんがコミットすればリビジョン2になります。

コミットはバクの改修や、日々の更新といった小さい粒度で、ファイルを触る各自が行います。またこのコミットとは別に「Webサイトのリニューアルオープン」など、大きなリリースのタイミングで「今のファイル群をまるごと全部別の場所に保存して、いつでもそこに戻せるようにしておく」ための、タグ（Tag）というものも存在します。

他の人の更新内容を、自分のパソコンに反映させるには？

1人だけでSVNを使っていれば、最初に1度チェックアウトしたら、後は変更の度にコミットしていくだけで問題ありませんが、複数人でSVNを使っているときは、他の人がコミットして新しくなったリビジョンを、自分のパソコンに反映する必要があります。この作業を「アップデート（Update⁠）⁠」といいます。

手元のファイルが最新版でない状態で、編集をしてコミットしようとするとコンフリクト（Conflict）というエラーが発生してしまいます。たとえコンフリクトしても、マージ（Merge）すれば問題ありませんが、余計なマージをしなくて済むように、作業を始める前には必ずアップデートするのを習慣にしておくことをお勧めします。

アップデートによって「どのファイルが新しくなったのか？」が気になったら、SVNクライアントでログ（Log）を確認しましょう。ログを見ると、リビジョンごとに誰が、いつ、どのファイルを更新したのかが一目瞭然です。

コミットメッセージには何を書くべき？

コミットするときに書くメッセージに、一体何を書けばいいの？と悩んだら、1か月後に「ファイルが先祖返りした！やばい！この機能を追加した直後のJSファイルに戻したい！」と大慌てしている自分を想像してみてください。

どのリビジョンに戻せばいいのか、急いでコミットメッセージを確認するあなた。そこに並んでいるコミットメッセージが「更新しました」「⁠改修しました」ばかりだったらどうなるでしょう？きっと過去の自分のガクガク揺さぶりながら「何を！どう！変更したのか書けー！」と叫びたくなることでしょう。

コミットメッセージに「お問い合わせフォームに携帯電話番号チェック機能を追加。今まではどんな番号でも登録できていたが、080・090以外から始まる番号には、アラートを出して登録できないように変更した。対象ブラウザで動作確認済み」のように書いてあれば、このリビジョンに戻せばいいんだ！とすぐに分かります。

逆に誰が、いつ直したか、という情報は、SVNにコミットすると自動で記録されますので、メッセージに書く必要はありません。

あの日あのときのファイルに戻したい！というときは？

では「この機能を追加した直後のJSファイルに戻したい！」というときは、実際どうすればいいのでしょう？最新のリビジョンのファイルを、リポジトリから自分のパソコンへ持ってくるときはアップデートという作業を行いましたが、特定のリビジョンのファイルを持ってくるときも、同様にこのアップデートを行います。

アップデートを行う際に、最新のリビジョンではなく、「⁠3」や「26」などのリビジョンの番号を指定すると、そのリビジョンのファイルが自分のパソコンへと同期されます。ファイルが壊れたり、先祖返りしてしまったりして、「⁠あのときのファイルに戻したい！」というときは、リビジョンを指定してアップデートを行ってください。

SVNに「向く」ファイルと「向かない」ファイル

指定のリビジョン（例えば直前のリビジョン）と、手元のファイルで「何が違うのか？」は、差分（Diff）で確認できます。この差分は、HTMLやCSSなどのテキストファイルなら左右に並べて「直前のリビジョンの5行目から7行目が消されている」「⁠直前のリビジョンの46行目に、新しいコードが3行追加されている」のように確認できます。

また画像ファイルも、指定のリビジョンと手元のファイルを左右に並べて確認できます。このようにテキストファイルや画像など、差分を出すことができるファイルはSVNに「向いた」ファイルと言えるでしょう。

しかしAIファイル、PSDファイルなどのいわゆる「バイナリファイル」は、上記のように差分を出して比較することができません。SVNでバージョン管理はできますが、差分が出せないことによって容量も多く使ってしまいます。バイナリファイルをSVNで管理するときは、使い方に注意が必要です。

エピローグ：バージョン管理システムがあれば「どれが最新のファイル？」をなくせる

「あー、画像を更新するたびに、ファイル名変えて、追加してコミットしてたから怒られたのか！」

「そうだよー。これで『SVNでバージョン管理』の意味が分かった？」

「うん。頑張って使ってみる」

「本当にファイル名を変更したいときは、SVNクライアントのメニューから変えられるから。あとはいくらSVNを使っていても、コミットしていなければ、そのときのバックアップがなくて元に戻せないから気をつけてね」

「ファイルが先祖返りしちゃうときに備えて、定期的にコミットするようにするよ。あとさ、変更前の画像と並べてみられるの便利だね」

「そうね。慣れるまではちょっととっつきにくいと思うけど、最新版はどこー？って探し回るより、こういうバージョン管理システムを使った方が安心だし」

「あ、そういえばSVNと一緒にBTSも積極的に使ってくれって言われたんだけど、何それ？」

「その話はまた次にしましょ」

こうしてWebデザイナーの悩みが、また一つ解決されたのでした。

次回のお悩みは？

「SVNでコミットしたリビジョンと、Redmineのチケットを連動させてくれ、って言われた。なにそれ？」

次回のサーバ知識相談室は、BacklogやRedmineといった「BTS」についてご紹介します。バージョン管理システムとBTSを組み合わせて使うと、一体どんないいことがあるのでしょう？ BTSについて学んで、仕事をスムースに終わらせられるWebデザイナーになりましょう。