momo

Gitのコマンドって使っていないとすぐ忘れちゃうよね。。

mito

そう！毎回「あれどうだっけ〜？」と調べています。

momo

逆引き辞書みたいなものがあると便利だよね！

mito

最近、Gitコマンドでよく使っているものを逆引き的にまとめてみました！

ブランチを作りながら移動する

git checkout -b [branch-name]

momo

移動の際、移動元のブランチで何か修正をしていた場合は、移動元の修正内容が引き継がれるよ！

作業ディレクトリにある変更を一時的に保存する

作業ディレクトリにある変更を一時的に保存し、作業ディレクトリをクリーン（最後のコミットの状態）に戻すために使用されます。

momo

異なるブランチに切り替える必要があるが、現在のブランチで完了していない作業がある場合などに便利だよ！

現在の変更をスタッシュに保存し、作業ディレクトリをクリーンな状態にする

git stash

momo

 git stash save "スタッシュの名前"とすると後から識別しやすくなるよ！

スタッシュから復元

最新のスタッシュ項目を現在のブランチに適用

git stash pop

momo

スタッシュされた変更のリストを表示するには git stash list で見るよ！

特定のスタッシュを適用したい場合は識別子を使用します。

git stash apply stash@{0}

リモートのブランチをローカルに持ってくる

「bug対応だからブランチきって対応してるよ〜、途中までcommitしたからそのブランチで続きの修正して！」と言われた時にどうぞ〜！

git checkout -b [local_branch]  origin/[remote_branch]

momo

local-branchとremot-branchは任意のbranch名に変えてね！

ローカルでまだコミットしていない修正を取り消す

mito

git pullで更新したコードに対して色々触っていたら、わからなくなったからgit pullした状態に戻したい！という時にどうぞ〜。

git reset --hard HEAD

コミット忘れがあるので統合したい！

コミットした後に、「あっ！このファイルも一緒にコミットしたかった…」という時にどうぞ〜。

コミットした後で、忘れていた変更や修正を加えたい場合、その変更をステージングへ

git add [file_name]

それから統合するコマンドを実行します。

git commit --amend

mito

最後のコミットのメッセージを変更したい場合、何もステージングせずに git commit --amend を実行します。これによりテキストエディタが開き、新しいコミットメッセージを入力できます。

自分のブランチ修正をoriginの最新をpullしてからpushしたい

最新の変更を取り込むことで早期に、コンフリクトを解消できます。また、mainブランチにマージする際に、マージプロセスがスムーズになります！

リモートブランチの最新情報を取得

git fetch

リモートリポジトリ（通常は origin）から最新のブランチ情報を取得します。これにより、ローカルリポジトリの情報が更新されますが、作業ブランチの内容は変更されません。

現在の作業ブランチに未コミットの変更やステージイングされている変更がないか確認

git status

mainブランチの最新をマージ

git merge --no-ff origin/main

リモートの develop ブランチ（origin/main）の最新内容を現在の作業ブランチにマージします。--no-ff オプションは「ノーファストフォワード」というマージオプションで、マージコミットを作成することを保証します。

マージ後の状態をプッシュ

git push origin [branch-name]

まとめ

よく使うけれど、忘れてしまいがちなコマンドをまとめてみました。

mito

その他、よく使うコマンドが増えたら更新していきます〜！

GitHub アイコン by Icons8

momo

前回、GitHubを使ってコードのバージョン管理する方法をお伝えしました。

mito

今回は、「管理」しているものを「納品」するためにコマンドを使う方法ですね！

momo

そう！少し抵抗がる人がいるかもしれないけれど、黒い画面（ターミナルor コマンドプロンプト）を使って必要な差分ファイルのみを納品していく方法を解説するよ！

https://mito-lab.com/githubdesktop/

なぜ、差分ファイルの抽出を自動化するのか？

1、2個のファイルを納品する場合は良いのですが、10個以上のファイルを納品する場合、目視＆手作業で行っていると納品ミスの原因になります。

momo

極力楽をしつつ、ミスを減らしたいよね

安全に、確実に、効率的に納品ファイルを作成するために自動化は必要だと思います。

差分ファイルのリストを作る方法

まずは、納品するファイルのリストを作る方法です。

コマンドで、2つの差分をとります。

mito

