Gitは使えたほうがいいと聞くけれど、黒い画面にコマンドを打つのが怖い。Webデザイナーの方からよく聞く話です。
ただ、VS Codeを使えばGitはほとんどボタン操作だけで始められます。コマンドを打つのは最初のインストールと設定のときだけで、日々の保存作業はクリックで完結します。
この記事では、Gitを触ったことがない方向けに、インストールから最初のコミットまでを説明します。
- Gitとは何か、GitHubとは何が違うのか
- Mac / WindowsそれぞれのGitインストール手順
- VS Codeでローカルリポジトリを作る方法
- コマンドを使わずにコミットする手順
- 後から見返せるコミットメッセージの書き方
Gitとは何か
Gitは分散型バージョン管理システムと呼ばれるツールです。ソースコードやプロジェクトファイルの変更履歴を記録して、いつ誰がどこを変えたかを追跡できます。
Gitでできる主なことは、
- バージョン管理ができる
- バックアップと復元ができる
- 編集内容を複数人で共有できる
- 複数人で修正した部分を一つに統合できる
Photoshopで言えば、別名保存を無限に、しかも差分つきで自動管理してくれるようなものです。index_最終.html、index_最終2.html、index_本当に最終.html が増殖していく、あの現象がなくなります。
GitとGitHubの違い
混同されやすいのですが、この2つは別物です。
| 役割 | 動く場所 | |
|---|---|---|
| Git | 変更履歴を記録するツール本体 | 自分のパソコンの中 |
| GitHub | Gitの履歴をインターネット上に置いて共有するサービス | Web上（クラウド） |
Gitは自分のパソコンの中だけで完結します。GitHubは、そのGitの履歴をチームに共有したりバックアップしたりするための置き場所です。
この記事で扱うのはGitまで、つまり自分のパソコンの中だけです。ここが使えるようになれば、GitHubは後から足せます。
いきなりGitHubから始めると「アカウント作成」「リモートリポジトリ」「push」と覚えることが一気に増えます。まずはローカルだけで履歴を残す感覚をつかむのが、挫折しにくい順番です。
なぜ必要か
どこかでミスしてあの頃のコードに戻りたい。複数人で作業しているとき同じファイルを作業して作業が被ってしまった。そんな経験ありませんか？
Gitを使えば過去のファイルに戻ることや、同じファイルを作業しても一つに結合することが容易になります。著者は400人規模の制作会社で昔働いていたのですが、バージョン管理ツールが無かったらと思うとゾッとします。人数が増えるほど、あるとないとで事故の起きやすさが変わってきます。
Gitのインストール
Macの場合
Macは最初からGitが入っているので、まず確認してみてください。ターミナルに下記を入力します。
git --versiongit version 2.39.0 のようにバージョン番号が出てくれば、すでにインストール済みなので対応不要です。
Windowsの場合
下記公式サイトからインストールをして下さい。
インストール中は選択肢がたくさん出てきますが、初めてなら基本的にすべてデフォルトのままで問題ありません。
ユーザー名とメールアドレスの設定
インストールが完了したら、ユーザー名とメールアドレスを設定します。誰が変更したかを履歴に残すための情報です。
Macの方はターミナル、Windowsの方はコマンドプロンプト（またはGit Bash）を開いて、下記を順に入力して下さい。
-
ユーザー名の登録
○の部分に自分のユーザー名を入れて下さい。
git config --global user.name ○○○ -
メールアドレスの登録
○の部分に自分のメールアドレスを入れて下さい。
git config --global user.email ○○○@○○○ -
設定内容を確認
user.nameとuser.emailに先ほど入力した内容が入っていたら成功です。git config --list
--global はパソコン全体の共通設定という意味です。案件ごとに別の名前を使いたい場合は、そのフォルダの中で --global を外して実行すると、そのプロジェクトだけの設定になります。
Visual Studio Codeのインストール
今回はコードが苦手な方へVS Codeを使ってGitの説明をしますので、インストールをお願いします。
https://code.visualstudio.com/
VS CodeにはGit機能が最初から入っているため、追加の拡張機能なしでコミットまで進められます。
ローカルリポジトリの作成
リポジトリとは、Gitが変更履歴を記録する作業フォルダのことです。自分のパソコンの中にあるものをローカルリポジトリと呼びます。
-
Gitを使用するフォルダを作る
好きな場所に作成して下さい。
-
VS Codeで開く
フォルダをVS Codeにドラッグ&ドロップすればすぐに開けます。
-
ターミナルを開く
メニューの「ターミナル ⇒ 新しいターミナル」にあります。ターミナルの初期フォルダはVS Codeで開いているフォルダと同じになるので、そのまま操作ができて楽ですね。
-
Gitコマンドを実行する
フォルダの中に
.gitフォルダが作られ、ここに履歴が記録されていきます。git init
.git フォルダは隠しファイルになっていますので、表示されない方は下記の対応をお願いします。
- Macの場合：Finderで
command + shift + . - Windowsの場合：エクスプローラーを開き、「表示タブ」⇨「ファイル名拡張子」と「隠しファイル」にチェックを入れて下さい
.git フォルダには履歴のすべてが入っています。中身を直接編集したり削除したりすると履歴が壊れるので、存在を確認するだけにとどめてください。
これで前準備は完了です！
ローカルリポジトリにファイルを追加する
続いて、先ほど作成したローカルリポジトリにファイルを追加する方法です。ここからはコマンドを使わず、VS Codeの画面操作だけで進めます。
-
フォルダ内に変化を加える
HTMLファイルを作るなど、なんでも構いません。変更があると、VS Code左側のソース管理アイコン（枝分かれした形）にバッジが表示されます。
-
アイコンをクリックする
「変更」の一覧に対象のファイルが並びます。
-
「＋」ボタンを押す
今回の履歴に含める、という印がつきます（ステージング）。
-
メッセージを入力してコミット
何をしたかを入力して、その下にあるコミットボタンを押します。
「＋」を押すのは、変更したファイルの中から今回の履歴に含めるものだけを選ぶためです。作業中で中途半端なファイルは追加せずに残しておく、といった使い分けができます。
コミットメッセージの書き方
個人的にですが、著者は「年/月/日 作業者名 作業内容」としてメッセージを入力してログを残すようにしています。
いつ作業をしたか、誰が担当だったか、どんな作業をしたか。日付と作業者名はGitが自動で記録してくれるので本来は書かなくてもわかるのですが、癖として記録を残すようにしています。
最低限、何をしたかだけは具体的に書いておいてください。「修正」ではなく「トップページのファーストビューの余白を調整」と書いておくと、半年後の自分が助かります。
変更内容を誰がいつ書いたかを行単位で確認したい場合は、GitLensという拡張機能を入れると、コード行の横に作業者と日付が表示されるようになります。
これでコミット作業とログの確認作業は完了です。お疲れ様でした。
よくある質問
Gitはデザインデータ（PSDやAiファイル）の管理にも使えますか？
使えますが向いていません。Gitはテキストファイルの差分管理が得意で、画像やPSDのようなバイナリファイルは差分が取れず、更新のたびにファイル全体が保存されてリポジトリが重くなります。デザインデータはFigmaのバージョン履歴やクラウドストレージ側に任せて、Gitはコードの管理に使うのが無難です。
コミットを間違えました。取り消せますか？
取り消せます。VS Codeのソース管理パネルの「…」メニューから「コミット」⇒「前のコミットを元に戻す」を選ぶと、直前のコミットを取り消せます。ローカルのコミットなら、やり直しは何度でもききます。
GitHubのアカウントは必要ですか？
この記事の範囲では不要です。Gitは自分のパソコンの中だけで完結するため、アカウントがなくてもバージョン管理は始められます。チームで共有したり、別のパソコンから続きを作業したりする段階になったらGitHubを検討してください。
ターミナルのコマンドは覚えないとダメですか？
最初のうちは不要です。この記事で紹介したように、インストール直後の設定と git init 以外はVS Codeのボタン操作で進められます。ブランチやマージを扱うようになるとコマンドのほうが早い場面も出てきますが、その段階で少しずつ覚えれば十分間に合います。
最後に
今回はインストールからコミットまでを説明させていただきました。
VS Codeを使うことでターミナルやコマンドプロンプトでの作業を少なく済ませることができ、コードを書くのが苦手な方でも始めやすいのではないでしょうか。
また、Gitについて紹介させていただきましたが、GitHubと呼ばれるサービスもあり、そちらについても今後解説できたらと思います。
ちなみに著者はGitを始める際「サルでもわかるGit入門」「いちばんやさしいGit&GitHubの教本」を参考にしました。
https://backlog.com/ja/git-tutorial/
https://book.impress.co.jp/books/1121101087
サルでもわかるGit入門で苦戦して、自分はサル以下かと思いながら作業したのを思い出しながら今回書かせていただきました。
Gitはさまざまなプログラミングで使うことができる汎用的な技術なので、コードが苦手な方でもぜひVS Codeと連携して試してみて下さい。
