前のパートに戻る 完了して次のパートへ  

  2-2 GitHubリポジトリの管理

GitHub上にリポジトリを作成し、ローカルのVSCodeで管理ができるようになりましょう。

新規リポジトリの作成


まず、コードのバージョン管理やデプロイ元となるGitHubのリポジトリを作成します。

以下の手順に従って、新規リポジトリを作成してください。

  • GitHubにアクセス
  • ログイン後のダッシュボード左側のRepositoriesよりNewを選択します

・Create a new repository のページにて以下の必要情報を記入します

  ・ Repository name: 任意のリポジトリ名(例: hello-world)

  ・Privateにチェック: 公開先を限定することができます

  ・Initialize this repository with a READMEにチェック: github連携ができたかの確認のために使います

  • Create repositoryを完了すると、以下のページに遷移し、無事リポジトリが作成されたことが確認できます

VSCodeでのGitHub連携


せっかくリポジトリを作成してもローカルから開発が行えなければ意味がありません。 VSCodeから作成したリポジトリをクローン(ダウンロードのようなこと)をしていきましょう。

GitHubの[Clone or download]から、リポジトリのURLをコピーします。 この際、Clone with SSHを選択してください。 なお、SSHでのgithub連携ができていない場合、右上のHTTPSの使用でも可能です。 ただし、VSCode上でのアカウント情報の登録などが必要となります。 HTTPS URLを使用してCloneなどする方法については、GitHubヘルプ情報などを参考にされてください。

次に、VSCodeを開き、先ほどコピーしたリポジトリをローカルにダウンロードしましょう。

  • VSCodeにて、command + shift + Pでコマンドパレットを開き、git: Cloneを入力、Enterします。

  • 先ほどコピーしたリポジトリURLを貼り付け、Enterします
  • フォルダを展開するディレクトリを聞かれるので、任意の場所を指定します
  • クローンが完了した後、VSCodeでクローンしたフォルダを開きます

以上の操作を行うと、GitHub上で作成したリポジトリやそのREADMEがローカルで確認できますね。

変更履歴を送信する


VSCode上でリポジトリ管理をする環境が整いました。 それでは、コードを適宜修正し、その変更内容を送信しましょう。

README.mdを好きなように修正してください。 ちなみに、Markdown(拡張子: md)とは、文書を記述するための軽量マークアップ言語のひとつです。 #(見出し)や、-(箇条書き)、>(引用)などの共通した記法を元に構造化されたテキストを記述できます。

<!-- 以下、好きなように加筆・修正してください。 -->

# hello-world

デプロイに向けたサンプルアプリです。

## 今やっていること

- vs codeでのcommit/pushの方法
- githubにきちんと反映できているのか確認

readmeの修正が終わったら、変更を保存しましょう。その後、以下の手順で変更内容をgithub上のリポジトリに送信します。

  • サイドバーのソースコントロールメニューを選択
  • README.mdを管理対象に追加するため「+」ボタンを選択
  • どのような変更を行ったのか簡潔に示すコミットメッセージを入力
  • 「…」からCommit Allを選択、その後、Pushを選択

GitHub上で該当リポジトリのページを更新すると、先ほどの内容がきちんと反映されていることが確認できます。 なお、オレンジ枠部分からはコミット履歴を閲覧できます。 誰がいつcommitしたのかや、その時のコミットメッセージが確認できます。

まとめ


GitHub上にリポジトリを作成し、ローカルのVSCodeで管理ができるようになりました。 開発ではこのようにGitを利用して、バージョン管理やチーム管理を行っていきます。

議論

0 質問

このコースの評価は?