はじめてのGit
たぶん関西でいちばんゆるいGit入門
たなかひさてる
@tanakahisateru
Pinoco developer
js-markdown-extra maintainer
PHPTAL contributor
Firebug translation contributor
Yii framework user
...and more OSS experienced
何者かという話をわ
かりやすいとこで
はいこれで今日喋った人が誰だっ
たか忘れなくなりました
わたしとGit

僕はそんなGitのすごい人じゃないです。

GitHubで必要な最低限の知識しかありません。

わからないことはすぐググります。

Gitは他人と使ってナンボでしょって思います。
人にGitを教えるとこうなった

前職では、デザイナー(コーダー)の同僚やクライアントにGit

を教えて使ってもらってました。

デザイナーは「これなかったら仕事できない」って中毒にな

りました。

クライアントとのやりとりが超スムーズになりました。
教えなきゃ損だよこれ
このセッションでは

ホントの入門からちょっとだけ踏み込んで始めます。

みなさんが職場なり取引先なりで、布教する側の人になるぐ

らいの中毒にするのが目標です。(初心者とか関係ないです)

教わらなくてもわかってる人は、教え方のヒントをパクって

ください。Gitは他人と使ってナンボです。
バージョン管理って?


実はみなさん、たぶんすでにバージョン管理をやっていると

思いますよ。

日付名をつけてフォルダをバックアップするアレ。
はじめてのGit #gitkyoto
このへんまだやる気ある
「ちょっと複数案見せてよ」
    「えっ...」
「やっぱり前の前のが良かった」
 (やる気なくなってきてる感)
「やっとフィックス案できた...バタッ」
「さっそくで悪いんだけど直しが...」
     (壁ドンですよね)
数日後
どの子がどの子かしら...?
手作業の罠

人間はサボる/焦る/間違える。

フォルダの前後関係に保証がない。

誰が何をした結果なのかわからない。

ハードディスクにほとんど同じ内容のフォルダできて、

すごい早さで容量を圧迫してくる。
そんなあなたも
Gitを使うと
こうなります
さらにこうなります
日付フォルダとのちがい

誰が、いつ、何を変更したのか履歴に残る。

どの変更がどれを元にしたのか、順番を間違えない。

正式な最新版がわかるという大事さ。

変更情報だけを保存 → ハードディスクを圧迫しない。

(なので遠慮なくバックアップできる)
Subversion < Git
初心者には(そして多分将来ずっと)Gitがオススメ。

サーバの準備がまだでも作業を始められる。

Finderで勝手に移動/削除/名前変更をしても壊れない。

変更履歴の参照がとても速い。

プラグインがないので人によって機能の差が出ない。

(これはMercurialに対するメリット)
どうせGitは必要
みんなGitHub




            もっとあるよ
やってみよう
インストール

最新のXcodeを使っている

人はもう入っています。

ない人はこちら

http://git-scm.com/
で、次は...
はじめてのGit #gitkyoto
待って、こわくないから
これからやろうとしてること

「Gitはコマンドだ」ということを知ってもらいます。

コマンドを打ち込みながら用語をおぼえましょう。

失敗しても大丈夫、目的は操作じゃなくて理解です。

概念を理解してからGUIへ。

そのときはもう、コマンドは忘れてていい。
コワクナイカラ/

     <
うごきますか
自分の名前を設定しよう
作業者の名前は自己申告です。


Gitは自分で勝手に始めたり別のサーバに引越したりできるので、
誰が作業したかという名前はサーバの認証とは完全に別なのです。
この練習で使う
ソースコードを...
パクりますね
http://www.initializr.com/
IEとかFaviconとかオフで
ダウンロード&展開
これが初版です
はじめてのGit #gitkyoto
cd[スペース]のあと、ターミナルに
   フォルダをドロップします。




作業するフォルダを開く
いま開きました
現在ターミナルで開いているフォルダを「カ

レントディレクトリ」と言います。


cd の後にパスを指定すると、カレントディレ

クトリを変えることができます。


