【雑学】自分の開発をgithubで管理してみよう！

2020年11月23日 2020年11月23日

どーも！

たかぽんです！

今回はgitを使ってgithubに自分の開発内容を保存していい感じに管理してみましょう！

筆者も今までテキトーにやってたんですが、やっぱり転職や自分のスキルスタックを見せる場合などには便利ですからね...

近頃はgithubのコミット数（どれくらい開発をしているのかを表す単位になります）などからスコアが割り出されるサービスなんかもあり、技術系の人で特に開発を強みに就職をする際はやっておいた方がいいでしょう！

それではやっていきます！

1 自分の開発をgithubで管理してみよう！
2 githubにリポジトリを作成する
3 自分の手元のPCに開発用のフォルダを作成する
4 開発用フォルダの中身をリポジトリと紐づけて管理できるようにする
5 まとめ

自分の開発をgithubで管理してみよう！

では、やっていきましょう！

ざっくりと以下の順番に解説していきます。

今回やること

githubにリポジトリを作成する
自分の手元のPCに開発用のフォルダを作成する
開発用フォルダの中身をリポジトリと紐づけて管理できるようにする

githubにリポジトリを作成する

まず、githubのアカウントは持っている前提でいきます！

最初にリポジトリを作成する必要があります。

このリポジトリとは、あなたが作るシステムの様々なファイルを含んだ大きなフォルダみたいなものです。

例えば今お手元のPCにMyProjectというフォルダがあり、htmlファイルや、phpのファイル、javascriptのファイルなどなどWEBサービスに必要なファイルがまとめて入っているならMyProjectフォルダをそのままgithub上にコピーして複製します。

そして、手元のPCにあるMyProjectのファイルを一部改修して、問題がなければgithub上に改めてコピーします。

そうすることで、github上には常に動く形でシステムのコードが保存できて、手元で確実に動くようになったらgithub上のコードを更新する...と言う風にすると健全ですよね？

このように、前の状態のコードを保ちつつ開発をしていくことから、こういった管理方法をバージョン管理と呼ばれます。

（本来はbranchと言う機能などもあり、もっと複雑ではありますが、この時点ではざっくりとした概要理解に留めます）

ちなみに、手元のPCにあるMyProjectファイルを"Local(ローカル)", github上にあるMyProjectファイルを"remote(リモート)"といったりします。

では、今回はそのremoteの環境を使えるようにリポジトリを作ります。

最初はMyProjectにあたるファイルは存在しない状態で作成しましょう。（後からlocalのファイルを複製します)

githubのアカウントをお持ちの方は自分のマイページ画面からrepositoryタブを開き、作成しましょう！

以下の緑色の"New"を押せば新しいリポジトリの作成が可能です。

Newボタンを押すと、以下の画面が表示されます。

Repositorynameはなんでもいいですが、プロジェクトの体を表す名前がいいでしょう。(サービス名など)

今回は本格的に機能追加などしない予定なので、"study-github"としています。

その下の"public"と"private"はそのリポジトリを第三者も見れるようにするかどうか決めることができます。

無料プランだとPrivateでは一部機能制限等あったりしたはず...

ただ、今回は自分の作ったものを共有するためなので、ポートフォリオ的に使うならば"Public"にしておきます。

ただ、一般的な企業が作るサービスは大抵Privateであることは覚えておきましょう（簡単にコピーできると似たサービスがすぐに作られますよね...）。

initialize this repository with...というのはこのリポジトリに対して初期に行うことを指定できます。

READMEファイル（このリポジトリの説明を書くファイル）は作っておいて損はないのでチェックをつけます。

gitignoreはこのリポジトリに複製したくないファイル(サービスで使用するAPIのキーなど...)を除外することができるのですが、今回は必要ありません。

最後はライセンス関係ですが、今回はチェックは外します。

上記設定ができたら下にある緑のボタンを押して作成しましょう！

作成後、以下のような画面が表示されればOKです！

では、次はローカル側でごにょごにょやっていきます！

自分の手元のPCに開発用のフォルダを作成する

さて、それでは次は自分の手元のPCで開発するファイルを設置するフォルダ等を作成しましょう！

ではコンソールを開いて、適当なフォルダを作りましょう！

例えば僕の場合は以下の"/Users/{ユーザー名}/Practice"というフォルダ下に自分で作るリポジトリを色々まとめています。(laravel-sns, react-new-appという二つのリポジトリに対応したファイルがありますね)

