まふゆちゃんの技術ブログ。

情報系の高校生・高専生・大学生を全力で応援するブログです。

超絶わかりやすいGit入門。(準備編)

f:id:Mafuyu7se:20181229224254p:plain
こんばんは!
バーチャル高専女子、まふゆです。

突然ですが皆さん、「Git」使ってますか?

「Git」ってよく聞くけど、何のことか全然分からない!って人も意外と多いんじゃないかな。
これからGitを全く知らない皆さんのために、Gitの使い方をわかりやすく伝授していきます!
この記事が、あなたがGitに触れるキッカケになってくれれば幸いです。

ぶっちゃけると、ココ最近のIT業界では「ソフトウェアエンジニアならGit使えて当たり前」的な風潮があります。
もはや「Gitは義務教育」と言っても過言ではないと私は思っています。

ググると「今更聞けない!Git入門」なんてタイトルの記事がわんさか出てくるよ。
ところが、こういう記事って初心者向けを謳っている割にはやたらと専門用語を使ってたり、前提として必要な知識が書かれていなかったりして不親切なことが多いです。
そこで、私が「誰が読んでも理解できるGit解説記事」を書いていくことにしました!!

ただ、Gitはとても奥が深いシステムなので、記事1回分ではとても説明しきれません。
なので、複数回に分けて解説をしていこうと思っています。
今回は「バージョン管理の概念」とか「Gitを使って開発するための準備」とかそういったことにフォーカスを当てて説明していくよ。
(具体的な使い方に関する説明は次回以降になります。)

■ 本記事の対象読者

・「Git」とか「GitHub」って聞いたことあるけど、何のことか全く分からない!
・ソフトウェアの「バージョン管理」をやったことがない!
・GitやGitHubを使ったバージョン管理をできるようになりたい!

といった人向けの内容になります。
「俺はGit使ってバリバリ開発してるぜ!」って人にとっては凄く退屈な内容だよ。別に読んでもいいけど。

■ 筆者の開発環境

・OS:Windows 10
・Gitクライアント:TortoiseGit

なお、TortoiseGitはWindowsにのみ対応しています。
MacやLinux使ってる人はゴメンネ…。

■ 注意!!

今回の記事は、「初心者向け」であることを前提として書いています。
そのため、初心者にとってノイズになるであろう要素は全て省いたような内容にしています。
実際の開発現場でGitを使っている人から見ればツッコミどころが多数あるかも。
あくまで「初心者向けにバージョン管理の概念をわかりやすく伝える」ことが目的なので、そのあたりには目を瞑っていただけると助かります…。


スポンサーリンク



■ 「バージョン管理」について。

Gitについて説明する前に、「バージョン管理」という概念について理解してもらう必要があります。
皆さんが使っているスマートフォンのOSの「バージョン」って気にしたことあるかな?
「iOS 12.1.4」とか、「Android 5.1.1」とか、「Android 9.0」みたいな、「OS名+数字」のアレです。
OSだけじゃなく、スマホアプリなんかにも「Ver X.X.X」みたいな番号の表記があったりするよね。

f:id:Mafuyu7se:20190224195847p:plain

この「数字」の部分を「バージョン番号」とか、あるいは単に「バージョン」と呼びます。
「バージョン」という概念は、ソフトウェアを開発する上で無くてはならないものです。

ソフトウェアの開発っていうのは、「仕様通りに動くものが完成したらそこで終わり!」というわけにはいきません
完成品を市場にリリースした後にも、新しい機能を追加したり、不具合を修正したり、やることはたくさん出てきます。
スマホゲームもそうだよね。
新キャラの追加、UIの更新、ゲームバランスの調整、バグの修正などがそれに該当します。

ソフトウェアの開発では、とある段階まで開発が進んだらそこを一区切りとして、「バージョン番号」を付けてリリース(公開)するような方法を取ります。
機能追加や不具合修正など、現行のバージョンに対して新たな変更が加えられたら、「バージョン番号」を新しいものに更新してからリリースするよ。

このような仕組みを取ることで、バージョン番号をソフトウェア更新履歴の指標として使うことができるので、更新履歴を管理しやすくなります。
エンジニア同士の会話で例を示すと、「そのバグなら、バージョンX.X.Xで修正済みのはずだよ!」みたいな感じで使われたりするね。

