SlideShare une entreprise Scribd logo
1  sur  119
Télécharger pour lire hors ligne
はじめてのGit
For コーダー&デザイナー
(非エンジニアな人)
CHAPTER1
そもそも、どんなメンドクサイことがよく起こっているのか
のまえに・・・
Git
こんなことありませんか?
全体リニューアル中なのに、
いまの本番の修正が入る
そういえばさ
このバナーだけ
先にアップしてくれ
ない?
あと
新しい方のデザインにも
バナーいれといて
こんなこともありませんか?
修正したファイルを
アップしてもらうのが
超面倒
すいません
index.htmlと
shop1.htmlと
basic.cssと
shop_page.cssをアップして
ください
index.htmlが/www/viewの下で
shop1.htmlが/static/pagesの下で
basic.cssは/www/publicの下で
shop_page.cssは/www/hojin/shop
の下です
どこの
ディレクトリ?
ふえるほどメンドクサイ
あんなこともありませんか?
最新っぽい名前の
フォルダが出来まくる
で、どれが最新?
こんなことだってありませんか?
作業中のファイルが
いつの間にか
上書き保存されていた
修正終わった!
えっ?それ、今
上書き保存しちゃったけど
たまにありますよね
そんなことをふせぐのが
です
Git
CHAPTER1のまとめ
1. バージョンがごっちゃになる
2. 作業ファイルのやりとりが面倒
3. 上書き保存のリスクが高し
よくあるアチャー
1. バージョンがごっちゃになる
2. 作業ファイルのやりとりが面倒
3. 上書き保存のリスクが高し
Gitならこれができます
1. バージョンがごっちゃになる
2. 作業ファイルのやりとりが面倒
3. 上書き保存のリスクが高し
Gitならこれができます自動でできるよ!
最新版もわかるよ!
1. バージョンがごっちゃになる
2. 作業ファイルのやりとりが面倒
3. 上書き保存のリスクが高し
Gitならこれができます
コマンド
一つで
できるよ
1. バージョンがごっちゃになる
2. 作業ファイルのやりとりが面倒
3. 上書き保存のリスクが高し
Gitならこれができます
上書き保存防止
&
うまくくっつけてくれるよ!
CHAPTER2
で、Gitとはなんぞや?
では早速
ができることを
見てみましょう
Git
そのまえに
のざっくりした仕組みを
3つだけ覚えましょう
Git
覚えておくと
あとあとラクです
その1
その①
自分と、共有の作業場所がそれぞれあります
共有の環境
(本番など)
Aさんの環境 Bさんの環境
自分の作業場所は、
基本的に勝手に上書きされることはありません
Aさんの環境 Bさんの環境
他人の環境は
上書きできません
Aさんの環境 Bさんの環境
その2
その②
自分と、共有の作業場所のファイルのやりとりは
Gitを使っておこないます
共有の環境
(本番など)
Aさんの環境 Bさんの環境
Git Git
AさんからBさんに渡したいものも
基本的には共有の環境を通すことになります
共有の環境
(本番など)
Aさんの環境 Bさんの環境
Aさんの環境 Bさんの環境
共有の環境
(本番など)
Aさんの環境 Bさんの環境
共有の環境
(本番など)
OK?
ではその3
その③
作業内容を、スクリーンショットのように
場所ごとまるっと保存しておけます
「いつ」「どのファイルの」「どこを」「どのように変更したか」
ごと、まるっと保存します
7/20に、Aというフォルダの
Bというファイルの
5-8行目だけ変更したよ
7/20 15:58の状態
7/22には、Aというフォルダの
Bというファイルの
9-12行目だけ変更したよ
7/22 9:37の状態
これがミソ
Aさんの環境
より具体的にみてみましょう
Bさんの環境
Aさんの環境
より具体的にみてみましょう
Bさんの環境
このフォルダとファイルを
新しく追加しました
Aさんの環境
より具体的にみてみましょう
Bさんの環境
この状態をいったん
「保存」します。
Aさんの環境
より具体的にみてみましょう
Bさんの環境
【7/20 15:58の状態】
Aさんの環境
より具体的にみてみましょう
Bさんの環境
【7/20 15:58の状態】
を、共有の環境に
アップします
Aさんの環境
より具体的にみてみましょう
Bさんの環境
共有の環境
Aさんの環境
より具体的にみてみましょう
Bさんの環境
共有の環境
Aさんの環境
より具体的にみてみましょう
Bさんの環境
共有の環境
共有の環境が、
【7/20 15:58の状態】
になりました
Aさんの環境
より具体的にみてみましょう
Bさんの環境
共有の環境
つぎに、
Bさんが作業するには
共有の環境から
【7/20 15:58の状態】
を持ってきます
Aさんの環境
より具体的にみてみましょう
Bさんの環境
共有の環境
Aさんの環境
より具体的にみてみましょう
Bさんの環境
共有の環境
Aさんの環境
より具体的にみてみましょう
Bさんの環境
共有の環境
Bさんの環境も、
【7/20 15:58の状態】
になりました
これらの作業は
コマンドで
サクサクできます
(demoみてね)
demo
このように、Gitを使うと
が
とっても簡単です
複数のフォルダや
ファイルのやりとり
さらに!
同じ文章を変更していても、
変更箇所がかぶっていなかったら
自動でくっつけられちゃいます
ここはAさんが
変更したところ
ここはBさんが
変更したところ
Aさんのファイル Bさんのファイル
+
Aさんのファイル Bさんのファイル
+
Aさんのファイル Bさんのファイル
+
Aさんのファイル Bさんのファイル
ね?
共同作業に
超便利!
CHAPTER3
Gitのキホンの動きを知る
では最後に
Gitの基本用語
&
基本的な動きを覚えましょう
用語①
ブランチ
枝 という意味です
人生においては
「あのときこうしていれば…」
というのは妄想ですが、
Gitでは実現できます
「A」というファイルに
「AAA」という内容追加した
おなじ「A」というファイルに
「BBB」という内容追加した
これらの、それぞれを
「ブランチ」と呼びます
「A」というファイルに
「AAA」という内容追加した
おなじ「A」というファイルに
「BBB」という内容追加した
←ブランチA
←ブランチB
このブランチを切り替えると、
開発環境もかわります
例。
純情ブランチ
不純ブランチ
ちなみにこの例は
私のGitを全面的にサポートしてくれた
N井先輩がおしえてくれた例です
ブランチは
好きな時点の状態から作れて
いくつでも作れます
ブランチA
ブランチB
ブランチB
ブランチA
ブランチC
ブランチC
ブランチC
ブランチA
ブランチB
そして
合体させることもできます
ブランチAと
ブランチBの内容を
合体!
この、合体することを
マージ
といいます
といいます
テストに出るよ!
そして先ほどからでている
ナゾの○
これは、状態を保存した!
というその状態のことで
コミット
といいます
といいます!
超テストに出るよ!
つまり、Gitで
バージョンを管理すると
いうのは
ブランチ
に、
コミット
を、
たくさん積んでいく
ことなのです
ブランチA
ブランチB
ブランチB
ブランチA
ブランチC
ブランチC
ゲーマーな方なら
ピンと来やすいと思いますが
いろいろな人生を
その都度セーブするような
そんなイメージですネ
次回「Gitをはじめよう!」
では
この「ブランチ」と
「コミット」を
実際に練習してみましょう!
今日はここまで!
お疲れ様でした
株式会社ファブリカコミュニケーションズ 企画部 山本紗依子

