Zenn
🐵

Web開発者ロードマップを学習する 第４章 GitHub

2021/02/21に公開
Git
GitHub
tech

はじめに

WEB DEVELOPER Roadmap 2021 に
webエンジニアが身につけておくべきスキルの順序が示されています。
このロードマップに沿って、各スキルの要点を抑えた記事を書きます。

WEB DEVELOPER Roadmap 2021 Introduction

今回はGitHubについて学習します。
まとめた記事は今後リンク更新していきます！

GitHubとは

https://github.co.jp/
GitHub公式サイト

  • プログラムコードやデザインデータを共有・公開できる
  • 共有・公開したデータについてレビューが行える
  • 世界中で利用されている
  • GUIで操作
  • ほぼ無料のサービス

GitHubの料金

個人向けサービスでGitHubの機能は十分使えます。

個人 チーム 企業
料金 $0 $4 $21

GitHub料金体系と利用できる機能の詳細はこちらです。
→Plans for all developers

→GitHub のプランの変更に関する FAQ

アカウント作成

公式サイトからアカウントを作成してみましょう。
https://github.co.jp/

アカウント作成の方法はこちら
→　1分もかからない！5ステップでGitHubアカウント作成

GitHubを利用する際の基本単語

リポジトリ

  • リポジトリとは、ファイルやディレクトリを保存しておく場所

リポジトリには２種類あり、

  • リモートリポジトリ： 複数人で共有するためのリポジトリ
  • ローカルリポジトリ： ユーザーが手元のマシンで利用するためのリポジトリ

普段の作業はユーザーが手元のローカルリポジトリで行い、
作業内容を共有するときにリモートリポジトリにアップします。

clone（クローン）

  • リモートリポジトリをローカルリポジトリにコピーすること
  • クローンはHTTP通信とSSH接続、両方で可能

リモートリポジトリにアクセスする時、
HTTP通信だと毎回GitHubアカウントの認証を要求されることがあります。
GitHubアカウントをお持ちの方は下記の記事でSSH接続設定することをおすすめします。
→Mac GitHub SSH接続設定

push（プッシュ）

  • ローカルリポジトリのファイルをリモートリポジトリにアップすること

branch(ブランチ)

  • ファイルの変更履歴を分岐して記録するためのもの

fork(フォーク)

  • リポジトリをコピーすること
  • オリジナルリポジトリへの貢献が前提

PullRequest(プルリクエス　※略してPRとも書く)

  • ローカルリポジトリで行った変更内容をリモートリポジトリの管理者に伝えること
  • ローカルリポジトリからリモートリポジトリにpush(プッシュ)した後に行う
  • リモートリポジトリの管理者はPullRequestを見て変更内容を確認する
    →サル先生のGit入門 プルリクエストとは？

merge(マージ)

  • マージとは、各ユーザーの作業によって分岐した履歴（ブランチ)を一つに取り込むこと
  • ローカルリポジトリで変更されたコードをリモートリポジトリに取り込むこと

Gitとの関連

まずGitとは？？という方は、こちらの記事を読んでみてください。
→Web開発者ロードマップを学習する 第一章 Git〜バージョン管理〜

Gitの操作でできる事

  • リモートリポジトリにGitHubのリポジトリを登録
$ git remote add origin リポジトリのURL
  • ローカルリポジトリにコミットしたものをGitHub(リモートリポジトリ)にプッシュ
$ git push origin ブランチ名
  • ローカルリポジトリにクローン
$ git clone リポジトリのURL

Gitでローカルリポジトリを作成,GitHubのリモートリポジトリ作成&登録まで

→【 GitHub 】ローカル作成したリポジトリをリモートに「Push」するまで！

リポジトリの各タブ

<>code

  • ファイルの階層が表示される
  • ↓code（緑のボタン）からURLを取得してクローンできる
$ git clone クローン先のリポジトリのURL

Issues

  • 議論、報告、提案などが可能
  • 開発のタスク管理のツールとしても利用される

issues作成の仕方はこちら
→issues作成
issuesに書く内容
→ Github issues との付き合い方 作成編

PullRequest（プルリクエスト）

ローカルリポジトリからGitHubのリポジトリにプッシュ後、リポジトリのPullRequestタブから作成


プルリクエスト作成の際にissues番号を加えるとissuesとプルリクエストを紐付けられる
→　紐付けるキーワードの種類

