【github】を勉強する事になった

無料セミナーや役立ちコードもダウンロード出来る【リキマス公式LINE】はコチラ

1人身WEB制作者にとって鬼門ともいえるGithubさん。だっていらないじゃん。1人なんだもん。

とは言え、shopify制作の場合は1人身でも使うメリットは結構多い・・・と言うか僕の場合は既にないと困る!!勢いで使ってはいます

ただ、今までずーっと「Github Desktop」で事足りちゃってはいたので、コマンドをやってこなかったんですが、最近アプリ制作の学習を始めたのでコマンドも覚えなくちゃいかん事態に!

と言う事でここで学習をアウトプットするべく、gitの超基本をブログに書き記そうと思います

Gitを余り触れてきてない人でも、それなりに読んで意味が分かるような内容になるかとは思うです!

Githubって何ぞや?

そもそもGithubって何者なんだよ?

これWEB制作を1人でやってると結構、初期の頃「怖い。謎の言葉怖い!!」って思う奴ですよね。僕はめっちゃビビってましたよww

調べると複数人数で作業する時に同時進行でコードを書くから、その時に人のコード間違えて消したりしないように出来るし、バージョン管理も出来るよ。

的な情報に出会う事が多いでしょう。

僕もその情報に出会って・・さらにビビった記憶がありますww

ハッキリ言って複数人で作業する経験って言うのは、中々この先もWEB制作だ少ないと思います。はい。滅多にそう言った用途でのGithub利用は発生しません。

それでもGithub利用をする価値は十分あります

先にも書いた通りバージョン管理が出来るんですよ。

更新した事をいちいち覚えてくれてて、過去にさかのぼる事が出来るので「うっかり消しちまったあのコード」が復活の呪文により再生する事が出来ちゃうわけです。

そう、大量に書いたのに消えちゃったあのコードがね!

これだけでも1人身ロンリー制作者にとってかなり有益です。そう有益なんですよ。

Github無料だしね!!

まずは登録してしまう

ここはホントに書く事なんかないんですよ。

登録はただ登録すればいいんです。

緑のボタンをポチっと押せば後は言われるがままにとりあえず登録しましょう!

ただ、何がいいって、さっきも言いましたが「無料」です。無料なんですよーーー!

物凄く余談ですが、Githubって何で儲けてるんでしょう?
って気になってしまったので、色々調べたんですがイマイチわかりませんww
2018年にマイクロソフトが75億ドルで買収した、マイクロソフトの子会社って事で、記事によっては

「Githubは儲けなくていい!」

と言うのもあったので、マイクロソフトさんのエンジニアコミュニティを充実させる施策の1つと思ってもいいのかもです。MacユーザーよりWindows有利だな(にやり)

よく使うコマンドとか用語とか

さて、Githubをみんながビビリまくる最大の理由は圧倒的にコマンドでしょう!これがあるから怖いんですよねぇ!

それ以外にもよくわからない用語がたっぷりあるんですよねぇ。

  • ローカルリポジトリ
  • リモートリポジトリ

さて、やってまいりました。2つの意味不明ちゃん。

この2つの違いは・・・「ローカル = 自分のPC」「リモート = Github」と言う事になります。ただそれ以上に「リポジトリ」って何だよ!!がむしろわからん気がしますのでそっちを解説しましょう。

リポジトリとは
repository 英語に直すとこんな単語で、意味は「倉庫」「貯蔵庫」等の意味があるらしいです

なるほど。倉庫か・・・つまりパソコンで言う所のディレクトリ(フォルダ)と言う事です。これがローカルなのか、リモートなのかの違いになってくるわけです。

いっぱいあるコマンド

さて、コマンド系の用語も多いんですよ

  • イニシャライズ(init)
  • インデックス( add .)
  • コミット(commit)
  • コミットログ(log)
  • プッシュ(push)
  • プル(pull)
  • ブランチ(branch)
  • クローン(clone)

これ以外にも多分あるんですけど、今回はアプリ学習の一環で学んでいるので、基本的な所を書き出してあります!

ので、まずこれらの用途と使い方を知って行きましょう

最初のpushまでの道のり

initについて

トップバッターはこの方。イニシャライズさんです。コマンドでは「init」として使いますね。

git init

