【day51】ProgateでGitを学習→GitHubへ初push

Git

プログラミング独学day51の学習で、得たことや気づきを教えて!

今日は

・Gitの学習

・GitHubへ初のpushに成功!

・GitHubにpushしたファイルの変更

をアウトプットします!

 

 

 

こんにちは。プログラミングでweb制作ができるようになりたいharuです。

2歳0歳の育児をしながら、22時〜1時に独学しています!

 

→プログラミング学習day51、もりけん塾day7

 

わかったことや、気付きをログに残します。

同じく初学者の人が、これをみてインプットや復習ができるように書いていきます。

 

ProgateでGitを学習

昨日は、Progateでコマンドラインを学習した話をしました。

 

そのコマンドラインを使って、今日はGitを学んでいきます。

今回は、Progateで課金の解除寸前にすべり込んで学習しましたwかなり基礎の基だとは思いますが、Progateのコマンドライン→Gitの流れ、全くの知識なしでもわかりやすかったのでおすすめです。

そもそもGitってなあに?

そもそも、Gitとは何か?

Gitとは、プログラミングのソースコードなどの変更履歴を管理できる仕組みのこと。この仕組みを利用したサービスがGitHub。

 

なるほど…!GitとGitHubは仕組みとサービスの違い!

Gitの基礎知識

Gitは、コマンドラインで操作します。
→ターミナルに「コマンド」を入力する。

Gitの準備として、必ずターミナルに最初に入力するコマンドはこちら。

$ git init

このあとにEnterキーを押して実行するんでした。

 

次に、共同開発するときのGitの役割を説明します。

【共同開発の流れ】

Step1:コードを変更する
Step2:共有する準備をする
Step3:共有する

ここでいう、Step3の「共有」がGitの役割になります。

 

この流れによると、まずStep2の「共有の準備」が必要ですね。

共有するための準備をしていきます。

Gitで共有するための準備

Gitで共有するには、2つやることがあります。

 

①共有したいファイルを選択する。

$ git add ファイル名

 

②選択したファイルをメッセージ付きで記録する。=コミットする という

$ git commit -m “コミットメッセージ"

 

このコミットメッセージには、他の共有者にわかりやすいメッセージを書くことが大事。→何を変更したのか?

例)Change subtitle color

準備ができたらいよいよStep3共有へ

先ほどの準備でコミットしたことで「ローカルリポジトリ」と呼ばれる自分のサーバーにアップすることができました。

 

ローカルリポジトリにコミットすると、このファイルはいつでも元の状態に戻すことができて安心です!

 

これをみんなに共有するには、「リモートリポジトリ」と呼ばれる共有ファイルの置き場にアップロードする必要があります。

 

わたしがリモートへアップロード

共同開発者がリモートからダウンロード

 

リモートの登録→アップロード→ダウンロードまでをコマンドで操作してみましょう。

 

コマンド①:リーモートを登録する

 

$ git remote add リモート名 URL

リモートリポジトリ名とURLは、「GitHubで自分で設定したもの」or「共同開発でみんなで使う指定のもの」を利用します。

 

GitHubで作る場合

ホーム→「new repository」→「create repository」で作成できます。リモートリポジトリのホーム画面にURLがあるので、そちらをコマンドに入力すればOK。

 

コマンド②:リモートにファイルをアップロード=プッシュ

 

$ git push origin master

push(プッシュ)することで、リモートリポジトリにファイルが登録されるんでした。

 

コマンド③:共同開発者が確認する=ダウンロード(pull)する

 

$ git pull origin master

pull(プル)することで、共同開発者がリモートリポジトリからファイルをダウンロードできるんでした。

 

ここまでで、基本の基本の基でgitにupするコマンドの紹介は終わりです。

次は、実際に自分のGitHubにファイルをプッシュしてみます!

 

GitHubに自分のファイルを初プッシュする

まず、アップしたいファイルを用意します。

わたしの場合は、「cording」というディレクトリに「index.html」ファイルを用意しました。

そして、Progateの「gitの環境構築をする」に沿って上記のとおりコマンドを打ち込み、GitHubにpushすることに成功。

 

 

ここまでは良かったんですが…(GitHubにpushするまでなら「Progateのコマンドライン→Git→Gitの環境構築」のとおりにやれば脳内停止でもできちゃいますw ←自戒)

 

ここから、自力でGitHubにあげたファイルを更新しようと思ったら、できず絶望w

ようやく解決したので、次にまとめます。

GitHubにあげたファイルを更新する

GitHubにあげたファイルを更新します。ぶち当たった壁3つあり。

 

ローカルPCに作ったディレクトリとかファイルどこにあるの?

ProgateでGitの環境構築するときって、自分でファイル用意するのではなく、コマンドからディレクトリやファイルを作るんです。

それを、Gitにpushしたので、コマンドで作ったはずのファイルがローカルPCのどこにあるの?!という初歩的なところからスタート。

コマンドで作ったindex.htmlを編集したいのに、そのファイルの場所がわからなかった...w

 

解決は、コマンドで作ったディレクトリ名でPC内検索をかけました。

 

そして見つけた。

これで、htmlファイルに変更を加えられました。
→今回は、<body>に<p>を追加しました。

 

ディレクトリの移動→commit〜pushの流れ

いよいよ、変更を加えたhtmlファイルをgitにpushしていこうと思いターミナルを開く。

ディレクトリの移動をしておらず、エラー

 

pushしたいファイルがあるディレクトリに移動してから、commit〜pushをすべし

 

ディレクトリの移動は、

$ cd ディレクトリ名

(→changes directoryの略) でした。

 

pushするときのコマンドが間違っていた ()

→さきほどのつづき

 

$ cd cording で「cording」ディレクトリに移動(わたしがつくったディレクトリ名です)

$ git add index.html

$ git commit -m “add p”

でコミットまで完了しました。

 

ここから、いよいよpush

でエラー発生。pushされない。GitHubも更新されてない。よくわからず時間食う。(;´д`)

 

結局、ググってわかったのが

$ git push cording master

のcodingがoriginの誤りだったことが原因。

 

Progateでとったメモがディレクトリ名になっていて、間違えました

 

originになおしたらpush成功

GitHub上のコミットメッセージも変更されていました!めでたし

 

あとがき

今日は以上です。
きっと、ここに書いたGitの知識は、基本の基本の基本の基くらいなんだとおもうけど、もりけん塾のGitHub勉強会にはついていくだけの基礎はついたかな、、

*今日の工夫*

・もりけんさんのHPリンクを、カッコよくした。w

・改行うまく反映されない問題を解決してみた

 

Thanks:師匠「もりけんさん」(@terrace_tec)

もりけんさんのHPはこちら