【レッスン２】Web-Dev-For-Beginners：GitHub入門

2.はじめに Getting Started：Web Development for Beginners

2020年11月にMicrosoftのGitHubアカウントで公開された、HTML・CSS・JavaScriptなどが学べるWeb開発（ウェブ開発・ウェブ制作）入門者向けのチュートリアル

GitHub – microsoft/Web-Dev-For-Beginners: 24 Lessons, 12 Weeks, Get Started as a Web Developer
：microsoft/Web-Dev-For-Beginners（MIT Licence）| GitHub

の以下のページ

：Web-Dev-For-Beginners/1-getting-started-lessons/2-github-basics/（MIT Licence）| GitHub

の一部を、日々の学習を兼ねて日本語訳しておきます。

自分と同じように、これからWeb開発・Webプログラミングなどを学び始めたい方の何かしらの参考になることがありましたら幸いです。

尚、最終的な内容の詳細は、公式サイトでご自身でよくご確認いただくようお願いいたします。

Git・GitHubについて学んでいきます。

GitHub入門：Introduction to GitHub

このレッスンでは、ソースコードのホスティング（サーバー上に保存・共有）やバージョン管理するためのプラットフォームである

・GitHub

の基本を学びます。

レクチャー前のクイズ：Pre-Lecture Quiz

初学者のためのWeb開発：クイズ

レッスン2 – GitHubの紹介：レクチャー前のクイズ

問題1.Gitリポジトリをどのように作成しますか？

・git create
・git start
・git init

問題2.「git add」は何をしますか？

・コードをコミット：Commits your code
・ステージングエリアにファイルを追加：Adds your files to a staging area for tracking
・GitHubにファイルを追加：Adds your files to GitHub

問題3.Gitがコンピュータにインストールされているかどうかを確認する方法とは？

・コマンド入力「git –version」：type git –version
・コマンド入力「git –installed」：type git –installed
・コマンド入力「git –init」：type git –init

【答え】

問題1 → git init

・リポリトジは、ファイルやディレクトリの状態を記録する場所。

問題2 → ステージングエリアにファイルを追加：Adds your files to a staging area for tracking

・コードをコミット：Commits your code
追加・変更したファイルなどをGitに登録。

・ステージングエリアにファイルを追加：Adds your files to a staging area for tracking
ステージングエリアは、Gitレポジトリにコミットするファイルを置いておくためのエリア。ステージングエリアでは、いきなりセーブされず、これからセーブするファイル（フォルダ）などを選択することができる。

問題3 → コマンド入力「git –version」：type git –version

導入：Introduction

このレッスンでは

・自分のコンピュータでの開発作業のトラッキング（追跡）
・プロジェクトの共同作業
・オープンソースソフトウェアへの貢献方法

などを学びます。

前提条件：Prerequisites

始める前に、Git がインストールされているかどうかを確認する必要があります。ターミナルで次のように入力します。

git --version

Gitがインストールされていない場合は、Gitをダウンロード（download Git）します。そして、ターミナルでローカルのGitプロファイルを設定します。

git config --global user.name "your-name"

git config --global user.email "your-email"

Git がすでに設定されているかどうかを確認するには、次のように入力します。

git config --list

GitHubアカウント、コードエディタ (Visual Studio Code など)、ターミナル (または: コマンドプロンプト) も必要です。
まだ、GitHubアカウントがない場合は、github.com（GitHub）にアクセスしてアカウントを作成するか、ログインしてGitプロファイルを入力します。

✅ コードリポジトリは、GitHubだけではありませんが、GitHubが世界で最もよく知られています。

準備：Preparation

お使いのローカルマシン（ノートパソコンやデスクトップパソコン）にあるコードプロジェクトのフォルダと、GitHubにある公開リポジトリ（他の人のプロジェクトにどのように貢献するかのお手本になると思います）の両方が必要です。

コードの管理：Code management

あるコードプロジェクトを含むローカルフォルダがあり、あなたは、バージョン管理システムであるgitを使って進捗状況の追跡を開始したいと仮定してみましょう。gitを使うことを、未来の自分にラブレターを書くようなものだと例える人もいるようです。

数日後、数週間後、数ヶ月後にコミットメッセージを読むと、なぜその決定をしたのか？や、変更を「ロールバック」（戻）したのか？を思い出すことができるでしょう。

課題 リポジトリを作ってコードをコミット：Task – Make a repository and commit code

1.GitHub でリポジトリを作成：Create repository on GitHub

GitHub.com のリポジトリタブ、または右上のナビゲーションバーから、新しいリポジトリボタンを見つけます。

