トップへ戻る
BLOGS

Git、GitHub を使った実務作業 その②

Git、GitHub を使った実務作業 その②

エンジニアとして社会に出た際に必ずと言っていいほど使用するツールが「Git」「GitHub」です。
今回はそんな「Git」「GitHub」を利用するのに必要なターミナル操作Gitコマンドやそれにまつわる用語解説、GitHubを利用したソーシャルコーディングについてふれて行こうと思います
また今回は、Mac環境を使用した解説になるためWindowsでの操作方法とは若干異なることをご容赦ください

前回はGitHubにあるプロジェクトのリポジトリをコピーして自分のローカル環境で編集できるところまでをおこないました
今回はもっと踏み込んで自分の書いたコードをプロジェクトのリポジトリにアップする業務想定でやっていきます

前回の記事

ローカルリポジトリの変更をGitHubへ適用したい

GitHubのプロジェクトのフォルダーをクローンして、その変更内容も受け取れるようになりました。
今度は逆に、ある程度コードが完成したコンテンツを想定し、
ローカルリポジトリの方からリモートリポジトリへ変更を記録するべく登録する方法を解説します

まずは「最初のコミット」ができるようにGitの初期化と登録を済ませておきます

$ git config --global user.name <username>
$ git config --global user.email <mailaddress>

<username>にはあなたの名前、<mailaddress>にはあなたのメールアドレスを入れて実行してください

なお、この設定した自分自身の情報は、、

$ git config -l

上記のコマンドで確認することができます

ローカルにリポジトリを作ろう

前章ではGitHubリポジトリをcloneすることでリポジトリを作成しましたが、
この章では先にローカルにリポジトリを作成し、その変更をリモートリポジトリへ反映させるようにします
ローカルリポジトリのワークスペースとなるフォルダを作成し移動します

$ mkdir local-git-study
$ cd local-git-study 

このようにプロジェクトのディレクトリがあったとしたら、そこをカレントディレクトリにします
それではローカルリポジトリを作成していきましょう

$ git init

これでGitリポジトリが完成しました。
具体的になにが起こったかというと、ローカルリポジトリの実態であるディレクトリが作成されました
/Users/${username}/Desktop/git-test/local-git-study/.git/
この「.git」ディレクトリを削除してしまえばローカルリポジトリをまるごと削除することが可能です

リポジトリに変更を加えてみよう

まだリポジトリは空っぽです
Gitはフォルダに対しての監視を行ってはいないため、まずはファイルを作成します
作業ディレクトリにいることを確認したら以下のコマンドを入力してみましょう

 echo "# Gitの勉強
- git addコマンドで、リポジトリに変更情報を追加する
-このことをステージングという
-git commitコマンドで、リポジトリのインデックスに追加された変更情報にコメントをつけてコミットできる
-git pushコマンドで、ローカルのコミットをリモートのリポジトリに反映させることができる" > README.md

echoは先に続くテキストを標準出力するというコマンドですが、「>」をコマンドの最後につけることで、標準出力をファイルに保存する「リダイレクト」という機能を使うことができます。

ちゃんとREADME.mdファイルが生成され、テキストが書き込まれたかどうか、確認してみましょう

$ cat README.md
# Gitの勉強
- git add、、、、、省略

無事ファイルに書き込まれていたら、この変更をコミットしてみましょう

リポジトリにコミットしてみよう

先程リダイレクトでファイルに変更を加えた内容をリポジトリにコミットしてみようと思います

$ git add <filepattern>

ファイルをコミットする前に上記のコマンドでインデックスに登録するという工程が必要です
引数のfilepattern には、ファイル名を直接指定したり、「*.html」 といったワイルドカード付きでの指定もできます。 「.(ドット)」を指定すると、全てのファイルをインデックスに登録することができます。

