RAKUS Developers Blog | ラクス エンジニアブログ

株式会社ラクスのITエンジニアによる技術ブログです。

PhpStormで始めるGit生活

みなさんこんにちは。ぺちぱー歴5年のフジサワでございます。

今回は、PHP開発にはかかせない、PhpStormとGitを連携させて使用する方法をご紹介します。
有償ツールということもあってか、意外とPhpStormを使用したGitの利用方法について詳しくまとめられている記事が少ないので、いっそまとめてしまおうと思い至りました。

本記事では以下の環境をベースに解説しています。

OS:Windows 10 Home Edition
PhpStorm: 2017.2.3

なお、今回の記事では、「開発する上でよく使う機能」のうち、基本的な一部の機能しかご紹介していません。
他の機能については、また改めて記事にまとめ、投稿させて頂きます。

目次

PhpStormのGit関連のUIについて

まず初めに、PhpStorm上でGitを利用するためのUIについて簡単に解説します。

f:id:miracle-fjsw:20170912000334p:plain

VCSメニュー:[VCS] - [Git]配下にcommitやpushといったGitの操作メニューが表示されます。
②VersionContorolタブ:Git関連の情報を表示するペインの表示切替タブ
③各種Git情報タブ
 LocalChanges: プロジェクト中の未コミットファイルや非Git管理下のファイルを表示する。
 Log:コミットツリーを表示する。
 Console:PhpStorm上から実行した諸々の操作履歴
  ※GUI上からの操作はすべてGitクライアントにコマンドとして実行されており、ここにコマンド履歴が表示されます。
  トラブルシューティングの際はこのログを見ると、エラーや何が実行されているのか分かるので便利です。
④Git Branches:[Git:[現在のブランチ]]ブランチの切り替えや新規作成など、ブランチ関連の操作はここから実行します。

まずはここから [git clone]

何はともあれ、リポジトリをcloneしなければ何も始まりません。
まずは、リポジトリをcloneする方法について見てみましょう。

①PhpStorm起動時のウィザードから[Check out from Version Control] - [Git]を選択する。

f:id:miracle-fjsw:20170911235812p:plain:w500

リポジトリのURLやディレクトリの情報を入力して[clone]ボタンを押す。

f:id:miracle-fjsw:20170912000048p:plain

 Git Repository URL: clone対象のリポジトリのURL
 Parent Directory: clone先の親ディレクト
 Directory Name: clone先のディレクトリ名

なお、すでに何かしらのプロジェクトを開いている場合は、以下の手順でもcloneを実行することが可能です。

[VCS] - [Check out from Version Control] - [Git]を選択する。

f:id:miracle-fjsw:20170912013421p:plain

新しいブランチを作成する [git branch]

プロジェクトに対して何か変更を加えるため、新しいブランチを作成しましょう。

①画面右下の[Git Branches]を押下し、表示されるポップアップから[New Branch]を選択する。

f:id:miracle-fjsw:20170912001207p:plain

②作成したいブランチの名前を入力し[OK]ボタンを押下する。

f:id:miracle-fjsw:20170912001304p:plain

ブランチの作成に成功すると、完了メッセージが表示され、現在作業中のブランチが切り替わります。

f:id:miracle-fjsw:20170912014706p:plain

変更内容をコミットする [git commit]

ソースコードに加えた変更をコミットする方法を見てみましょう。

今回はサンプルとして、プロジェクト中のfile-A.phpとfile-C.phpに変更を加えました。

①[VCS] - [Git] - [Commit FIle...] またはツールバーから[Commit]ボタンを選択する。

f:id:miracle-fjsw:20170912001655p:plain f:id:miracle-fjsw:20170912001710p:plain

②コミット対象のファイルにチェックを入れ、コミットメッセージを入力する。

f:id:miracle-fjsw:20170912001814p:plain

③ダイアログ右下の[commit]を押下し、コミットを実行する。

f:id:miracle-fjsw:20170912001925p:plain

ここで[commit and push..]を選択することで、コミットとプッシュを一度に実行できますが、ここではコミットのみ実行します。

④[Verstion Control]から[Log]タブを選択し、ブランチツリーを確認する。

