SlideShare a Scribd company logo
1 of 37
Download to read offline
Code for KOSEN 勉強会 #4
を使う準備をしよう
2015.11.08 @yamasy1549
git 初級編
$ git とは?
ソースコードなどの変更履歴を記録・追跡する
ための分散型バージョン管理システムである。
$ git とは?
過去の作業内容を保存
 過去にさかのぼる
 過去の歴史を書きかえる
ソースコードなどの変更履歴を記録・追跡する
ための分散型バージョン管理システムである。
$ GitHub とは?
$ GitHub とは?
「趣味でコード書くよ」
「仕事でコード書くよ」
 公開しよう
 管理しよう
$ GitHub とは?
こまめにコード書いて
 で公開してたら
きっといいことがあるよ
$ git とは?
過去の作業内容を保存
 過去にさかのぼる
 過去の歴史を書きかえる
ソースコードなどの変更履歴を記録・追跡する
ための分散型バージョン管理システムである。
$ なんで git を使うの?
 

A さん B さん
$ なんで git を使うの?
 

A さん B さん
レポート .txt

$ なんで git を使うの?
 

A さん B さん
レポート .txt

$ なんで git を使うの?
 

A さん B さん
レポート .txt

新レポート .txt

$ なんで git を使うの?
 

A さん B さん
レポート .txt

新レポート .txt

新・新レポート .txt
最新のレポート .txt
レポート 0514.txt



$ なんで git を使うの?
 

A さん B さん
レポート .txt

新レポート .txt

新・新レポート .txt
最新のレポート .txt
レポート 0514.txt



_人人 人人 人人 人人 人人_
>  わからん  <
 ̄ Y^Y^Y^Y^Y^Y^Y^Y ̄
$ なんで git を使うの?
 

A さん B さん



$ なんで git を使うの?
 

A さん B さん



共有リポジトリ
作業リポジトリ
$ git での開発 flow
「git 管理よろしくね」
他にも clone, diff, log...
init
編集
add
commit
push
作業リポジトリでコードを書く
commit 待ちエリアに登録
変更をまとめる
共有リポジトリに送る
$ git での開発 flow ①
編集
add
commit
push
コーチとペアになってやってみよう!
①どちらか 1 人が GitHub で新しいリポジトリを作る
②自分の PC に、新しくディレクトリ(フォルダ)を作る
 これが作業リポジトリになる
$ mkdir git-training
$ cd git-training
$ git での開発 flow ①
編集
add
commit
push
$ git init
今いる「git-training」以下を git 管理してね
っていう意味。初回だけやる。
$ git での開発 flow ①
編集
add
commit
push
$ vim index.html 
Windows 環境では cd  dir に読みかえてね。
エディタは vim じゃなくていいよ
$ git での開発 flow ①
編集
add
commit
push

 ページを編集・保存してみよう!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> じこしょうかい </title>
</head>
<body>
<p>Hi! I'm yamasy, nice to meet you :)</p>
</body>
</html>
$ git での開発 flow ①
編集
add
commit
push
$ git status

ファイルの状態を一覧表示
ステージされた / ステージされてない / その他
$ git での開発 flow ①
編集
add
commit
push
$ git status
$ git add index.html

指定したファイル(commit したいファイル)
をステージにのせる
$ git での開発 flow ①
編集
add
commit
push
$ git status
$ git add index.html
$ git status 
ファイルの状態が変わったはず!
(前回と比べてどこがどう変わった?)
$ git での開発 flow ①
編集
add
commit
push
$ git commit -m“message”

message の部分に、この commit の概要を
簡単に書いてみよう
e.g. “Add yamasy’ s profile”
“First impression of yamasy”
$ git での開発 flow ①
編集
add
commit
push
$ git remote add origin ...
リポジトリを作った直後、はじめて push する
ときだけ叩くコマンド
どこを共有リポジトリとするか設定します
リポジトリのページに書いてるのでコピペ
$ git での開発 flow ①
編集
add
commit
push
$ git push origin master

commit を共有リポジトリに送信します
origin  共有リポジトリの場所
master  ブランチの名前
      したら、GitHub のページを開いて
