目次
Gitとは
自分1人でページの更新や運営をする分にはあんまりいらないのかもしれないが、複数人で1つのプロジェクトの更新や運営をすると必ず発生するファイルの入れ違いアップロードとかを防ぐために差分だけを更新してくれたり、誰がいつどこを更新したかを全て記録してくれるツール。
index.htmlを複数人で編集してもGitで管理してからFTPとかに上げていくことで安全に更新ができる。
また、運営しつつ新しい機能を追加したい時とかには機能追加用のコード編集場所を作って、運営中のコードを傷つけずに機能追加コードをいじることができたりする。
機能追加コードを触っているうちに運営中のコードに戻りたい！という時も運営中の編集場所にもどればコードが運営中のコードに戻ってくれたりもする。
プログラマーでは実務で必須なので簡単にでも勉強しておかないといけない。
詳しくはこちら。
ログイン
Gitは基本的にネットでソースを共有するので、そのソースの保管場所を提供してくれるサービスを使わなくてはいけない。
そのサービスで有名なのがGithubとBitbucket。
違いはいくつかあるが勉強用で使うのであればどちらでもいい気がする。
今回はBitbucketでやってみる。
特に難しいことはなく、メールアドレスかGoogleからログインなどすればすぐにサインアップができる。
自分のページができるが、ここのページでどうこうすることはなく、次に紹介するソフトで自分のPCとBitbucketのリポジトリを見やすく管理していく。 リポジトリとはそのプロジェクトのコードの貯蔵庫という意味。 OSでいえば単純にフォルダみたいな感じ。
プロジェクトフォルダ（PC）←これがローカルのリポジトリ
- 運営中のコードフォルダ ←ついでにこれがブランチという
- index.html
- product.html
- 機能追加のコードフォルダ ←ブランチ
- index.html
- product.html
- 運営中のコードフォルダ ←ついでにこれがブランチという
プロジェクトフォルダ（クラウド） ←これがリモートのリポジトリ
- 運営中のコードフォルダ ←ブランチ
- index.html
- product.html
- 機能追加のコードフォルダ ←ブランチ
- index.html
- product.html
- 運営中のコードフォルダ ←ブランチ
こんな感じで考えたらいいかと思う。
SourceTreeインストール
次にSourceTreeをインストール。
まず下のURLの右上のボタンをクリックして
同意すればダウンロード。
インストールしたら、まずメニューから設定をクリックし、
アカウントタブをクリック。認証方法はOAuthで。
追加をすれば先ほどのbitbucketのページに行ってからSourcetreeに戻ってくるので、それでアカウント追加完了。
アカウントが追加されたので、次にリモートリポジトリとローカルリポジトリを接続する。
Sourcetreeの小さいメニュー画面の中に「新規...」というのがあるので
それをクリックし、リモートリポジトリを作成。
またウィンドウが出てくるので、リポジトリの名前をつけて作成をクリック。
そうすると、さっきログインしたbitbucketでリポジトリが作成されている。
リモートボタンをクリックすると、こちらにもリモートリポジトリが追加されていることがわかる。 ローカルをクリックしてもまだ何もないので、リモートリポジトリをコピー（クローン）する。
sourcetreeのリモートタブにあるリポジトリの行のクローンというのをクリックすると、どこにローカルリポジトリを置くか設定してクローンができる。
これは後々フォルダ移動はできない？（できるかもだけどめんどくさそう）なのでちゃんと決めてからクローンする。間違えた場合はフォルダを移動ではなく削除してからクローンしなおす方が簡単。
クローンが終わると、こんな大きめのウィンドウが出るので、これで準備が完了。
他の人のGitをクローンして試すこともできたりするので、
ローカルから先に作って変更後にリモートリポジトリを使うこともできるけどリモートを先に作ってクローンの方を馴染ませといた方がいいのかもしれない。
コミット・プッシュ・プル
Gitでまずなにそれ？と思ったのはこの３つの言葉。 WEBデザインとかでは聞いたことなかったので全然馴染みがない。
簡単にいうとこんな感じかと思う。
プル
他の人がコードを更新したものを自分のPCのリポジトリ（ローカルリポジトリ）に差分を更新することで最新のデータにすること。1日のはじめに作業する時とか、こっちが更新する前とかに一旦プルをしておく習慣をつけるとよいと思う。
コミット
自分が変更したコードをローカルリポジトリに記録すること。コミットをすることでSourcetreeでは変更前と変更後が見やすく表示されてわかりやすい。どこを変更したかなどコミットする際にはコメントが必須。
プッシュ
コミットしたコードをリモートリポジトリに送ること。プッシュされると他の作業している人にも変更がわかる。
何回も変更をプッシュしたりすると履歴が増えて荒れるのでプッシュは１日の作業の終わりとか、機能の追加が完了してからなど区切りの時にプッシュをする。
プロジェクトの作成の流れ
プロジェクトを始める時とかのざっとした流れをはこんな感じかと思う。
- Githubとかに置いてあるプロジェクトのリポジトリをローカルにクローンする。もしくはクローンされていたら最初にプルをしてデータを最新にする。
- 初めて作業するなら作業用のブランチを作成する。 すでに作業用のブランチが他の人に作られていて、自分が途中から入る場合にはそのブランチに移動する。（これをチェックアウトという。チェックインじゃないんかい！と思うけどチェックイン＝コミットらしい）
- 作業を開始する。
- 作業が完了したり一区切りしたらコミットをする。
- コミットに特に問題がなければプッシュをする。
- 1に戻る
人によってはいくつかのブランチを行き来して開発していたりするのかも。
実務ではいきなりGit全般任されるとかはないと思うので、
最初はブランチ・プル・コミット・プッシュの流れだけわかってればGitに関しては迷惑かけないと思う笑
ただ間違えてコミットしちゃったとか、プッシュしちゃったとかあるので、そういうのがないように気をつける。
Gitの練習
ということで一旦簡単にGitの練習をしてみる。
sourcetreeの大きいウィンドウの真ん中にあるFinderで表示をクリック（mac使用）
gitのローカルリポジトリのフォルダに移動するので、そこに例としてhtmlのサンプルをダウンロードして保存する。
サンプルはこちらからダウンロードした。
そうすると、Sourcetreeが保存したファイルで埋め尽くされる。
これを一旦全部チェックをして、下のコミットメッセージに「first commit」と入力してコミットをする。
するとまた何もないウィンドウになるが、履歴をクリックするとコミット内容が表示される。
特に問題がなければプッシュをクリックする。 プッシュするブランチのmainにチェックを入れてOKで完了。
無事プッシュができた。mainというのはローカルリポジトリのmainブランチ、ということでorigin/mainというのはリモートリポジトリのmainブランチということ。
bitbucketのサイトも念の為確認してみると、こちらでもファイル確認できる。
次に、index.htmlを適当に変更してからSourcetreeをまた見てみると、
変わったコードが自動的に表示される。
変更前と変更後が表示される。
タイトル変更とコミットメッセージを入力して、コミット。
そうすると、履歴かmainブランチで新しい行が追加される。
現状はmainブランチで1コミットがまだプッシュされていない状態と表示されている。
他の人も同じ作業をしている可能性とかも考えてプッシュをする前にも念の為プルをしておいた方がいいかもしれない。
(たしか同じ作業を他の人がしていたらエラーが起きるはず)
プルして問題なく、プッシュを押すと完了。
mainタグとorigin/mainタグが一番上に移動している。
これはローカルリポジトリもリモートリポジトリもここが最新のデータ状態ですよということを表している。
Gitはそんなに難しくない
こんな感じで進めていくので、思ったより難しくないのであまり身構えないでも大丈夫そう。 頻度も多くないし万が一間違えてプルしちゃったとかでもキャンセルする方法はあるのでまたこれはこれでまとめて忘れないようにする。
入門はこれがわかりやすい
