• Stars
    star
    229
  • Rank 169,303 (Top 4 %)
  • Language
  • Created over 12 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

はてなのデザイナ向けの Git 入門ドキュメントです。

デザイナのための Git

Git とは

  • バージョン管理システムです (ミスった変更を取り消したり、ブランチを分けて並行して開発ができます)
  • 変更したファイルをサーバに反映するのも Git 経由でおこないます

概念図

   ∧_∧           ∧_∧     
  ( ´∀`) ―push→ ( ・∀・) 
  (    ) ←pull―  .(    )
  | | |        .| | |
  (__)_)        (__)_) 

最初に!

Git のバージョンをチェック

% git --version
git version 2.36.1

バージョン番号が古い場合、便利な機能が使えなかったりセキュリティ面でイマイチだったりすることがあります。 最寄りのエンジニアを呼んでバージョンを伝え、必要に応じて最新に上げてもらいましょう。

ちなみに現在の最新のバージョン番号は Git - Downloads の Latest source Release と書いてある箇所で確認できます。

ユーザー名とメールアドレスを設定する

ユーザー名とメールアドレスを設定します。 (これは表示のためのもので、自由な値を設定して構いません。)

git config --global を使用して設定を行うことで、設定値がユーザーのホームディレクトリの ~/.gitconfig ファイルに書き込まれます。 (see: git-config(1) Manual Page)

git config --global user.name "Hatena Tarou"
git config --global user.email "[email protected]"

便利な設定をしておく

以下をコピペして PuTTY や iTerm2 などの画面に流してください。Git 生活を快適にします。 一気に流しても大丈夫です。また、既に設定している人が実行しても問題ありません。

git config --global color.diff   auto
git config --global color.status auto
git config --global color.branch auto
git config --global color.grep   auto

git config --global core.excludesfile $HOME/.gitignore
git config --global push.default current

git config --global alias.st   status
git config --global alias.co   checkout
git config --global alias.ci   commit\ -v
git config --global alias.di   diff
git config --global alias.br   branch
git config --global alias.puhs push
git config --global alias.psuh push
git config --global alias.pus  push
git config --global alias.puh  push
git config --global alias.pl   '!git pull && git submodule update --init'

echo .DS_Store >> $HOME/.gitignore
echo Thumbs.db >> $HOME/.gitignore

エンジニアがやること

  • エディタの設定 (VS Code がおすすめ?)

最低限のワークフロー

  1. リポジトリをクローン: git clone
  2. 他人の変更を取得: git pull
  3. ファイルを変更/追加: git add
  4. 変更をコミット: git commit
  5. コミットを送信: git push
  6. 2 へ

以下は適宜

  • 作業の合間合間に: git status
  • ブランチを切り替える: git checkout

git clone (最初の 1 回だけ)

(必要なら、いつもの作業場所のひとつ上に移動する)

% cd ..

中央のリポジトリをクローンしてきます

% git clone --recursive git@repository01:/var/git/projects/Hatena-Project.git

リポジトリとサブモジュールをコピーするため、多少時間がかかります。

git pull (最新の変更を取得する)

他の人が行った変更を手元にも反映します。

キーワードの最初の設定をしていれば、以下の 1 コマンドで OK です。

% git pl

remote: Counting objects: 6453, done.
remote: Compressing objects: 100% (6053/6053), done.
remote: Total 6269 (delta 3881), reused 0 (delta 0)
Receiving objects: 100% (6269/6269), 744.80 KiB | 137 KiB/s, done.
Resolving deltas: 100% (3881/3881), completed with 101 local objects.
From repository01:/var/git/projects/Hatena-Project
   68f83fa..41414d4  master     -> origin/master
 * [new branch]      split      -> origin/split
   9772205..3dfd8f3  testable   -> origin/testable
First, rewinding head to replay your work on top of it...
Fast-forwarded master to 41414d46425b62b1d2922ee57482af08c63a3dba.

設定をしていない場合、以下を実行してください。

% git pull
% git submodule update --init

手元のファイルがブランチの最新の状態になります。

pull 時のトラブル

error: Your local changes to 'templates/index.html' would be overwritten by merge.  Aborting.
Please, commit your changes or stash them before you can merge.

上のようなメッセージが出た場合は、pull で更新されるファイルが手元で修正されていて、まだコミットされていません。変更をコミットしてからもう一度 git pull しなおして下さい。

Auto-merging templates/index.html
CONFLICT (content): Merge conflict in templates/index.html
Automatic merge failed; fix conflicts and then commit the result.

上のようなメッセージが出た場合は、他の人が行った変更と手元でコミットした内容がコンフリクトしています。量が多すぎる、訳がわからない、修正できるか自信がない場合は、以下のコマンドを実行して中止し、エンジニアに尋ねてください。

% git reset --hard

git checkout (ブランチを切り替える/作成する)

同じリポジトリで複数のブランチを並行して開発できるのが git の便利な点です。常に master ブランチが本番に反映されます。開発は master 以外のブランチで行い、適宜 master にマージして反映、というのが開発の流れです。開発中は複数のブランチを渡り歩くことになるかもしれません。

作業ブランチを切り替えたい場合は

% git checkout branch-name

ブランチ名を指定して git checkout コマンドを呼びます。

新しい機能の開発などで、エンジニアが push したブランチが手元にまだ出来ていない場合は

% git checkout -t origin/branch-name

とします。

checkout 直後は submodule の更新が必要な場合があります。

M       modules/Hatena
M       modules/WorkerManager

のように表示されたら、以下のコマンドで submodule を更新してください。

git submodule update --init

git add (コミットするファイルを追加する)

ファイルの変更をコミットするには、一度 git add してコミット可能な状態にする必要があります。

% git add templates/index.html

ディレクトリ名を指定することで、ディレクトリ以下の全ての変更を Git に通知します。

% git add static/images

git add は通常何の出力も返さないので、次の項でふれる git status で状態を確認してください。

git status (作業状況を確認する)

現在の作業状況を確認するには、git status というコマンドを使います。英語のメッセージですが、読んで下さい。一行一行に意味があります。

% git status

まっさらな状態では、以下のような出力になります。

# On branch master
nothing to commit (working directory clean)

1 行目はいま自分が "master" ブランチにいることを、2 行目はファイルやディレクトリに何の変更も加わっていないことを表しています。

master ブランチで作業中に新しいファイル static/images/hoge.gif をつくったときは、以下のような出力になります。

# On branch master
# Untracked files:
#   (use "git add <file>..." to include in what will be committed)
#
#       static/images/hoge.gif

リポジトリに入っておらずバージョン管理されないファイルとして、static/images/hoge.gif がリストされています。3 行目の指示を見れば、これをコミットに含めるには git add すればよいということが分かるようになっています。

すでにリポジトリに含まれているファイルを変更した場合は、以下のような出力になります。

# On branch master
# Changed but not updated:
#   (use "git add <file>..." to update what will be committed)
#   (use "git checkout -- <file>..." to discard changes in working directory)
#
#       modified:   static/images/spacer.gif
#
no changes added to commit (use "git add" and/or "git commit -a")

編集したけれどその変更が Git に伝わっていないファイルとして、static/images/spacer.gif がリストされています。先ほどと同じ 3 行目の指示に加え 4 行目にも指示がありますがまあ試してみてください (変更が元に戻ります)。最後の行は、今のままではコミットするものがないので git add してくださいといっています。(git commit -a は、はてな的に非推奨です。見なかったことにしてください)

git add static/images/spacer.gif などで変更を Git に通知してやると、git status の結果は以下のようになります。

% git status
# On branch master
# Changes to be committed:
#   (use "git reset HEAD <file>..." to unstage)
#
#       modified:   static/images/spacer.gif
#

コミットされる予定のファイルがリストされています。

これらの出力は組み合わさって表示されることもあります。

% git st
# On branch master
# Changes to be committed:
#   (use "git reset HEAD <file>..." to unstage)
#
#       modified:   static/images/spacer.gif
#
# Changed but not updated:
#   (use "git add <file>..." to update what will be committed)
#   (use "git checkout -- <file>..." to discard changes in working directory)
#
#       modified:   static/images/logo_header.gif
#
# Untracked files:
#   (use "git add <file>..." to include in what will be committed)
#
#       i18n/a

git commit (コミットする)

git add された変更をまとめてコミットします。git add されていないファイルはコミットに含まれないので、新しい画像を追加したときなどは注意してください。

% git ci

(もしくは)

% git commit

エディタが立ち上がります。適当にコミットメッセージを書いて保存し、エディタを終了させてください。

[master 7196d3f] 文言修正
 1 files changed, 1 insertions(+), 0 deletions(-)

こんなメッセージが出たらコミット完了。

git push (変更をサーバに送る)

変更を中央のリポジトリに送信します。 push したつもりがエラーが出て push できていないこともあるので、コマンドの結果に注意してください。

% git push

Counting objects: 24, done.
Compressing objects: 100% (13/13), done.
Writing objects: 100% (13/13), 1.58 KiB, done.
Total 13 (delta 10), reused 0 (delta 0)
To git@repository01:/var/git/projects/Hatena-Project
   1ede18e..c6fa4c4  HEAD -> master

以下のように出たときは push に失敗しています!他の人が同じブランチに先に push していた場合、この表示になります。一度 pull してから push しなおしてみて下さい。

% git push
To git@repository01:/var/git/projects/Hatena-Project
 ! [rejected]        HEAD -> master (non-fast-forward)
error: failed to push some refs to 'git@repository01:/var/git/projects/Hatena-Project'
To prevent you from losing history, non-fast-forward updates were rejected
Merge the remote changes before pushing again.  See the 'Note about
fast-forwards' section of 'git push --help' for details.

こんな時は/プラスアルファ

以下はそれほど覚える必要がないものです。

変更履歴がみたい

git log --stat を使う

% git log --stat

現在いるブランチのここまでのコミット履歴が確認できます。コミットごとの詳細な変更内容は確認できません。ターミナルの画面に収まり切らない量の場合は矢印キーで続きを確認し、満足したらキーボードの q キーを押して元の画面に戻ることができます。

tig を使う

tig という便利ツールが手元にインストールされているかもしれません (入ってなかった場合は最寄りのエンジニアに頼んでみてください)。これを使って

% tig

とすると、リポジトリの変更履歴が (コミットした人の名前、コミットメッセージとともに) 表示されます。この画面では矢印キーの上下で履歴を辿り、Enter でひとつひとつのコミットにおける変更内容などを確認することができます。終了したくなったら q キーを押してください。

コンフリクトの解消

git pullgit merge でコンフリクトが発生し、自分の手で解決したい場合。 git status すると、コンフリクトしたファイルが赤く表示されます。

% git status
# On branch master
# Your branch and 'origin/master' have diverged,
# and have 1 and 3 different commit(s) each, respectively.
#
# Changes to be committed:
#
#       modified:   templates/guide.html
#
# Unmerged paths:
#   (use "git add/rm <file>..." as appropriate to mark resolution)
#
#       both modified:      templates/index.html
#

この場合 templates/index.html がコンフリクトしているようです。

コンフリクトしたとされるファイルをエディタで開いてください。"<<<<<<<" と ">>>>>>>" に囲まれた部分がコンフリクトしています。

<<<<<<< HEAD
    <div class="container">
=======
    <div>[% IF foobar %]
>>>>>>> 3100b66ffb26bb8b876cb47d68d2b91b4ec17f7f

"=======" を挟んで "HEAD" とある側が自分の変更、反対側が相手の変更です。意図を読むか相談するかして、二つの変更を手動でマージします。分からなくなった場合は、いつでも git reset --hard してエンジニアを呼んでください。

この例だとこれが正しそうです。

    <div class="container">[% IF foobar %]

このようにしてコンフリクトマーカーをすべて消し去ったら、そのファイルを git add し (こうすることでコンフリクトを解消したことをシステムに伝えます)、いつものようにコミット&プッシュします。コンフリクトしているファイルが複数ある場合は、全部に対して手動マージしてからコミットしてください。

% git add templates/index.html
% git commit
% git push

ブランチを間違えてコミットしてしまった

push している場合やよくわからない場合は、エンジニアに頼んでください。 まだ push されておらず自分の手で解決したい場合は、以下のようにしてください。

theme ブランチに行うべき変更を master ブランチにコミットしてしまった場合。その直後なら

(theme ブランチに戻る)

% git checkout theme

(master の最新のコミット=誤った変更を theme ブランチに適用)

% git cherry-pick master

(master の最新のコミットを巻き戻す)

% git revert master

これで完了です。コンフリクトが発生するなどして分からなくなったら、git reset --hard してエンジニアを呼んでください。

あの言葉が入ったファイルを探す

git grep '<var>word</var>' で、リポジトリ内からその単語を含むファイルと行を表示できます。ふつうに検索すると、アプリのコードも検索されてしまうので最後にディレクトリ名を加えて以下のようにするのがいいです。

% git grep 'TODO' templates

templates/ch.html:[% # TODO : 外部化したい %]
templates/campaign.html:            [% #TODO このテーマを使うボタンが動かない %]

あのときのファイルの内容に戻したい

git checkout リビジョン -- ファイル名 を実行すると指定のコミット時点でのファイルだけ戻すことができます。 git log --stattig などで該当のコミットのrevision ( 2444d62e7330ec65439e40c8ab88beab18ab09cd みたいな文字列) を見つけてそれを指定します。以下の例では README.md というファイルをこの時点のものに戻しています。

% git checkout 2444d62e7330ec65439e40c8ab88beab18ab09cd README.md

上記で問題なければあとはいつものように git add git commit します。

More Repositories

1

Hatena-Textbook

はてな研修用教科書
2,166
star
2

extract-content-javascript

JavaScript
174
star
3

solr-tutorial

Solrの導入資料です。LAMP構成に特化しています。
129
star
4

hatena-bookmark-googlechrome-extension

Hatena Bookmark extension for Google Chrome
JavaScript
126
star
5

hatena-bookmark-xul

Hatena Bookmark Firefox Add-on
JavaScript
84
star
6

Hatena-Bookmark-iOS-SDK

This library is deprecated.
Objective-C
84
star
7

Hatena-Blog-Workflows-Boilerplate

Shell
75
star
8

Hatena-Textbook-JavaScript

はてな研修用JavaScript教科書
JavaScript
75
star
9

go-Intern-Bookmark

はてなインターン2018 サンプルアプリケーション
Go
68
star
10

renovate-config

A shareable config preset for Renovate used in Hatena.
63
star
11

Hatena-Intern-Exercise2015

はてなインターン参加者向けの事前課題です
JavaScript
59
star
12

Ridge

Perl
53
star
13

swift-Sample-GitHubSearch-2015

The sample code of Swift iOS app
Swift
49
star
14

Hatena-Blog-Theme-Boilerplate

SCSS
48
star
15

Hatena-Blog-Theme-Boilerplate-Less

CSS
45
star
16

ios-Intern-Bookmark-2013

Objective-C
39
star
17

Sorter

Perl
39
star
18

ipdrawer

Light-weight IP Address Management (IPAM) application which has gRPC and REST API interfaces
Go
33
star
19

Hatena-Intern-2020-Template

はてなインターン2020
Go
27
star
20

go-Intern-Diary

はてなインターン2018 課題アプリケーションひな形
Go
25
star
21

pull-request-analysis-sample

TypeScript
23
star
22

ios-Intern-Bookmark-Simple-Swift-2014

はてなインターン2014版サンプルブックマークiOSアプリ(Swift- シンプル版)
Swift
21
star
23

hatena-bookmark-safari-ext

Hatena Bookmark Extension for Safari
JavaScript
19
star
24

Hatena-Intern-Exercise2013

JavaScript
18
star
25

Hatena-Intern-Exercise2012

Perl
18
star
26

GigaUI-Sample

Swift
15
star
27

godash

Minimal wrapper of samber/lo
Go
14
star
28

hatena-screenshot-xul

hatena screenshot(thumbnail) firefox addon
JavaScript
13
star
29

Hatena-Intern-Exercise2014

JavaScript
11
star
30

swiro

swiro - A switching route tool for AWS
Go
11
star
31

perl5-test-apache-rewriterules

Test::Apache::RewriteRules - Testing Apache's Rewrite Rules
Perl
11
star
32

titanium-hatena-oauth-sample

JavaScript
11
star
33

eslint-config-hatena

JavaScript
11
star
34

Intern-Bookmark-2013

はてなインターン2013版サンプルWebアプリ
Perl
10
star
35

DBIx-MoCo

Perl
9
star
36

terraform-provider-hatenablog-members

Go
9
star
37

scala-Intern-Bookmark

はてな教科書サンプルコード
Scala
9
star
38

hatenablog-workflows

reusable workflows for hatenablog
Python
8
star
39

KeyValuePairsDeserializer

Java
7
star
40

ios-Intern-Bookmark-Simple-2014

はてなインターン2014版サンプルブックマークiOSアプリ(シンプル版)
Objective-C
7
star
41

Hatena-Blog-Logo

obsolete: 素材集 - 株式会社はてな をご利用ください。
7
star
42

Hatena-Intern-Exercise-2023

JavaScript
7
star
43

hatena-toolbar-xul

Hatena Toolbar for Firefox
JavaScript
7
star
44

Net-Hatena

A Perl interface to the Hatena API
Perl
6
star
45

python-Intern-Machine-Learning

はてなインターン2018 機械学習課題ひな形
Jupyter Notebook
6
star
46

Hatena-Newbie

はてな研修用プロジェクトひな形
Perl
5
star
47

iphone-hatena-bookmark-sample

はてなブックマークiPhoneアプリケーションの外部連携機能用サンプルです
Objective-C
5
star
48

Intern-Bookmark

Internship
Perl
5
star
49

Hatena-Intern-Kubernetes-Microservice

はてなリモートインターンシップ2022 / 2021ブランチに2021年版があります
Go
4
star
50

ios-Intern-Bookmark-Simple-2013

Objective-C
4
star
51

u2s3

Go
4
star
52

WindowsStoreAppTutorial

Windows ストアアプリの開発のチュートリアル記事のためのサンプルコードです。
JavaScript
4
star
53

net-hatena-id

Hatena ID Discovery Lite
3
star
54

ios-Intern-Diary-2014

はてなインターン2014版サンプル日記iOSアプリ(のひな形)
Objective-C
3
star
55

p5-Test-WWW-Stub

Perl
3
star
56

polymerase

MySQL backup manager integrated with Percona Xtrabackup and mysqldump
Go
3
star
57

Hatena-Intern-Exercise-2022

はてなリモートインターンシップ2022の事前課題です (public)
JavaScript
2
star
58

Intern-Diary-2014

はてなインターン2014版サンプル日記Webアプリ(のひな形)
Perl
2
star
59

scala-Intern-Machine-Learning

Scala
2
star
60

Hatena-Intern-Exercise-2021

はてなリモートインターンシップ2021事前課題
JavaScript
2
star
61

scala-Intern-Diary

はてな教科書課題ひな形
Scala
2
star
62

perl-Intern-Bookmark

はてな教科書サンプルコード
Perl
2
star
63

swift-Sample-GitHubSearch-2016

Swift
2
star
64

Intern-Bookmark-2014

はてなインターン2014版サンプルブックマークWebアプリ
Perl
2
star
65

HTML-Simplify

Simplify HTML to find main content easy;
Perl
2
star
66

fastlane-plugin-mackerel_actions

Ruby
1
star
67

Plack-Middleware-HatenaOAuth

Plack::Middleware::HatenaOAuth - provide a login endpoint for Hatena OAuth
Perl
1
star
68

prettier-config-hatena

JavaScript
1
star
69

Plack-Middleware-AccessCount

Perl
1
star
70

apply-for-internship-2020

I will apply for the internship 2020.
Go
1
star
71

perl-Intern-Diary

はてな教科書課題ひな形
Perl
1
star