複数人でWebサイトやアプリなどを開発する場合、コミュニケーション由来のミスにより開発遅延が発生するケースがありますよね。こんな時、誰しもがもっと効率的に開発を進めたい！と思ったことがあるでしょう。そんな時はソースコードのバージョン管理や共同開発ができるGitが役立ちます。
しかしソースコードのバージョン管理や共同開発の効率化のために用いられてきたGitは、コマンドラインやターミナルで操作しますが、人間にとってとにかくわかりづらく(≒コンピューターにとってはわかりやすい)、一部のハイエンドな人達しか使えないツール。また会社や事業所に新たなツールを導入する場合は受け入れられないなんてことも。
ですから”人間”にとって視覚的に理解しやすいGUI(Graphical User Interface)を用いることで、導入へのハードルは格段に下げましょう。
そこで今回は、上記のお悩み解決に寄与するツール”Git GUI”についてお伝えします。
Gitとは
例えば、Aさんが「僕は昨日ソースコードを編集した」と言っている一方で、Bさんは「私は今朝コードを編集した」と言っているとします。するとCさんは編集作業前に、「結局どっちが最新なの？」と迷ってしまいますよね。しかしGitを使うことにより、どのファイルが最新か、そしてAさんBさんはどこを直したのか、そういったことがすぐにわかるようになるのです。
具体的なGitの操作は以下のとおり。今回は「〜.html」ファイルを共同開発者と共有する流れで見ていきます。
※初見の方にとっては、難解なコマンドや用語が混じっているかもしれないが、ひとまずおまじないと思って読み飛ばしてください。
1.共有したいファイルを選択する（インデックスに登録してコミット対象にする）
コマンド：git add 〜.html
2.選択したファイルを記録する(ファイルをコミット)
コマンド:git commit -m “(コミットメッセージ)”
3.リモート環境を準備する
コマンド：git remote add origin (リモートのURL)
4.ファイルをアップロードする
コマンド：git push origin(手順3で付けたリモート名) master
5.（共有先で）ファイルをダウンロードする
コマンド：git pull origin master
いかがでしょうか。Gitは以上の流れをコマンドライン/ターミナル上で操作する必要があります。細かいことは理解できなくとも、人間にとってかなりわかりづらいでしょう。
そこで、このGitの操作と同じことを、より人間にとってわかりやすく可視化し、操作が簡易な”Git GUI”についてご紹介しましょう。
Git GUI クライアントとは？
それではこのGit GUIの代表的なものとしてGitHub Desktop、SourceTree、GitKrakenをご紹介します。
GitHub Desktop
GitHub DesktopはGitHubが提供しているため、GitHubとの連携に強いソフト。無料で起動が軽い。各コミットをクリックしたときの動作も軽い反面機能が少ないです。
Source Tree
Source Treeは利用者が多く、初心者にオススメです。こちらも無料で日本語に対応しています。
起動時とても重いが、各コミットをクリックしたときの動作は軽快で機能も充実。
GitKraken
GitKrakenは見た目がかっこいいです。一部の機能は有償で標準では英語表示のみ(非公式だが日本語化する方法はある)。
Git GUI クライアントで使える機能
それではさらにGit GUIで使える機能についてお話ししましょう。まずはGitHub Desktopから。
GitHub Desktop
- 変更点の可視化
- コミット追加
- ブランチ作成
- コンフリクトのチェック
動作が軽い代わりに細かい作業はあまりできないようです。上級者向けという印象を受けました。
Source Tree
- 日本語対応があります。初心者にオススメ。
- ブランチのコミット状況が視覚的にわかりやすく、樹形図のグラフ機能があります。
- GitHub Desktopと同様に、変更の差分は色でわかります。
- 直接ターミナルを開くことも可能。
GitKraken
- SourceTreeと似たようなツリーイメージのグラフを出すことができます。
- Undoという機能でコミットする直前に戻れます。(逆の操作をしたいときは、Redo)
- プロジェクトのスケジュール管理が可能です。（Outlookの予定表のイメージ)
Git GUIのダウンロード・インストール方法
ここまで自分なりに調べてみて、最も興味を持てたGit GUIは”Source Tree”でした。理由は初心者にオススメとのコメントを何度も見かけたためです。
そこで、実際にその初心者にオススメのGit GUI “Source Tree”をダウンロード・インストールしてみることにします(Mac版)。
Git GUI クライアントを開発での使い方
実際にSourceTreeを使ってみます。
こういった操作を視覚的にできることこそが、GUIの強みですよね。
ドラッグして下に持っていくだけでaddを取り消すこともできます。
下の方にコミットメッセージ入力ボックスが出てくるため、入力します。
このように、基本的な操作が視覚的にわかりやすく行うことが可能。
試しにテキストファイル「aaa」を「aab bbb」と変更してみましょう。すると履歴というところのもともと「aaa」だった箇所が赤色に、変更後の「aab bbb」が緑色に変更されます。このようにどこを変更して、その結果どんな風に変わったのかがわかりやすい仕様となっています。
このあたりの機能はターミナル上のGit操作およびGitHub Desktopでも見られたため、Git共通仕様なのかもしれません。
Git GUIを使いこなすためのポイント
ここまででおわかりのようにGitの真髄は、「チームで仕事をし、成果を出すための効率up」でしょう。
コミットメッセージに書くべき内容を考えてみると、「何を」と「なぜ」を書くことがいいでしょう。
自分の変更は、他の皆さんへ共有されるのですから、そういった意識でGit GUIに触れていきましょう。
今回はGit GUIについてお話しました。
Gitは「チームで成果を出す」という考えに重きを置いた場合に重要なツール。しかし実態は「これからプログラミングを学ぶぞ！」とお考えの意識をお持ちの方に取っては、とっつきづらい部分もあるのも事実です。
ですが、現実的に多いのは複数人で開発を推進する場合、特にどこかの企業や大学に所属するなどのケースが多数でしょうし、最初に学んでおくべき分野でしょう。
昔のようにソースコードやコマンドラインを叩かずとも、今回紹介させて頂いたようなGUIベースのGitツールもたくさん登場してきています。恵まれた時代ですので、少しでも興味・関心を持たれた方は、是非一度おためして開発に役立てましょう。
