Web プログラミング

【もりけん塾67日目】GitHub初心者がリモートリポジトリにpush【使い方】

フロントエンドエンジニアを目指している、まゆ（@Ymayu_it）です。

 

エンジニアの現場ではプログラミング言語と同様にGitの使い方を知っている必要があるようです。

 

理由として１人でサービスを作成することはほとんどなく、多くが複数人で作成することからGitの使い方を知っていることが重要項目のようです。

 

今回もりけん（@terrace_tech）先生に、

 

もりけんさん
githubでpullreqだしてみて、そのリンクおしえてくれますか。折角だし。

 

とおっしゃってくださったのでGitHubと3時間格闘しました…！笑

 

初心者がGitHubにpushすることがどれだけ時間を費やすのかが理解できたので、今回備忘録としてプロセスを残すために記事にします。

 

（もう時間をかけずに終わらせたい…）

 

注意ポイント

  • 登録方法は省いています。
  • ターミナル環境を使わない簡単な方法を紹介しています。

GitHubの仕組みについて

引用：今さら聞けない！GitHubの使い方【超初心者向け】

 

GItHubの仕組みは上の画像のとおりです。

 

画像にある

  • リポジトリとは
  • ローカルリポジトリとリモートリポジトリの違い
  • GitHubで使う用語

について説明していきます。

リポジトリとは

リポジトリはファイルやディレクトリの状態を記録しておく場所のこと。

 

ローカルリポジトリとリモートリポジトリのちがい

ローカルリポジトリとリモートリポジトリは最低限知っておく必要がある語句です。

 

  • ローカルリポジトリ：あなたのPC内にあります
  • リモートリポジトリ：ネットワーク上にあります

 

基本的にローカルリポジトリで作業をし、リモートリポジトリへファイルを送る流れになります。

 

ローカルリポジトリは個人のPC内にあります。

 

例を挙げると複数人が同じサービスのファイルを作成しており、各々の担当部分をローカルリポジトリ上で編集しリモートリポジトリ上に送る形です。

仕組みを理解する上で最初に最低限、必要な語句

次にGitHubで最低限必要な語句についてです。

 

語句 意味
fork（フォーク） 他の人のリモートリポジトリを自分のリモートリポジトリにコピー
＊リモートリポジトリ内（ネットワーク上）での行為
clone（クローン） リモートリポジトリの内容をローカルリモートリポジトリにコピー
＊ネットワーク上とネットワーク外での行為
pull（プル） リモートリポジトリの内容をローカルリポジトリに取り込む
branch（ブランチ） 作業履歴を枝分かれさせて記録
master branch（マスターブランチ） プロジェクトの大元のブランチ
push（プッシュ） ローカルリポジトリの修正内容をリモートリポジトリへ送る
pull request（プルリクエスト） 自分自身がした内容の変更をリポジトリに取り込んでもらう行為

 

とりあえずこれだけわかっていれば、GitHubにPushすることができました。

 

GitHubに最も簡単にファイルをpushする方法

ではGitHubにpushする方法です。

 

  1. 自分のレポジトリを開く
  2. 新しいレポジトリを作成する
  3. ファイルをアップロード
  4. GitHubで成果物を表示させる

 

これだけです！

 

画像つきで手順を解説していきます。

使い方①自分のレポジトリを開く

まずは下の画像の右上にオレンジの丸で指している「自分のアイコン」をクリック。

 

 

次に以下が表示されるのでオレンジ丸の「Your repositories」をクリック。

 

使い方②新しいレポジトリを作成する

次は緑ボタンの「New」をクリック。

 

 

以下の画像の3つのオレンジに注目していただき、

  1. レポジトリ名を入力（なんでもOK）
  2. Publicを選択（無料登録はPublicしか選択できません）
  3. 最後の緑ボタン「Create repository」をクリック

上から順番に操作していきます。

 

 

使い方③ファイルをアップロード

オレンジ丸部分をクリック。

 

すると以下の画面が表示されます。

 

「Choose your files」かファイルからドラッグ&ドロップをします。

 

 

時間が立つと上記のようにファイルがアップロードされます。

 

緑ボタンの「Commit changes」をクリック。つぎ

 

使い方③GitHubで成果物を表示させる

次はGitHub上でコーディングしたものがブラウザ上で成果物として表示されるようにします。

 

 

オレンジ丸の「setting」をクリック。

 

settingを開いて下の方にスクロールしていくと以下の表示の「GitHub Pages」が表示されます。

オレンジ丸のとおりにし「save」をクリック。

 

また「setting」をクリックし、「GitHub Pages」にいくと以下の表示がされているのでクリック。

ネット上で成果物を確認することができます。

おわりに

本当はターミナルでGitHubにpushしたかったのですが、最後ログイン画面で鍵の入力ができなかったので、とりあえずはファイルをアップロードという方法をとりました。

 

今回、参考にしたサイトは以下のとおりです。

 

もりけん塾（@terrace_tech）

Thanks：もりけんさん

 

もりけんさんの『武骨日記』へ

 

Post Views: 47

-Web, プログラミング

© 2020 Mayu_Yamada