
Shopifyアプリ開発#005【実践】PC2台でGitとGitHubを使う (Windows)(Git Bash) (Dドライブ)(ドロップボックス)(VScode)
GitとGitHubの公開鍵に苦戦した結果、Mac と Windowsの差の問題とは別に
コマンドプロンプト
PowerShell
Git Bash
それぞれの対応のコマンドに差があるけれど「何を使って操作しているか」が不明確なため迷走してしまっていたことが判りました。
今回は 「Git Bash」を使って対応です。
git initのデフォルトブランチ名が「master」になる場合はからmainに変更する必要があります。
普段作業でファイルを沢山扱うため、PhotoshopやExcelなどのツールなどの動作が少しでも重くならないようにドロップボックスをDドライブで管理しています。
その為、コマンドでのフォルダの指定がうまく行かなかったため、私の対応した手順を書いていきます。
GitHubのアカウントに登録
GitHubはパソコンで作業した情報の履歴をクラウド上で管理できるツールです。まずはこちらで登録をして下さい。
Git、GitHubの基本工程
ローカルリポジトリ
イニシャライズ(初期化)
インデックス(git add .)
コミット
コミットログ
リモートリポジトリ
プッシュ
ブランチ
プル
クローン
ローカルリポジトリ
自分のパソコン上に変更履歴のデータを保存する場所。
【1】Dropbox上に共有リポジトリを作成する
2台で1つのDropboxを使いgitで管理するためのディレクトリを作成します。
今回は、「first-task」というディレクトリを作成して、この中にプロジェクトを作っていくことにします。
※Dドライブに「Dropbox」と言うフォルダで同期しているのでここのフォルダが私のスタートフォルダになります。
※フォルダ名は任意です。
■課題1-first-taskフォルダ作成
Dropboxフォルダに移動
「git」フォルダ作成 (git 作業全体のフォルダ)
「git」フォルダ作成 (git フォルダに移動)
cd D:/Dropbox/Dropbox/
mkdir git
cd git
次に、gitディレクトリの中にもうひとつディレクトリを作成します。
これがローカルリポジトリとなる部分になります。
今回は「first-task」という名前のディレクトリを作成します。
「first-task」フォルダ作成 (今回作業ののフォルダ)
「first-task」フォルダに移動
mkdir [新規フォルダ名]
cd [新規フォルダに移動]
mkdir first-task
cd first-task
イニシャライズ(初期化)
■課題2-first-taskディレクトリにローカルリポジトリを作成してください。
【1】初期化 main? master?
※バージョンによっては「master」で生成される場合があります。
Gitの方で「master」➡「main」変更になっていきますので「main」に変更して使用します。
①リポジトリを初期化します。
git init
.git と言う隠しフォルダが生成されます。
※隠しフォルダなので見えてない場合があります。
(master)が生成されました。


