【Git・GitHub】個人開発でのGit・GitHubの使い方 | 基本的なバージョン管理の流を初心者向けに解説

Git-GitHub

SHARE

こんにちは、フロントエンドエンジニアのまさにょんです。

今回は、個人開発でのGit・GitHubを使い方と、基本的なバージョン管理の流について初心者向けに解説します。

目次

個人開発でのGit・GitHubの使い方と、基本的なバージョン管理の流

今回の記事では、ローカルPC内の個人開発プロジェクトを Gitの管理対象にして、

Remoteにある自分の GitHub にPushして、

Localのプロジェクトを削除(クリーンアップ)するまでを順にやってみましょう。

前提条件

次の2つの条件だけクリアしていれば、すぐに実践できるはずです。

  1. LocalのPCにGitがインストールされていること。
  2. GitHubにアカウントを作成していること。

git status や git log などで Gitの管理対象となっているかを確認する

まずは、GitHubにPushして管理したい個人開発のプロジェクトが、Gitの管理対象となっているかを確認します。

つまり、ローカルリポジトリがあるかどうかの確認が必要です。

git status や git log 、 ls -al などで Gitの管理対象となっているかをCheckすることができます。

今回は、git status でGitの管理対象かどうかの確認をしてみます。

git status

[ 実行結果 ]
fatal: not a git repository (or any of the parent directories): .git

[ 翻訳 ]
致命的: git リポジトリ (または親ディレクトリのいずれか) ではありません: .git

git init でローカルリポジトリを生成する

git init でローカルリポジトリを作成することができます。

git init

[ 実行結果 ]
Initialized empty Git repository in /Users/Robotama/Desktop/Leaflet/.git/

[ 翻訳 ]
/Users/Robotama/Desktop/Leaflet/.git/ で空の Git リポジトリを初期化しました

ls -al , git status , git logでGitの管理状況を確認してみる

まずは、ファイルを確認するコマンドである ls -al をしてみます。

「 .git 」(ローカルリポジトリ・Gitの管理対象)があることが確認できます。

ls -al

[ 実行結果 ]
    total 296
    drwxr-xr-x@ 19 yukimuramanase  staff    608 10 15 14:36 .
    drwx------@ 25 yukimuramanase  staff    800 10 15 14:38 ..
    -rw-r--r--@  1 yukimuramanase  staff   8196 10  1 08:17 .DS_Store

    ### 「 .git 」がいる => ローカルリポジトリ・Gitの管理対象 ###
    drwxr-xr-x@ 13 yukimuramanase  staff    416 10 15 14:36 .git
    -rw-r--r--   1 yukimuramanase  staff    718  9 19 16:30 Leaflet-Info.txt
    -rw-r--r--   1 yukimuramanase  staff   5594 10  2 11:11 Marker-Create.html
    -rw-r--r--   1 yukimuramanase  staff   2482 10  1 10:29 Marker-Icon-Change.html
    -rw-r--r--   1 yukimuramanase  staff   2165 10  1 08:20 WorldMapCopy.html
    drwxr-xr-x@  5 yukimuramanase  staff    160  8 11 12:23 asti-datr0406wc
    -rw-r--r--@  1 yukimuramanase  staff  22087  8 11 12:22 asti-datr0406wc.zip
    -rw-r--r--   1 yukimuramanase  staff   2661 10  1 13:23 display-limit-map.html
    -rw-r--r--   1 yukimuramanase  staff   2848  9 16 20:03 leaflet.html
    -rw-r--r--   1 yukimuramanase  staff   2827  9 16 11:03 map-option.html
    -rw-r--r--   1 yukimuramanase  staff   3044  9 18 08:24 map-tile.html
    -rw-r--r--   1 yukimuramanase  staff   2896  9 18 08:41 marker.html
    drwxr-xr-x@  4 yukimuramanase  staff    128  8 11 12:15 node_modules
    -rw-r--r--   1 yukimuramanase  staff    358  8 11 12:13 package-lock.json
    -rw-r--r--   1 yukimuramanase  staff    253  8 11 12:13 package.json
    -rw-r--r--@  1 yukimuramanase  staff  63883 10  1 08:07 robotama-icon.png

次に git status をしてみます。

git status は、「 .git 」が存在するプロジェクト内のファイルやディレクトリの管理状況を教えてくれます。

コマンドを実行すると、Gitの追跡管理対象となっていないファイルが一覧表示されて、

git add することをオススメされます。

git status

[ 実行結果 ] 
On branch master

No commits yet