カレントディレクトリの確認は pwd です。
ホントに合ってる?
このへん大丈夫ですかー
いよいよGitですよー
git init
.git=ローカルリポジトリ
リポジトリ=入れ物


.git が消えると何もなかったことになる。


全部やり直したいときは rm -rf .git
(あるいは詳しい人にこっそり聞きましょう)
git status
Untracked files = まだ管理していないファイ

ルがこれだけあるということ。


git add を使えと言われていますね。
git add
add = コミット(あとで言います)するリストにファ

イル追加するという意味で add です。


この操作をステージと言います。


バージョン管理でもっとも大事な操作、コミット

の準備です。


ちょうど、Finderでシフトキーを押しながらファイ

ルをポチポチするようなものです。
からの→ git status
git status の結果が Changes to be committed:

というリストになりました。


いよいよ次が初めてのコミットです。
git commit -m “...”
初回コミットおめでとうございます。コミット

はバージョン管理でもっとも重要な機能です。


選んだファイルを .git フォルダの中にバックア

ップコピーしたイメージです。


各コミットには、作業者の名前、コミットの日

時、メッセージが必ず残ります。
-m なしで git commit としてしまい、なにが

起こったかわからない人は、近くの詳しそう

な人に聞いてください。


わかる人はそのまま続け、:wq で終了したら

いいと思います。


わからない人はGUIを使うまで待ってね。
git status ...?
→ git log ...!
git status は nothing to commit (working

directory id clean)と言っています。最後のコミ

ットからまだ変更がないという意味です。


git log で過去のコミットを参照できます。


コミットに 00e8ac1be367fb350... というIDが付

いていることがわかります。このコミットのユ

ニークな管理番号で、わりと重要です。
心配なら git log --stat
もし .DS_Store でグチグチ言われる人は...
.gitignore というファイルに
.DS_Store と書きます
.gitignore = git + ignore (無視)


無視するファイル名やパスのパターンを書く
ここまでのまとめ

git init

git status

git add <file/folder>

git commit -m “message”

git log

.gitignore
むずかしいひとー
そうですね...
癒し成分補充しときます
ここから面白く
なるよ。
index.htmlに
変更発生。
git status
git diff
git commit -a -m “...”
git commit -a は変更されたファイルをすべて

add してからコミットという意味です。


git add でステージしてから git commit する

のと同じです。
git log
ログの結果が2つになりました。


「ソースを変更して確認・コミット」を自由

にやってみましょう。
作業が区切れたらすぐにコミットしましょ

う。


差分保存なので容量は食いません。遠慮なく

どんどんやりましょう。(※ Photoshopは別)


頻度の目安は、1行のメッセージで意味を表

せる程度の変更セットです。
ここまでのまとめ


git status や git diff で状態を確認しつつ...

変更 → コミット → 変更 → コミット → ...

ここは難しくないですね。
つぎ、ちょっと難しい話になります。
コワクナイカラ/

     <
HTMLの更新をしながら
裏でコツコツCSSを変えたい
ブランチ
git branch css-coding
git checkout css-coding
css-coding という名前のブランチを作り、ブ

ランチを切り替えました。


慣れている人は

git checkout -b css-coding
で、作成と切り替えを同時にできます。
git branch (パラメータなし)
ブランチが2つあること、今のブランチが

css-codingだということがわかります。


master = 最初からあるメインのブランチ
css-coding
ブランチで、
css/main.css
を書き換え。
commit → log
H1 HENKOU → CSS PINK という変更の流れ

でしたね。これを憶えておいてください。

(人によっては違うかもしれません)


ここで、CSSの作業をやめて、HTMLだけ変

更する作業の流れに戻りましょう。
git checkout master
masterブランチでは、最後のコミットがまだ

H1 HENKOU のままです。つまり...
もとどおり
何事もなかった
かのように
index.html
を書き換えて...
commit → log
H1 HENKOU → KIJI MIDASI という流れで

コミットがつながりました。


masterブランチでは、CSS関係のコミットが

なかったことになっています。
別フォルダ作業のイメージ




    master   css-coding
branchとは


           git branch css-coding




             css-coding
checkoutとは