注意したいのは「git add」コマンドだけではコミットしたことにはなりません
このコマンドは「ファイルをリポジトリに追加する準備」を登録するコマンドです
こうして一度変更情報を登録することをステージングと呼び、この保存領域をインデックスといいます

なお現状のステージング情報は以下のコマンドで確認できるので見てみましょう

$ git status

このコマンドを実行するとChanges to be committed:コミット待ちの状態であると見れます
また、現在作業中のインデックスに登録していない状態の場所を「ワークツリー」と呼びます
これでワークツリーからインデックスにステージングされたことを確認できました

それではインデックスをコミットしてみます

$ git commit -m "初めてのコミット"

「git commit」コマンドには必ずコミットメッセージを付ける必要があります。
オプション無しで実行してしまうとエディターが立ち上がってしまうため「-m」オプションをつけるとその後ろに、メッセージを記載することができます。
これでリポジトリにコミットを行うことができました。

コミットの履歴を確認するためには以下のコマンドを入力してみましょう

$ git log

ログが増えてくると確認しづらくなるので各種オプションが便利そうです
git log --oneline --graph --decorate
としておくのが見やすくて良いです。

GitHubでリポジトリを作成しておく

ここまではローカルリポジトリにコミットする作業を行ってきました。
これをGitHubのリモートリポジトリへアップするためにGitHubにも新しいリポジトリを作成する必要があります
GitHubのページのアカウントアイコンの横にある「+ボタン」をクリックすると「New repository」のタブが降りてくるのでこれをクリックしましょう

リポジトリ作成ボタン

Create new repositoryページに遷移するので「Repository name」の項目のみを入力し、他は特に設定せずに「Create repository」ボタンを押してリポジトリを作成します

リポジトリ作成画面

リモートリポジトリにpushする

これでローカルの変更を受け取るリポジトリが作成されました。
現在はリポジトリをローカルでセットアップするためのセットアップ画面が表示されていると思います

リポジトリセットアップ画面

この中から、
「…or push an existing repository from the command line」
の項目でローカルで行った変更をリモートに反映させるためのコマンドが紹介されています。
これを上から順にコピーして一つづつ実行していきましょう

git remote add origin git@github.com:${あなたのusername}/local-git-study.git
git branch -M main
git push -u origin main

解説していきます
(git branchコマンドについては後述)

git remote コマンド

「git remote」コマンドはリモートリポジトリを操作するためのコマンドです
addコマンドはローカルからリモートリポジトリを追加するためのコマンドになります

git remote add <name> <url>

<name>はリポジトリ名が入ります。今回はデフォルトの名前と同じ「origin」を指定しましたが、任意の名前をつけられます。
その後に続く<url>では「clone」のときに使用したSSHのURLが入ります。
${あなたのusername}の部分はあなたのGitHubアカウント名が表示されているはずです
リモートリポジトリを登録して、リモートリポジトリを確認したい場合は以下のコマンドで確認できます

git remote -v

git push コマンド

git push <repository> <refspec>

「git push」コマンドはローカルの変更をリモートに適用するコマンドです
前回の記事で「pull」コマンドが「引く、取得する」という意味だったのに対し「push」は英語で「押す」という意味なので覚えやすいですね
「-u」オプションは次回以降<repository> <refspec>を省略したときに、自動でこの値とするためのオプションです
<repository>は上記のコマンドで作成した「origin」が入ります。<refspec>は好きなブランチを指定します。

さてこれですべてのコマンドを打ち終わったので、先程のGitHubページに移動してページを更新してみるとローカルのリポジトリを反映されているはずです

ブランチを切って作業する

プロジェクトのコードをローカルで編集したり、その変更をプロジェクトのリモートへpushすることもできるようになりました
ここからは複数人で開発する実務形式のGitHubの使い方を見ていきましょう
ここではチーム開発などで機能ごとに分割して開発している状況を想定して、Gitのブランチ機能を使用し、別ルートで開発していく方法を解説します