Create Pull Requestでプルリク作成完了


プルリク作成後の画面


File Changesでファイルの変更差分確認


プルリク作成後の画面のMerge pull requestでマージする

Actions

  • リポジトリでプロジェクトのビルド・テスト・デプロイなどを自動で実行
  • プッシュ、プルリクエスト時（指定の時間）などに決められた処理を実行するよう設定が可能
  • 公開リポジトリは無料で使用可能
  • 個人(無料)プランは2000分/月使用可能

→GitHubの新機能「GitHub Actions」で試すCI/CD

Projects

  • カンバン方式によるタスク管理ツール
  • issues・PullRequestなどをリスト化

Github projectsを使ってみた
GitHub にカンバン機能が追加されました！

Wiki

  • リポジトリを公開すると使用可能
  • 設計方法やリポジトリに関する細かな事を記載する事に向いている
  • マークダウンでの記述が可能
    →GitHubのwikiを使ってみよう！

Security

  • Sequrity Policyにセキュリティの脆弱性を記述する

Insights

Insightsの各項目 説明
plues • マージされたプルリク・プルリク
• Issuesの数を確認
※リポジトリが公開中の場合のみ表示
Contributors 全体のコミット数と各開発者のコミット数をグラフを表示
Community 全体のコミット数と各開発者のコミット数をグラフを表示
Traffic クローンされた数とリポジトリに訪問された数がグラフを表示
Commits コミットがいつどのくらいの頻度でされているかグラフを表示
Code frequency 週のコードの記述量を表示
Dependency graph リポジトリのコードが依存しているライブラリなどを表示
Network ブランチのコミット•プッシュの状況を図の表示
Fork リポジトリをフォークした人を表示

Settings

Settingsの各項目 説明
Options • リポジトリ名の変更
• リポジトリをプライベート（非公開）かパブリック（公開）か設定・変更
• リポジトリのリンクを貼った際の画像表示の設定
• プルリクのマージする際の設定
Manage access • リポジトリのアクセス権を持つ人を確認
• 権限の管理
Security & analysis セキュリティ分析の設定管理
Branches デフォルトのブランチの切り替え
Webhooks 指定したイベントを検知して特定の処理を行わせる設定が可能
例　プッシュされた際に通知がくるなど
Notifications リポジトリにプッシュされた際の通知設定が可能
Integration GitHubを接続された拡張機能の確認
Deplop keys SSHキーを設定が可能
Actions GitHub Actionsの有効化、無効化、制限が可能
Environments 保護ルールとシークレットを持つ環境を設定
Secrets シークレットキーやAPIキーなどの機密情報の登録設定
Moderation settings リポジトに対しての議論•コメント・コミットの制限を設けることが可能

settingの詳細はこの方の記事が参考になるので読んでみてください！
https://qiita.com/ucan-lab/items/d594404d0d2c64a85a38

草について


活動の証を示す

草を生やす条件として

  1. コミット（Git）に使用されているメールアドレスがGitHubのアカウントと一致している事
  2. フォークされたリポジトリではなく、独立したリポジトリである事
  3. リポジトリのデフォルトのブランチまたはGitHub Pagesへのコミット
  4. issuesやPRの作成時　
    →プロフィールでコントリビューションを表示する

→Gitのメールアドレス登録方法

→GitHub 芝生入門/芝生応用

README.mdの書き方

README.mdとは？

• プロジェクト(リポジトリ)の説明を書く場所
→素敵なREADMEの書き方

• マークダウンでも記述が可能
→Markdown記法 チートシート

  1. 右上の鉛筆マークで編集
  2. 下のリンク貼り付け、GitHubのuserIDを自分のものに変更
トロフィー表示のさせ方
[![trophy](https://github-profile-trophy.vercel.app/?username=GitHubのuserID)](https://github.com/GitHubのuserID/表示させるリポジトリ名)

統計の表示
![GitHub Stats](https://github-readme-stats.vercel.app/api?username=GitHubのuserID&count_private=true&show_icons=true&theme=buefy)

使用言語の表示
![Top Languages](https://github-readme-stats.vercel.app/api/top-langs/?username=GitHubのuserID&layout=compact&theme=buefy)

→GitHub Profile README を使って好きなプロフィール情報を表示する方法

Discussion