• ログインログイン
  • 新規登録新規登録

MENU

ゼロから始めるMacintosh開発環境構築(OS X Mavericks編)ーこれからプログラミングを始める人のためにー(6)

連載ゼロから始めるMacintosh開発環境構築(OS X Mavericks編)

プログラミング初心者からでも始められる、Macintoshの開発環境構築についての解説記事です。Xcodeの設定やUNIXのコマンド解説など、初心者が一通り覚えておくべき内容です。

前回までのプログラミング学習コラムに続き6回目の勉強内容です。

第6回 「GitHubでソーシャルコーディング!」

前回はローカルの環境でGitの基礎操作を勉強しましたが、今回はリモートリポジトリを使ってもう少し深くまでGitを体験していきましょう。リモートにはGitHubを使います。

GitHubは誰でも使える無料のリポジトリを提供するWebサービスです。ただし無料で使うには条件があります。それはリポジトリを公開しなければならない、ということです。

「え〜、勉強中のソースコードの保管場所として利用しようと思ったのに、公開されるのは恥ずかしー!」という方もたくさんいらっしゃるでしょうが、ここは覚悟を決めましょう。誰でも勉強し始めは初心者なのです。勉強中のコードをさらすのは恥ずかしいことではありません。むしろ誰かがアドバイスをしてくれるかもしれません。それこそがGitHubのメリットなのです。レビューやプロジェクト管理のサポートなど、コミュニケーションのための仕掛けがたくさん用意されています。積極的に自分のリポジトリを宣伝しましょう。

■ アカウントの取得

GitHubはWebサービスです。まずはアカウントを取得しましょう。GitHubのトップページに行って画面上部の3箇所に必要な情報を入力してGitHubユーザになりましょう。

GitHubトップページ

既に使われているアカウント、使えない記号、簡単すぎるパスワードなどはエラーメッセージが出て入力できませんので、指示に従って登録しましょう。特にパスワードは最低7文字、そのうち最低1文字は英小文字、1文字は数字を混ぜる必要があります。

3つの情報を正しく入力できると各欄の右端に黄緑色のチェックマークが出るので、下の
「Sign up for GitHub」ボタンを押します。

図. GitHubのアカウント作成画面。赤い部分3箇所を入力してから黄緑色のボタンを押す。

次にWelcome画面が出て、プランを選択することになりますが、デフォルトで「Free」が選択されています。無料プランではプライベートなリポジトリを作ることはできません。リモートリポジトリは全て公開されてしまいます。いや、今回はあえて公開するのです(笑)。誰かに突っ込まれるのを恐れずにソースコードを公開してしまいましょう。というわけで迷わず無料プランを選択します。画面下の「Finish sign up」ボタンを押します。

 図. アカウントのプランを選択する画面。デフォルトでFreeプランが選択されている。

■ リモートリポジトリの作成

次は「ブートキャンプ」画面です。GitHubの指示に従って作業をしていきましょう。

図. GitHubのブートキャンプ画面。次にやるべきことを指示してくれる。

大きなボタンが4つありますが、まず1番目のボタンはGitのセットアップです。クリックすると英語の説明がズラズラっと出てきますが、実は前回既におおよその設定は済んでいます。ただし、今回ユーザ登録の際にユーザ名が既に使われていてやむなく変更した場合や、メールアドレスを変更した場合は、Gitコマンドのやり直しをしましょう。

$ git config --global user.name "あなたのユーザ名"
$ git config --global user.email "あなたのメールアドレス"

もう一つ、ターミナルからGitHubにアクセスするたびにパスワードを入力するのは面倒、という方は、キーチェーンアクセスを使えるように設定しておきましょう。

$ git config --global credential.helper osxkeychain

次は2番目のボタン、レポジトリの作成ですね。ブートキャンプ画面に従って作成しましょう。

図. 画面右下に新規リポジトリ作成ボタンがある。

リポジトリ名は「GitHub_exercise」、Descriptionのところは空欄、Initialize this repository with a READMEのところにチェックが入っていないことを確認してください。

これでGitHub上に空のリモートリポジトリができました。画面を見ると次にやるべきことが書いてあります。2パターンあるのですが、今回は前回作ったローカルリポジトリが既にあるので、下の方の「Push an existing repository from the command line」のパターンになります。Gitコマンドでリモートリポジトリ名を登録してプッシュする、という流れになります。指示内容を見ると、リモートのURLが既に今作ったリポジトリのものになっています。作業を進めていきましょう。

$ cd ~/ex_project
$ git remote add origin https://github.com/あなたのID/GitHub_exercise.git

「あなたのID」は、GitHub上でのあなたのアカウント名です。適宜置き換えて下さい。