先ほどコミットした内容がブランチツリーに反映されました。

f:id:miracle-fjsw:20170912002030p:plain

なお、作業ディレクトリ内の未コミットのファイルは以下の手順で確認することができます。

①[Verstion Control]から[Local Changes]タブを選択し、作業ディレクトリの状態を表示する。

f:id:miracle-fjsw:20170912001523p:plain

ファイル名を右クリックし、[Show Diff]を選択することで、最新のコミットとの差分を表示することができます。

ローカルの変更をリモートにプッシュする [git push]

それでは、ローカルの変更をリモートに反映するため、プッシュを実行しましょう。

①[VCS] - [Git] - [Push...]を選択する。

f:id:miracle-fjsw:20170912002207p:plain

ダイアログが表示され、これからプッシュする差分の情報などが表示されます。

f:id:miracle-fjsw:20170912002248p:plain

②[Push]ボタン - [Push]を選択し、プッシュを実行する。

f:id:miracle-fjsw:20170912002336p:plain

作業中のブランチを切り替える [git checkout]

次に、作業中のブランチを切り替える方法について確認します。

①画面右下の[Git Branches]を押下し、表示されるポップアップから切り替えたいブランチ名を選択し、[checkout]を選択する。

f:id:miracle-fjsw:20170912002650p:plain

上の例は、既にローカルブランチとして存在するブランチに切り替える場合を説明したものです。 まだローカルブランチとして存在しないブランチに切り替える場合は、次の通りです。

①画面右下の[Git Branches]を押下し、表示されるポップアップから切り替えたいブランチ名を選択し、[Checkout as new branch]を選択する。

f:id:miracle-fjsw:20170912002827p:plain

②作成するブランチ名を入力する。

f:id:miracle-fjsw:20170912002904p:plain

ローカルブランチとして展開する際に、任意の名前を付けることが可能ですが、特別な理由がない限り、基本的にはデフォルトで入力されている名前をそのまま使用すれば良いでしょう。
[OK]ボタンを押下すると、ブランチの切り替えが完了します。

さて、PhpStormでGitを利用するうえで、混乱が生じやすいLocalBrancesとRemoteBranchesについて簡単に補足しておきます。

f:id:miracle-fjsw:20170912003436p:plain

LocalBranches … ローカル上に存在するブランチ。コミットはこのブランチに対して実行される。
RemoteBranches … リモート追跡ブランチ。リモートリポジトリとの同期に使用するブランチで、fetchを実行するとリモートリポジトリの最新の状態が反映される。

ブランチを最新化する [git fetch/merge]

別の開発者によって、リモートリポジトリ側でブランチに加えられた変更内容を取り込む方法を見てみましょう。
ここではmasterブランチに変更が加えられた場合を例に、最新化する手順を確認します。

①[VCS] - [Git] - [fetch]を選択し、RemoteBranchesにリモートリポジトリの変更を取り込む。

f:id:miracle-fjsw:20170912003525p:plain

②作業ディレクトリを、最新化したいブランチに切り替える。

③[Git Branches]から、最新化したいブランチに対応したリモートブランチを選択し、[Merge]を選択する。

f:id:miracle-fjsw:20170912003756p:plain

上記の操作は、指定したブランチの変更内容を、現在checkoutしているブランチに取り込む操作です。
これでリモート側の変更をローカルに反映することができました。

少々、fetchとmergeの仕組みはわかりにくいので、簡単に解説します。
fetch前とfetch後で、ブランチツリーがどのように変化しているかを確認してみましょう。

f:id:miracle-fjsw:20170912003608p:plain

ブランチツリー上でコミット履歴にマウスオーバーすると、そのコミットを指しているブランチの一覧を表示することができます。
fetch前の状態を見ると、ローカルブランチとmasterとリモート追跡ブランチのorgin/masterが同じコミットを指していることがわかります。
fetch後の状態をみると、ローカルブランチのmasterが指すコミットは変わりませんが、origin/masterが別の開発者によって行われたコミットを指している状態になっていることが分かります。
この状態では、まだ作業ディレクトリのソースコードに変化はありません。

f:id:miracle-fjsw:20170912003709p:plain