ⅰ.リポジトリ (フォルダ) に名前をつけます。
ⅱ.リポジトリの作成（create repository）を選択します。

2.作業フォルダに移動：Navigate to your working folder

ターミナルで、トラッキング（追跡）を開始したいフォルダ（ディレクトリとも呼ばれる）に切り替えてください。

入力：

cd [name of your folder]

3.gitリポジトリを初期化：Initialize a git repository

入力：

git init

4.ステータスを確認：Check status

入力：

git init

出力は、以下のような感じになります。

Changes not staged for commit:
(use "git add ..." to update what will be committed)
(use "git checkout -- ..." to discard changes in working directory)

     modified:   file.txt
     modified:   file2.txt

通常、「git status」コマンドは、リポジトリに保存する準備ができているファイルや、変更・修正を保存しておきたいファイルがあるのかといったことを教えてくれます。

5.すべてのファイルを追跡に追加：Add all files for tracking

これはまた、ステージングファイル/ステージングエリアにファイルを追加すると言います。

git add .

「git add」と「 .」は、すべてのファイルと変更を追跡することを示しています。

6.追跡ファイルの追加：Add selected files for tracking

git add [file or folder name]

すべてのファイルを一度にコミットしたくない場合、選択したファイルだけをステージングエリアに追加するのに役立ちます。

7.（ステージング）ファイルの取り消し – Gitでコミットした内容を取り消す：Unstage all files

git reset

このコマンドは、すべてのファイルを一度にステージング解除するのに役立ちます。

8.特定の（ステージング）ファイルの取り消し：Unstage a particular file

git reset [file or folder name]

このコマンドは、次のコミットで含めたくない特定のファイルだけを一度に取り消すのに役立ちます。

9.作業を持続させる：Persisting your work

この時点で、ファイルはステージングエリアに追加されています。Gitがファイルを追跡する場所です。
変更を確定する（変更を恒久的なものにする）には、ファイルをコミットしなければなりません。そのためには、「git commit」コマンドでコミットを作成します。コミットは、あなたのリポジトリの履歴を保存することを意味します。コミットを作成するには、次のように入力します。

git commit -m "first commit"

これはすべてのファイルをコミットし、”最初のコミット”（first commit）というメッセージを追加します。
今後のコミットメッセージでは、どのような変更を行ったかを伝えるために、より具体的に説明したくなるでしょう。

10.ローカルのGitリポジトリをGitHubに接続（追加）：Connect your local Git repo with GitHub

Gitリポジトリは、あなたのマシン上にあるのは良いことですが、どこかにファイルのバックアップを取っておいて、他の人にもリポジトリの作業を手伝ってもらいたいと思うこともあるかと思います。そんな時に便利なのが、GitHubです。すでにGitHubにリポジトリを作成していますよね！
「git remote add」コマンドを実行します。次のコマンドを入力します。

メモ：
コマンドを入力する前に、GitHubのリポジトリ（repo）ページにアクセスしてリポジトリのURLを見つけてください。以下のコマンドではそれを使用します。リポジトリ名をGitHubのURLに置き換えます。

git remote add origin https://github.com/username/repository_name.git

上記のコマンドで、先程作成したGitHubリポジトリを指す”origin”という名前のリモートリポジトリを作成（登録）します。

11.ローカルのファイルをGitHubに送る：Send local files to GitHub

ここまでで、ローカルのリポジトリとGitHubのリポジトリの間に接続を作成しました。これらのファイルをGitHubに送るために、以下のように「git push」コマンドを実行してみましょう。

git push -u origin main

上記のコマンドで、あなたの “main”ブランチ（履歴の流れを分岐して記録していくためのもの）のコミットをGitHubに送ります。

12.変更点の追加：To add more changes

 
変更を続けてGitHubにプッシュ（コミットをローカルリポジトリからリモートリポジトリに送る操作）したい場合は、以下の3つのコマンドを使うだけです。

git add .

git commit -m "type your commit message here"

git push

ヒント：
追跡したくないファイルがGitHubに表示されないように「.gitignore」ファイルを採用するのもいいかもしれません。
同じフォルダに保存されているノートファイルのようなものですが、公開リポジトリにはありません。
「.gitignore」ファイルのテンプレートは .gitignore templates – github/gitignore にあります。

コミットメッセージ：Commit messages

優れたGitコミットの件名にするためには、次の文を完成させます。

適用することにより、このコミットは

主語の場合は、現在形の命令形を使います：
“change”は “changed”ではなく”changes”でもありません。
主語と同様に、本文（任意）でも現在形の命令形を使用します。本文では、変更の動機や以前の行いとの対比を含める必要があります。
あなたはどのように（how）ではなく、「なぜ」（why）を説明しています。

