べくとりうむ.py Written by TicTak(※現在ブログ工事中のため、見づらい点があり申し訳ないです)

【初めての方向け】GitHubの全体像と使い方を解説します【gitコマンドの全体フロー図付き】

Git Programming Basic

こんにちは、ちくたっく(@tictak_py)です。

今回は、ソースコード管理ツール「GitHub」の全体像と使い方について紹介していきます。

前回、GitHubの始め方に関する記事を書いたので、「そもそもGItHubって何?」という方は先に以下の記事を参考にしてください。

こんな方に読んで欲しい記事です

  • 「GitHub」の全体イメージと基本的な使い方を理解したい方
  • これから「GitHub」を使い始めていきたいと考えている方

今回の記事では「ローカルで作成したテキストファイルをGitHubにアップロード」することを目的として、基本的なコマンドを紹介していきたいと思います。

GitHubでは色々なコマンドがあり、「何をやっているかイメージしづらい」点が難しく感じさせている要因になっていると思うので、直感的な解釈が出来るようにお伝えしていきます。

【GitHub】GitHubの全体イメージと基本コマンド

事前に知っておくべき基本用語

まず最初に、Gitコマンドを打って操作する前に、知っておいた方がいい用語があるので紹介しておきます。

厳密な定義を覚える必要はありませんが、言葉のイメージが理解出来ていないと、この後紹介するコマンド操作時に「何をやっているかわからない」といった状態になります。

知っておいた方がよい用語の一覧は下記の通りです。

  • リポジトリ:コードの置き場(データの保管場所)のようなイメージ
  • ローカルリポジトリ:ローカル環境(自分のPC)内にあるリポジトリ
  • リモートリポジトリ:リモート(ここではGitHub)上にあるリポジトリ
  • ステージ:インデックスとも言い、ローカル内にある一時的な保管場所
  • ワークツリー:ローカル内にある作業場所で、ディレクトリ(フォルダ)のこと

これ以外にも重要な用語はありますが、基本を理解してから肉付けしていけば十分です。

そして、今回の目的と用語を紐づけたイメージ図が以下となります。

今回の目的と基本用語のイメージ図

「ワークツリー」でテキストファイルを作成し、それをリモートリポジトリである「GitHub」で公開できるようにすることが目的ですが、いきなりワークツリー(作業フォルダ)からGitコマンドでGitHubにアップロード出来るわけではない点がポイントです。

ローカルは上図のように「3部構成」のイメージとなっており、「ローカルリポジトリ」からでないと「リモートリポジトリ」にファイルをアップロードできないといったイメージを持っておくと理解しやすいです。

そのために、以下で紹介するコマンドでは、「ステージにファイルを移すコマンド」や「ステージからローカルリポジトリにファイルを移すコマンド」などが出てきます。

今回使う基本コマンドの一覧

続いて、今回使っていくGitの基本コマンドの一覧を紹介しておきます。
この後、実際に操作する場面で必要となるコマンドなので、必要に応じて見返してみてください。

  • ①「git init」:ローカルリポジトリ作成するための初回作業
  • ②「git remote add origin (GitHubのURL)」:使いやすくするための初回作業
  • ③「git add」:ワークツリーのファイルをステージに追加する時に使用
  • ④「git commit -m (メッセージ)」:ローカルリポジトリに追加する時に使用
  • ⑤「git push -u origin master」:リモートリポジトリに追加する時に使用

先ほどのイメージ図に上記コマンドを合わせたイメージ図が以下となります。

gitコマンドのイメージ図

これから「リポジトリの作成」「GitHubのURL登録作業」「基本コマンド使用」の3ステップにわけて、テキストファイルをGitHubに公開するまでの道のりを紹介していきます。

各ステップで必要となるコマンドとの関係性は以下のようになりますが、基本的に初回作業を終えた後はコマンド③~⑤がメインとなりますので、コマンド①②は初回時に必要な作業と認識しておいてください。

  • 【ステップ①で使うコマンド】コマンド①「git init」(初回のみ)
  • 【ステップ②で使うコマンド】コマンド②「git remote」 (初回のみ)
  • 【ステップ③で使うコマンド】コマンド③~⑤「git add / git commit / git push」

【ステップ①】リポジトリの作成(初回作業)

リモートリポジトリの作成(GitHub側)

まず最初に、「コード置き場」となる「リポジトリ」を作成していきましょう。
リポジトリは「リモート側(GitHub)」→「ローカル」の順に作成していきたいと思います。

前回記事の続きでこの記事を読んでくれている方は、以下画面のように自分専用の空っぽページが出来ているはずです。赤枠内の「Create repository」を押して、リポジトリを作成していきます。

新規リポジトリの作成選択画面

すると、以下のように必要事項を入力・選択する画面になります。
ここでは、「リポジトリ名」「公開or非公開」の区分を考えて進めるようにしてください。

今回は、リポジトリ名を「github-practice」、「公開」の区分で作成しています。

新規リモートリポジトリの作成画面

リポジトリの作成が完了すると、以下のように色々な情報が書かれている画面に移ります。ここでは、「自分が設定したリポジトリ名」「GitHub上のURL」「始めた方向けの基本コード」の3つの情報が記載されていることをわかっていればいいかなと思います。

リモートリポジトリの作成完了後の画面

ちなみに、ステップ②では「自分が作成したリモートリポジトリ(GitHub)のURL」を使っていきます。

