メディア表現 VI 11.バージョン管理
目次
本日の内容
- 【第11回】バージョン管理 ファイルの更新記録を管理するGit/Githubについて学修する。
をやっていきましょう。
前回のおさらい
Teams, Slack等プロジェクトをするために便利なツールはどんどん使っていってくださいね。
Notionもどんどんカスタマイズして使いやすくしていきましょう。
バージョン管理
バージョン管理とは？
現在でも課題提出などで当てはまるかもしれませんが、仕事をし始めるとたくさんの書類を作成することとなります。
そして、
- 書類自体をどんどんブラッシュアップする
- 内容を追記する
等の理由により修正を加えることが日常的に起こります。
そうすると
- どこを変更したのか？
ということを管理したくなります。後で、「あ、やっぱり前の方が良かったので、元に戻して！」なんて指示もあったりします。
これは、いわゆる文書だけでなく、デザイン、映像等全てに当てはまることです。
この時に、元に戻る方法を忘れてしまうと非常に困ります。さて、どうしたものでしょうか？
ファイル名等によるバージョン管理
一番オーソドックスなのは、
- 時間割案_ver100.txt
- 時間割案_ver101.txt
や
- 時間割案_20221125.txt
- 時間割案_20221213.txt
等のように、ファイル名にバージョン、日付、日時を付加して管理する方法です。(.txtとテキストファイルになっていますが、どんな拡張子でも利用できます。)
個人的にはこの方法が確実なため、現在も利用しています。
ちなみに、イラストレーターの入稿時、テキストをアウトライン化することがあります。 後で、誤字に気づいた時に、管理をしていないと困るため
- 名刺_20221125.ai
- 名刺_20221125_ol.ai
と、アウトライン化する前、後のファイルを保存しておきます。誤字があたっときには「名刺_20221125.ai」をコピーして
- 名刺_20221130.ai
等とリネームして、修正を加えます。
ファイルの比較
少し修正しただけだと、どこを修正したのか確認するのが大変な時があります。 テキストファイルであれば、diffというコマンドを利用すると簡単に比較できます。
やってみよう
- diff_text.zipをダウンロードして解凍する。
- わかりやすくするためにデスクトップに移動
- コマンド+スペースでSpotlightを出してターミナルを開く
- username$ の後に **cd **(cdスペース)と入力、デスクトップのdiff_testフォルダをドラッグ&ドロップ
- **cd /Users/sammy/Desktop/diff_test **みたいになったらリターン（作業するフォルダを指定しています）
- diff syllubus_ver10.txt syllubus_ver11.txt と入力してリターン
すると、2箇所のファイルの違う箇所がリストアップされます。
diffの説明
- 「12c12,15」とは12行目が変更（change）され12行目から15行目の内容に取って代わったことを示します。
- その後に、変更前、「—」変更後、と表示されます。
他にも「5d4」とあれば、5行目が削除(delete)されて、4行まで詰められたという意味になります。
ちょっと使いづらいですね。
VSCodeでやってみよう
- VSCodeで新しいウィンドウを開く
- 二つのファイルをドラッグ&ドロップ
- syllubus_ver10.txtをアクティブに
- Command+Shift+PでCompareと入力し、「ファイル：アクティブファイルを比較しています」を選択
- syllubus_ver11.txtを選択
左右にウィンドウが分かれ、比較することができます。
右上の「…」からインラインビューを選択すると、一つのウィンドウで異なっている部分が上下に並んで比較することができます。
バージョン管理システム
バージョン管理システムとは
手作業ではバージョン管理が大変だよね、ということでバージョン管理システムというものが開発されます。
- SCSS(1972) テキストファイルのみに対応
- RCS(1982) バイナリファイルにも対応
- CVS(1990) サーバ上で管理
- SVN,Subversion(2000) ファイル名・ディレクトリ名の変更に対応
- Git, Mercurial(2005) より高機能に(サーバ上のリモートリポジトリ、PC上のローカルディレクトリ)
- 主流はGitに
参考：Gitが出来るまでの歴史と将来の展望(バージョン管理システム)
個人的にはWebの仕事において、バージョン管理の必要に迫られていたため、Subversionあたりを試した記憶があります。でも、あまり使い勝手が良くなくて、結局手動での管理をしていました。
ですが、現場を離れてGitがさらに注目されているなぁ、と感じ始めました。至る所で使われている時代の流れを感じました。
また、このようなTweetが目につくようになりました。
プログラマーやWebデザイナーあたりでは当たり前に利用されていています。
Gitはテキストファイル・バイナリファイル対応なため、文書全てを管理することが可能ということを意味しています。
というわけで、情報系学科？ですが、情報デザインとしては知っておいてほしいとの思いでシラバスに追加しました。
実際、特別講師の先輩に聞いても当たり前のように業務で利用しているとのことです。
Gitとは？
Gitで管理しているファイルであれば、コンピュータ上でファイルの編集履歴を管理できるので、古いバージョンから新しいバージョンまでの管理が簡単に行うことができます。
Gitでできること
- 古いバージョンに簡単に戻せる
- 新旧のファイルを一元管理できる
- 編集した履歴を複数人で共有できる
- 複数人で修正した部分を一つに統合できる
誰が使える？
テキストファイル・バイナリーファイル、なんでも扱えるため、
- プログラマー
- Webデザイナー
に限らず、あらゆる事務作業に利用できます。
Gitの構成
リポジトリ
ファイルやディレクトリを入れておくもので、二つに分かれます。
- リモートリポジトリ(特定のサーバ上にあり、複数人で共有することが可能)
- ローカルリポジトリ(自分のPC上にある)
普段の作業はローカルリポジトリで行い、共有するときにリモートリポジトリに作業内容を上げることができます。
コミット
ファイルの保存をもう少し大きくした感じで、「この作業が終わったよ」「ここ修正したよ」という宣言みたいなものです。
作業や修正は複数ファイルにわたることがあるため、
- ワークツリー：作業しているところ
- インデックス：コミットに関連するファイルを登録するところ
の二つがあります。
クローン
リモートリポジトリからローカルリポジトリに丸ごとダウンロードしてくる機能となります。
プル
リモートディレクトリとローカルリポジトリとの差の部分だけダウンロードして情報を最新にする機能です。
プッシュ
ローカルリポジトリにあるファイルをリモートリポジトリに上げる機能です。
ブランチ
複数人で作業していると、Aさんはこのファイルをいじってるけど、Bさんはこのファイルをいじっている、ということが起こり、混乱の元となります。
そのため、ブランチ、という考え方を使って分岐して作業をします。
マージ
ブランチで作業しているものがOKになると、主となるマスターブランチと統合する必要があります。これをマージと言います。
ブランチ・マージは次のような関係になります。
GitHubとは？
GitHubはWebサービスで、リモートリポジトリを管理するものです。 Web用のUIがあるため、便利に利用することができます。
他にも
- Bitbucket
- GitLab
等あるのですが、現状Github一人勝ちのようです。 Google Trend : Github, Bitbucket, Gitlab
そして2018年にはマイクロソフトが買収を行いました。
使ってみよう
OSのバージョン等によって差がありそうですが、やってみましょう。
gitのインストール
- Command+スペースでterminalと入力して、terminal.app(ターミナル)を開く
- git – versionと入力してリターンと押すと、コマンドラインツールをインストールするように促されるので、インストール
- 改めてgit – versionでバージョンが出ればインストール完了
gitの初期設定
自分が誰かを設定しておきましょう。
$ git config --global user.name "ユーザーネーム"
$ git config --global user.email "eメールアドレス"
とターミナルで入力しておきましょう。 $マークは入力しません。スペースに気をつけましょう。 ユーザーネーム、日本語やめておきましょう。例えばこんな感じです。
$ git config --global user.name "John Doe"
$ git config --global user.email johndoe@example.com
GitHubのアカウントを作成しよう
- GitHubにアクセス
- GitHubの登録の緑ボタンをクリック
- ユーザ名・メールアドレス・パスワードを入力して、人間であることを証明してくださいw。ユーザ名はドメインにも使われます。(sammypprのように)
- 「Welcome to GitHub」と表示されて何点か質問されますが、スルーしてもOKそうです。「Complete setup」をクリックしましょう。
- メールが届くので、「Verify email address」をクリックして終わりです。
GitHub上でリモートリポジトリを作成しよう
最近挙動が違うかもしれませんが…
- Create repositoryをクリック
- name your new repository…のところにtest-git
- Publicを選択
- Add a README fileにチェック
- Create repositoryをクリック
- Codeをクリックすると、リモートリポジトリのURLが表示されるので、URL右のボタンを押して、コピーしておきましょう。
VSCodeでクローンする
- VSCodeで新しいウィンドウ
- アイコンの上から3番目をクリック
- Clone Repositoryをクリック
- コピーしたURLをペーストしてClone from GitHubをクリック
- 許可を求めてくるので、許可(Allow)
- ブラウザでサインイン
- VSCodeを開くか聞かれたら開く
- OK
- もう一度Clone Repository
- ローカルリポジトリの場所を指定してクローン
ローカルリポジトリにファイルを追加してプッシュまで
- アイコンの一番上をクリック
- test.txtとしてファイルを作り、なんでもいいので、中身を書いて保存しましょう。
- 上から3番目のアイコンをクリック
- Changesにtest.txtがあるはずです。ファイル名右の+を押すと、StagedChangesに移ります。これ、説明したインデックスのところです。一時的においておきます。
- Messageに初めてのコミットとか書いてCommit。次にSync Changesとすると、プッシュされリモートリポジトリに変更が反映されます。
- ファイルに追記して、Sync Changesまでを2,3回やってみましょう。メッセージも適当に中身変えましょう。
コミットの確認
コミットの履歴を見るために拡張機能入れます。
- 拡張機能でGit Historyを検索してインストール
- test.txtがアクティブな状態でCtrl+Shift+Pでgit logと入力して、「Git: View History(git log)」を実行
- コミット履歴が表示されます。
- 古い方のコミットを押してからViewを押せば、その当時のファイルの内容を表示することができます。
バージョン管理どうですか？？？
GitHubでできること
元々gitはコマンドライン(ターミナル)で使うことを想定されていますが、VSCodeのおかげで少し難しさは消えたのではないでしょうか。
ここまででいっぱいな気がするので、ここまでにしておきますが、
- 複数人でのソース管理
- ホームページの公開
- マークダウンでのホームページの公開
等もできます。
ぜひ色々試してみてください。
GitHubを使ってMarkdown文書を５ステップでホームページとして公開する方法