「コミット1」「コミット2」の部分は抽出したい差分が抽出できるように指定するよ

mito

例えば、コミットIDなどですね！

ローカルリポジトリのファイルパスでターミナルを立ち上げる

macの場合での差分リスト抽出を解説します。

ローカルリポジトリのフォルダ名を右クリックし、「フォルダに新規ターミナル」をクリックします。

momo

ターミナルが立ち上がるね！

差分を指定する

今回は、前回納品したものに対して、新しく納品する分のみ差分を抽出したいので、コミットIDを指定しました。

mito

前方に書くコミットID(①コミットID)の方が古いバージョンです

momo

コミットID以外でもブランチ名やタグ名などで指定可能だよ

コマンド入力後、enterキーを押す

mito

非表示にしている部分もあるのでわかりづらいとは思いますが、今回は2つのhtmlファイルが取得できています。

差分ファイル名をエクセルなどにコピー

差分ファイル名を確認し、取得したファイル名をコピ＆ペーストでエクセルなどに貼り付けたら完成です。

差分抽出したファイルをzipでまとめる

こちらがいわゆる、自動で納品ファイルを作る方法になります。

mito

この様に書くと先ほど一覧で取得したファイルの実態を取得し、zip化してくれます。

momo

かなり便利だね！

手順は先ほどと同じく、ターミナルを立ち上げ、上記のコマンドを実行します。

momo

zipファイルができる場所は、ファイルパスとして指定しているローカル時ポジトリの配下だよ！

コマンドの解説

ファイルをアーカイブするコマンド

差分を抽出するコマンド

A=追加、C=コピー、M=変更、R=リネームのステータスファイルのみ返すというオプションコマンド

「archive.zip」というファイル名で生成するというオプションコマンド

まとめ

コマンドを使うことで、納品作業が楽になり、ミスも減ると思います。

mito

一度公開したサイトについて、ページ追加やページ内のデザイン変更など更新作業が多く発生してしまって、過去の状態が分からなくなってしまう..ということありませんか？

momo

そんな、コードのバージョンを管理したい時に便利なサービスがGithubだよ！

mito

例えば、お店のサイトを公開した後に、ヘッダーの上に長期休暇のアラートを追加、それをまた戻したいという時に、過去の状態のバージョンを置いておけば、すぐに元に戻せますね！

momo

今回コードをバージョン管理するにあたり、GitHubDeskTop、Github、Gitと様々な用語が出てくるので一つ一つ用語説明していくよ！

mito

ちなみに..わかりやすくコードのバージョン管理としていますが、コード以外でもバージョン管理は可能です！

Gitとは

CUIツール（コマンドラインツール）の一種です。

ソースコードをいつ誰がどこを編集したのか、最新のバージョンはどれかを管理するツールとして作られました

momo

コマンドプロンプト、ターミナルと呼ばれる（黒い画面）からキーボードでコマンドを入力して実行するツールですね！

mito

つまりエンジニア、コーダにとってとても便利ということです。

GitHubとは

OOSホスティングサービスである

OOSホスティングサービスとは、Open-Source Softwareの略で、ソフトウェア開発のためのソースのバージョンや修正を共有するWebサービスです。

momo

つまり、自分が作成したソースを公開し、他も閲覧＆編集可能にするプラットフォームのようなイメージだね

mito

他の人も編集できる..ということで誰がいつどんな修正をしたか？がわかるようにバージョンの管理が重要ということですね

momo

オープンに公開しない場合でも、初期状態に戻したい時など仕様変更を考えるとバージョン管理は重要だね

Gitをまとめたサービスである

GitHubということなので、そのまま解釈するとGitの集まりです。

momo

正確には、Gitのリポジトリーをまとめたサービスと言われたりします、

GitHubを使う上で理解しておきたい用語

mito

GitHubを使っていると様々なカタカナ用語がでてきます。

momo

まず用語の意味から抑えていこう！

リポジトリ （repository）

リポジトリーとはファイルやディレクトリの状態を保存する場所のようなものです。

管理したいディレクトリをリポジトリと連携させることで、そのディレクトリ内のファイルの変更履歴を記録し、保存できます。

mito

つまり、自分のPCの一部のフォルダをリポジトリと連携させてバージョン管理機能を活用するというイメージです。