ターミナルでこんなのを書けば「イニシャライズ」されるわけです。

・・・・・・

イニシャライズが意味不明ですよね。

はい、と言う事でイニシャライズについても書きます。

英語を直訳すると「初期化する」と言う意味になるらしいです。つまり

「これからこのフォルダを初期化するぜぇ?ワイルドだろぉ?」

と、宣言する意味があるみたいです。

これすると、initしたフォルダに地味に「.git」と言うフォルダが出来上がったりします。これでここがローカルリポジトリだよ!!と印を付けてあげてる感じです。

まずinitで宣言する事で、倉庫の場所を教えてあげる!

これがinitの役割と言う事になります。

git add . がだいたい次に来る

初期化したら次は、倉庫(リポジトリ)内のファイルを登録する作業が必要でそれが

git add .

最後のピリオドが誤字なんじゃないか?って疑ってませんか??

僕は疑いましたよ!!

でもそうではなくて、最後のピリオドはローカルフォルダの「位置」を示すもの。つまり現在のディレクトリを示す意味だそうです

よくWEB制作とかでも ../ ./ みたいな書き方するあの時の「.」と同じって事ですね!

ピリオド1つと言う事は今いるディレクトリを意味するので「そのディレクトリの配下全部!」って事になるので、最初に宣言したフォルダ内のファイルを全部addするように指令を出す役割がこれです!

git commit がよーわらかなくする

addしたんだからもう全文ファイルがGithubにアップされればよくない?と思うかもしれませんが、残念ながらまだ「これからアップするリストだよ!」と登録したにすぎません。

次に出てくるのが

git commit -m "ここにメモ残せる"

こんなコミットコマンドです。

コミットの意味もよーわかりませんよね。コミットって我々日本人がイメージするのって

テー テケテケ テー♪

こう言う奴ですよね (° ꈊ °)✧キラーン

しかしそれの認識で大体OKなんですよ。要は、結果にコミット・・じゃなかった、次にpushするのはこれだよ!って約束してる感じです。

addしたファイルをアップするよ!と言う約束をして、その約束にメモが残せるので例えば

git commit -m "最初のpushです"

みたいにメモを残せるんです。これで何の目的でこのアップロードがあったのかわかりやすくなるわけです!

ちなみに「-m」はメッセージの略らしく、メモを残すために必須のコードです。ちなみにメッセージ無しは許されないらしい(空欄は許されるけど)

pushする前にやる事

これでサクッとpush出来るぜ!と思ったらちょい待ったですよ!

今までの作業は全部手元のPCでやってた作業じゃないですか?

まだリモート側に「倉庫」(リポジトリ)作ってないんですよ!

と言う事でcommitして先に進みたい気持ちをグッとこらえて、Githubさんにアクセスして行きましょう。

リポジトリを作るのは超絶簡単です。

githubにログインすると左上に「NEW」って書いてあるボタンがあるのでこいつを押します。するってーと

こんな画面になるので、ここで「Repository name」部分に好きな文字入れればほぼOKです。

下の方にも設定がありますが、最初はpublicなのかprivateなのか

ここだけ注意しましょう。お客さんのファイルとかpuclic(一般公開)にしちゃ絶対ダメですよ!たまに情報漏洩でニュースになるのこれですからね!

最終的にはこの緑ボタン「Create repository」ボタンを押せばOKです。簡単です!

こんな感じで出来上がってきます!

ここで重要なのは「SSH」と言う所に書いてあるアドレスっぽい物です。こいつは後で使うのでコピーしておきましょう!

ここでパソコン側(ローカル)に戻って作業をしますがその時に使うコードが

git remote add origin SSHアドレス

これです。先ほどのSSHを最後に入れてあげる事で、このローカルリポジトリはこのSSHアドレスにあるリモートリポジトリと仲良くするんだよ!

と教えてあげる事で、ローカルとリモートがようやく結ばれたわけです!

ちなみにoriginはデフォルトの接続先らしく、とりあえずoriginって書くんだな!と覚えちゃいましょう。それがいい。

pushしよう

晴れてadd(登録)してcommit(約束)したわけです。

そしてローカルとリモートを紐づけられたので、ようやくローカルからリモートにファイルを転送します。

git push origin main

