どんな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（バージョンズ）がお勧めです。