今の変更がちゃんと反映されていることを確認しよう!
push
$ git での開発 flow ①
編集
add
commit
push
・GitHub でリポジトリを作る
・自分の PC でディレクトリを作る
・ディレクトリ直下で「git 使います」宣言する
・なにかファイルを      する
・ファイルを      してステージにのせる
・      で変更に名前をつける
・      して GitHub にあげる
編集
add
commit
push
1 人目がやったこと
$ git での開発 flow ②
編集
add
commit
push
2 人目以降の作業
③相方が作った GitHub リポジトリ
 ページから、URL をコピーする
 (右下にあるよ!)
④以下のコマンドを打つ
   git-training というディレクトリができる
 GitHub から最新のファイルたちをまるごと取ってきた
$ git clone さっきの URL
既に clone してる場合は、「pull」で最新のを取ってこれるよ!
$ git での開発 flow ②
編集
add
commit
push
$ cd git-training
$ vim index.html

Windows 環境では cd  dir に読みかえてね。
エディタは vim じゃなくていいよ
$ git での開発 flow ②
編集
add
commit
push

 ページを編集・保存してみよう!
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title> じこしょうかい </title>
</head>
<body>
<p>Hi! I'm yamasy. nice to meet you :)</p>
</body>
</html>
$ git での開発 flow ②
編集
add
commit
push
$ git status

ファイルの状態を一覧表示
ステージされた / ステージされてない / その他
$ git での開発 flow ②
編集
add
commit
push
$ git status
$ git add index.html

指定したファイル(commit したいファイル)
をステージにのせる
$ git での開発 flow ②
編集
add
commit
push
$ git status
$ git add index.html
$ git status 
ファイルの状態が変わったはず!
(前回と比べてどこがどう変わった?)
意図せぬものを add しないよう、こまめに status しよう!
$ git での開発 flow ②
編集
add
commit
push
$ git commit -m“message”

message の部分に、この commit の概要を
簡単に書いてみよう
e.g. “Add yamasy’ s profile”
“First impression of yamasy”
$ git での開発 flow ②
編集
add
commit
push
$ git push origin master

commit を共有リポジトリに送信します
origin  共有リポジトリの場所
master  ブランチの名前
      したら、GitHub のページを開いて
今の変更がちゃんと反映されていることを確認しよう!
push
$ git での開発 flow ②
編集
add
commit
push
・GitHub にある最新のファイルを clone する
・なにかファイルを      する
・ファイルを      してステージにのせる
・      で変更に名前をつける
・      して GitHub にあげる
編集
add
commit
push
2 人目がやったこと
$ ステージ
編集
add
commit
push
ローカル
ステージ
ローカル(作業)リポジトリ
リモート(共有)リポジトリ
git add
git commit
git push
git pull
git clone
git reset

More Related Content

What's hot

デザイナのためのGit入門
デザイナのためのGit入門デザイナのためのGit入門
デザイナのためのGit入門dsuke Takaoka
 
大容量ファイルもGitで管理。 Git LFSの使い方
大容量ファイルもGitで管理。 Git LFSの使い方大容量ファイルもGitで管理。 Git LFSの使い方
大容量ファイルもGitで管理。 Git LFSの使い方hibiki443
 
Gitとちょっと仲良くなるために覚えたことまとめ
Gitとちょっと仲良くなるために覚えたことまとめGitとちょっと仲良くなるために覚えたことまとめ
Gitとちょっと仲良くなるために覚えたことまとめNatsumi Kashiwa
 
Linuxにて複数のコマンドを並列実行(同時実行数の制限付き)
Linuxにて複数のコマンドを並列実行(同時実行数の制限付き)Linuxにて複数のコマンドを並列実行(同時実行数の制限付き)
Linuxにて複数のコマンドを並列実行(同時実行数の制限付き)Hiro H.
 
今日から始めるGithub
今日から始めるGithub今日から始めるGithub
今日から始めるGithublion-man
 
Git LFSを触ってみた
Git LFSを触ってみたGit LFSを触ってみた
Git LFSを触ってみたYuto Suzuki
 
Pelican の紹介 / World Plone Day 2017 Tokyo
Pelican の紹介 / World Plone Day 2017 TokyoPelican の紹介 / World Plone Day 2017 Tokyo
Pelican の紹介 / World Plone Day 2017 TokyoKei IWASAKI
 