この後次のコマンドに進む前に、リモートの情報を確認しておきましょう。

$ git remote -v

以下のようにfetchとpushの2行が出てきます。今回はpushの方を使いますが、内容はどちらも同じです。「origin」という名前でリモートリポジトリを指定できるようになっています。

origin https://github.com/あなたのID/GitHub_exercise.git (fetch)
origin https://github.com/あなたのID/GitHub_exercise.git (push)

では指示通りリモートにプッシュしてみましょう。

$ git push -u origin master

ここでユーザ名とパスワードを聞いてくるので、GitHubのログインIDとパスワードを入力します。メッセージが出てくるので見てみると、

Writing objects: 100% (6/6), 605 bytes | 0 bytes/s, done.
Total 6 (delta 1), reused 0 (delta 0)

などと出てきます。どうやらうまく行っているようです。

さらに、

* [new branch] master -> master
Branch master set up to track remote branch master from origin.

などと出てきます。masterというbranchができて、originから追跡できるようになった、ということですが、branchという言葉が出てきました。ブランチとは枝分かれのことで、Gitではこの枝分かれによってコラボレーションでの開発作業を巧みに進めていくのですが、今回はデフォルトで設定されているmasterブランチだけを使って作業していきます。ローカルのブランチ状態を確認してみましょう。

$ git branch

以下のように「master」になっていますね。

* master

ではリモートの方はどうなっているでしょう。うまくプッシュできたでしょうか。

「GitHub_exercise」リポジトリが画面に現れていたらそれを選択します。

図. All Repositoriesタブに「GitHub_exercise」が追加されている。

図. GitHub上に作成されたGitHub_exerciseリポジトリ画面

よく見るとリモートリポジトリ名、ブランチ名(master)、コミットメッセージ、ファイル名など、今までやってきた作業の内容がそのままリモート上に上がっていることがわかります。ファイル名をクリックすれば当然中のソースコードが出てきます。「last commit」のところには40桁のIDであるオブジェクト名の先頭数桁も出てきます。これをクリックするとその時のコミットの差分を見ることもできます。

さあ、プッシュはうまく行っていましたか?これでついにあなたのdb_test.phpは世界中に公開されてしまいました。今までの編集作業もありのままの状態でさらされています。このリモートリポジトリは誰でも見ることができます。無料アカウントではリポジトリを隠すことはできません。せっかくさらしてしまったからには、ここはひとつ一人二役でもう一人のプログラマになり切ってこのリポジトリから複製し、コラボレーションの一端をかいま見ることにしましょう。この共同作業のことをソーシャルコーディングとも言います。

■ ソーシャルコーディング体験

今までGitHub_exerciseプロジェクトを管理してきたあなたを仮に「Aさん」としておきましょう。今からあなたはもう一人のプログラマ「Bさん」に変身です。BさんはAさんが作ったGitHub_exerciseプロジェクトが気になったので自分のローカルにクローンをして、その変更履歴なども参考にしながらさらに改良していこうと思います。

クローンはまさに複製です。Bさんになり切ってクローンのコマンドを実行してみましょう。

$ cd ~
$ git clone https://github.com/あなたのID/GitHub_exercise.git b_ex_project

メッセージが出てきます。

Cloning into ‘b_ex_project’…
remote: Counting objects: 6, done.
remote: Compressing objects: 100% (3/3), done.

クローン完了です。ローカルを確認してみましょう。

$ cd b_ex_project
$ ls
$ git log

git cloneコマンドの時にクローン先のローカルディレクトリ名を指定しておいたので、そのディレクトリがカレントディレクトリ(今回はホームディレクトリ)の下に自動的に作成されました。しかもそのディレクトリにはgit initなどの設定を一切していないのに、Aさんの今までの編集作業までもが全て記録されています。まさにAさんのリモートリポジトリの内容が全てクローンされてしまったのです。クローン、簡単ですね。すぐに人のをクローンしたくなります。公開されているって怖いですね(笑)。でも簡単にクローンできる事こそがGitHubの最大の魅力なのです。そこからプログラマ間の交流がどんどん進んでいくのです。

さてBさんはAさんの編集作業を受け継いで、さらに改良をしようと思います。3段階の管理は今までと同じです。

a) ワーキングツリーがクリーンな状態
b) 何かが変更されている状態(赤いメッセージが出てくる)
c) 変更されたものがステージングされている状態(黄緑のメッセージが出てくる)

そしてc)でコミットすればまたa)の状態に戻ります。

db_test.phpに変更を加えます。

$ subl db_test.php

今回は文字コードの設定処理を加えましょう。関数の詳細については省略します。