✅ 数分間、GitHubで探してみましょう。本当に素晴らしいコミットメッセージを見つけることができるでしょうか？本当に最小限のメッセージを見つけることができますか？コミットメッセージで伝えるべき、最も重要で有益な情報は何だと思いますか？

仕事の共同作業（共同開発）：Task – Collaborate

GitHubにファイルなどを置いたのは、他の開発者との連携を可能にするためでした。

他の開発者とプロジェクトに取り組む：Working on projects with others

リポジトリ内の「Insights > Community」に移動して、あなたのプロジェクトと以下の推奨されているコミュニティの基準と比較してみてください。
GitHubリポジトリを改善するためのヒント：

・Description（説明）
：プロジェクトの説明を追加しましたか？

・README（リードミー）
：READMEは追加しましたか？GitHubでは、READMEを書くためのガイダンスを提供しています。
：About READMEs | GitHub Docs

・Contributing guideline（リポジトリコントリビューターのためのガイドライン）
：あなたのプロジェクトにはリポジトリコントリビューター（貢献者）のためのガイドラインがありますか？
：Setting guidelines for repository contributors | GitHub Docs

・Code of Conduct（行動規範）
：Code of Conduct（行動規範）
：Adding a code of conduct to your project | GitHub Docs

・License（ライセンス：権利・認証）
：おそらく最も重要なのは、ライセンス？
：Adding a license to a repository | GitHub Docs

これらのリソース（上記の内容）は、新しいチームメンバーのオン・ボーディングに役立ちます（開発の際の共通認識を作るのに役立ちます）。

✅ READMEファイルは準備に時間がかかります（多忙なメンテナーには、おろそかにされがちです）。
特定の記載例を見つけることができるでしょうか？
注意: 良いREADMEを作成するのに役立つツールがいくつかありますので、試してみてください。

課題 コードをマージ（分岐した履歴を統合）：Task – Merge some code

Contributing docs（コントリビューションドキュメント）は、人々がプロジェクトに貢献するのを助けるものです。どのような種類の貢献が必要なのか、そのプロセスはどのように行われるのかを説明しています。
コントリビューター（貢献者）がGitHubであなたのリポジトリに貢献できるようになるには、一連の手順を踏む必要があります：

1.Forking your repo（リポジトリをフォークする）

あなたのプロジェクトをフォークしてもらいたいと思うでしょう。フォークとは、GitHubのプロフィールにリポジトリの複製（レプリカ）を作成することです。

2.Clone（クローンする）

プロジェクトをローカルマシンにクローン（複製）します。

3.Create a branch（ブランチを作成する）

開発用のブランチを作成してもらいます。（ブランチ：プロジェクト本体に影響を与えず、プロジェクトから分岐）

4.Focus their change on one area（一つの領域に変更を集中させる）

コントリビューター（貢献者）には、一度に一つのことに集中して貢献するようにお願いしましょう。そうすれば、あなたが彼らの開発にマージ（ブランチを統合）できる可能性が高くなります。
彼らがバグフィックス（誤りなどの修正）を書いて、新しい機能を追加して、いくつかのテストを更新すると想像してみてください。
3つの変更のうち2つ、または3つの変更のうち1つしか実装できない場合はどうしますか？

✅ 良いコードを書いて出荷するためにブランチが特に重要な状況を想像してみてください。どのようなユースケース（事例）が思いつきますか？

メモ：
他の開発者にもブランチを望むのであれば、自分から、ブランチを作成することです。
あなたがコミットしたブランチは、あなたが現在 “checked out”しているブランチで行われます。
「git status」コマンドを使用すると、それがどのブランチなのかを確認できます。

コントリビューター（貢献者）のワークフローを見てみましょう。
コントリビューター（貢献者）がリポジトリをフォーク・クローン（複製）し、ローカルマシン上にGitリポジトリを用意したとします。

1.Create a branch（ブランチの作成）

：「git branch」コマンドを使用してブランチを作成します。

git branch [branch-name]

2.Switch to working branch（作業ブランチへの切り替え）

：指定したブランチに切り替え、「git checkout」コマンドで作業ディレクトリを更新します。

git checkout [branch-name]

3.Do work（作業をする）

：この時点で変更点を追加したいと思います。以下のコマンドでGitに伝えることを忘れずに。

git add .

git commit -m "my changes"

あなたのためにも、あなたが手伝っているリポジトリのメンテナ（プロジェクトの管理者）のためにも、あなたのコミットに良い名前をつけましょう。