このようにしてソフトウェアの変更履歴を管理することを、「バージョン管理」と呼びます。

それともうひとつ。
リリース時に付けられるバージョン番号は、「1.0.5」とか「4.1.2」みたいに、3つの数字をピリオドで区切って表現する方法がよく使われます。
それぞれの数値の意味ですが、

一番右の数字・・・軽微なバグの修正など、小規模な変更のみ含まれる場合に1増やす。
真ん中の数字・・・ちょっとした新機能の追加など、中規模な変更が含まれる場合に1増やす。
一番左の数字・・・UIの大幅な更新など、大規模な変更が含まれる場合に1増やす。

というような使われ方をすることが多いです。
基本的には開発チームによってルールが決まっていることが多いので、それに従うようにしましょう。
「V高専生まふゆちゃんとイチャコラできるスマホアプリ」で例を示すと、以下のような感じになるよ。


【2019/01/25】
「V高専生まふゆちゃんとイチャコラできるスマホアプリ」 バージョン 1.0.0をリリース!
「きせかえモード」で好きな衣装を着せることができるよ!

【2019/01/29】
「きせかえモード」の衣装に、セーラー服とメイド服を追加!
バージョン1.0.1としてリリース!

【2019/02/05】
「きせかえモード」で特定の操作を行うと、
まふゆちゃんの衣装が消滅して下着姿になるバグが発生することが判明!
えっちなのはいけません!!
大至急修正してバージョン1.0.2としてリリース!

【2019/02/08】
ミニゲームの種類を増やしたよ!
バージョン1.1.0としてリリース!

【2019/02/13】
画面の操作感の悪さが不評だったので、UIを大幅に更新!
バージョン2.0.0としてリリース!


…といった具合でしょうか。

基本的には、バージョン番号の数値が大きいほど新しくて高性能という認識でOKです。
(バージョンを上げることによって不具合が発生する場合もあるので、一概に高性能とは言えないけどね)

とまあ、バージョン管理についての説明はこんな感じ。


スポンサーリンク



■ Gitってなに??

バージョン管理の概念については理解してもらえたと思うので、次はGitについて説明しよう。
Gitは最近の開発現場でよく使われる「ソフトウェアのバージョン管理システム」で、「ギット」と読みます。

さっき説明したような「ソフトウェアの更新履歴」を管理するためのシステムがGitです。
「分散型バージョン管理がうんたら~」とか小難しい話は置いといて、Gitを使うと何が嬉しいかを先に説明するよ。

Gitを使うことで、

・実施した変更の履歴がすべて記録されるので、「誰がどういう変更を加えたのか」を後から確認することができる!
・開発中に問題が発生したとき、以前の状態に環境を戻すことができる!
・複数人でソフトを開発するとき、他の人が実施した変更を簡単に自分の環境へ反映できる!

といったメリットがあります。
Gitを使うメリットは他にもたくさんありますが、今パッと思いついたのはこれぐらい。
めちゃくちゃ便利そうでしょ?
めちゃくちゃ便利なんですよ。これ。

例えば、2番目の
「開発中に問題が発生したとき、以前の状態に環境を戻す」という機能。
「必要なファイルを消してしまった!」とか、「自分が加えた変更によって変なバグが出るようになってしまった!」とか、そういう困った状況を一発で解決することができるわけです。

具体的なイメージを持ってもらうために例を挙げて説明するよ。
「美味しいカレーライス」を作るときに、Gitを使ってバージョン管理をするとしよう。


【STEP1】
じゃがいも、人参、玉ねぎ、お肉を包丁で一口大に切りました。

【STEP2】
油を引いた鍋に玉ねぎとお肉を入れて炒めました。

【STEP3】
じゃがいもと人参を入れて軽く炒め、お水を入れてよく煮込みました。

【STEP4】
煮干しとたくあんとセミの抜け殻とトカゲの死体を入れました。

【STEP5】
火を止めてカレールーを入れました。

【STEP6】
完成。
残念ながら、美味しいカレーはできませんでした。
何がいけなかったんだろう…(すっとぼけ)