これで「origin(デフォルト)のmainブランチに書き込めや!」と言う指示になりまして、ファイルがアップロードされていくわけです。

いやぁ、アップロードまで長かったですね。

ブランチとは?

しれーっとmainブランチとか書いてますが、そもそもブランチって何だよ?ですよね。

今まで聞いた事あるブランチは「朝ごはんと昼ごはんの間に食べる奴」ぐらいなもんですからね。

branch の綴りを見ると残念ながらその「brunch」ではないようで、「枝」と言う意味がある単語だそうです。

そう、枝なんですよ

mainブランチと言うのが木で言う所の「幹」

そこから枝分かれした物が「枝」つまり「ブランチ」と言う物です。

Githubの凄い所はこの枝で開発した物を「幹」に戻していける事です。いうなれば幽体離脱して修業した後に本体に戻ったらちゃんと強くなる!みたいな感じです。しかもこの枝同時に何本も派生出来るので、修行しまくれるわけですよ。

ただ、たまに幽体離脱した者同士が喧嘩する(コンフリクト)する事があるのでマージ(合併)する時にちゃんと見てあげないといけない感じです。

そんな枝を作るためにコマンドがコチラ

git checkout -b A-branch

これをやる事でブランチが作成されて、ローカル上で作成したブランチに移動します!ちなみにcheckoutはブランチの移動用のコマンドですが、-bを付ける事でブランチの作成も同時に行えちゃいます!

そして、現在どのブランチにいるのか確認する為には

git checkout

これだけ書けば出てきます!

また元のブランチや目的にブランチに戻りたいなら

git checkout main

と最後の所で指定してあげればOKです。

どのブランチにいて開発しているかは間違えてしまうと大変な事になるので、いま自分が作業しているブランチが何処なのかは必ず把握しておきましょう!

まだ現在地がさっき作った「A-branch」だとして、そこで何かしらのファイルを更新。更新したら必ず

add そして commit してから pushをしましょう

pushする事で「A-branch」上に更新したファイルがアップロードされますが、これはまだ枝をアップロードした段階です。

その後mainブランチに移動して

git merge A-branch

こんな風に呪文を唱えてあげて下さい!そうしたらさっきA-branchにアップしたファイルがmain側にマージ(合併)されてきます。これで幽体離脱していた枝を本体の幹に合併させることが出来るのです。

作業前にはpullしとこう

実際に作業では色んな人が枝を作り、それを幹に合流させてきます

marge やら push やらの洗礼を受けまくったmainブランチ(幹)がいるので、作業開始前にはその更新分を取り込む為にも

git pull origin main

と呪文を唱えてから作業しましょう!これでリモートにあるリポジトリがローカルに流れ込んできて、同じ状態になります!

ちょっと似てる動作の clone

pullはリモートリポジトリをローカルリポジトリにダウンロードしてくるコマンドですが、cloneも動作だけで説明すると似てます。

が、cloneの場合は基本的にはまだinitしてないからのフォルダで実行する事でリモートリポジトリを全部ダウンロードしてきつつ、ローカルリポジトリを作ってくれるコマンド、

使いどころとしては、プロジェクトに新しく入る時に最初にファイルをダウンロードしてくる時

と言う感じになりますかね。

これで大体つかえる

ここまで書いた事で大体gitの最初の基本的な作業は出来るようになるはずですが、1人身開発ぐらいですとぶっちゃけデスクトップ版の方が遥かに楽です!

コマンド打たなくていいし、addは勝手にやってくれる。コミットもメッセージ書く欄に書くだけだし。

1人身WEB制作ならそれで十分だと思いますが、僕はいまアプリ開発の勉強なので、しっかりと仕組みそのものから理解して行く必要もあります。

こう言ったブログは書く事でも頭が整理されてくるので、いったんブログとして書き残させて頂きましたとさ。

めでたしめでたし

お問い合わせ

記事を読んで「むーさん」にshopify制作を依頼したいと思った方は会社のお問い合わせより、お問い合わせくださいませ。

制作会社さんやマーケティング会社さんからのお問い合わせも絶賛喜んでお待ちしております^^

むーさんの別サイト

むさーんの会社とリキッドマスターズ公式ページはこちらから。

shopify構築専門 制作会社

shopify構築者 コミュニティ兼スクール