(base) Takapon:Practice taka$ pwd
/Users/taka/Practice
(base) Takapon:Practice taka$ ls
laravel-sns	react-news-app

本格的なシステムを作成する場合などはもうちょっとマシなパスにした方がいいかもしれないですが、一旦は似たような形で、適当なところにフォルダを一個作ってしまっていいかと思います。

この後、先ほどリモートに作成したリポジトリをローカルに持ってくるのですが、このPracticeフォルダにいる状態で持ってくると、以下のパスにリポジトリに対応するフォルダが作成されます。

/Users/taka/Practice/study-github

そのため、以下のコマンドを参考にご自身の好みのフォルダにてリモートのファイルを持ってくるようにしてください。

コンソール上での簡単な操作は以下です。

// FolderNameという名前の新しいフォルダを作成する
mkdir FolderName
// FolderNameに移動する
cd FolderName

よくわかんねー！！！って方は以下のコマンドを順番に実行してください。

DesktopにPracticeフォルダを新規作成し、その中でリポジトリ管理をする想定でフォルダを作成します。

cd ~/Desktop
mkdir Practice
cd Practice

開発用フォルダの中身をリポジトリと紐づけて管理できるようにする

さて、それでは次です！

先ほど作成したフォルダにリモートのリポジトリの内容を複製して、紐づけて管理ができるようにしましょう！

まず、先ほどのgithubのリポジトリ画面にある"code"という緑のボタンから"HTTPS"を選択し、URLをコピーします。

次に、コンソールから、先ほど作成したPracticeフォルダ（違う名前で作成した人はそのフォルダ）にて、以下のコマンドを実行すると...?

git clone {コピーしたURL}

(base) Takapon:Practice taka$ git clone https://github.com/Takapon0407/study-github.git
Cloning into 'study-github'...
remote: Enumerating objects: 3, done.
remote: Counting objects: 100% (3/3), done.
remote: Compressing objects: 100% (2/2), done.
remote: Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
Unpacking objects: 100% (3/3), done.

このようにclone(リモートからローカルに全ファイルを複製）することができます。

もしかしたらパスワード等を要求されるかもしれませんが、その場合は自分のgithubアカウントのパスワード等を入力してください。

上記のように複製ができたら、以下のコマンドで確認しておきます。

(base) Takapon:Practice taka$ ls
laravel-sns	react-news-app	study-github

先ほどはなかった"study-github"というフォルダができていますね。（もう二つは筆者の環境にのみあるデータです。）

念のため、catで中身も見てみましょう。

(base) Takapon:Practice taka$ cat study-github/README.md
# study-github
githubのリポジトリ反映を解説するためのリポジトリ。(ブログ用)

リポジトリ作成時に追加していたREADME.mdというファイルがちゃんとありました。

確かにリポジトリの中身がローカルに複製できていることが確認できましたね！

では...

このREADME.mdファイルをエディタ等で開き、以下のように改修してみましょう。

# study-github
githubのリポジトリ反映を解説するためのリポジトリ。(ブログ用)

# test
この行はローカルで追加した内容です。

できたらセーブをして、コンソールのProjectファイルにて、以下を実行します。

git init
git add .
git commit -m "初めてのコミット！"
git push

問題なければ以下のように進み...?

(base) Takapon:study-github taka$ git init
Reinitialized existing Git repository in /Users/taka/Practice/study-github/.git/
(base) Takapon:study-github taka$ git add .
(base) Takapon:study-github taka$ git commit -m "初めてのコミット！"
[main 1e17932] 初めてのコミット！
 1 file changed, 3 insertions(+)
(base) Takapon:study-github taka$ git push
Enumerating objects: 5, done.
Counting objects: 100% (5/5), done.
Delta compression using up to 4 threads
Compressing objects: 100% (2/2), done.
Writing objects: 100% (3/3), 426 bytes | 426.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0)
To https://github.com/Takapon0407/study-github.git
   d8d1d8d..1e17932  main -> main

上記が終わったら先ほどのリポジトリ画面をみてみると...?

変わってます！

あとはいろんなファイルを作成したり、消したり編集したりするたびにコミット、pushしていけばいい感じになります！

先ほどやったことを簡単に説明しておくと...

// 今いるフォルダをgit管理するように初期化
git init
// README.mdの変更内容をコミット対象に追加
git add .
// コミットのコメントを指定してコミット
git commit -m "初めてのコミット！"
// commit内容をリモートブランチにプッシュ
git push

といった感じです。