WEB

【テーマ作成に挑戦する全ての方へ】Gitって知ってる？〜その２【使ってみよう】

date 2020/2/13

こんにちは、Juntechです。
今回はいよいよGitを使って、
WordPressの自作テーマを移管したいと思います。

前回の記事はこちら

【テーマ作成に挑戦する全ての方へ】Gitって知ってる？〜その１【エンジニアは見なくていいヨ】

1. 自作テーマを移管しよう

自作テーマを移管しよう

gitが使えるようになったので、
PCにある自作テーマを移管していきたいと思います！

自作テーマがあるフォルダでgit clone

まずは自作テーマがあるフォルダを開きます。
Local by Flywheelを使用している方の場合、
サイト保存先のthemes配下を使うのが便利です。

私の場合、

~/"Local Sites"/autohacks/app/public/wp-content/themes

です。

ここでターミナルを開き、git cloneコマンドを打ちます。
git clone は、GitHub上で作成したリポジトリをローカルPCに落とすコマンドです。
コマンドの引数として、リポジトリのURLを指定します。

cd ~/"Local Sites"/autohacks/app/public/wp-content/themes
git clone https://github.com/tktkjuntech/wordpress-themes

GitHubのユーザIDとパスワードを聞かれるので、
アカウント作成時のものを入力してください。

これでテーマフォルダ上にwordpress-themesリポジトリをクローンすることができま
した。
ただこのままだと、
wordpress-themesフォルダの中がgit管理になってしまいます。
そこで下記コマンドを使い、一手間加えます。

shopt -s dotglob
mv ./wordpress-themes/* .
rmdir ./wordpress-themes

これで.gitフォルダを含めてファイル群を移動し、wordpress-themesからthemesへ、
gitの管理対象を変更できました。

ここで、git branchコマンドを打ってみましょう。
すると、

* master

と表示されます。

ブランチを作成してコミット

gitでは「ブランチ」という概念があり、
これを使うことで、
登録しているファイル群のバージョンを特定のタイミングで枝分かれさせることができます。
リポジトリを作成した時点では、masterブランチのみが存在します。

ここでブランチを作成して（よく「ブランチを切る」といいます）いくつかのファイルに変更を加えると、
masterブランチには変更を入れないまま、
作成したブランチのみ変更を反映させることができます。
この仕組みを利用することで、
複数の開発者がストレスフリーで同時開発をすることができます。

今回は小規模利用なのでmaster1本でもいいのですが、
お作法としてメインはmasterを使いつつ、
新規ファイルの追加やファイルの変更は別のブランチで進めていくことにします。
ブランチの作成と使用するブランチの切り替えは、下記コマンドで行うことができます。

git checkout -b feature/200208/juntech/initial-commit

こんな感じで表示されれば正解です。

Switched to a new branch 'feature/200208/juntech/initial-commit'

念のためgit branchで現在使用しているブランチを確認すると、

* feature/200208/juntech/initial-commit
  master

無事、新規作成したブランチが*つきで表示されてますね！
それでは自作テーマを登録していきます。

git add ./*
git commit -m "[feat] Initial Commit"

これで、変更したファイルを一括で、
GitHubへの移管対象にすることができます。
まだ移管はされておらず、
あくまでも自分のPCに対しての宣言だと思ってください。
なのでこの作業にインターネットは不要だったりします。
この作業を「コミット」と呼びます。
コミット時には-mオプションを使い、
どんな変更を加えたかについてコメントを付けるのがお作法です。

リモートブランチへ反映してマージ

それでは最後に、インターネット上にいるGitHubへの反映を行います。
これにはpushコマンドを使います。

git push origin HEAD

このコマンドでGitHub上に、
作成したブランチと各ファイルを反映することができます。
originとHEADは、それぞれ反映先（GitHub側）のリポジトリと、
反映元のローカル（PC側）ブランチを意味します。
なのでこれ以外にも書き方はあるのですが、
これ固定で使用することをおすすめします。
下手にいじると事故ります。

下記のように表示されれば成功です。

 * [new branch]      HEAD -> feature/200208/juntech/initial-commit

それでは、GitHubのページに行ってみましょう。

ちゃんとブランチが作られて、ファイルが反映されていますね！

ただ、まだmasterは空っぽです。

今回はmasterに反映するところまでがゴールなので、
作成したブランチからmasterへの反映を行います。
この作業を「マージ」といいます。

いくつか方法がありますが、最も簡単かつ安全なのは、
画面からポチポチやることです。

ちょうどGitHubが「3分前に別のブランチにコミットがあるよー」と、
黄色背景で通知してくれています。
ここの「Compare & pull request」を押しましょう。
するとこんな画面に飛びます。

これは、プルリクエスト（略してPR）を作成する画面です。
PRとは、自分のブランチから他のブランチに対して、
変更を反映してねー、という要求です。
複数人で開発していると、管理者に対してこの要求を投げ、
管理者が確認後に反映します。

下にスクロールしていくと、こんな感じで変更箇所をきれいに教えてくれます。
間違えて触ってしあったファイルがあれば、ここで気づくことができます。

変更内容に想定外のものがなければ、
「Crete pull request」を押しましょう。

これでPRが作成できました。
ブランチ間で変更内容に競合があると、ここで教えてもらえます。
競合がなければ「Merge pull request」ボタンが活性化します。
今回は1人開発なので、自分で承認しちゃいます。

特にコメントの追記もないので、「Comfirm merge」を押します。