4.Combine your work with the main branch（あなたの作業をメインブランチと組み合わせる）

：ある時点で作業が終わり、自分の作業をメインブランチの作業と組み合わせたいと思います。その間にメインブランチが変更されているかもしれないので、まずは、以下のコマンドで最新のものに更新しましょう。

git checkout main

git pull

この時点で、コンフリクト（競合・衝突）やGitが変更を簡単に組み合わせられない状況が作業ブランチで発生していることを確認したいと思います。以下のコマンドを実行します。

git checkout [branch_name]

git merge main

これによりメインブランチ（main）からの変更のすべてを、あなたのブランチに取り込むことになり、うまくいけばそのまま続けることができるでしょう。そうでなければ、VS CodeはGitがどこで混乱しているかを教えてくれるので、影響を受けたファイルを変更して、どの内容が最も正確なのかを教えてくれます。

5.Send your work to GitHub（GitHubに送る）

：GitHubに送るということは、2つのことを意味します。ブランチを自分のリポジトリにプッシュして、プルリクエスト（PR：Pull Request）を開くこと。

git push --set-upstream origin [branch-name]

上記のコマンドで、フォークされたリポジトリにブランチを作成します。

6.Open a PR（プルリクエストを開く）

：次に、プルリクエスト（PR：Pull Request）を開きます。GitHub上のフォークされたリポジトリに移動します。GitHub上で新しいPRを作成するかどうかを尋ねる表示が出てくるので、それをクリックすると、コミットメッセージのタイトルを変更したり、より適切な説明を付けたりするためのインターフェイスが表示されます。
これで、あなたがフォークしたリポジトリのメンテナ（プロジェクトの管理者）がこのPRを見て、あなたのPRを評価してマージ（分岐したブランチを統合）してくれることを祈っています。これであなたは貢献者になりました！イエーい。

7.Clean up（クリーンアップ）

：PRのマージに成功したら、クリーンアップするのが良い習慣だと考えられています。ローカルブランチと GitHubにプッシュしたブランチの両方をクリーンアップしたいとします。まずは以下のコマンドでローカルで削除してみましょう。

git branch -d [branch-name]

次にフォークされたリポジトリのGitHubページに移動し、先ほどプッシュしたリモートブランチを削除します。

本当はあなたの変更をプロジェクトにプッシュしたいので、Pull request（プルリクエスト：開発者のローカルリポジトリでの変更を他の開発者の方に通知する）という言葉は、馬鹿げているように思えます。
しかし、メンテナ（プロジェクトの管理者）やコアチーム（開発の方向性を決める方）はプロジェクトの “main（メイン）” ブランチにマージする前に変更を検討する必要があります。

Pull request（プルリクエスト）は、ブランチに導入された差分をレビューやコメント、統合テストなどで比較したり議論したりする場です。良いPull request（プルリクエスト）はコミットメッセージとほぼ同じルールに従います。例えば、あなたの作業で課題が修正されたときには、その課題への参照をissue tracker（課題トラッカー・課題追跡）に追加することができます。これは、「#」の後に課題の番号をつけて行います。例えば「#97」 のようになります。

🤞すべてのチェックをクリアし、プロジェクトの管理者があなたの変更をプロジェクトにマージすることを祈っています🤞

現在のローカル作業ブランチを更新し、対応するGitHubのリモートブランチからの新しいコミットをすべて更新します。

git pull

オープンソースへの貢献方法：How to contribute to open source

まず、あなたが興味を持ち、変更を投稿したいと思うGitHub上のリポジトリを探してみましょう。その内容をマシンにコピーします。

✅「初心者に優しい」リポジトリを見つける良い方法は、「good-first-issue」タグで検索することです。
：Browse good first issues to start contributing to open source | GitHub

ここではコードをコピーする方法をいくつか紹介します。
ひとつの方法は、HTTPS、SSH、GitHub CLI (Command Line Interface)を使って、リポジトリの内容を「クローン」（複製）することです。

ターミナルを開いてリポジトリをクローンします。

git clone https://github.com/ProjectURL

プロジェクトで作業するには、右のフォルダに切り替えます。

cd ProjectURL

また、GitHubの組み込みコードエディタ/クラウド開発環境であるCodespaces（GitHubがホストし、Visual Studio Codeが提供するオンライン開発環境）やGitHub Desktopを使ってプロジェクト全体を開くこともできます。

最後に、コードを圧縮したZIPフォルダでダウンロードする方法もあります。

子供プログラマーによる補足：

