みなさんこんにちは。ぺちぱー歴5年のフジサワでございます。
今回は、PHP開発にはかかせない、PhpStormとGitを連携させて使用する方法をご紹介します。
有償ツールということもあってか、意外とPhpStormを使用したGitの利用方法について詳しくまとめられている記事が少ないので、いっそまとめてしまおうと思い至りました。
本記事では以下の環境をベースに解説しています。
OS:Windows 10 Home Edition
PhpStorm: 2017.2.3
なお、今回の記事では、「開発する上でよく使う機能」のうち、基本的な一部の機能しかご紹介していません。
他の機能については、また改めて記事にまとめ、投稿させて頂きます。
目次
- PhpStormのGit関連のUIについて
- まずはここから [git clone]
- 新しいブランチを作成する [git branch]
- 変更内容をコミットする [git commit]
- ローカルの変更をリモートにプッシュする [git push]
- 作業中のブランチを切り替える [git checkout]
- ブランチを最新化する [git fetch/merge]
- 別のブランチの変更を取り込む [git merge]
- 不要になったブランチを削除する [git branch -D]
- ブランチ間の差分を見る [git diff]
- コミット前のソースを元に戻す
- おわりに
PhpStormのGit関連のUIについて
まず初めに、PhpStorm上でGitを利用するためのUIについて簡単に解説します。
①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]を選択する。
②リポジトリのURLやディレクトリの情報を入力して[clone]ボタンを押す。
Git Repository URL: clone対象のリポジトリのURL
Parent Directory: clone先の親ディレクトリ
Directory Name: clone先のディレクトリ名
なお、すでに何かしらのプロジェクトを開いている場合は、以下の手順でもcloneを実行することが可能です。
[VCS] - [Check out from Version Control] - [Git]を選択する。
新しいブランチを作成する [git branch]
プロジェクトに対して何か変更を加えるため、新しいブランチを作成しましょう。
①画面右下の[Git Branches]を押下し、表示されるポップアップから[New Branch]を選択する。
②作成したいブランチの名前を入力し[OK]ボタンを押下する。
ブランチの作成に成功すると、完了メッセージが表示され、現在作業中のブランチが切り替わります。
変更内容をコミットする [git commit]
ソースコードに加えた変更をコミットする方法を見てみましょう。
今回はサンプルとして、プロジェクト中のfile-A.phpとfile-C.phpに変更を加えました。
①[VCS] - [Git] - [Commit FIle...] またはツールバーから[Commit]ボタンを選択する。
②コミット対象のファイルにチェックを入れ、コミットメッセージを入力する。
③ダイアログ右下の[commit]を押下し、コミットを実行する。
ここで[commit and push..]を選択することで、コミットとプッシュを一度に実行できますが、ここではコミットのみ実行します。
④[Verstion Control]から[Log]タブを選択し、ブランチツリーを確認する。
先ほどコミットした内容がブランチツリーに反映されました。
なお、作業ディレクトリ内の未コミットのファイルは以下の手順で確認することができます。
①[Verstion Control]から[Local Changes]タブを選択し、作業ディレクトリの状態を表示する。
ファイル名を右クリックし、[Show Diff]を選択することで、最新のコミットとの差分を表示することができます。
ローカルの変更をリモートにプッシュする [git push]
それでは、ローカルの変更をリモートに反映するため、プッシュを実行しましょう。
①[VCS] - [Git] - [Push...]を選択する。
ダイアログが表示され、これからプッシュする差分の情報などが表示されます。
②[Push]ボタン - [Push]を選択し、プッシュを実行する。
作業中のブランチを切り替える [git checkout]
次に、作業中のブランチを切り替える方法について確認します。
①画面右下の[Git Branches]を押下し、表示されるポップアップから切り替えたいブランチ名を選択し、[checkout]を選択する。
上の例は、既にローカルブランチとして存在するブランチに切り替える場合を説明したものです。 まだローカルブランチとして存在しないブランチに切り替える場合は、次の通りです。
①画面右下の[Git Branches]を押下し、表示されるポップアップから切り替えたいブランチ名を選択し、[Checkout as new branch]を選択する。
②作成するブランチ名を入力する。
ローカルブランチとして展開する際に、任意の名前を付けることが可能ですが、特別な理由がない限り、基本的にはデフォルトで入力されている名前をそのまま使用すれば良いでしょう。
[OK]ボタンを押下すると、ブランチの切り替えが完了します。
さて、PhpStormでGitを利用するうえで、混乱が生じやすいLocalBrancesとRemoteBranchesについて簡単に補足しておきます。
LocalBranches … ローカル上に存在するブランチ。コミットはこのブランチに対して実行される。
RemoteBranches … リモート追跡ブランチ。リモートリポジトリとの同期に使用するブランチで、fetchを実行するとリモートリポジトリの最新の状態が反映される。
ブランチを最新化する [git fetch/merge]
別の開発者によって、リモートリポジトリ側でブランチに加えられた変更内容を取り込む方法を見てみましょう。
ここではmasterブランチに変更が加えられた場合を例に、最新化する手順を確認します。
①[VCS] - [Git] - [fetch]を選択し、RemoteBranchesにリモートリポジトリの変更を取り込む。
②作業ディレクトリを、最新化したいブランチに切り替える。
③[Git Branches]から、最新化したいブランチに対応したリモートブランチを選択し、[Merge]を選択する。
上記の操作は、指定したブランチの変更内容を、現在checkoutしているブランチに取り込む操作です。
これでリモート側の変更をローカルに反映することができました。
少々、fetchとmergeの仕組みはわかりにくいので、簡単に解説します。
fetch前とfetch後で、ブランチツリーがどのように変化しているかを確認してみましょう。
ブランチツリー上でコミット履歴にマウスオーバーすると、そのコミットを指しているブランチの一覧を表示することができます。
fetch前の状態を見ると、ローカルブランチとmasterとリモート追跡ブランチのorgin/masterが同じコミットを指していることがわかります。
fetch後の状態をみると、ローカルブランチのmasterが指すコミットは変わりませんが、origin/masterが別の開発者によって行われたコミットを指している状態になっていることが分かります。
この状態では、まだ作業ディレクトリのソースコードに変化はありません。
では、fetchの後、mergeを実行するとどうなるでしょうか。
ブランチツリーの変化とソースコードの変化を見てみましょう。
mergeを実行すると、ローカルブランチmasterの指すコミットが、origin/masterと同じコミットを指すようになりました。
この時、ソースコードの方はどう変化しているでしょうか。
ご覧の通り、リモート側の変更がソースコードに反映されています。
なお、一連の作業は[VCS] - [Git] - [Pull...]で一括実行することも可能です。
別のブランチの変更を取り込む [git merge]
それでは、別のブランチに行われた変更を取り込む方法を見てみましょう。
例では、[master]から派生した別のブランチ[merge-test]に行われた変更を取り込む流れを確認します。
①[VCS] - [Git] - [fetch]を選択し、RemoteBranchesにリモートリポジトリの変更を取り込む。
②作業ディレクトリを、最新化したいブランチに切り替える。
③[Git Branches]から、マージしたいブランチを選択し、[Merge]を選択する。
マージが実行されると、デフォルトの設定では以下のようにマージログが追加されます。(fast-forwardについては割愛)
ブランチツリー上も、[master]ブランチと[merge-test]ブランチが統合されていることが分かります。
ここでお気づきの方もいると思いますが、「あるブランチを最新化する」という操作と、「別のブランチの変更を取り込む」という操作は、Git上では本質的には同じです。
同じブランチ同士のマージか、異なるブランチ同士のマージかという違いだけで、いずれもブランチ間のマージが行われています。
不要になったブランチを削除する [git branch -D]
マージを実行したので、[merge-test]ブランチは不要になりました。 ここでは、ブランチの削除方法を見てみましょう。
①[Git Branches]から、削除したいブランチを選択し、[Delete]を選択する。
なお、この操作はローカルブランチ、リモート追跡ブランチのいずれにも実行することが可能です。 リモート追跡ブランチを削除すると、自動的にリモートリポジトリ上のブランチを削除することができます。
ブランチ間の差分を見る [git diff]
続いて、ブランチ間の差分を確認する方法を見てみましょう。
ここでは、[master]ブランチと[new-branch]の差分を比較してみます。
①[Git Branches]から、比較したいブランチを選択し、[Compare]を選択する。
②ダイアログから[Files]タブを選択し、差分ファイル一覧を表示する。
③確認したいファイルの名前をダブルクリックし、差分を表示する。
コミット前のソースを元に戻す
ソースコードの修正をリセットしたい。そんな時はRevertを使用しましょう。
①[Verstion Control]から[Local Changes]タブを選択し、作業ディレクトリの状態を表示する。
②修正を元に戻したいファイルを右クリックする。
③コンテキストメニューから[revert]を選択する。
おわりに
さて、いかがでしたでしょうか。
冒頭にも記載している通り、今回はPhpStormでGitを利用するための一部の基本的な機能しかご紹介していません。
別の機会に、rebaseやstash、conflictの解消方法などの重要な機能についても投稿させていただく予定です。
ではまた。
エンジニア中途採用サイト
ラクスでは、エンジニア・デザイナーの中途採用を積極的に行っております！
ご興味ありましたら是非ご確認をお願いします。
https://career-recruit.rakus.co.jp/career_engineer/カジュアル面談お申込みフォーム
どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。
以下フォームよりお申込みください。
forms.gleイベント情報
会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください！ rakus.connpass.com