ローカルリポジトリの作成(自分のPC側)

続いて、ローカルリポジトリを作成していきます。
今回は、わかりやすさを重視して「デスクトップ」に「github-basic」というフォルダを作って進めていきたいと思います。

デスクトップ上に「github-practice」フォルダを作成

ちなみに、gitコマンドはコマンドプロンプトやターミナルで入力してもらえればOKですが、僕はWindows環境でvscodeとwslを連携させて使っています。興味のある方は以下記事を参考にしてみてください。

続いて、「ローカルリポジトリ」を作成するgitコマンド「git init」を入力します。
すると、以下のようにフォルダ内に「.git」というフォルダが新たに出来ていることがわかります。

「git init」コマンドの入力

新たにフォルダが追加されていることが確認出来る

これで、gitコマンドでやり取りするためのリポジトリの作成が完了しました。

【ステップ②】リモートリポジトリとのリンク

続いて、GtiHub(リモートリポジトリ)で作成したURLのリンク作業をしていきましょう。

これは、ローカルリポジトリからリモートリポジトリに公開する際に、毎回URLを入力するのは面倒なので、効率的に作業を出来るようにするための設定と思ってもらえればいいかと思います。

先ほど作成したGitHub上のURLをコピーして、「git remote add origin <URL>」を入力します。<URL>部分にコピーしたリングをペーストしてください。

こうすることで、毎回GitHubのURLを入力することなく、「origin」という名前で呼び出しが出来るようになります。僕も詳しくは知りませんが、「origin」とするのが一般的なようです。

「git remote」コマンドの入力画面

入力が完了しても特に反応がありませんが、エラーが出なければ成功しているはずです。ちなみに、ここで入力したコードは「リモートリポジトリ作成時」に出てきた以下コードと同じです。

リモートリポジトリ(GitHub)作成時のコード

以上で初回作業は完了となります。
続いて、メインとなるローカルリポジトリからリモートリポジトリへのアップロードを見ていきましょう。

【ステップ③】基本コマンド|add/commit/push

コマンド「git add」|ステージに追加

ここまでの作業を簡単に確認しておきます。

以下図における①②が完了したので、これから「テキストファイルの作成」とコマンド③④⑤をしていきます。その結果、テキストファイルがGitHub上で公開されていることを確認することが目的です。

【再掲】①②(完了済)|③④⑤(今から実施)

まず、中身が空っぽのテキストファイル「hello.txt」を作っておきます。

テキストファイル「hello.txt」の作成

テキストファイルを作成したので、「git add .(ドット)」でステージに追加します。
「.(ドット)」は「すべて選択」の意味です。

「git add」コマンドの入力

特に反応はありませんが、これでファイルがステージに追加されています。
確認するコマンドもありますが、一通りの流れを理解してから手を出した方がいいので今回は省略します。

コマンド「git commit」|ローカルリポジトリに追加

ステージにファイルを追加することが出来たので、続いて「git commit」コマンドを用いてローカルリポジトリに追加していきます。

「git commit」にも書き方がいくつかありますが、今回は「git commit -m <メッセージ>」でメッセージ付きの方法でファイルをローカルリポジトリに送ることにします。

「git commit」コマンドの入力

これでローカルリポジトリへの追加は完了です。
色々とコマンドを打ってきましたが、ここまでが「ローカル」内の話となります。

コマンド「git push」|リモートリポジトリ(GitHub)に追加

最後に、「ローカルリポジトリ」にあるファイルを「GitHub(リモートリポジトリ)」に追加します。

「git push -u origin master」と入力し、GitHubの「ユーザー名」と「パスワード」を入力すればOKです。

「git push」コマンドの入力

ステップ②の段階でリンク作業をしておいたので、origin masterと入力するだけで追加が可能となります。ちなみに「-u」とすることで、次回からは「git push」だけのコマンドでファイルを送れます。

ちなみに、ここまで紹介してきたコマンドは「リモートリポジトリ作成時」の以下画面と同じ内容になっています。

リモートリポジトリ(GitHub)作成時のコード

以上で、リモートリポジトリへの追加作業が完了です。

GitHub(リモートリポジトリ)への反映を確認

最後に、GitHubにファイルが適切に公開されているか確認してみましょう。


「GitHub」上にファイルが公開されていることの確認

上記のように、自分のGitHubページを確認すると、無事ローカルで作成したテキストファイルがアップロードされていることがわかりますね。

以上が、GitHubの基本的な使い方となります。

さいごに

今回は、GitHubの全体像と基本的なコマンドの使い方について紹介してきました。
他にも細かなコマンドが色々とありますが、まずは基本的な全体イメージとコマンドの流れを抑えておくことが重要になります。

「GitやGitHubの基本を本でも勉強したい」という方には、最初の1冊としてわかばちゃんと学ぶ Git使い方入門がオススメです。タイトルからわかるように、マンガ要素が含まれているので抵抗なく読み進めることが出来ます。

「スキマ時間でオンライン学習したい」という方であれば、Udemyのチーム開発で必要なGitを完全マスターがおすすめです。git系講座でベストセラーになっており、必要なgitコマンドを一通り学べるので、本格的にgitを学習したい方が網羅的に学習するにはちょうど良いかと思います。

Gitは全体像をおさえた上で、各コマンドの挙動がわかればさほど難しくないので、ぜひ基本から理解するようにしてみましょう。では今回はこのへんで。