Untracked files:
    (use "git add <file>..." to include in what will be committed)
            Leaflet-Info.txt
            Marker-Create.html
            Marker-Icon-Change.html
            WorldMapCopy.html
            asti-datr0406wc.zip
            asti-datr0406wc/
            display-limit-map.html
            leaflet.html
            map-option.html
            map-tile.html
            marker.html
            node_modules/
            package-lock.json
            package.json
            robotama-icon.png

    nothing added to commit but untracked files present (use "git add" to track)

[ 翻訳 ]
追跡されていないファイル:
     (「git add <file>...」を使用して、コミットされる内容を含めます)

     git add されていない ファイル一覧・・・

     コミットするために何も追加されていませんが、追跡されていないファイルが存在します 
     (追跡するには「git add」を使用します)

それでは、最後に git log をしてみましょう。

git log は、コミットのログ(記録)を表示するコマンドです。

コマンドを実行すると、まだコミットが1つもないと言われています。

ローカルリポジトリを作ったばかりなので、あたりまえですね。

コミットがなければ何も表示されません。

git log

[ 実行結果 ]
fatal: your current branch 'master' does not have any commits yet

[ 翻訳 ]
致命的: 現在のブランチ 'master' にはまだコミットがありません

ステージングエリアに変更点をすべてAdd(追加)する

Git のステージングエリア(コミット前の待機エリア・管理対象エリア)に変更点をすべてAdd(追加)するには、

git add -A

とします。

git add -A

Message付きで、コミット(変更を確定・反映)する

git commit -m “コメント”

の形で コメント を付けて、ファイル・ディレクトリをコミット(変更を確定・反映)することができます。

git commit -m "基本機能完成"

リモートリポジトリとのリンクがあるかどうかの確認

リモートリポジトリとのリンクがあるかどうかの確認するには、

git remote -v

を実行します。

git remote -v をしても何も表示されない場合は、リモートリポジトリとのリンクは存在しません。

git remote -v

GitHubでリモートリポジトリを作成する

それでは、GitHubにアクセスして、リモートリポジトリの準備をしていきましょう。

GitHubの右上のプラスタブの「 New repository 」を選択します。

すると、次のような「 Create a new repository 」の画面になります。

好きなプロジェクト名(リポジトリ名)および、プロジェクトのDescriptionを設定したら「 Create repository 」ボタンを押します。

これでGitHub上のリポジトリの完成です。

GitHub上のリポジトリの完成すると、最初は次のような画面になっています。

左上に先ほど指定した、プロジェクト名(リポジトリ名)が表示されており、中央にHTTPS・SSHのPathが掲載されています。

次のような 「 git@github.com: ユーザー名/リポジトリ名.git 」が、SSHのPathです。

このSSHのPathをCopyします。

ローカルリポジトリにリモートリポジトリをリンクする

ローカルリポジトリ(Git管理プロジェクト)にリモートリポジトリ(GitHub上のプロジェクト)をリンク(追加)するには、

次のようなコマンドを実行します。

git remote add origin(ローカルリポジトリ名・好きな名前) SSHのPath

git remote add は、git のローカルリポジトリと GitHubなどのリモートリポジトリをLinkさせるものです。

今回は、robotama と言う名前で、ローカルリポジトリとリモートリポジトリをリンク(追加)します。

慣習的には、ローカルリポジトリの名前は「 origin 」にすることが普通です。

git remote add robotama git@github.com:yukimura-manase/Leaflet-WorldMap.git

リモートリポジトリとのリンクができたか確認

git remote add でローカルリポジトリにリモートリポジトリをリンク(追加)したら、

git remote -v

を実行します。

次のような実行結果が表示されれば、リモートリポジトリとのリンクができています。

git remote -v

[ 実行結果 ]
robotama        git@github.com:yukimura-manase/Leaflet-WorldMap.git (fetch)
robotama        git@github.com:yukimura-manase/Leaflet-WorldMap.git (push)

git log でコミットの記録とローカルリポジトリ・リモートリポジトリの状態を確認する

git log でコミットの記録を確認するだけでなく、

確定されているローカルリポジトリと、リモートリポジトリの状態(バージョン情報)を確認することができます。

robotama@Gunma Leaflet % git log

[ 実行結果 ] 
commit 6d307e96b3fe6e26298c2d965c9c0f3d4ed4e662 (HEAD -> master)
Author: robotama-gunma <robotama1234@gmail.com>
Date:   Sat Oct 15 14:25:12 2022 +0900

    Leaflet-Project