msysgit1.8.0でプロンプトにブランチ名を表示させる
msysgit1.8.0でプロンプトにブランチ名を表示させるmsysgit1.8.0でプロンプトにブランチ名を表示させる
msysgit1.8.0でプロンプトにブランチ名を表示させるKenichi Yamada
 
Go言語入門者が Webアプリケーション を作ってみた話 #devfest #gdgkyoto
Go言語入門者が Webアプリケーション を作ってみた話 #devfest #gdgkyotoGo言語入門者が Webアプリケーション を作ってみた話 #devfest #gdgkyoto
Go言語入門者が Webアプリケーション を作ってみた話 #devfest #gdgkyotoShoot Morii
 
新たなgitのブランチモデル「Git Feature Flow」!Git Flow,Git Hub Flow,Git Lab Flowを超えれるか?
新たなgitのブランチモデル「Git Feature Flow」!Git Flow,Git Hub Flow,Git Lab Flowを超えれるか?新たなgitのブランチモデル「Git Feature Flow」!Git Flow,Git Hub Flow,Git Lab Flowを超えれるか?
新たなgitのブランチモデル「Git Feature Flow」!Git Flow,Git Hub Flow,Git Lab Flowを超えれるか?naoki koyama
 
Git入門 あの頃に戻るには
Git入門 あの頃に戻るにはGit入門 あの頃に戻るには
Git入門 あの頃に戻るにはYoshihiro Ohsuka
 
今更だけど 「git rebase」の 使い方を覚えた話
今更だけど 「git rebase」の 使い方を覚えた話今更だけど 「git rebase」の 使い方を覚えた話
今更だけど 「git rebase」の 使い方を覚えた話iPride Co., Ltd.
 
Gitの使い方(rabese -i編)
Gitの使い方(rabese -i編)Gitの使い方(rabese -i編)
Gitの使い方(rabese -i編)y42sora
 

What's hot (20)

デザイナのためのGit入門
デザイナのためのGit入門デザイナのためのGit入門
デザイナのためのGit入門
 
大容量ファイルもGitで管理。 Git LFSの使い方
大容量ファイルもGitで管理。 Git LFSの使い方大容量ファイルもGitで管理。 Git LFSの使い方
大容量ファイルもGitで管理。 Git LFSの使い方
 
Gitとちょっと仲良くなるために覚えたことまとめ
Gitとちょっと仲良くなるために覚えたことまとめGitとちょっと仲良くなるために覚えたことまとめ
Gitとちょっと仲良くなるために覚えたことまとめ
 
Linuxにて複数のコマンドを並列実行(同時実行数の制限付き)
Linuxにて複数のコマンドを並列実行(同時実行数の制限付き)Linuxにて複数のコマンドを並列実行(同時実行数の制限付き)
Linuxにて複数のコマンドを並列実行(同時実行数の制限付き)
 
Git tutorial
Git tutorialGit tutorial
Git tutorial
 
今日から始めるGithub
今日から始めるGithub今日から始めるGithub
今日から始めるGithub
 
Git LFSを触ってみた
Git LFSを触ってみたGit LFSを触ってみた
Git LFSを触ってみた
 
Pelican の紹介 / World Plone Day 2017 Tokyo
Pelican の紹介 / World Plone Day 2017 TokyoPelican の紹介 / World Plone Day 2017 Tokyo
Pelican の紹介 / World Plone Day 2017 Tokyo
 
Slide
SlideSlide
Slide
 
Git handson2
Git handson2Git handson2
Git handson2
 
msysgit1.8.0でプロンプトにブランチ名を表示させる
msysgit1.8.0でプロンプトにブランチ名を表示させるmsysgit1.8.0でプロンプトにブランチ名を表示させる
msysgit1.8.0でプロンプトにブランチ名を表示させる
 
Go言語入門者が Webアプリケーション を作ってみた話 #devfest #gdgkyoto
Go言語入門者が Webアプリケーション を作ってみた話 #devfest #gdgkyotoGo言語入門者が Webアプリケーション を作ってみた話 #devfest #gdgkyoto
Go言語入門者が Webアプリケーション を作ってみた話 #devfest #gdgkyoto
 
Github第4章
Github第4章Github第4章
Github第4章
 
