フロントエンド未経験Webクリエイターが0から学んだスキルの覚書[2]Git(ギット)

『Git』とは、プログラムのソースコードなどの変更履歴を記録・追跡するための分散型バージョン管理システムのこと[wikipedia]

Git初心者の方にはたにぐちまことさんの『Git+GitHub入門』(Youtube)がスゴクわかりやすかったので、特におススメです!

初めてGitを触った自分でも動画通りに作業を進めるだけで、Gitの基本的な部分を何となく体系的に理解できた程、わかりやすく丁寧に説明してくださっています。
全10回分あるようですが、自分のように初歩的な使い方を知りたいだけであれば「#01:リポジトリーの作成とコミット~ #06:プルとリモートリポジトリーとのコンフリクト」までの内容を理解すれば、概ね大丈夫かと感じました。

『Git+GitHub入門』で学んだことの覚書

(1)Git+GitHub入門 #01:リポジトリーの作成とコミット

【メモ】
リポジトリ:Gitのバージョン管理情報の履歴管理を行うもの
コミット:リポジトリへ変更を記録すること

【Gitを始めるのに必要な(有効な)ソフトフェア】
(1)SourceTree[GitのGUIのツール]


(2)Visual Studio Code[クロスプラットフォームな高機能エディタ]


(2)Git+GitHub入門 #02:ステージングとリセットのSoft/Mixed/Hard

【メモ】
Gitは1つの作業ごとにコミットし、作業を細かく分けるのが基本
基本は[リセット:Mixed]を使用する


(3)Git+GitHub入門 #03:ブランチとチェックアウト

【メモ】
ブランチ:履歴管理を枝分かれさせたもの
※masterブランチは全ての根本になるため、削除や名称変更してはならない。


(4)Git+GitHub入門 #04:マージ・リベースとコンフリクト

【メモ】
マージ:マスターブランチに対して行う作業で、マスターブランチはそのまま残る 分岐が残る ex.バージョンアップなど
リベース:マスター以外のブランチに何かを合流させる場合に使用する 分岐が残らない
コンフリクト:マージする際に、同じ場所に修正が加えられていて自動的にマージを行えない状態。基本的にはコンフリクトが起こらないように調整する

※マージ・リベース・コンフリクトは最も難しい部分なので、知識として知っているだけでは不十分。実案件で経験を積む必要ありとのこと。


(5)Git+GitHub入門 #05:リモートリポジトリーの追加とプッシュ

(6)Git+GitHub入門 #06:プルとリモートリポジトリーとのコンフリクト]

GitHub:Gitをホスティング(GitHubが保有するサーバーにGitというツールをインストールして使いやすい形でユーザに提供する)するもの
オープンソースでコミュニティが作られているため、人気がある
※登録は英語のみ

【GitHubのメリット】
ローカルリポジトリをWeb上に預けることができる。
一番大きいのはコラボレーション(複数での開発)ができること。

【メモ】
リモートリポジトリ:複数人で共有するためにサーバー上に作られるリポジトリ
ローカルリポジトリ:開発用に各個人のマシンに置かれるリポジトリ

GitHubと連携すると[プル・プッシュ・フェッチ]の3つの機能が使えるようになる
プッシュ:ローカルリポジトリとリモートリポジトリのマージ
プル:リモートリポジトリ上で起こった作業を取り込む
フェッチ:リモートリポジトリから変更された状態を知る

※リモートリポジトリのリセットは複数人に影響するため、基本してはならない。

上記講座を元に制作したGitHubの個人アカウントがこちらになります。

現状まだ実務でのGit使用経験がなく、初歩的な部分しか理解していない状態です。
ですが、Gitの基本的なことを理解するだけでも、自身のサンプルをGitHubに上げて共有したり、他の方が作った制作物のリモートリポジトリを取り込んだりといった、多くの恩恵を受けられるようになりました。

以前の記事『クリエイター(絵描き)のサイト制作に活用したWebアニメーションの覚書』で説明させていただいたサンプルもGitHubにアップしてあります。
ex.クリエイター(絵描き)のサイト制作に活用したWebアニメーションの覚書[3] AnimateCC編(1)のサンプル

GitHubでのソースコードの公開について

ソースコードを公開する際には『GitHub Gist』を使用すると簡単にソースコードを表示でき、とても便利です。
HTMLに埋め込む場合も、提供されている<script>タグをコピペするだけで埋め込み可能です。
ex.GitHub Gistのサンプル「AnimateCCで出力されるJSファイル 」

 playful it!
GitHub Gistを使ってWordpressサイトにソースコードをキレイに表示する | playful ...
http://itotetsu.work/archives/64
Wordpressのサイトにソースコードを埋め込もうとしたことが何度かありますが、どうもインデントが思うように入らなかったり、「>」のようにエンコードされた文字が表示されてしまったりとうまくいった試しがありません。 今回はWordpressのエディタにソースコード...

今回参考に学習させていただいたたにぐち まことさんの『Git+GitHub入門』が、なぜこれほどまでにわかりやすいのかもちょっと考えてみて、以下の点が大きいのかなと感じました。

  • (1)操作を1つ1つ丁寧に説明してくれていて、動画の通りの操作手順で全て完了できる。
    ⇔わかりにくい説明:ショートカット等を多用し、初心者目線だといきなり手順が飛んだように感じおいていかれる。
  • (2)ブランチ・コミット等Git特有の専門用語をそのまま使わず、誰でも理解できる言葉に置き換えて説明してくれている。
    ⇔わかりにくい説明:初心者だと用語が理解できず、迷っている間においていかれる。

たにぐち まことさんのYoutubeチャネルではGit以外にも、HTML5/CSS3~Vue.jsやDB/SQL等々様々な技術についてスゴクわかりやすく解説してくださっているので、いつも参考にさせていただいています^^

SNSでもご購読できます。

コメントを残す

*