Edited at

Githubでソースコードを管理する [初級編]


まずはじめに

もし気に入っていただけたり、役に立ったらぜひ ”いいね!” お待ちしております!

投稿のモチベーションに繋がります^^¥

image.png


この記事の目的

自分のためにも初心者向け解説記事として書いてみました。

基本的な内容しか記載していないので、必要ない方は回れ右(左?)で大丈夫です。


ざっくり解説:GitHubとは

ソフトウェア開発プロジェクトのためのソースコード管理サービス。


  • 公開されているソースコードの閲覧

  • バグ管理機能

  • 差分チェック機能

  • SNS機能

などを備えている。

コードのバージョン管理システムには "Git" を使用する。

GithubはGitの "ホスティングサービス" ということ。(ココ重要)

その他のホスティングサービスとしては " BitBucket " などがある。

Gitとは、プログラムソースの変更や更新を管理するための「分散型バージョン管理システム」のこと。

(あくまでもシステムを指す)

もともとはLinux開発チームが使っていたツールで、今は世界中の開発現場で使われている。

世界で " 2800万人 " 以上の利用者がいる。

ちなみに2008年にMicroSoftに75億ドル(日本円で約8400億円)で買収された。

それほど開発者になくてはならないツールと言えるのではないでしょうか。


https://japan.zdnet.com/article/35127696/

Microsoftによる75億ドル規模のGitHub買収手続きが規制当局の承認を得て、

正式に完了した。Microsoftが米国時間10月26日、発表した。



主な利用シーン

Githubにソースコードをホスティングすることで複数人のソフトウェア開発者と協同してコードレビューをしたり、

プロジェクトを管理しつつ開発を行うことが可能。Gist(ギスト)と呼ばれるPastebinスタイルのサイトも運営している。


兎にも角にも使ってみる

image.png

リモートリポジトリの作成後、作成したリモートリポジトリをローカルリポジトリへクローンすることで、ローカルリポジトリにリモートリポジトリ内のソースコード反映されます。

ローカルリポジトリの多くは、開発者の手元のPC環境などを指します。


  • まずは、下の図の通り、リモートリポジトリを作っていきます。

    image.png


  • URIが発行されるので、コピー。

    image.png



ローカルリポジトリの設定

gitが入っている前提でおこないます。


ディレクトリ作成してイニシャライズ

イニシャライズすることでgitのリポジトリとして使えるようになりました。

$ mkdir git_test && cd git_test && git init

Initialized empty Git repository in /Users/SHU/git_test/.git/


リモートかリポジトリからクローンする

何もファイルを置いていないのでwarningが出ましたが気にせず。

リモートにファイルが置かれていた場合、クローンした時点でローカルリポジトリに反映されます。(つまりローカルにファイルがコピーされる)

$ git clone https://github.com/tnoce/test.git

Cloning into 'test'...
warning: You appear to have cloned an empty repository.


ブランチを切る

git checkout -b 'ブランチ名' でブランチを切りつつ作成したブランチにSwitch可能です。

$ git checkout -b dev01

Switched to a new branch 'dev01'


ローカルにファイルを作ってpushまでしてみる

push前のリモート側

↓なにもファイルが置かれていない

image.png


ファイルを管理対象に入れる [git add]

適当なファイル(index.html)を作成し、git addで管理対象配下にします。

-A オプションをつけることで、ディレクトリ配下すべてのファイルをadd対象にできます。

もちろん、ファイル名を単一指定しても大丈夫です。

ちなみにgit addしたあとは何も出力されません。(寂しい)


  • ネットショッピングで気になる商品を見つける

  • お気に入りに入れる ← git add

かなあ...?

$ touch index.html

$ ls -l
-rw-r--r-- 1 '' staff 0 6 18 11:43 index.html
$ git add -A


Githubに管理対象ファイルを登録をする [git commit]

add したあとにはcommitが必要です。

-m オプションのあとにコメントをログとして記載可能です。

記入した内容はリモートリポジトリにファイルが追加された際の履歴として表記されます。


  • ネットショッピングで気になる商品を見つける

  • お気に入りに入れる ← git add

  • 買い物かごに入れる ← git commit

$ git commit -m "create a new file"

[dev01 (root-commit) 7a41f4b] create a new file
1 file changed, 0 insertions(+), 0 deletions(-)
create mode 100644 index.html


リモートリポジトリにファイルを反映させる [git push]

いよいよリモートリポジトリにファイルを送りつけてやります。

まずはプッシュ先のオリジンを指定する必要があります。先ほどクローン時に利用したそいつがそれです。


  • ネットショッピングで気になる商品を見つける

  • お気に入りに入れる ← git add

  • 買い物かごに入れる ← git commit

  • 実際に購入する ← git push

$ git remote add origin https://github.com/tnoce/test.git

$ git push
fatal: The current branch dev01 has no upstream branch.
To push the current branch and set the remote as upstream, use

git push --set-upstream origin dev01

おっと、ErrorMessageが出てしまいました。

どうやらブランチが上流ブランチとして設定されていないようです.

$ git push --set-upstream origin dev01

Counting objects: 3, done.
Writing objects: 100% (3/3), 229 bytes | 229.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0)
To https://github.com/tnoce/test.git
* [new branch] dev01 -> dev01
Branch 'dev01' set up to track remote branch 'dev01' from 'origin'.


Branch 'dev01' set up to track remote branch 'dev01' from >'origin'.


ローカルの'dev01'ブランチが、リモートの'dev01'ブランチを追跡できるようになったと同時に、


Counting objects: 3, done.

Writing objects: 100% (3/3), 229 bytes | 229.00 KiB/s, done.

Total 3 (delta 0), reused 0 (delta 0)

To https://github.com/tnoce/test.git


対象のリモートリポジトリにファイルが転送されました。


Github上を確認してみる

ちゃんと反映されていますね!

commit時に -m で付与したコメントも残っています。


なぜコードを変更したのか?はGithubでさえわからないので、

しっかりと編集内容などをcommit時に残しましょう。


image.png


最後に

私自身もGithub初心者なので、間違っているかもしれません。

ご参考程度になれば幸いです。