②「master」ブランチを作成します。
git branch master
③「main」ブランチを作成し、「master」ブランチのコミットを「main」ブランチにマージします。
git branch -m main
git merge master
④リモートリポジトリが存在する場合は、リモートブランチ名も変更します。
git push origin main
git push origin --delete master
これで、「master」ブランチが「main」ブランチに変更されます。ただし、他の人と共有しているリポジトリの場合は、変更を事前に連絡し、他の人が同期する必要があることを確認してください。
インデックス(git add .)
何の更新履歴を保存するのか…を指定する。
フォルダを作っただけでまだ空なのでファイルを作成する。
【1】ファイルを作成する
Windowsでは「touch」使えないと言う情報もありましたが、
※文字を入れる場合
echo 'プロフィール作成' > profile.txt
※空のテキストを作る場合
touch profile.txt
Windowsでは使えないと言う情報もありましたが、PowerShellのコマンドでは作成できないですが「Git Bash」では touch コマンドを使用する事が出来ます。
【2】ファイルを開く
code profile.txt
VSbcode で警告がでれば「はい」を押す。
【3】Gitに登録するファイルを選択する。
※下記はディレクトリの中の全てを「選択」する。
git add .
保存する情報の一覧が表示されます。
コミット
コミットとは実際にリポジトリへ選択したファイルを保存する作業の事を言います。
git add . で選択して git commit -m “保存名” で保存する。
git commit -m “最初の保存”
保存されます。
git add .
git commit -m “保存名”
「どれを保存するか選択」→「保存」の役割の為2つの工程はセットになっています。
コミットログ
変更履歴(コミットのログ)を確認します。
内容変更(ファイル保存) ➡ 選択 ➡ 変更履歴を保存の作業。
【1】コミットログの確認
git log
【2】ログ確認の終了方法
確認をすると(END) と表示されて終了する事が出来ません。
終了するには q を打つだけで終了できます。
公開鍵・秘密鍵を作成しよう
【1】VScordターミナルで公開鍵作成。
ssh-keygen -t ed25519 -C "Githubに登録しているメールアドレス"
ここで、下記が表示されたら3回ほどエンターキーを押します。
成功すると下記のような表示がされます。

【2】鍵が出来ているか確認
C:/Users/[ユーザー名]/.ssh
の位置に保存されています。
ls -al ~/.ssh
作成日時などが表示されます。
【3】公開鍵の中身をコピー
clip < ~/.ssh/id_ed25519.pub
【4】GitHubに公開鍵を登録
GitHubにログイン
登録をしたGitHab のサイトにログインをして下さい。
iconをクリックするとメニューが表示されます。
Settings をクリック。

左側メニューの SSH and GPG keys を選択

SSH keys 横の New SSH key をクリック

key 部分にコピーしたキーを入力

GitHabのパスワードの入力

設定の完了です。
【5】接続の確認
自分のアドレスではなくこのままの入力してください。
ssh -T git@github.com
下記以外の確認の表示がされた場合は「yes」を押してエンター
Hi (account名)! You've successfully authenticated, but GitHub does not provide shell access
上記が表示された場合は接続完了です。
リモートリポジトリ
ローカルリポジトリ(自分のPC上の更新情報)を、リモートリポジトリ(ネット上の保存場所)に紐づける準備。
【1】GitHubにログイン
【2】右上の+をクリックし 「New repossitry」 を選択

【3】リポジトリ名を記入

保存。

リモートリポジトリの作成が完了です。
プッシュ
GotHabのトップページに戻ります。
【1】作成したリモートリポジトリのメニューをクリック

【2】「SSH」を選択コピー
git remote add origin git@github.com:[アカウント名]/[リポジトリ名].git
の部分をコピー。

VScodeに戻って入力
git remote add origin git@github.com:cuebko/first-task.git
成功をしても特に何も表示されません。
【3】プッシュ
接続が出来ればプッシュしてみましょう。
ローカル保存をリモートに保存。
git push origin main
※強制的にアップする場合はか
git push -f origin main
リモートリポジトリのURLを確認する
【1】GitBub で確認
リモートリポジトリのメニューを選択して
<>code で表示されたURLで確認出来ます。

【2】VScode で確認
git remote -v
URLが表示されます。

変更の差を確認
【1】ローカルの差を確認
コミット履歴を確認する(ログ)
git log
差を確認する

git diff [変更前のコミット識別子]..[変更後のコミット識別子]
比較して変更になった個所が表示されます。

【2】リモートの差を確認 (GitHubで特定のコミット間の差分)
GitHub でコミットしたログを確認し、古いコミット番号と新しいコミット番号、比較したい番号をそれぞれ取得します

下記の内容でURLを作成し、ブラウザのURLに張り付けます。
https://github.com/ユーザ名/リポジトリ名/compare/古い方のコミット番号...新しい方のコミット番号
過去の情報と、現在の情報が比較できます。