git checkout master




                      master
      作業フォルダ
git log --oneline --graph --all
たしかにコミットの履歴が分岐しています。


ブランチは別の人と作業するとき有効です。他のバージョ

ン管理ツールとGitが違うのは、タグなんかよりずっとブ

ランチのほうが使用頻度高いという点です。


でもちょっと難しいので、互いに同時に触らないよう声

をかけながらひとつのブランチでやってもいいです。


ただし、この「コミットの分岐」という概念は、Gitを理

解して使う上で絶対に忘れてはいけません。
git merge -m “...” css-coding
たったひとつのコマンドで
別のブランチの作業が合体!
mergeとは




       master    css-coding

     git merge
マージは、相手のブランチから変更ファイル

だけを取り出して、自分のファイルを上書き

するイメージ。


もしブランチ間で同じファイルを変更してた

ら、それらが競合(コンフリクト)した状態に

なります。
いまコンフリクトについて説明するのは大変

なので、なるべく起こさないようにしてくだ

さい。


Gitでコンフリクトを解消するのは、

Subversionよりずっと簡単なのでご安心を。


もし起こったら経験者に聞きましょう。
参考: 超わかりやすいブランチの話
http://www.slideshare.net/
    kotas/git-15276118
ここまでのまとめ

git branch ブランチ名

git checkout ブランチ名

git branch

git log --oneline --graph --all

git merge ブランチ名
むずかしいひとー
そろそろまた癒し成分
いちいちコマンド打つのは
  正直しんどい
http://gitx.frim.nl/
あえてもっとも古いGitXを使います。


ここまでの説明に対応する機能しかないの

で、すごくわかりやすい。


コマンド運用との相性がいいです。


コマンドが苦手な人には、後でもっと先の機

能があるツールを紹介します。
log, diff, branch
branch -d(削除), checkout
status, diff
add, checkout --(変更をやめる機能)
commit + エディタ
おまけ: ターミナル好きなら tig
絶対途中でやってはいけないこと



改行コードの変更 CRLF→LF

文字コードの変更 SJIS→UTF-8

インデント方針の変更 タブ→スペース
絶対途中でやってはいけないこと


これやると、ファイルのすべての行が書き換わったと認識さ

れます。

本来の変更意図がわからなくなります。

やるなら早い段階で、全ソースのフォーマットを一気に変更

するコミットをしましょう。
コワクナイカラ/

     <
いよいよGitHubへ
https://github.com/
まだの人はサインアップ
Welcome to social coding.
公開            を登録
公開    認証とSSHの説明は省きます。

ずばり、~/.ssh ありますか?

open ~/.ssh

id_rsa.pub があればOK、それを使います。

ない人はこれで作ります:
ssh-keygen -t rsa -C "your_email@youremail.com"

すでに持っている人は隣の人を手伝ってあげましょう。
ここに詳しく出ています:
https://help.github.com/articles/
       generating-ssh-keys
id_rsa.pub できたら...




で、id_rsa.pubの内容をまるごとコピペしましょう。
ここ




リポジトリを作ろう
できた
はじめてのpush
⌘+R
git push origin master はoriginのリモートリ

ポジトリにmasterブランチをアップロードす

るイメージです。


-u オプションは、以降masterブランチで git

push だけしたとき、デフォルトでoriginに

pushするようになるという紐付け。
push

       push
ところでこのEditって?
編集できちゃう!
メッセージ+コミット
git pull
git pull はリモートのリポジトリからローカル

にダウンロードするイメージ。


あ、GitHubのサイトで編集すると、動作確認

できてないソースでコミットを積むことにな

るので、普通はダメですよ。
pull




       pull
pullの注意点
リモートからpullする=ダウンロードしたものを無名ブランチと

みなして、マージ→コミットをやっている。

ダウンロードしてマージしないpullをfetchと言う。

pull = fetch + merge

とにかく、いきなりローカルぜんぶ上書きではない。

FTPで落としてきたファイルをいきなり上書きして困ったこと...

ありますよね。
pushの注意点
リモートの最新より古い状況に積んだコミットをpushするの