Contenu connexe

Tendances

ノンプログラマのGit入門
ノンプログラマのGit入門ノンプログラマのGit入門
ノンプログラマのGit入門Muyuu Fujita
 
こわくない Git
こわくない Gitこわくない Git
こわくない GitKota Saito
 
バージョン管理のワークフロー
バージョン管理のワークフローバージョン管理のワークフロー
バージョン管理のワークフローadd20
 
やりなおせる Git 入門
やりなおせる Git 入門やりなおせる Git 入門
やりなおせる Git 入門Tomohiko Himura
 
はじめようGit
はじめようGitはじめようGit
はじめようGittechscore
 
やさしいGitの内部構造 - yapcasia2013
やさしいGitの内部構造 - yapcasia2013やさしいGitの内部構造 - yapcasia2013
やさしいGitの内部構造 - yapcasia2013DQNEO
 
コンセプトから理解するGitコマンド
コンセプトから理解するGitコマンドコンセプトから理解するGitコマンド
コンセプトから理解するGitコマンドktateish
 
継続使用と新規追加したRedmine Plugin
継続使用と新規追加したRedmine Plugin継続使用と新規追加したRedmine Plugin
継続使用と新規追加したRedmine PluginMei Nakamura
 
Gitのよく使うコマンド
Gitのよく使うコマンドGitのよく使うコマンド
Gitのよく使うコマンドYUKI Kaoru
 
