git-it-electron 実践入門 (前編)

2016/07/31

Git-it, git-it-electronとは

Git, GitHub 学習用のデスクトップアプリケーションです。

画面の指示に従って進めていくだけで
Gitの概念からプルリクエストのフローまで学べます。

  • 実際にプルリクエストを送ることができます
  • 章末ごとに正しい操作ができているかのチェック機能

所要時間は、Git使い慣れてる人で1時間未満、
未経験者でも3時間あればなんとか終わります。

以前、プログラミング知識共有サービス-Qiitaで紹介したところ、
需要がありそうでしたので、詳しく解説します。

[新人教育] 何も知らない人がGitとGitHubを独学で知る
http://qiita.com/iKenji/items/367e8344490dd37e14f0

 

こんな人にオススメ

  • Gitを知らない人
  • Gitは知っているけどGitHubを知らない人
  • プルリクエストを出してみたい人
  • GUIでGit操作をしている人

Gitの研修としてはもちろんですが、
Git中級者が理解を深めるためにも良いです。

 

実践

git-it-electron のインストール

さっそくインストールして始めていきます。
Macの方は こちら(日本語版) から Git-it-darwin-x64.zip をダウンロードします。

ダウンロードが完了したら、
Zipファイルを解答してGit-it.app を起動します。

※1 起動画面

無事実行できましたか?
左上の言語カテゴリから日本語に設定ができます。

GET STARTED!

をクリックしてスタートです。

 

第一章 Get Git

この章で学ぶこと

  • Gitとは何か
  • Gitのインストール方法
  • Gitの初期設定

本アプリでは、GitHub Desktop というGitを操作するデスクトップアプリが推奨されています。

GitHubからのサポートの面でも優遇されるみたいです。

私は、SSHでLinuxでGitを使うことも多いので、
ターミナルで進めることにします。

Mac にはデフォルトで Git が入っていますので
特に準備が必要ありません。
ターミナルを起動しましょう。

Windowsの方は、この機会に Git Bash を導入することをオススメします。※2

※2 参考:私家版 Git For Windowsのインストール手順

Gitがインストールできたか確認してみます。

$ pwd
/Users/ichihashi_kenji
$ git --version
git version 2.4.0

※バージョンは1.7.10より上であれば問題ありません。

 

Gitがインストールできたら
今回作業するフォルダを用意します。

$ mkdir git-it-ren
$ cd git-it-ren/
$ pwd
/Users/ichihashi_kenji/git-it-ren

 

本文にあるように、
名前とEメールアドレスを
設定して VERIFYボタンを押します。

 

VERIFYされない...

git config -l

もしくは

vim ~/.gitconfig

正しく設定できているか確認してみます。
vimで直接書いても問題ありません。

 

※3 ~/.gitconfig

 

第一章をクリアしました!
サイドメニューが緑になったことを確認して次へ進みます。

 

 

第二章 Repository

 

この章で学ぶこと

  • リポジトリとは何か
  • ターミナルとは何か
  • リポジトリの作り方
  • git statusコマンド

 

プロジェクト対象のフォルダを作成して、
Git管理します。

$ pwd
/Users/ichihashi_kenji/git-it-ren
$ mkdir hello-world
$ cd hello-world/
$ git init
Initialized empty Git repository in /Users/ichihashi_kenji/git-it-ren/hello-world/.git/
$ git status
On branch master

Initial commit

nothing to commit (create/copy files and use "git add" to track)

 

作成したhello-worldフォルダをSELECT DIRECTORYで選択して
VERIFYします。

 

第二章クリアです。
サイドメニューがグリーンになったことを確認して次へ進みます。

 

第三章 Commit To It

 

この章で学ぶこと

  • git add コマンド
  • git commit コマンド
  • git diff コマンド

 

ファイルを作成して add して commit します。

VERIFYを正しく動作させるために、ファイル名は readme.txtにしてください。

commit messageは自由で構いません。

 

$ pwd
/Users/ichihashi_kenji/git-it-ren/hello-world
$ touch readme.txt
$ git commit -m 'add readme.txt'
On branch master

Initial commit

Untracked files:
readme.txt

nothing added to commit but untracked files present
$ vim readme.txt
~~~~ 自由に文言を追加 ~~~~
$ git status
~~~~
$ git diff
~~~~
$ git add readme.txt
$ git commit -m 'update readme.txt'

第二章と同じフォルダをSELECT DIRECTORYして、
VERIFYします。

第三章クリアです。

 

第四章 GitHubbin

この章で学ぶこと

  • GitHubとは何か
  • GitHubのアカウント登録
  • GitHubの初期設定

GitHubのアカウントを作ってVERIFYします。

 

VERIFYされない...

$ git config -l
user.username=iKenji

とGitHubのユーザー名が一致していることを確かめます。
※GitHubのユーザー名とは、GitHub プロフィール画面のURL末尾のものです。(https://github.com/iKenji)
※大文字小文字を気をつけましょう。

違っている場合は正しく設定しなおします。

git config --global user.username iKenji

 

第四章クリアです。

 

第五章 Remote Control

この章から少し難易度があがります。
焦らず理解して進みます。

 

 

この章で学ぶこと

  • リモートリポジトリとは何か
  • GitHubのリポジトリの作り方
  • リモートリポジトリの設定
  • README.md, .gitignore, license
  • ブランチとは何か
  • git push コマンド

 

GitHubにリポジトリを作った後、
ローカルと紐付けてファイルをホスティングします。

GitHubの画面右上の +ボタン でリモートリポジトリを作成します。

 

 

リポジトリ名は、VERIFY するために、必ずフォルダ名のhello-worldと同じにしてください。

 

リポジトリ名以外の入力欄はデフォルトです。

リポジトリが作成できたら、
HTTPS のURLをコピーしておきます。

 

ターミナルに戻って、ローカルリポジトリにリモートリポジトリ(GitHub)の設定をします。
先ほどコピーしたURLを設定します。

 

$ git remote add origin https://github.com/iKenji/hello-world.git

リモートリポジトリが設定出来たら、
プロジェクトの現状をプッシュ(ホスティング)します。

$ git push origin master
Username for 'https://github.com': iKenji
Password for 'https://iKenji@github.com':
Counting objects: 3, done.
Writing objects: 100% (3/3), 229 bytes | 0 bytes/s, done.
Total 3 (delta 0), reused 0 (delta 0)
To https://github.com/iKenji/hello-world.git
* [new branch] master -> master

 

先ほど、URLをコピーしたGitHubの画面にファイルがホスティングされていることが確認できます。

 

前の章と同じフォルダをSELECT DIRECTORYしてVERIFYします。

 

第五章クリアです。

 


 

後半へ続く...

-Git塾