新たなgitのブランチモデル「Git Feature Flow」!Git Flow,Git Hub Flow,Git Lab Flowを超えれるか?
新たなgitのブランチモデル「Git Feature Flow」!Git Flow,Git Hub Flow,Git Lab Flowを超えれるか?新たなgitのブランチモデル「Git Feature Flow」!Git Flow,Git Hub Flow,Git Lab Flowを超えれるか?
新たなgitのブランチモデル「Git Feature Flow」!Git Flow,Git Hub Flow,Git Lab Flowを超えれるか?
 
Git入門 あの頃に戻るには
Git入門 あの頃に戻るにはGit入門 あの頃に戻るには
Git入門 あの頃に戻るには
 
今更だけど 「git rebase」の 使い方を覚えた話
今更だけど 「git rebase」の 使い方を覚えた話今更だけど 「git rebase」の 使い方を覚えた話
今更だけど 「git rebase」の 使い方を覚えた話
 
Gitの使い方(rabese -i編)
Gitの使い方(rabese -i編)Gitの使い方(rabese -i編)
Gitの使い方(rabese -i編)
 
Git入門
Git入門Git入門
Git入門
 
TextMate
TextMateTextMate
TextMate
 
Tsume git
Tsume gitTsume git
Tsume git
 

Similar to gitを使う準備をしよう - 初級編

GitHub勉強会
GitHub勉強会GitHub勉強会
GitHub勉強会ArusuDev
 
バージョン管理
バージョン管理バージョン管理
バージョン管理Misa Kondo
 
@s_ssk13さん向けGitHub入門
@s_ssk13さん向けGitHub入門@s_ssk13さん向けGitHub入門
@s_ssk13さん向けGitHub入門Takashi Imagire
 
20120324 git training
20120324 git training20120324 git training
20120324 git trainingTakeshi AKIMA
 
猫にはわからないGit講座
猫にはわからないGit講座猫にはわからないGit講座
猫にはわからないGit講座Yusei Yamanaka
 
2018 07-18 git-hub講座
2018 07-18 git-hub講座2018 07-18 git-hub講座
2018 07-18 git-hub講座貴一 末田
 
Gitを使ってみよう
Gitを使ってみようGitを使ってみよう
Gitを使ってみようTamotsu Furuya
 
Git講習会
Git講習会Git講習会
Git講習会galluda
 
Git-dojo In Sendagaya.rb
Git-dojo In Sendagaya.rbGit-dojo In Sendagaya.rb
Git-dojo In Sendagaya.rbJun Fukaya
 
githubハンズオン
githubハンズオンgithubハンズオン
githubハンズオンAyaka Ueda
 
Git 初心者講座 by forkwell
Git 初心者講座 by forkwellGit 初心者講座 by forkwell
Git 初心者講座 by forkwellsinsoku listy
 
VCS - Version Control System at Security and Programming camp 2011
VCS - Version Control System at Security and Programming camp 2011 VCS - Version Control System at Security and Programming camp 2011
VCS - Version Control System at Security and Programming camp 2011 Hiro Yoshioka
 

Similar to gitを使う準備をしよう - 初級編 (20)

Gitの紹介
Gitの紹介Gitの紹介
Gitの紹介
 
GitHub勉強会
GitHub勉強会GitHub勉強会
GitHub勉強会
 
バージョン管理
バージョン管理バージョン管理
バージョン管理
 
Shizudev git hub宿題
Shizudev git hub宿題Shizudev git hub宿題
Shizudev git hub宿題
 
Git地図
Git地図Git地図
Git地図
 
@s_ssk13さん向けGitHub入門
@s_ssk13さん向けGitHub入門@s_ssk13さん向けGitHub入門
@s_ssk13さん向けGitHub入門
 
20120324 git training
20120324 git training20120324 git training
20120324 git training
 
猫にはわからないGit講座
猫にはわからないGit講座猫にはわからないGit講座
猫にはわからないGit講座
 
2018 07-18 git-hub講座
2018 07-18 git-hub講座2018 07-18 git-hub講座
2018 07-18 git-hub講座
 
Git for beginners
Git for beginnersGit for beginners
Git for beginners
 
Git 実践入門
Git 実践入門Git 実践入門
Git 実践入門
 
Gitを使ってみよう
Gitを使ってみようGitを使ってみよう
Gitを使ってみよう
 