は禁止されます。

なので、まずローカルにpullしてから、作業→コミット

→pushの順序を守りましょう。

他の人が上げたサーバの最新を古いファイルでFTP上書きし

て困ったこと...ありますよね。
むずかしいひとー
ややこしいので、とりあえずWeb制作の言葉でいうと、サー

バへのアップロードとサーバからのダウンロードでOKです。

ただ、突然の上書きで大失敗しない装置が付いてるというこ

とだけ理解してください。

Gitでエラーになるというときは、もしそこで失敗が起きなか

ったら、もっとひどいことが起こっていた、という可能性を

防いでくれていると思いましょう。
ところでさっき、originに「masterを」push

したと言いました。
つまり...GitHubにはまだ css-coding ブランチ

がない!!
git push origin css-coding
ブランチもpushできた
pushとpullはブランチごとに個別です。


どれをpush/pullするかを意識しましょう。


個別だからといって容量が倍になるわけではありませ

ん。消費するのは差分の量だけです。
これでサーバに全部あるので




ローカルの作業ディレクトリを削除しても平気。
GitHubのここから
git clone ...
まあ、clone するのはだいたい他人です。


途中から作業に参加する人は、git init ではな

くこの git clone からスタートします。


あとで他の人と共同作業の練習しましょう。
復元できました
いや∼よかったよかっ...
img




      おや?
注: 空フォルダはダメ
Gitは空のフォルダを管理できません。あくまでファイルの変更

の管理なので。

空っぽのフォルダを維持したい場合、中に何かダミーのファイ

ルを入れてください。

ダミーファイル名は empty, .gitkeep, .gitignore, .htaccess などい

ろいろな習慣があります。

あまり心配しなくても実害があることはまれです。
ちなみにmaster以外のリモートブランチを
     ローカルに連れてくるなら...
git branch css-coding origin/css-coding
ここまでのまとめ
git remote add リポジトリ名 アドレス

git push -u リポジトリ名 ブランチ名

git push (注:ブランチごと)

git pull

git clone アドレス

空のフォルダは無視される