branch(ブランチ)とは

ブランチとは、ある時点のソースコードを分岐させて開発をしていく手法です
ソフトウェア開発では、開発のメインとなるバージョンの系列を木の「幹」と捉え、そこから派生するものを「枝」、つまり英語でブランチ(branch)と表現します。
たとえば複数の異なる機能を並行して開発する場合などで、一つの場所でまとめて開発を行ってしまうと、それぞれの変更や修正が互いに影響してしまうかもしれません。また、行った編集がどの機能に対するものなのかも、わかりにくくなってしまいます。それを避けるために別々の場所(ブランチ)で開発することが必要となってくるのです

ブランチを確認して作成する

それでは前章までで作成していたローカルのリポジトリ「local-git-study」で作業を続けていきます
まずは現在のブランチがどうなっているのか確認してみましょう

git branch

すると、「* main」このように表示されました。
先頭にアスタリスクがついていますが、これは現在自分がいるブランチ(HEAD)を表しています
mainはプロジェクトの「幹」となるブランチのため新たに、CSSを編集するブランチ「add-css」を追加してみましょう

git branch add-css

これでブランチが作成されました
先ほどブランチを確認したコマンドを打ってみましょう

 add-css
* main

ブランチが追加されていることが確認できましたが、アスタリスクがmainのままなので、まだ利用しているのはmainブランチということです
今度はこの作業ブランチを切り替えてみます

git checkout add-css

するとSwitched to branch ‘add-css’と表示されブランチが切り替わったようです

ちなみにcheckoutコマンドはオプションで「-b」を指定するとブランチの作成と切り替えを同時に行うことができます
これでもう一つブランチを作って切り替えてみます

git checkout -b gh-pages

さてこれでブランチの作成と切り替えができました

  add-css
* gh-pages
  main

ここで作成している「gh-pages」ブランチはGitHubにおいて少し特別なブランチです。
このブランチをGitHubにpushすると「GitHub Pages」というサイトで自動的にWEBページとしてリポジトリの内容が公開されます
つまり誰でも無償でポートフォリオとなるWEBサイトを公開することができるわけです
今度はこのブランチで実際に作業を進めてみましょう

ブランチを使って開発する

ブランチが作成できたので実務と同様にこの「gh-pages」ブランチで編集しコミットしてみましょう

touch index.html

「vsCode」などで以下のファイルを開いて変更を加えてみましょう

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Gitの勉強</title>
</head>
<body>
  <h1>gh-pagesブランチはGithub Pagesに公開されます</h1>
</body>
</html>

index.htmlが保存できたら、このファイルをインデックスの追加しコミットしてみましょう

git add .
git commit -m "index.htmlを編集" 

これで登録できたかどうか現在の状態を確認してみます

git status

nothing to commit, working tree cleanと返れば、ワークツリーがきれいな状態でコミットするものがないことがわかります

この時点で注意することは現在「gh-pages」ブランチにはindex.htmlが存在していますが、アプリの中核の「main」ブランチには存在していません
ここからは完成したコードファイルを承認して結合してもらえるよう「プルリクエスト」を行ってみます

リモートリポジトリに変更を送信

まずは完成したファイルをpushコマンドでリモートリポジトリへ送信しましょう
pushコマンドは好きなブランチをリモートリポジトリへ渡すことができます
コマンドは以下のようになります

git push origin gh-pages

送信することができたら、GitHubの自分のリポジトリで確認してみます
画面の上の方にある「branch」のリンクをクリックするとブランチの一覧ページに遷移します
そこでローカルで作成した「gh-pages」ブランチが存在していればうまくいっています

自分のGitHubページを確認しよう

少し本筋とそれてしまいますが、完成させた「gh-pages」というブランチは特別で、GitHub Pagesというサイトでブランチの内容が公開されるものです。
せっかくなので現在の公開状態を確認してみましょう