Git勉強会
Git勉強会Git勉強会
Git勉強会
 
Git講習会
Git講習会Git講習会
Git講習会
 
Git 勉強会
Git 勉強会Git 勉強会
Git 勉強会
 
Git-dojo In Sendagaya.rb
Git-dojo In Sendagaya.rbGit-dojo In Sendagaya.rb
Git-dojo In Sendagaya.rb
 
Git (実践入門編)
Git (実践入門編)Git (実践入門編)
Git (実践入門編)
 
githubハンズオン
githubハンズオンgithubハンズオン
githubハンズオン
 
Git 初心者講座 by forkwell
Git 初心者講座 by forkwellGit 初心者講座 by forkwell
Git 初心者講座 by forkwell
 
VCS - Version Control System at Security and Programming camp 2011
VCS - Version Control System at Security and Programming camp 2011 VCS - Version Control System at Security and Programming camp 2011
VCS - Version Control System at Security and Programming camp 2011
 

More from Sanae Yamashita

vivliostyle.orgではじめるCSS組版チュートリアル
vivliostyle.orgではじめるCSS組版チュートリアルvivliostyle.orgではじめるCSS組版チュートリアル
vivliostyle.orgではじめるCSS組版チュートリアルSanae Yamashita
 
Vivliostyle Theme 開発ガイドラインの公開
Vivliostyle Theme 開発ガイドラインの公開Vivliostyle Theme 開発ガイドラインの公開
Vivliostyle Theme 開発ガイドラインの公開Sanae Yamashita
 
Vivliostyle Themes のハンズオン
Vivliostyle Themes のハンズオンVivliostyle Themes のハンズオン
Vivliostyle Themes のハンズオンSanae Yamashita
 
スピーディーな本作りとカスタマイズ可能な本作りのための Vivliostyle Themes プロジェクト #vivliostyle
スピーディーな本作りとカスタマイズ可能な本作りのための Vivliostyle Themes プロジェクト #vivliostyleスピーディーな本作りとカスタマイズ可能な本作りのための Vivliostyle Themes プロジェクト #vivliostyle
スピーディーな本作りとカスタマイズ可能な本作りのための Vivliostyle Themes プロジェクト #vivliostyleSanae Yamashita
 
CSS組版やってみた! #Vivliostyle
CSS組版やってみた! #VivliostyleCSS組版やってみた! #Vivliostyle
CSS組版やってみた! #VivliostyleSanae Yamashita
 
読解・QRコード(かんたんなやつ) #nitaclt
読解・QRコード(かんたんなやつ) #nitaclt読解・QRコード(かんたんなやつ) #nitaclt
読解・QRコード(かんたんなやつ) #nitacltSanae Yamashita
 
きみはPNGの仕様書を読んだか?
きみはPNGの仕様書を読んだか?きみはPNGの仕様書を読んだか?
きみはPNGの仕様書を読んだか?Sanae Yamashita
 
UIデザインの心理学
UIデザインの心理学UIデザインの心理学
UIデザインの心理学Sanae Yamashita
 
軍歌でわかるドイツ語(わからない)
軍歌でわかるドイツ語(わからない)軍歌でわかるドイツ語(わからない)
軍歌でわかるドイツ語(わからない)Sanae Yamashita
 
この夏、絶対モテるフォント選びのコツ #nitaclt
この夏、絶対モテるフォント選びのコツ #nitacltこの夏、絶対モテるフォント選びのコツ #nitaclt
この夏、絶対モテるフォント選びのコツ #nitacltSanae Yamashita
 
Hello world! にときめかなかった僕が情報系を名乗るまで
Hello world! にときめかなかった僕が情報系を名乗るまでHello world! にときめかなかった僕が情報系を名乗るまで
Hello world! にときめかなかった僕が情報系を名乗るまでSanae Yamashita
 
おいしい!GitHub ~GitHub Patchwork Tokyo @dots 夏休み版~
おいしい!GitHub ~GitHub Patchwork Tokyo @dots 夏休み版~おいしい!GitHub ~GitHub Patchwork Tokyo @dots 夏休み版~
おいしい!GitHub ~GitHub Patchwork Tokyo @dots 夏休み版~Sanae Yamashita
 