リモートリポジトリにローカルリポジトリの変更を反映させる

リモートリポジトリにローカルリポジトリの変更を反映させるには、

次のようなコマンドを実行します。

git push origin(ローカルリポジトリ名) master (リモートリポジトリ名・好きな名前)

今回は、ローカルリポジトリ名を robotama にしているので、次のようなコマンドを実行して、

ローカルの変更をリモートリポジトリに反映させます。

git push robotama master

[ 実行結果 ]
Enumerating objects: 144, done.
Counting objects: 100% (144/144), done.
Delta compression using up to 2 threads
Compressing objects: 100% (143/143), done.
Writing objects: 100% (144/144), 861.49 KiB | 3.76 MiB/s, done.
Total 144 (delta 5), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (5/5), done.
To github.com:yukimura-manase/Leaflet-WorldMap.git
* [new branch]      master -> master

gitのローカルリポジトリを削除する

管理する必要がなくなった、ローカルリポジトリは、プロジェクト・ディレクトリに移動して、

rm -rf .git

上記のコマンドを実行して削除しましょう。

robotama@GunmaLeaflet % rm -rf .git

robotama@Gunma Leaflet % ls -al

[ 実行結果 ]
total 296
drwxr-xr-x@ 18 yukimuramanase  staff    576 10 15 14:36 .
drwx------@ 25 yukimuramanase  staff    800 10 15 14:38 ..
-rw-r--r--@  1 yukimuramanase  staff   8196 10  1 08:17 .DS_Store
-rw-r--r--   1 yukimuramanase  staff    718  9 19 16:30 Leaflet-Info.txt
-rw-r--r--   1 yukimuramanase  staff   5594 10  2 11:11 Marker-Create.html
-rw-r--r--   1 yukimuramanase  staff   2482 10  1 10:29 Marker-Icon-Change.html
-rw-r--r--   1 yukimuramanase  staff   2165 10  1 08:20 WorldMapCopy.html
drwxr-xr-x@  5 yukimuramanase  staff    160  8 11 12:23 asti-datr0406wc
-rw-r--r--@  1 yukimuramanase  staff  22087  8 11 12:22 asti-datr0406wc.zip
-rw-r--r--   1 yukimuramanase  staff   2661 10  1 13:23 display-limit-map.html
-rw-r--r--   1 yukimuramanase  staff   2848  9 16 20:03 leaflet.html
-rw-r--r--   1 yukimuramanase  staff   2827  9 16 11:03 map-option.html
-rw-r--r--   1 yukimuramanase  staff   3044  9 18 08:24 map-tile.html
-rw-r--r--   1 yukimuramanase  staff   2896  9 18 08:41 marker.html
drwxr-xr-x@  4 yukimuramanase  staff    128  8 11 12:15 node_modules
-rw-r--r--   1 yukimuramanase  staff    358  8 11 12:13 package-lock.json
-rw-r--r--   1 yukimuramanase  staff    253  8 11 12:13 package.json
-rw-r--r--@  1 yukimuramanase  staff  63883 10  1 08:07 robotama-icon.png

Git・GitHub書籍

プログラミング学習・エンジニア転職関連の情報

自宅で現役エンジニアから学べる『TechAcademy』 (エンジニア転職保証)

『GEEK JOBキャンプ』スピード転職コース（無料）

【IT道場】入校時0円！ 就職目的プログラミングスクール

エンジニア転職なら100％「自社開発」求人に強い【クラウドリンク】

『techgym』 (Python特化・無料)

Twitterやってます！Follow Me！

神聖グンマー帝国の逆襲🔥

神聖グンマー帝国の科学は、世界一ぃぃぃぃぃぃ！！！！！

最近の投稿

【SQL】1回のINSERTで、複数行のレコードを一括挿入・一括追加する方法 JS_uuid JavaScriptでランダムなuuidを作成する方法(randomUUIDの使い方) py_csv_to_json PythonでCSVをJSONに変換する方法 py_csv_cut PythonでCSV・Dataframeを指定の行数まで切り取る方法 js_for_of JavaScript(TypeScirpt)のfor-of文でindexの値も取得する方法と、Type IterableIteratorエラーの解決方法 Python_VSCode VSCode上のPython import文の「インポート “XXXXX” をソースから解決できませんでした」エラーの解決方法

前の記事

SQLab-中級編
【SQL中級編】SQL問題集サイト『SQLab』でSQLを実践…

次の記事

【JavaScript】スマホ判定をする2つの方法 | use…
スマホ判定