では、fetchの後、mergeを実行するとどうなるでしょうか。
ブランチツリーの変化とソースコードの変化を見てみましょう。

f:id:miracle-fjsw:20170912003831p:plain

mergeを実行すると、ローカルブランチmasterの指すコミットが、origin/masterと同じコミットを指すようになりました。
この時、ソースコードの方はどう変化しているでしょうか。

f:id:miracle-fjsw:20170912003911p:plain

ご覧の通り、リモート側の変更がソースコードに反映されています。

なお、一連の作業は[VCS] - [Git] - [Pull...]で一括実行することも可能です。

別のブランチの変更を取り込む [git merge]

それでは、別のブランチに行われた変更を取り込む方法を見てみましょう。

例では、[master]から派生した別のブランチ[merge-test]に行われた変更を取り込む流れを確認します。

f:id:miracle-fjsw:20170912004813p:plain

①[VCS] - [Git] - [fetch]を選択し、RemoteBranchesにリモートリポジトリの変更を取り込む。

②作業ディレクトリを、最新化したいブランチに切り替える。

③[Git Branches]から、マージしたいブランチを選択し、[Merge]を選択する。

f:id:miracle-fjsw:20170912004823p:plain

マージが実行されると、デフォルトの設定では以下のようにマージログが追加されます。(fast-forwardについては割愛)
ブランチツリー上も、[master]ブランチと[merge-test]ブランチが統合されていることが分かります。

f:id:miracle-fjsw:20170912005017p:plain

ここでお気づきの方もいると思いますが、「あるブランチを最新化する」という操作と、「別のブランチの変更を取り込む」という操作は、Git上では本質的には同じです。
同じブランチ同士のマージか、異なるブランチ同士のマージかという違いだけで、いずれもブランチ間のマージが行われています。

不要になったブランチを削除する [git branch -D]

マージを実行したので、[merge-test]ブランチは不要になりました。 ここでは、ブランチの削除方法を見てみましょう。

①[Git Branches]から、削除したいブランチを選択し、[Delete]を選択する。

f:id:miracle-fjsw:20170912005744p:plain

なお、この操作はローカルブランチ、リモート追跡ブランチのいずれにも実行することが可能です。 リモート追跡ブランチを削除すると、自動的にリモートリポジトリ上のブランチを削除することができます。

ブランチ間の差分を見る [git diff]

続いて、ブランチ間の差分を確認する方法を見てみましょう。

f:id:miracle-fjsw:20170912011722p:plain

ここでは、[master]ブランチと[new-branch]の差分を比較してみます。

①[Git Branches]から、比較したいブランチを選択し、[Compare]を選択する。

f:id:miracle-fjsw:20170912011755p:plain

②ダイアログから[Files]タブを選択し、差分ファイル一覧を表示する。

f:id:miracle-fjsw:20170912011833p:plain

③確認したいファイルの名前をダブルクリックし、差分を表示する。

f:id:miracle-fjsw:20170912011921p:plain

コミット前のソースを元に戻す

ソースコードの修正をリセットしたい。そんな時はRevertを使用しましょう。

①[Verstion Control]から[Local Changes]タブを選択し、作業ディレクトリの状態を表示する。

②修正を元に戻したいファイルを右クリックする。

f:id:miracle-fjsw:20170912084018p:plain

コンテキストメニューから[revert]を選択する。

f:id:miracle-fjsw:20170912084036p:plain

おわりに

さて、いかがでしたでしょうか。
冒頭にも記載している通り、今回はPhpStormでGitを利用するための一部の基本的な機能しかご紹介していません。
別の機会に、rebaseやstash、conflictの解消方法などの重要な機能についても投稿させていただく予定です。

ではまた。


  • エンジニア中途採用サイト
    ラクスでは、エンジニア・デザイナーの中途採用を積極的に行っております!
    ご興味ありましたら是非ご確認をお願いします。
    20210916153018
    https://career-recruit.rakus.co.jp/career_engineer/

  • カジュアル面談お申込みフォーム
    どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。
    以下フォームよりお申込みください。
    forms.gle

  • イベント情報
    会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください! rakus.connpass.com

Copyright © RAKUS Co., Ltd. All rights reserved.