『UIデザインの心理学』周辺視野 - #kosen14s 第1回読書会 Day4 -
『UIデザインの心理学』周辺視野 - #kosen14s 第1回読書会 Day4 -『UIデザインの心理学』周辺視野 - #kosen14s 第1回読書会 Day4 -
『UIデザインの心理学』周辺視野 - #kosen14s 第1回読書会 Day4 -Sanae Yamashita
 
Are you a Designer or an Engineer?
Are you a Designer or an Engineer?Are you a Designer or an Engineer?
Are you a Designer or an Engineer?Sanae Yamashita
 
CSSをさわってみよう
CSSをさわってみようCSSをさわってみよう
CSSをさわってみようSanae Yamashita
 
HTMLをさわってみよう
HTMLをさわってみようHTMLをさわってみよう
HTMLをさわってみようSanae Yamashita
 
企業ロゴに学ぶ 頭を使わないスライド作り 色で悩む時間を減らそう
企業ロゴに学ぶ 頭を使わないスライド作り 色で悩む時間を減らそう企業ロゴに学ぶ 頭を使わないスライド作り 色で悩む時間を減らそう
企業ロゴに学ぶ 頭を使わないスライド作り 色で悩む時間を減らそうSanae Yamashita
 
Rubotyに名前をつけて可愛がってかしこく育てて一緒に暮らしたい
Rubotyに名前をつけて可愛がってかしこく育てて一緒に暮らしたいRubotyに名前をつけて可愛がってかしこく育てて一緒に暮らしたい
Rubotyに名前をつけて可愛がってかしこく育てて一緒に暮らしたいSanae Yamashita
 

More from Sanae Yamashita (20)

vivliostyle.orgではじめるCSS組版チュートリアル
vivliostyle.orgではじめるCSS組版チュートリアルvivliostyle.orgではじめるCSS組版チュートリアル
vivliostyle.orgではじめるCSS組版チュートリアル
 
Vivliostyle Theme 開発ガイドラインの公開
Vivliostyle Theme 開発ガイドラインの公開Vivliostyle Theme 開発ガイドラインの公開
Vivliostyle Theme 開発ガイドラインの公開
 
Vivliostyle Themes のハンズオン
Vivliostyle Themes のハンズオンVivliostyle Themes のハンズオン
Vivliostyle Themes のハンズオン
 
スピーディーな本作りとカスタマイズ可能な本作りのための Vivliostyle Themes プロジェクト #vivliostyle
スピーディーな本作りとカスタマイズ可能な本作りのための Vivliostyle Themes プロジェクト #vivliostyleスピーディーな本作りとカスタマイズ可能な本作りのための Vivliostyle Themes プロジェクト #vivliostyle
スピーディーな本作りとカスタマイズ可能な本作りのための Vivliostyle Themes プロジェクト #vivliostyle
 
CSS組版やってみた! #Vivliostyle
CSS組版やってみた! #VivliostyleCSS組版やってみた! #Vivliostyle
CSS組版やってみた! #Vivliostyle
 
読解・QRコード(かんたんなやつ) #nitaclt
読解・QRコード(かんたんなやつ) #nitaclt読解・QRコード(かんたんなやつ) #nitaclt
読解・QRコード(かんたんなやつ) #nitaclt
 
きみはPNGの仕様書を読んだか?
きみはPNGの仕様書を読んだか?きみはPNGの仕様書を読んだか?
きみはPNGの仕様書を読んだか?
 
UIデザインの心理学
UIデザインの心理学UIデザインの心理学
UIデザインの心理学
 
軍歌でわかるドイツ語(わからない)
軍歌でわかるドイツ語(わからない)軍歌でわかるドイツ語(わからない)
軍歌でわかるドイツ語(わからない)
 
この夏、絶対モテるフォント選びのコツ #nitaclt
この夏、絶対モテるフォント選びのコツ #nitacltこの夏、絶対モテるフォント選びのコツ #nitaclt
この夏、絶対モテるフォント選びのコツ #nitaclt
 
Hello world! にときめかなかった僕が情報系を名乗るまで
Hello world! にときめかなかった僕が情報系を名乗るまでHello world! にときめかなかった僕が情報系を名乗るまで
Hello world! にときめかなかった僕が情報系を名乗るまで
 