ここでGitさんの本領発揮です。
Gitさんは頭がいいので、今までの変更履歴をすべて知っています。
つまりSTEP1~STEP6の状態をすべて記憶しているということ。

カレーが不味くなった原因は、どう見てもSTEP4にありそうですよね。
STEP3に時間を巻き戻せたらいいのになぁ…って思いませんか?
Gitさんの力を使えば、「STEP3に状態を巻き戻す」ということを一瞬でやってくれるわけです。
凄いですね。
これでカレーを作り直すことができます。

これはGitさんの機能のほんの一部で、もっと色々なすごい機能があります。
詳しいことはそのうち説明するので、とりあえず現段階では「へぇ~、よく分かんないけど便利そうだな~」ぐらいの認識でOKです。

■ じゃあGitHubってなに??

GitHubは、「Gitを使った開発者を支援するためのWebサービスで、「ギットハブ」と読みます。
Gitは単なるバージョン管理システムのことで、GitHubはGitをより便利に使うためのオンラインサービスです。
GitとGitHubを混同して話す人もいますが、厳密には違うということを覚えておいてね。

GitHubに会員登録することで、Gitを使ったバージョン管理をオンライン上で実施することが可能になります。
例えば、自宅のPCで書いたコードをGitHubのサーバーに上げておけば、学校のPCにもそのコードを全てそっくりそのまま持ってくることができるよ。
GoogleドライブとかDropboxとかそういったファイルサーバーでも似たようなことができそうだけど、GitHubには変更履歴を管理できるという絶大なメリットがあります。
外出先で実施した変更内容を自宅PCの開発環境に適用することもできるし、その逆も然り。

つまりGitHubをうまく使えば、自宅だろうが学校だろうが外出先だろうが、PCとネット環境さえあればどこでも開発ができるようになるというわけ。
便利だね!!
会員登録したくなってきたでしょ??


スポンサーリンク



■ Gitでバージョン管理を行うための準備。

Windows上でGitを使った開発を行うには、以下3点の準備が必要です。
・GitHubの会員登録&リポジトリの作成
・Gitのインストール
・Gitクライアントのインストール

それぞれについて、以下で順番に説明していきます!!

■ GitHubに登録して、リポジトリを作ろう。

GitHubの公式サイトはこちら。
github.com

・ユーザ名
・メールアドレス
・パスワード
を入力したら、
「Sign up for GitHub」と書かれた緑のボタンをクリックしましょう。

f:id:Mafuyu7se:20190217170042p:plain

続いて、お馴染みの「私はロボットではありません」の認証を済ませます。
矢印ボタンをクリックして、動物を正しい向きに回転させたら「終了」をクリックしましょう。
f:id:Mafuyu7se:20190217173016p:plain

お次はプランの選択。
無料プランか有料プラン(月額7ドル)を選択できますが、最初のうちは無料でいいでしょう。
必要になったら後から変更できるので。
最初からFree(無料)が選択されているはずなので、そのままContinueをクリックしてね。

f:id:Mafuyu7se:20190217170715p:plain

その次はアンケートですね。

f:id:Mafuyu7se:20190217171352p:plain

・プログラミングの経験はどのくらい?
・GitHubを何に使うの?
・学生さん?趣味で開発やってる人?それともプロ?
・興味がある技術の分野を教えて!
てかどこ住み?LINEやってる?

っていう内容の質問ですね。
回答を入力し、「Submit」をクリックしたら登録手続きは完了です。
面倒なら「skip this step」をクリックすればスキップできます。

f:id:Mafuyu7se:20190217171555p:plain

やったぜ!!登録完了!!
早速「Start a project」をクリックして開発を始めよう!!

f:id:Mafuyu7se:20190217172024p:plain

はい、「メールアドレスの認証が終わってねーぞ!」と怒られました。
GitHubからメールが届いてるはずなので、「Verify email addess」をクリックして認証を完了させましょう。

f:id:Mafuyu7se:20190217172341p:plain

認証が終わったら、もう一度「Start a project」をクリックしてね。
「Create a new repository」の画面に遷移します。
repository(リポジトリ)というのは、ソースコードの変更履歴を管理するための場所です。
これをプロジェクト毎に作成して、ソフト開発を行っていくんです。

今回は、以下のような設定でリポジトリを作ってね。