<?php
  $link = mysqli_connect('localhost', 'root', '');
  if (!$link) {
    die('接続失敗!<br>'.mysqli_connect_error());
 } else {
    echo '接続成功!';
    mysqli_set_charset($link, "utf8");
 }
?>

赤い文字の行(7行目)を追加して下さい。

保存したらgit statusで変更があったことを確認しておきましょう。

さて今回はなるべく早くプッシュを試したいので、一歩下がらずにすぐにgit add、git commitをしていきましょう。でも途中の状態は是非git status等で確認しておいて下さい。

$ git add db_test.php
$ git commit
(コミットメッセージは、「Add: mysqli_set_charset() function」)

ここでgit logをとると、3回目のコミットが記録されていることがわかります。ではプッシュしてみましょう。2回目以降のプッシュでは-uオプションは不要です。

$ git push origin master

ローカルもリモートも状態を確認してみて下さい。双方の最新コミットを確認しておくと良いでしょう。

さて、もし間違えてプッシュしてしまった場合、つまりこのプッシュ作業をなかったことにしたい場合(十分あり得ますね 笑)、以下のコマンドを打ちます。

$ git push -f origin HEAD^:master

ひとつ前の状態を強制的にプッシュする、という感じですね。これを試した場合は、リモートリポジトリの状態をGitHubの画面で確認してみて下さい。last commitが1回目のコミットに戻っているはずです。

もしプッシュ取り消しをした場合はもう一度プッシュしておいて下さい。これを放置すると、ローカルとリモートのコミットの状態が合わなくなるので次回のプッシュで失敗してしまいます。もしローカルの方のコミットもなかったことにしたい場合は、前回触れたようにgit resetコマンドを使います。

つまりプッシュを取り消した場合は、忘れないうちに

$ git push origin master

をやり直すか、ローカルをひとつ前のコミットに戻すために

$ git reset --soft HEAD^

のどちらかをやっておかないと、双方の状態が合わなくなるわけです。注意しましょう。

なお、今回操作ミスなどで双方の状態がぐちゃぐちゃになってどうしても合わなくなってしまったら、練習ですからとっととローカル側を全て消去してクローンし直すのが一番です。なんと言ってもクローンは簡単です。

さてBさんがプッシュしてきたので、Aさん喜びました。私のソースコードが改良されている! Aさんもその改良を取り込もうと思いました。今度はプルです。プッシュの反対ですね。

$ cd ~/ex_project
$ git log

Aさんのローカルディレクトリはまだコミットが2つだけですね。プルをすることによってBさんの3回目のコミットを引き継ぐことができます。

$ git pull origin master

メッセージがいろいろ出てきますが、「Fast-forward」という言葉に注目です。

* branch master -> FETCH_HEAD
f38a18c..218cc4f master -> origin/master
Updating f38a18c..218cc4f
Fast-forward
db_test.php | 1 +
1 file changed, 1 insertion(+)

「Fast-forward」というのは早送り、つまりAさんのコミットを早送りして先行しているリモートのコミットに追いついたわけです。git logで確認してみましょう。コミットが3つになっていますね。

さてここでひとつの疑問が湧きます。今回はAさんがコミットを進めないうちにBさんがコミットしてプッシュしたわけです。だからBさんはそのコミットを取り込む、つまり早送りして追いつけば良かったのですが、もしAさんとBさんが同時に編集を進めていったらどうなるのでしょうか。例えばBさんが先にプッシュして、そのコミットを取り込まないでAさんがプッシュしようとした場合、当然リモート側はそのプッシュを拒否します。まずBさんのコミットをプルしてからプッシュせよ、というメッセージがちゃんと出ます。でもAさんがプルすると自分のローカルの方にも既に変更が発生しているのでコンフリクト(矛盾、競合)が発生します。それを手作業で直して行くことになります。やってみましょう。

まずAさんがソースコードを修正して4回目のコミットをします。今回は文字コード設定の情報を表示しましょう。

$ cd ~/ex_project
$ subl db_test.php

<?php
 $link = mysqli_connect('localhost', 'root', '');
 if (!$link) {
   die('接続失敗!<br>'.mysqli_connect_error());
 } else {
   echo '接続成功!';
   mysqli_set_charset($link, "utf8");
   echo '文字コードは'.mysqli_character_set_name($link).'です。';
 }
?>

赤い文字の行を追加します。保存したらさっそくgit add、git commitまでしておいて下さい。コミットメッセージは「Add: print charset」にしましょう。プッシュはまだしないでおいて下さい。

次にBさんの作業です。Bさんの変更はDBのクローズ処理の追加です。

$ cd ~/b_ex_project
$ subl db_test.php