おいしい!GitHub ~GitHub Patchwork Tokyo @dots 夏休み版~
おいしい!GitHub ~GitHub Patchwork Tokyo @dots 夏休み版~おいしい!GitHub ~GitHub Patchwork Tokyo @dots 夏休み版~
おいしい!GitHub ~GitHub Patchwork Tokyo @dots 夏休み版~
 
『UIデザインの心理学』周辺視野 - #kosen14s 第1回読書会 Day4 -
『UIデザインの心理学』周辺視野 - #kosen14s 第1回読書会 Day4 -『UIデザインの心理学』周辺視野 - #kosen14s 第1回読書会 Day4 -
『UIデザインの心理学』周辺視野 - #kosen14s 第1回読書会 Day4 -
 
Are you a Designer or an Engineer?
Are you a Designer or an Engineer?Are you a Designer or an Engineer?
Are you a Designer or an Engineer?
 
Me and GitHub
Me and GitHubMe and GitHub
Me and GitHub
 
CSSをさわってみよう
CSSをさわってみようCSSをさわってみよう
CSSをさわってみよう
 
HTMLをさわってみよう
HTMLをさわってみようHTMLをさわってみよう
HTMLをさわってみよう
 
企業ロゴに学ぶ 頭を使わないスライド作り 色で悩む時間を減らそう
企業ロゴに学ぶ 頭を使わないスライド作り 色で悩む時間を減らそう企業ロゴに学ぶ 頭を使わないスライド作り 色で悩む時間を減らそう
企業ロゴに学ぶ 頭を使わないスライド作り 色で悩む時間を減らそう
 
Rubotyに名前をつけて可愛がってかしこく育てて一緒に暮らしたい
Rubotyに名前をつけて可愛がってかしこく育てて一緒に暮らしたいRubotyに名前をつけて可愛がってかしこく育てて一緒に暮らしたい
Rubotyに名前をつけて可愛がってかしこく育てて一緒に暮らしたい
 
Markdownがアツい
MarkdownがアツいMarkdownがアツい
Markdownがアツい
 