f:id:Mafuyu7se:20190217173502p:plain

Repository nameはリポジトリの名前です。
プロジェクトにふさわしい名前をつけるようにしましょう。

Descriptionは説明のこと。
プロジェクトの概要をざっくり書いたりするのに使います。
別に空欄でもいいです。

Public/Privateはどちらを選択しても良いのですが、Publicにすると全世界にソースコードが公開されることになります。
・他人に見られたくないのであればPrivate
・成果物を他人や企業とかにアピールしたいときはPublic

を選択するようにしましょう。

最後の「initialize this repository with a README」は、チェックマークを入れておくと最初から「README.md」というファイルが存在した状態でリポジトリが生成されます。
README.mdは、ソフトの利用者向けの説明等を記述するのに使われます。
現段階では使い道がいまいちわからないかもしれませんが、とりあえずチェックボックスをONにしておきましょう。

「Create repository」を押して、この画面が出ればリポジトリ生成完了だよ!

f:id:Mafuyu7se:20190217175452p:plain


スポンサーリンク



■ Gitをインストールしましょう。

続いて、PCにGitをインストールしましょう。
GitHubの会員登録とリポジトリの作成は終わりましたが、PCに肝心のGitが入っていないとバージョン管理はできません。

以下のサイトから、自分の環境にあったインストーラをダウンロードして起動してください。

git-scm.com

なんやかんや出ますが、そのままNextを押していけばインストールは終わります。
色々設定項目があるようですが、とりあえず全部デフォルトで大丈夫でしょう。(私もよくわかってない)

f:id:Mafuyu7se:20190217182244p:plain

インストールが終わったら、コマンドプロンプトを開いて

git --version

と入力してEnterを押してみてね。
このようにGitのバージョン番号が表示されれば、インストールは完了です。

f:id:Mafuyu7se:20190217182941p:plain

つづいて、ユーザ情報の登録をしましょう。
コマンドプロンプトで以下の入力を行って、ユーザー名とメールアドレスをGitに登録してください。

git config --global user.name "GitHubに登録したユーザ名"
git config --global user.email "GitHubに登録したメールアドレス"

上記2点の入力が終わったら、

git config -l

を入力してね。

f:id:Mafuyu7se:20190224180053p:plain

user.nameとuser.emailの欄に、さっき入力した値が正しく表示されていればOKです!!


スポンサーリンク



■ Gitクライアントのインストール。

さっきの作業で、Gitのインストール自体は完了です。
この状態でも既にGitを使うことはできるんだけど、黒い画面でコマンドを入力して操作することになるので、コマンドラインに慣れていない人にはちょっとハードルが高いかもしれません。
そのため、Gitクライアントソフトをインストールしましょう。