ローカルリポジトリ

自分のPC上のリポジトリ

リモートリポジトリ

GitHub上のリポジトリ

momo

つまり状況によっては、ローカルリポジトリとリモートリポジトリでコードの内容が異なるということがあるね。

操作上の名称

mito

GitHubを使う上で必要になる用語を解説します。

クローン（clone）

リモートリポジトリをローカルにダウンロードするコマンドです。その時の最新版のデータと変更履歴などがまとまっていますので、クローンしたタイミングのリモートリポジトリと全く同じ環境をローカルに作成します。これにより、他の人の影響を受けずに自分のPCで作業ができるようになります。

プル（pull）

ローカルリポジトリをリモートリポジトリと同期させること

momo

つまり、ローカルとリモートの両方の状態を合わせる作業です。

コミット（commit）

ファイルの追加や変更の履歴をリポジトリに登録すること。

プッシュ（push）

ファイルの追加や変更の履歴をリモートリポジトリに送信・反映すること。

ブランチ（branch）

作業を細かく枝分かれさせて、それぞれで開発を進めていくためのもの。

プルリクエスト（pull request）

ローカルリポジトリの変更を他の人に確認してもらうこと。

マージ（marge）

枝分かれしたブランチを統合させること。

GitHubDesktopとは

GitHubを使うにあたり、ほぼ操作の知識なく簡単に使えるデスクトップ用のアプリケーションです。

mito

コマンドが打てない人でも気軽に使うことができそうですね。

momo

ここでは、GitHubにはアカウントを作った状態として解説します。

mito

GitHubのアカウントはこちらからusername、emial、passを設定すると作成できます。

GitHubDesktopをダウンロードする

GitHub Desktopの公式ページからダウンロードします。

インストール後、アイコンをダブルクリックし、起動させます。

GitHubとGitHubDesktopを連携させる

GitHubのアカウントでログインするボタンをクリックします。

「Authorize desktop」をクリックします。

「GitHub Desktop.appを開く」をクリックします。

「Use my GitHub account name and email address」にチェックをしている状態でgithubのName とEmailを入力し、「Continue」ボタンをクリックします。

できました！

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

GitHub上でバージョン管理を行いたいリポジトリを作成します。

momo

イメージとして、ローカルで作成したWebサイト1つ分のフォルダがまるっとGitHubにも共有されるイメージです。

GitHub上でリポジトリを作成

Repositoriesの右にある「New」ボタンをクリックします。

リポジトリの設定

リポジトリー名や説明文を書きます。記入できたら「Create repository」をクリックします。

mito

リポジトリー自体を公開したくない場合はprivateの設定で、自分しか閲覧できない状態を作れるよ

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

GitHub上にリポジトリができました。次は、ローカルにもリポジトリを作り、GitHubとつないでいきます。

GitHub上からデスクトップリポジトリ設定を立ち上げる

先ほどGitHubで作成したリポジトリにある「set up in DeskTop」をクリックします。

Clone a Repositoryからローカルのファイルパスを指定

ローカルで作成したWebサイトのフォルダ最上位を指定します。入力を終えたら「Clone」をクリック。

「GitHub Desktop.appを開く」をクリック

ローカルとリモートの繋がりを確認

ローカルとリモートのリポジトリが繋がりました。

おまけの工程

mito

もともと、フォルダに入れておいても良いのですが、リポジトリ作成後にローカルリポジトリの配下にファイルを移動させました。

コミットする

ファイルが認識されると添付の様な表示になります。summaryとDescriptionを入力し「Commit to main」をクリック

リモートリポジトリへプッシュする

ローカルリポジトリにコミットしたものをリモートリポジトリへプッシュします。

「Publish branch」を押す

momo

押し忘れると、リモートリポジトリへは反映されないので注意！

GitHub上でリポジトリを確認

GitHub上でも履歴が表示され、pushしたファイル名および、中身を確認することができます。

修正内容を反映させたいとき

ローカルで編集を加えるごとに、リモートリポジトリとのコードと差が生まれるのでGitHub Desktopで確認すると差分が見られます。

momo

差分を確認し、間違いなければ、先ほどと同じ様にcommit→pushをするよ！

まとめ

GitHubでコードの履歴を管理することで、Web制作の運用案件の管理がグッと楽になると思います。