gitを使う準備をしよう - 初級編

  • 1. Code for KOSEN 勉強会 #4 を使う準備をしよう 2015.11.08 @yamasy1549 git 初級編
  • 3. $ git とは? 過去の作業内容を保存  過去にさかのぼる  過去の歴史を書きかえる ソースコードなどの変更履歴を記録・追跡する ための分散型バージョン管理システムである。
  • 6. $ GitHub とは? こまめにコード書いて  で公開してたら きっといいことがあるよ
  • 7. $ git とは? 過去の作業内容を保存  過去にさかのぼる  過去の歴史を書きかえる ソースコードなどの変更履歴を記録・追跡する ための分散型バージョン管理システムである。
  • 8. $ なんで git を使うの?    A さん B さん
  • 9. $ なんで git を使うの?    A さん B さん レポート .txt 
  • 10. $ なんで git を使うの?    A さん B さん レポート .txt 
  • 11. $ なんで git を使うの?    A さん B さん レポート .txt  新レポート .txt 
  • 12. $ なんで git を使うの?    A さん B さん レポート .txt  新レポート .txt  新・新レポート .txt 最新のレポート .txt レポート 0514.txt   
  • 13. $ なんで git を使うの?    A さん B さん レポート .txt  新レポート .txt  新・新レポート .txt 最新のレポート .txt レポート 0514.txt    _人人 人人 人人 人人 人人_ >  わからん  <  ̄ Y^Y^Y^Y^Y^Y^Y^Y ̄
  • 14. $ なんで git を使うの?    A さん B さん   
  • 15. $ なんで git を使うの?    A さん B さん    共有リポジトリ 作業リポジトリ
  • 16. $ git での開発 flow 「git 管理よろしくね」 他にも clone, diff, log... init 編集 add commit push 作業リポジトリでコードを書く commit 待ちエリアに登録 変更をまとめる 共有リポジトリに送る
  • 17. $ git での開発 flow ① 編集 add commit push コーチとペアになってやってみよう! ①どちらか 1 人が GitHub で新しいリポジトリを作る ②自分の PC に、新しくディレクトリ(フォルダ)を作る  これが作業リポジトリになる $ mkdir git-training $ cd git-training
  • 18. $ git での開発 flow ① 編集 add commit push $ git init 今いる「git-training」以下を git 管理してね っていう意味。初回だけやる。
  • 19. $ git での開発 flow ① 編集 add commit push $ vim index.html  Windows 環境では cd  dir に読みかえてね。 エディタは vim じゃなくていいよ
  • 20. $ git での開発 flow ① 編集 add commit push   ページを編集・保存してみよう! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> じこしょうかい </title> </head> <body> <p>Hi! I'm yamasy, nice to meet you :)</p> </body> </html>
  • 21. $ git での開発 flow ① 編集 add commit push $ git status  ファイルの状態を一覧表示 ステージされた / ステージされてない / その他
  • 22. $ git での開発 flow ① 編集 add commit push $ git status $ git add index.html  指定したファイル(commit したいファイル) をステージにのせる
  • 23. $ git での開発 flow ① 編集 add commit push $ git status $ git add index.html $ git status  ファイルの状態が変わったはず! (前回と比べてどこがどう変わった?)
  • 24. $ git での開発 flow ① 編集 add commit push $ git commit -m“message”  message の部分に、この commit の概要を 簡単に書いてみよう e.g. “Add yamasy’ s profile” “First impression of yamasy”
  • 25. $ git での開発 flow ① 編集 add commit push $ git remote add origin ... リポジトリを作った直後、はじめて push する ときだけ叩くコマンド どこを共有リポジトリとするか設定します リポジトリのページに書いてるのでコピペ
  • 26. $ git での開発 flow ① 編集 add commit push $ git push origin master  commit を共有リポジトリに送信します origin  共有リポジトリの場所 master  ブランチの名前       したら、GitHub のページを開いて 今の変更がちゃんと反映されていることを確認しよう! push
  • 27. $ git での開発 flow ① 編集 add commit push ・GitHub でリポジトリを作る ・自分の PC でディレクトリを作る ・ディレクトリ直下で「git 使います」宣言する ・なにかファイルを      する ・ファイルを      してステージにのせる ・      で変更に名前をつける ・      して GitHub にあげる 編集 add commit push 1 人目がやったこと
  • 28. $ git での開発 flow ② 編集 add commit push 2 人目以降の作業 ③相方が作った GitHub リポジトリ  ページから、URL をコピーする  (右下にあるよ!) ④以下のコマンドを打つ    git-training というディレクトリができる  GitHub から最新のファイルたちをまるごと取ってきた $ git clone さっきの URL 既に clone してる場合は、「pull」で最新のを取ってこれるよ!
  • 29. $ git での開発 flow ② 編集 add commit push $ cd git-training $ vim index.html  Windows 環境では cd  dir に読みかえてね。 エディタは vim じゃなくていいよ
  • 30. $ git での開発 flow ② 編集 add commit push   ページを編集・保存してみよう! <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title> じこしょうかい </title> </head> <body> <p>Hi! I'm yamasy. nice to meet you :)</p> </body> </html>
  • 31. $ git での開発 flow ② 編集 add commit push $ git status  ファイルの状態を一覧表示 ステージされた / ステージされてない / その他
  • 32. $ git での開発 flow ② 編集 add commit push $ git status $ git add index.html  指定したファイル(commit したいファイル) をステージにのせる
  • 33. $ git での開発 flow ② 編集 add commit push $ git status $ git add index.html $ git status  ファイルの状態が変わったはず! (前回と比べてどこがどう変わった?) 意図せぬものを add しないよう、こまめに status しよう!
  • 34. $ git での開発 flow ② 編集 add commit push $ git commit -m“message”  message の部分に、この commit の概要を 簡単に書いてみよう e.g. “Add yamasy’ s profile” “First impression of yamasy”
  • 35. $ git での開発 flow ② 編集 add commit push $ git push origin master  commit を共有リポジトリに送信します origin  共有リポジトリの場所 master  ブランチの名前       したら、GitHub のページを開いて 今の変更がちゃんと反映されていることを確認しよう! push
  • 36. $ git での開発 flow ② 編集 add commit push ・GitHub にある最新のファイルを clone する ・なにかファイルを      する ・ファイルを      してステージにのせる ・      で変更に名前をつける ・      して GitHub にあげる 編集 add commit push 2 人目がやったこと