ブランチ
【1】developブランチの作成
git checkout -b develop
README.mdファイルを作成して移動
ファイルをインデックス
リポジトリへ保存(コミット)
touch README.md
code README.md
git add .
git commit -m “READMEコミット初回”
【2】存在するブランチの確認
git branch
【3】mainブランチの移動
git checkout main
【4】developブランチの変更をmainブランチに取り込む(マージ)
git merge develop
ローカル上でdevelopブランチに移動し、新しいファイル「develop.txt」ファイルを作成してください。また、ファイルには適当な文章を記載しておいてください。次に、コミットしてください。
【5】developブランチの移動
git checkout develop
develop.txt ファイルを作成
develop.txt ファイルに移動
テキスト入力
インデックス
コミット
touch develop.txt
code develop.txt
git add .
git commit -m “developコミット初回”
developブランチをGitHubにpushしてください。GitHub上でdevelopブランチからmainブランチに対して、プルリク(pull request:PRとも言う)を作成してください。
【6】今いるブランチを確認
git branch -a
【7】コミットをリモートにpushする。
git push origin HEAD
or
git push origin ブランチ名
HEADと記述するとわざわざブランチ名を書かなくてよくなる
Pull Request の手順
developブランチからmainブランチに対してpull requestを作成します。
GitHubを開いたら、自分の first-task のリポジトリに移動します。
【1】「Pull requests」タブをクリックします。

【2】右側にある「New pull request」ボタンをクリックします。

「base:」のところは「master」にして、「compare:」のところで「develop」ブランチを選択します。
※承認してくださーい!! って言うリクエストです。

「compare:」の方がプルリクエストする側のブランチです。
Create pull request ボタンを押してください。

すると、プルリクエストのタイトルと本文を入力できる画面が開きます。
「タイトル」「本文」を記入したら「Create pull request」ボタンを押します。

GitHub上でプルリクを承認し、mainブランチにマージ
「Pull Request」タブをクリックし
一覧から確認したいPull Requestをクリックします。

横のギアマークをクリックして
自分のユーザー名をクリックしてレビュアーに追加します。

承認したPull Requestをマージします。
スクロールすると緑のボタン「Merge pull reqeust」があるのでクリックします。

確認のため緑のボタン「Confirm Merge」をクリックします。

Pull Requestのマージが完了しました。

ローカル上で、masterブランチにGitHub上のmainブランチをマージ
【1】ローカルのディレクトリに移動
cd D:/Dropbox/Dropbox/git/first-task
【2】リモートのmainブランチの最新の変更を取得します。(develop)
git fetch origin main
【3】ローカルのmainブランチに切り替えます。
git checkout main
【4】ローカルのmainブランチとリモートのmainブランチをマージします。
git merge origin/main
【5】マージが成功したら、ローカルの変更をリモートにプッシュします。
git push origin main
2台目PC
1台目のPC と 2台目のPC は ドロップボックスを利用し共有フォルダで作業をしています。
【1】公開鍵・秘密鍵の設定
2台目PCでも公開鍵・秘密鍵を作成
GitHub の New SSH ke に2台目のPCに設定したキーを追記
で連携が出来ているようです。
【2】ローカルリモートリポジトリ
2台目のPCも常にドロップボックスの共有で1つのディレクトリーの情報が共有されています。
ローカルのリモートリポジトリも共有されています。
VScideのターミナルでディレクトリに移動
作業ファイルを開くと「リポジトリがあります開きますか?」と言うような警告が表示されます。
リポジトリをクリックします。
作業してpushしてみると正常に作業出来ました。
この工程は、1人で業務をしている為、同時に複数人で対応していないので出来ています。
2台目で編集➡プッシュ すると、リポジトリの情報が変わっているので、翌日1台目でどのような動きをするのか確認してみたいと思います。
おわりに
情報が混在していると思いますので、間違っている部分や更に良い方法がありましたら教てください!
いいなと思ったら応援しよう!