Gitクライアントをインストールすると、黒い画面を使わなくてもエクスプローラ上でGitの機能を簡単に扱うことができます
クライアントソフトは数種類ありますが、今回は「TortoiseGit(トータスギット)」を使いましょう。
理由は私が使ってるからです。(*´꒳`*)
(ちなみにTortoiseGitはWindows専用です。MacやLinuxを使ってる人は、専用のGitクライアントソフトがあるはずなので探してみてね。)

TortoiseGitの公式サイトはこちら。
tortoisegit.org

まず、TortoiseGit本体をダウンロードしよう。
32bit版と64bit版があるので、自分の環境に合ったほうを選んでね。
(自分のWindowsが32bitか64bitか分からない人は、調べ方をググってください。)

f:id:Mafuyu7se:20190224181436p:plain

ダウンロードが終わったら、インストーラを起動してね。
こちらも、適当にNextを押していけばインストールは終わります。

f:id:Mafuyu7se:20190224182721p:plain

インストールが終わったら、「Run first start wizard」にチェックが入った状態で「Finish」を押してください。
初期設定ウィザードが立ち上がります。

f:id:Mafuyu7se:20190224182835p:plain

これもまた、適当に「次へ」を押していけば終わります。

f:id:Mafuyu7se:20190224183018p:plain

最後に、TortoiseGitを日本語化しましょう。
さっきのダウンロードページを下にスクロールすると各言語のランゲージパックがあるので、Japaneseをダウンロードしましょう。
こちらも32bit版と64bit版があるので、自分の環境に合ったほうを選んでね。

f:id:Mafuyu7se:20190224183418p:plain

インストーラが立ち上がったら、「次へ」をクリックしましょう。
一瞬でインストールが完了します。

f:id:Mafuyu7se:20190224183802p:plain

デスクトップの空いてる場所を適当に右クリックしてみてください。
TortoiseGit関連の項目が追加されているかと思います。
「TortoiseGit」→「Settings」の順に選択してね。

f:id:Mafuyu7se:20190224184246g:plain

設定画面が開きます。
「Language:」のプルダウンに「日本語(日本)」が追加されているので、それを選択して「OK」をクリックすれば完了!!

f:id:Mafuyu7se:20190224184614p:plain

これでGitを使う準備ができました!!
おつかれさま!!頑張ったね!!!


スポンサーリンク



■ 試しに使ってみましょう。

GitHubに会員登録したとき、GitHub上にソースコードを管理するための場所である「リポジトリ」を作ったよね。
試しに、そのリポジトリを自分のPC環境に持ってくる作業「クローン(Clone)」をやってみよう!!

まずGitHubにログインして、自分がさっき作ったリポジトリのページにアクセスしましょう。
この画面です。

f:id:Mafuyu7se:20190224185336p:plain

「Clone or download」のボタンを押してね。
「Clone with HTTPS」表示されていることを確認したら、URLの右側のボタンを押してください。
クリップボードにURLがコピーされます。
(「Clone with SSH」が表示されている場合、「Use HTTPS」をクリックして表示を切り替えてください。)

f:id:Mafuyu7se:20190224185709p:plain

次に、デスクトップ上で右クリックして「Git クローン(複製)...」を選択。

f:id:Mafuyu7se:20190224205305p:plain

さっきコピーしたURLが既に入力されているはずなので、そのまま「OK」を押しましょう。

f:id:Mafuyu7se:20190224190345p:plain

初回のみ、GitHubのID認証が必要になります。
IDとパスワードを入力しましょう。

f:id:Mafuyu7se:20190224191115p:plain

(注意:ここで入力した資格情報はWindowsに記憶されるので、次回以降の入力は不要です。
ただ、別のGitHubアカウントに切り替えたい場合、資格情報を一度削除して再入力する必要があります。前のアカウントの情報が残ったままなので。
資格情報マネージャ」から削除しましょう。
ちなみに私はこれで4時間ほどハマりました。お馬鹿…。)

青文字で「成功」が表示されたら、クローンは完了です!
そのまま「閉じる」でウインドウを閉じましょう。

f:id:Mafuyu7se:20190224215408p:plain

デスクトップ上に、リポジトリ名と同じ名前のフォルダが作成されていればOK!
フォルダ内には、GitHub上のリポジトリと同じ「README.md」が存在しているはず。
この中にソースコードを追加して、開発を進めていくことになります!!

f:id:Mafuyu7se:20190314204504p:plain

フォルダに緑色のチェックマークが付いていますが、これの意味については次回以降説明します。
(緑色のチェックマークが表示されない場合、「TortoiseGit オーバーレイ 表示されない」等でググったら解決するかも。PCを再起動したり、フォルダの表示位置をドラッグで移動してみたりすると表示される場合もあるようです。お試しあれ。)

とりあえず今回はここまで!!
環境構築お疲れ様でした~!!!!!


スポンサーリンク



■ まとめ

・ソフトウェアの更新履歴を管理することを「バージョン管理」と呼ぶよ!
・Gitはバージョン管理をするためのシステムだよ!
・GitHubはGitを使った開発を支援するWebサービスだよ!
・Gitは本来コマンドライン上で使うものだけど、クライアントソフトを使えば、黒画面が苦手な人でもGitを手軽に扱えるよ!

次回の記事では、「Gitを使った個人開発」を行うために必要なスキルを伝授します。
今のうちにこの記事の内容通りに環境構築を済ませておけば、次回以降の記事を読むときにラクできるよ。

ではでは、また次回の記事でお会いしましょう!
さらば~・:*+.\( °ω° )/.:+

続きはこちら。
www.mafuyu7se.com


にほんブログ村 IT技術ブログへにほんブログ村