公開URLは、
「https://${あなたのusername}.github.io/git-study/」

${あなたのusername}はいつもどおりGitHubのユーザーネームへ置き換えてもらってアクセスしてみましょう。 うまく表示されましたでしょうか??

実はもう一つGitHubには特別なファイルがあります
リポジトリの説明を載せるREADME.mdというファイルです

README.mdを追加してみる

README.mdはGitHubにおけるリポジトリの説明をファーストビューで大きく載せてくれるファイルでマークダウン記法という記法に則って記述します

↑のほうでリダイレクト処理にて記述してあったファイルをエディターなどで開いて追記してみましょう

README.md

# Gitの勉強
- git branchコマンドでブランチを作成できる
- git checkoutコマンドでブランチを切り替える
- git remoteコマンドで、リモートリポジトリを操作できる
- git statusコマンドで、現在の状態を確認できる

変更が保存できたら、これもコミットしてプッシュしておきましょう
一つづつコマンドを打ちましょう

git add .
git commit -m "リポジトリの説明を追記"
git push origin gh-pages

mainに変更内容を合流させる

これで「gh-pages」ブランチには変更内容が加わりましたが、プロジェクトの本元である「main」ブランチにはまだ変更内容が反映されていません。
そこで変更内容を合流させるべくmerge(マージ)について説明します。

git merge <branch>

マージする側、取り込む側のブランチに移動し上記のコマンドを入力するだけです。
<branch>にはマージしたいブランチ名を入れます
マージしたらpushしておくとGitHubにも適用されます
これだけです。

しかしこの方法は実務ではあまり取られることがないようです。
というのも、この方法ではマージ元の管理者に変更点を確認してもらうのに手間がかかるためです。

そこでGitHub上から「プルリクエスト」を送るのが一般的です

プルリクエストを送ってみよう

まずはリポジトリのトップページに移動して「Pull request」リンクから現在のブランチ「gh-pages」を選択し「New pull request」ボタンを押してみましょう

そうすると、現在のファイルの変更分がわかりやすく表示されている画面に遷移すると思います

プルリクエストの画面

この画面の右上の緑のボタンから「Create pull request」を押してみましょう

そうするとタイトルとメッセージを入力する画面に来るかと思います
ここでは自分の上司にマージすることを依頼すると想定して「作業完了。確認後マージをお願いします。」など書いておきましょうか。
記述できたら「Create pull request」を押してみます。

するとこれでmainブランチの管理者に自分のコードを確認しマージしてもらえるよう「プルリクエスト」略してプルリクを送ることができました

後は管理者の立場でコードを確認して、「Merge pull request」ボタンでマージすることができます
ちなみにこのとき右側に空になったブランチを削除するボタンが登場するので必要のないブランチであれば即座に削除することは可能です

ブランチを削除してみる

コマンドラインからブランチを削除することももちろん可能です
ブランチコマンドのオプションに「-D」をつけることでマージしていないブランチでも強制的に削除することが可能です

git branch -D <branch>

また、リモートブランチの場合は以下です

git push --delete origin <branch>

ローカルもリモートもすべてのブランチを確認したいときは「-a」オプションで確認できます

git branch -a

無事にブランチが整理されていることが確認できましたでしょうか

ここまでで、たくさんのコマンドを使用し、リモートリポジトリ、ローカルリポジトリの作成からGitHubの連携方法、そして通常の変更の管理と、ブランチを利用した分散型の開発方法をチュートリアルのように学んできました

実務で使用するやり方や、便利なオプションを使用した方法、Gitクライアントを利用したコマンドレスの使用法などまだまだたくさんの学びがありますが、使っていくうちに手放せないツール、サービスになっていくこと思います。
オープンソースであるがゆえの可能性を秘めているサービスであるため、皆さんにもぜひとも使いこなしてほしいと感じました

コメントをお待ちしております

お気軽にコメントをどうぞ。

CAPTCHA