Gitの便利ワザ
Gitの便利ワザGitの便利ワザ
Gitの便利ワザktateish
 
ある工場の Redmine 2022 〜ある工場の Redmine 5.0 バージョンアップ〜 ( Redmine of one plant 2022 ...
ある工場の Redmine 2022 〜ある工場の Redmine 5.0 バージョンアップ〜 (  Redmine of one plant 2022 ...ある工場の Redmine 2022 〜ある工場の Redmine 5.0 バージョンアップ〜 (  Redmine of one plant 2022 ...
ある工場の Redmine 2022 〜ある工場の Redmine 5.0 バージョンアップ〜 ( Redmine of one plant 2022 ...Kohei Nakamura
 
プログラミング勉強会「オトナのGit入門」
プログラミング勉強会「オトナのGit入門」プログラミング勉強会「オトナのGit入門」
プログラミング勉強会「オトナのGit入門」Yoshinori Yamanouchi
 
オブジェクト指向できていますか?
オブジェクト指向できていますか?オブジェクト指向できていますか?
オブジェクト指向できていますか?Moriharu Ohzu
 
社内Git勉強会向け資料
社内Git勉強会向け資料社内Git勉強会向け資料
社内Git勉強会向け資料Hiroki Saiki
 
もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜
もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜
もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜Takashi Uemura
 
新たな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 教學littlebtc
 
モジュールの凝集度・結合度・インタフェース
モジュールの凝集度・結合度・インタフェースモジュールの凝集度・結合度・インタフェース
モジュールの凝集度・結合度・インタフェースHajime Yanagawa
 

Tendances (20)

ノンプログラマのGit入門
ノンプログラマのGit入門ノンプログラマのGit入門
ノンプログラマのGit入門
 
こわくない Git
こわくない Gitこわくない Git
こわくない Git
 
バージョン管理のワークフロー
バージョン管理のワークフローバージョン管理のワークフロー
バージョン管理のワークフロー
 
やりなおせる Git 入門
やりなおせる Git 入門やりなおせる Git 入門
やりなおせる Git 入門
 
はじめようGit
はじめようGitはじめようGit
はじめようGit
 
やさしいGitの内部構造 - yapcasia2013
やさしいGitの内部構造 - yapcasia2013やさしいGitの内部構造 - yapcasia2013
やさしいGitの内部構造 - yapcasia2013
 
コンセプトから理解するGitコマンド
コンセプトから理解するGitコマンドコンセプトから理解するGitコマンド
コンセプトから理解するGitコマンド
 
継続使用と新規追加したRedmine Plugin
継続使用と新規追加したRedmine Plugin継続使用と新規追加したRedmine Plugin
継続使用と新規追加したRedmine Plugin
 
Git (実践入門編)
Git (実践入門編)Git (実践入門編)
Git (実践入門編)
 
Gitのよく使うコマンド
Gitのよく使うコマンドGitのよく使うコマンド
Gitのよく使うコマンド
 
Gitの便利ワザ
Gitの便利ワザGitの便利ワザ
Gitの便利ワザ
 
Git and Github
Git and GithubGit and Github
Git and Github
 
ある工場の Redmine 2022 〜ある工場の Redmine 5.0 バージョンアップ〜 ( Redmine of one plant 2022 ...
ある工場の Redmine 2022 〜ある工場の Redmine 5.0 バージョンアップ〜 (  Redmine of one plant 2022 ...ある工場の Redmine 2022 〜ある工場の Redmine 5.0 バージョンアップ〜 (  Redmine of one plant 2022 ...
ある工場の Redmine 2022 〜ある工場の Redmine 5.0 バージョンアップ〜 ( Redmine of one plant 2022 ...
 
プログラミング勉強会「オトナのGit入門」
プログラミング勉強会「オトナのGit入門」プログラミング勉強会「オトナのGit入門」
プログラミング勉強会「オトナのGit入門」
 
オブジェクト指向できていますか?
オブジェクト指向できていますか?オブジェクト指向できていますか?
オブジェクト指向できていますか?
 
社内Git勉強会向け資料
社内Git勉強会向け資料社内Git勉強会向け資料
社内Git勉強会向け資料
 
もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜
もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜
もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜
 
新たな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 教學
 
モジュールの凝集度・結合度・インタフェース
モジュールの凝集度・結合度・インタフェースモジュールの凝集度・結合度・インタフェース
モジュールの凝集度・結合度・インタフェース
 

Similaire à はじめてのGit forデザイナー&コーダー

第1回Git勉強会
第1回Git勉強会第1回Git勉強会
第1回Git勉強会kunimiya
 
バージョン管理
バージョン管理バージョン管理
バージョン管理Misa Kondo
 
Gitのいいところ
GitのいいところGitのいいところ
Gitのいいところkyanro
 
LibreOffice を Windows 上でビルドする UPDATE2
LibreOffice を Windows 上でビルドする UPDATE2LibreOffice を Windows 上でビルドする UPDATE2
LibreOffice を Windows 上でビルドする UPDATE2Tomofumi Yagi
 
Stylez GitLab勉強会 第1回
Stylez GitLab勉強会 第1回Stylez GitLab勉強会 第1回
Stylez GitLab勉強会 第1回Tetsurou Yano
 
ブラウザだけで学ぶWebアプリ開発
ブラウザだけで学ぶWebアプリ開発 ブラウザだけで学ぶWebアプリ開発
ブラウザだけで学ぶWebアプリ開発 schoowebcampus
 
Confluence と DITA による Webマニュアル作成フロー
Confluence と DITA によるWebマニュアル作成フローConfluence と DITA によるWebマニュアル作成フロー
Confluence と DITA による Webマニュアル作成フローTakashi Yamaguchi
 
HTML5での制作、いつから始める?
HTML5での制作、いつから始める?HTML5での制作、いつから始める?
HTML5での制作、いつから始める?Fuminori Mori
 
今さら聞けない人のためのGit超入門 GitLab 13対応版
今さら聞けない人のためのGit超入門 GitLab 13対応版今さら聞けない人のためのGit超入門 GitLab 13対応版
今さら聞けない人のためのGit超入門 GitLab 13対応版VirtualTech Japan Inc./Begi.net Inc.
 
Python for Data Analysis第1回勉強会(+git入門)
Python for Data Analysis第1回勉強会(+git入門)Python for Data Analysis第1回勉強会(+git入門)
Python for Data Analysis第1回勉強会(+git入門)Makoto Kawano
 
PHPカンファレンス2012 最先端web開発 - 公開用
PHPカンファレンス2012   最先端web開発 - 公開用PHPカンファレンス2012   最先端web開発 - 公開用
PHPカンファレンス2012 最先端web開発 - 公開用ha1t
 
Git & GitHub & kintone でウルトラハッピー!
Git & GitHub & kintone でウルトラハッピー!Git & GitHub & kintone でウルトラハッピー!
Git & GitHub & kintone でウルトラハッピー!ymmt
 
Git演習(1)
Git演習(1)Git演習(1)
Git演習(1)sono8
 
Git introduction
Git introductionGit introduction
Git introductiontotzyuta
 

Similaire à はじめてのGit forデザイナー&コーダー (20)

第1回Git勉強会
第1回Git勉強会第1回Git勉強会
第1回Git勉強会
 
Git 20100724
Git 20100724Git 20100724
Git 20100724
 
バージョン管理
バージョン管理バージョン管理
バージョン管理
 
Gitのいいところ
GitのいいところGitのいいところ
Gitのいいところ
 
LibreOffice を Windows 上でビルドする UPDATE2
LibreOffice を Windows 上でビルドする UPDATE2LibreOffice を Windows 上でビルドする UPDATE2
LibreOffice を Windows 上でビルドする UPDATE2
 
Stylez GitLab勉強会 第1回
Stylez GitLab勉強会 第1回Stylez GitLab勉強会 第1回
Stylez GitLab勉強会 第1回
 
今さら聞けない人のためのgit超入門
今さら聞けない人のためのgit超入門今さら聞けない人のためのgit超入門
今さら聞けない人のためのgit超入門
 
ブラウザだけで学ぶWebアプリ開発
ブラウザだけで学ぶWebアプリ開発 ブラウザだけで学ぶWebアプリ開発
ブラウザだけで学ぶWebアプリ開発
 
Confluence と DITA による Webマニュアル作成フロー
Confluence と DITA によるWebマニュアル作成フローConfluence と DITA によるWebマニュアル作成フロー
Confluence と DITA による Webマニュアル作成フロー
 
HTML5での制作、いつから始める?
HTML5での制作、いつから始める?HTML5での制作、いつから始める?
HTML5での制作、いつから始める?
 
今さら聞けない人のためのGit超入門 GitLab 13対応版
今さら聞けない人のためのGit超入門 GitLab 13対応版今さら聞けない人のためのGit超入門 GitLab 13対応版
今さら聞けない人のためのGit超入門 GitLab 13対応版
 
01.app
01.app01.app
01.app
 
Python for Data Analysis第1回勉強会(+git入門)
Python for Data Analysis第1回勉強会(+git入門)Python for Data Analysis第1回勉強会(+git入門)
Python for Data Analysis第1回勉強会(+git入門)
 
PHPカンファレンス2012 最先端web開発 - 公開用
PHPカンファレンス2012   最先端web開発 - 公開用PHPカンファレンス2012   最先端web開発 - 公開用
PHPカンファレンス2012 最先端web開発 - 公開用
 
Git & GitHub & kintone でウルトラハッピー!
Git & GitHub & kintone でウルトラハッピー!Git & GitHub & kintone でウルトラハッピー!
Git & GitHub & kintone でウルトラハッピー!
 
今さら聞けない人のためのGit超入門
今さら聞けない人のためのGit超入門今さら聞けない人のためのGit超入門
今さら聞けない人のためのGit超入門
 
Git演習(1)
Git演習(1)Git演習(1)
Git演習(1)
 
Git introduction
Git introductionGit introduction
Git introduction
 
Git introduction
Git introductionGit introduction
Git introduction
 
今さら聞けない人のためのGit超入門 OSC2018広島版
今さら聞けない人のためのGit超入門 OSC2018広島版今さら聞けない人のためのGit超入門 OSC2018広島版
今さら聞けない人のためのGit超入門 OSC2018広島版
 

はじめてのGit forデザイナー&コーダー