<?php
 $link = mysqli_connect('localhost', 'root', '');
 if (!$link) {
   die('接続失敗!<br>'.mysqli_connect_error());
 } else {
   echo '接続成功!';
   mysqli_set_charset($link, "utf8");
   mysqli_close($link);
 }
?>

これも赤文字の行の追加です。保存したらAさんと同じく、すぐにgit addしてgit commitして下さい。コミットメッセージは「Add: mysqli_close() function」にします。

そしてそのまま先にBさんがプッシュします。

$ git push origin master

リモートリポジトリの内容を確認して下さい。last commitの内容がmysqli_close()の追加になってますね。

さあ、今度はAさんの番です。プッシュしてみましょう。

$ cd ~/ex_project
$ git push origin master

リジェクト(拒否)されてしまいました。

! [rejected] master -> master (non-fast-forward)
error: failed to push some refs to ‘https://github.com/あなたのID/GitHub_exercise.git’

そしてその後のヒントメッセージに「git pull」という言葉が見えますね。プッシュする前にBさんのコミットを反映させれば良いわけです。ではプルしてみましょう。

$ git pull origin master

何やら怪しいメッセージが出ています。

Auto-merging db_test.php
CONFLICT (content): Merge conflict in db_test.php
Automatic merge failed; fix conflicts and then commit the result.

リモートのBさんのコミットとローカルのAさんのコミットを自動的にうまくマージ(結合)しようしたのですがコンフリクトが起きて失敗したようです。db_test.phpを見てみましょう。

$ subl db_test.php

<?php
 $link = mysqli_connect('localhost', 'root', '');
 if (!$link) {
   die('接続失敗!<br>'.mysqli_connect_error());
 } else {
   echo '接続成功!';
   mysqli_set_charset($link, "utf8");
<<<<<<< HEAD
   echo '文字コードは'.mysqli_character_set_name($link).'です。';
=======
   mysqli_close($link);
>>>>>>> 62203a8df4da7d759339e37ba6918586bb08d672
 }
?>

Gitが追加した3行を赤文字にしてみました。この3行はコンフリクトした場所をマークするためにGitが付加したものです。ローカルのHEADコミットではecho行、でもリモートの最新コミットではmysqli_close()関数になっている、ということです。同じ場所を変更したので両方をうまく取り入れることができなかったようです。Aさんは両立できると判断したので、echo行もmysqli_close()行も生かすことにしました。この場合はGitが付加したマーカー行3行を削除すればO.K.です。

<!--?php <br ?--> $link = mysqli_connect('localhost', 'root', '');
if (!$link) {
die('接続失敗!
'.mysqli_connect_error());
} else {
echo '接続成功!';
mysqli_set_charset($link, "utf8");
echo '文字コードは'.mysqli_character_set_name($link).'です。';
mysqli_close($link);
}
?&gt;

これで保存してもう一度git add、git commitします。コミットメッセージは今回の場合自動的に生成されているので、このままで行きましょう。

Merge branch 'master' of https://github.com/あなたのID/GitHub_exercise

Conflicts:
db_test.php
(以下コメント行)

では再度プッシュしてみましょう。

$ git push origin master

今度はうまく行きましたね。ここでgitkを見ると、今までの履歴が一目で分かります。過去のコミットをさかのぼるとマージまでの経過がよくわかると思います。

図. gitkの画面上部。今までのコミットが全て表示されている。

さて、長々とお疲れさまでした。これでもGitとGitHubはまだまだその一部にしか触れていません。なんといっても今回はブランチがmasterだけでした。実際のソーシャルコーディングでは複数のブランチがフルに活用されているはずです。

でも個人でのGit使用ならここまでで十分でしょう。コンフリクトの解消も体験したことですし、個人のプロジェクトや数人のコラボレーションならば一定の管理作業はできると思います。

さて、これで6回にわたる連載は終了です。プログラム開発に必要な周辺知識は身に付きましたか? たくさんの事柄を学んできたので、忘れそうなこともあるでしょうが、ふだんからコマンドをバシバシ叩いていけば手が覚えてくれるので、是非ターミナルの達人になって下さい。多くのコマンド群があなたのプログラミングをしっかりと支えてくれるはずです。そしてそれらを利用してインターネット上に成果を公開し、ソーシャルコーディングをたっぷり楽しんで下さい。世界が広がる爽快感を味わうことができると思います。

オススメ記事一覧

もっと見る
完全無料!

1で登録完了!

エンジニアの仕事・年収や選考ノウハウ記事が読めるほか、
会員にはプログラミング講習やES・面接対策などリアルな無料サポートも充実。
ここだけの求人情報も多数。

今すぐ新規会員登録
Page Top