最後のZIPフォルダでダウンロードする方法（GitHubアカウントなど登録不要）は、初学者の方にとっては、わかりやすいのではないかと思います。

GitHubについてもっと面白いことを紹介：A few more interesting things about GitHub

GitHub で公開されているリポジトリを

・「Watch」（フォローのようなもの）
・「Star」
・「Fork」（自分のアカウント下に複製）

したりすることができます。
「Star」したリポジトリは、右上のドロップダウンメニューから見つけることができます。これはブックマークに似ていますが、コードのためのものです。

プロジェクトには、特に指定がない限り、ほとんどの場合はGitHubの “Issues”タブにある課題追跡機能があり、プロジェクトに関連する問題を議論することができます。また、「Pull Requests」タブでは、進行中の変更について議論したりレビューしたりすることができます。

プロジェクトによっては、フォーラムやメーリングリスト、SlackやDiscord、IRCなどのチャットチャンネルで議論が行われることもあります。

新しいGitHubのリポジトリを見て回って、設定を編集したり、リポジトリに情報を追加したり、プロジェクトを作成したり（カンバンボードのように）してみましょう。
できることはたくさんありますよ！

チャレンジ：Challenge

友達とペアになって、お互いのコードで作業してみましょう。
共同でプロジェクトを作成し、コードをフォークし、ブランチを作成し、変更をマージしてみます。

レクチャー後のクイズ：Post-Lecture Quiz

初学者のためのWeb開発：クイズ

レッスン2-プログラミング言語入門：レクチャー後のクイズ

問題1.ブランチで導入された変更部分を比較して、レビュー、コメント、結合テストなどと、議論する場所は？

・ギットハブ：GitHub
・プルリクエスト：A Pull Request
・featureブランチ：A feature branch

問題2.リモートブランチからすべてのコミットをどのようにgitコマンドで取得しますか？

・コマンド入力：git fetch
・コマンド入力：git pull
・コマンド入力：git commits -r

問題3.どのようにブランチを切り替えますか？

・コマンド入力：git switch[branch-name]
・コマンド入力：git checkout[branch-name]
・コマンド入力：git load[branch-name]

【答え】

問題1 → プルリクエスト：A Pull Request

問題2 → コマンド入力：git pull

問題3 → コマンド入力：git checkout[branch-name]

子供プログラマーによる補足：

Gitコマンドは使いながら慣れるのでしょうね・・・

復習・自己学習：Review & Self Study

オープンソースへの貢献についてもっと知りたい場合はこちらを読んでみましょう。
：How to submit a contribution – How to Contribute to Open Source | Open Source Guides（by GitHub and friends）

Gitの基礎的な知識をまとめたチートシートでGitについて学べます。
：Git cheatsheet | GitHub

あとは・・・
練習、練習、練習あるのみ。

GitHubでは、Learning Lab（lab.github.com）に、素晴らしいラーニングパスがあります。

：First Week on GitHub

また、より高度な内容を学べるラボを見つけることもできます。

子供プログラマーによる補足：

ちょっと英語がわかるだけで、無料で学習ができてしまう時代なのですね・・・
英語が母国語の方は世界が開かれていますね‥

課題：Assignment

GitHubトレーニングラボの第一週目を完了させること
：First Week on GitHub

Web Development for Beginners by Microsoft レッスン２の日本語訳を終えて

今回のレッスンでは、GitHub入門ということで

・Git・GitHub
・オープンソースへの貢献方法

について学びました。

この記事初回投稿時点では、GitHubに公開してくださっているコードを動かして学習することは経験していましたが、実際にGitHub上にコードを公開することはありませんでした。
今回のレッスンの内容を読むことで、おおまかではありますが、

「開発者の方がどのような手順やしきたりで、開発作業を日々しているのか？」

というものを垣間見れた気がしました。
プログラミング初学者の方や、Gitを初めて使う場合には、Gitコマンド操作などが大変そうですね・・・

次のレッスンでは、アクセシブルなWebページの作成に関する内容を学ぶようです。
いよいよ本格的にWeb開発っぽくなってきそうですね♪

次回のレッスンをお楽しみに♪

by 子供プログラマー | プログラミング入門ウェブ教室

：日本人のためのWeb Development for Beginners（microsoft / Web-Dev-For-Beginners：GitHub）| 一覧

– 【レッスン３】Creating Accessible Webpages：アクセシブルなWebページの作成

– 【レッスン１】Intro to Programming Languages and Tools of the Trade：プログラミング言語と各種ツール入門

：コンピュータ・プログラミング関連記事

：日本人のための人工知能プログラマー入門講座（機械学習）