git branch ブランチ名 origin/ブランチ名
癒し(ry
お待たせしました
 GUIですよ
http://rowanj.github.com/gitx/
GitXのすごい版
clone
remote/fetch/pull/push
こんなことまで
git branch css-... origin/css-...
GitXはgitコマンドに忠実なUIなので、コマン

ドで理解した人が使いやすいです。


このUI自体が「Gitでできること集(簡易版)」


ありがちな操作がひととおりあるので、さら

に勉強するポイントが見えてきます。
まだこれじゃ使いにくい

と思ったら、メインで使

うツールはもっと自分に

合うのを選びましょう。
これでようやく
スタートライン
むずかしいひとー
gitのコマンド
むずかしいのは∼
はじめてのGit #gitkyoto
gitのコマンド体系は「使う人の気持ち」では

なく「内部設計の事情」でできています。


作った人の気持ちになったら理解できるとか

無理ゲー。


なので...
だからこそ

細かい操作方法は忘れてもかまいません。

用語と概念と仕組みの基本を忘れないことが重要です。

理解してしまえば、GUIを使ったほうが効率的です。

コマンドを知ると、GUIの説明テキストがコマンドオプショ

ンの何を指すのか、想像できるようになります。
ただし...

本当に困ったときはググってコマンドをコピペできるように

しときましょう。

GUIの操作手順は技術ブログに書かれにくい。

gitはググれる! ←ここ重要
お疲れ様でした

More Related Content

PDF
SourceTreeで始めよう! Gitへの乗り換え指南
PDF
20160128 jjug Nightセミナー_Git実践入門
PDF
Gitはじめの一歩
PDF
ノンプログラマでも今日から使える「Git」でバージョン管理
PDF
Source treeの紹介
PDF
【社内勉強会】弊社でGit!実案件での運用
PPTX
Git超入門
PPTX
私が複数人開発で感じている Git・GitHubのうまみ
SourceTreeで始めよう! Gitへの乗り換え指南
20160128 jjug Nightセミナー_Git実践入門
Gitはじめの一歩
ノンプログラマでも今日から使える「Git」でバージョン管理
Source treeの紹介
【社内勉強会】弊社でGit!実案件での運用
Git超入門
私が複数人開発で感じている Git・GitHubのうまみ

What's hot (20)

PDF
社内Git勉強会向け資料
PDF
超初心者向け!Visual Studio + GitHub + Source Treeで始めるアプリケーション開発
PDF
ポイントをおさえて移行しよう!Git乗り換え超初級
PDF
新人Git/Github研修公開用スライド(その1)
PDF
2ヶ月前にgitを始めた私からこれから始める皆さんへ
PPTX
Git運用ダメ出し会 - ネクストスケープ 2014/05/27 パワーランチ資料
PDF
ノンプログラマのGit入門
PDF
WindowsでGitを使う際のベストプラクティス
PDF
やりなおせる Git 入門
PDF
Git Flowを運用するために
PPTX
Git flow概要紹介
PDF
もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜
PDF
新人Git/Github研修公開用スライド(その2)
PDF
大容量ファイルもGitで管理。 Git LFSの使い方
PDF
はじめようGit
PPTX
やさしいGitの内部構造 - yapcasia2013
PPTX
スキトラGit
PDF
Git flowの活用事例
PDF
はじめてのGit forデザイナー&コーダー
PDF
Git flowについてまとめてみた
社内Git勉強会向け資料
超初心者向け!Visual Studio + GitHub + Source Treeで始めるアプリケーション開発
ポイントをおさえて移行しよう!Git乗り換え超初級
新人Git/Github研修公開用スライド(その1)
2ヶ月前にgitを始めた私からこれから始める皆さんへ
Git運用ダメ出し会 - ネクストスケープ 2014/05/27 パワーランチ資料
ノンプログラマのGit入門
WindowsでGitを使う際のベストプラクティス
やりなおせる Git 入門
Git Flowを運用するために
Git flow概要紹介
もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜
新人Git/Github研修公開用スライド(その2)
大容量ファイルもGitで管理。 Git LFSの使い方
はじめようGit
やさしいGitの内部構造 - yapcasia2013
スキトラGit
Git flowの活用事例
はじめてのGit forデザイナー&コーダー
Git flowについてまとめてみた
Ad

Viewers also liked (20)

PDF
こわくない Git
PDF
Terraforming
PDF
Railsチュートリアル(second)を終えて
PDF
サラリーマンでギョーミーなプログラマ(つまりオレ)でも片手間で作れるXFD
KEY
git gitにされたオレの屍を超えていけ
PPTX
SCMBC Git入門セッション発表資料
PPTX
Wagby on Cloud Foundry
PPTX
ゆかりん時計の話
PDF
Git 入門
PDF
140611だいたいわかるGit
PPTX
[JavaDo] JAX-RS ハンズオン 第2部
PDF
Gitの使い方あれこれ
PPTX
カラーマネジメント入門
PDF
Git勉強会 2016 Gitで卒論を管理しよう回
KEY
Git (実践入門編)
PDF
UnityでVRアプリを作ってみよう! (ハンズオン編)
PDF
測って図る:データ駆動型サービス工学の実践
PDF
Chainerライブコーディング
PDF
Oftec Lightning Talk 第7回 最近触ったLinuxディストリビューションの紹介
PDF
コンセプトから理解するGitコマンド
こわくない Git
Terraforming
Railsチュートリアル(second)を終えて
サラリーマンでギョーミーなプログラマ(つまりオレ)でも片手間で作れるXFD
git gitにされたオレの屍を超えていけ
SCMBC Git入門セッション発表資料
Wagby on Cloud Foundry
ゆかりん時計の話
Git 入門
140611だいたいわかるGit
[JavaDo] JAX-RS ハンズオン 第2部
Gitの使い方あれこれ
カラーマネジメント入門
Git勉強会 2016 Gitで卒論を管理しよう回
Git (実践入門編)
UnityでVRアプリを作ってみよう! (ハンズオン編)
測って図る:データ駆動型サービス工学の実践
Chainerライブコーディング
Oftec Lightning Talk 第7回 最近触ったLinuxディストリビューションの紹介
コンセプトから理解するGitコマンド
Ad

Similar to はじめてのGit #gitkyoto (20)

PDF
Python for Data Analysis第1回勉強会(+git入門)
PPTX
Git講習会
PDF
デザイナーにGitは必要?
PDF
Gitpractice01
PDF
今日から始めるGithub
PDF
Gitの使い方
PPTX
Git @ NNCT programming workshop
PDF
30分でサボれるGit
PPTX
GitHub勉強会~当日資料~
PDF
15分でわかるGit入門
PDF
GitHubの入門を読む前に読む入門書
ODP
底辺webプログラマが今更git語ってみた
PDF
Gitを使いこなしてみよう!
PDF
ておくれないgit
PDF
Git Workshop 20130720
PDF
Git_GiHub講習会.pdf
PDF
Gitの便利ワザ
PDF
Git地図
PDF
C#でゲームを作る2016 第8回
PDF
とりあえずこれだけ知っていればお仕事ができる(であろう)gitガチ入門
Python for Data Analysis第1回勉強会(+git入門)
Git講習会
デザイナーにGitは必要?
Gitpractice01
今日から始めるGithub
Gitの使い方
Git @ NNCT programming workshop
30分でサボれるGit
GitHub勉強会~当日資料~
15分でわかるGit入門
GitHubの入門を読む前に読む入門書
底辺webプログラマが今更git語ってみた
Gitを使いこなしてみよう!
ておくれないgit
Git Workshop 20130720
Git_GiHub講習会.pdf
Gitの便利ワザ
Git地図
C#でゲームを作る2016 第8回
とりあえずこれだけ知っていればお仕事ができる(であろう)gitガチ入門

More from Hisateru Tanaka (19)

PDF
HTMLに学ぶ夫婦円満のコツ
PDF
とある事業の脱レガシー
PDF
Yii Framework 2.0 いま求められるRAD標準とは #phpkansai
PDF
第21回関西PHP勉強会 ReactPHPは もっと流行って欲しい #phpkansai
PDF
ダイクストラの構造化 プログラミングに学ぶ 結婚生活
PDF
PHPカンファレンス関西2014 Yii Framework 2.0 遅れてきた5番目のフレームワーク
PDF
Grunt front-osaka-1-lt-tanaka
PDF
Phpstormちょっといい話
PDF
#phpmatsuri LT大会システムの中身
PDF
&& || and or まぜるな危険
PDF
Phpcon kansani-2013-pinoco
PDF
PhpStormを使おう --高槻からは快速急行が早くなります #jbugj
PDF
いまどきのYiiフレームワーク
PDF
Kphpug beginners-2
PDF
関西PHP勉強会 php5.4つまみぐい
PDF
Word pressのテーマは firephpでハックすれば 良かったのか
PDF
関西Php勉強会のlimeの話
ODP
Pinoco phptal-phpcon-kansai
ODP
Yiiフレームワークを使ってみた
HTMLに学ぶ夫婦円満のコツ
とある事業の脱レガシー
Yii Framework 2.0 いま求められるRAD標準とは #phpkansai
第21回関西PHP勉強会 ReactPHPは もっと流行って欲しい #phpkansai
ダイクストラの構造化 プログラミングに学ぶ 結婚生活
PHPカンファレンス関西2014 Yii Framework 2.0 遅れてきた5番目のフレームワーク
Grunt front-osaka-1-lt-tanaka
Phpstormちょっといい話
#phpmatsuri LT大会システムの中身
&& || and or まぜるな危険
Phpcon kansani-2013-pinoco
PhpStormを使おう --高槻からは快速急行が早くなります #jbugj
いまどきのYiiフレームワーク
Kphpug beginners-2
関西PHP勉強会 php5.4つまみぐい
Word pressのテーマは firephpでハックすれば 良かったのか
関西Php勉強会のlimeの話
Pinoco phptal-phpcon-kansai
Yiiフレームワークを使ってみた

はじめてのGit #gitkyoto