ホーム PICK UP 【完全解説】GitHub初心者が基本操作をマスターする5ステップ|もう専門用語は怖くない、はじめの一歩!

【完全解説】GitHub初心者が基本操作をマスターする5ステップ|もう専門用語は怖くない、はじめの一歩!

40
0

「エンジニアになるならGitHubは必須」と言われて調べてみたものの、専門用語ばかりでよくわからず、結局よくわからないままスタートできずに挫折した・・・という話しをよく聞きます。

この記事では、初心者がつまずきやすい「Gitとの違い」から、絶対に失敗しないためのはじめの一歩となる基本操作チュートリアルまで、私の失敗談も交えながら世界一わかりやすく解説します。この記事を読み終える頃には、あなたは自信を持って「最初のリポジトリ」を作成できるようになっているはずです。

GitとGitHubの違いとは?ゲームの「セーブデータ」に例えて解説

チュートリアルに入る前に、最も初心者が混乱する「Git」と「GitHub」の違いを明確にしておきましょう。ここを理解していないと、後で必ずつまずきます。

  • Git(ギット): ファイルの変更履歴を記録する「システム」そのもの。
  • GitHub(ギットハブ): Gitの仕組みを利用して、世界中の人とデータを共有できる「Webサービス」。

ゲームに例えるなら、Gitは「セーブ機能」、GitHubは「セーブデータをネット上で共有・バックアップできるクラウドサーバー」です。

項目GitGitHub
役割自分のPC内で変更履歴を管理するツールインターネット上で履歴を共有するサービス
場所ローカル(自分のパソコン)リモート(クラウド上)
例えゲームのセーブ機能クラウドストレージ(Google Driveなど)

※近年のエンジニアリング白書等でも、ソースコード管理におけるGitHubの利用率は圧倒的多数を占めており、現代の開発において避けては通れないインフラとなっています。

【実体験】初心者がよくやる「やらかし」と回避方法

ここで、私が新人の頃にやってしまった失敗談を共有します。

当時の私は、専門用語の意味をフワッとしか理解しておらず、最新のデータを取得する操作(pull)をする前に、自分の古いデータを強制的にアップロード(push)してしまいました。結果、先輩が書いた最新のコードを私の古いコードで上書きして消してしまうという大惨事に……。

【この失敗から学んだ回避のコツ】

初心者のうちは、いきなり黒い画面(ターミナルやコマンドプロンプト)で操作するのではなく、まずはブラウザ上のGitHub画面や、視覚的にわかりやすい「GitHub Desktop」などのツールを使って、「今自分が何をどこに送ろうとしているのか」を可視化することを強くおすすめします。

GitHub初心者のための基本チュートリアル(実践編)

それでは、実際に手を動かしてみましょう。今回は黒い画面を使わず、ブラウザだけで完結する一番安全な方法で解説します。

ステップ1:GitHubアカウントを作成する

  1. GitHubの公式サイトにアクセスします。
  2. 画面右上の「Sign up」をクリックし、メールアドレス、パスワード、ユーザー名(英数字)を入力します。
  3. 登録したメールアドレスに認証コードが届くので、それを入力すればアカウント作成は完了です。

ステップ2:リポジトリ(保管庫)を作成する

リポジトリとは、プロジェクトのファイルや変更履歴を保存する「保管庫」のことです。

  1. ログイン後の画面左上にある緑色の「New」ボタンをクリックします。
  2. Repository name に好きな名前(例:first-tutorial)を入力します。
  3. Public(公開)か Private(非公開)を選びます。今回は練習なのでPrivateがおすすめです。
  4. 「Add a README file」にチェックを入れ、「Create repository」をクリックします。

ステップ3:新規にソースコードを書く

リポジトリができたら、実際のプログラム(今回はWebページを作るHTML)を書いていきます。Privateなので失敗しても大丈夫です!

  1. リポジトリ画面の右上にある「Add file」をクリックし、「Create new file」を選択します。
  2. ファイル名を入力する欄(Name your file…)に、半角英数で index.html と入力します。
  3. 下の広いテキストエリアに、以下の簡単なコードをコピー&ペースト(または手入力)してみてください。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>はじめてのGitHub</title>
</head>
<body>
    <h1>Hello, GitHub!</h1>
    <p>最初は非公開で作って、完成してから公開しました!</p>
</body>
</html>

ステップ4:書いたコードを保存する(Commit)

コードを書いたら、それをリポジトリに保存(セーブ)します。

  1. 画面右上にある緑色の「Commit changes…」をクリックします。
  2. 変更内容のメモ(例:「最初のHTMLファイルを作成した」)を書きます。
  3. もう一度「Commit changes」を押します。

【重要用語】Commit(コミット)とは?

ゲームでいう「セーブポイントを作る」ことです。これで、「テキストを追加した」という状態が履歴として記録されました。

あとは、自分で新規にソースコードを作ったり、新しいプロジェクト(レポジトリ)を作ったりするだけです。

ステップ5:完成したら「公開(Public)」に変更する

コードが完成し、「よし、これで世に出そう!」と思ったら、リポジトリの設定を非公開から公開へと変更します。(※無料アカウントで次のステップのWeb公開機能を使うには、Publicにする必要があります)。

  1. リポジトリ画面上部のタブから「Settings(歯車マーク)」をクリックします。
  2. 一番下までスクロールし、「Danger Zone(危険地帯)」という赤い枠のエリアを見つけます。
  3. 「Change repository visibility」の横にある「Change visibility」をクリックし、「Change to public」を選択します。
  4. 確認画面が出るので、指示に従って「I want to make this repository public」をクリックし、パスワード等を入力して承認します。

これで、あなたのリポジトリが全世界に公開されました!

ステップ6:世界に公開してみよう!(GitHub Pages)

最後に、GitHubに置いたファイルをそのままWebサイトとして公開できる無料機能「GitHub Pages」を使って、書いたコードをブラウザ上で表示させましょう。

  1. 引き続き「Settings(歯車マーク)」の画面で、左側のメニューを下へスクロールし「Pages」をクリックします。
  2. 「Build and deployment」の中にある「Branch」の項目で、None となっているドロップダウンを main に変更します。
  3. 「Save」をクリックします。
  4. 1〜2分ほど待ってからページを再読み込み(リロード)すると、画面上部に Your site is live at https://〇〇... というURLが表示されます。

以下のように、URLが表示されたら「Visit Site」をクリックするとサイトが表示されます。

このURLをクリックしてみてください。先ほどあなたが非公開でコッソリ作っていたコードが、立派なWebサイトとして世界中に公開されています!

ステップ7:GitHubの醍醐味「草」を確認しよう

自分のプロフィール画面(Your profile)に移動してみてください。

画面の下の方に、緑色の小さな四角が表示されているカレンダーがあるはずです。これは「Contributions(貢献度)」と呼ばれ、あなたがコードをコミットした日に緑色のマークがつきます。

エンジニア界隈ではこれを「草を生やす」と呼びます。毎日少しずつ勉強して草を緑でいっぱいにするのが、モチベーション維持の最高の秘訣です!

GitHubは習うより慣れろ!

今回はGitHubの本当の足掛かりとなるはじめの一歩を紹介しました。この記事の要点は以下の通りです。

  • Git はセーブ機能、GitHub はセーブデータを共有するクラウド。
  • 最初は専門用語に怯えず、「今何をしているか」を直感的に理解することが大切。
  • リポジトリ(保管庫)を作り、Commit(セーブ)するだけで立派な第一歩。
  • 活動記録(草)をモチベーションにして継続しよう。

GitHubは、頭で暗記するよりも、実際に手を動かしてエラーを出したり、今回のようにファイルを作ったりして「体で覚える」のが一番の近道です。

最初は誰でも初心者です。今日作った最初のリポジトリを足がかりに、一緒にエンジニアへの道を歩んでいきましょう!

関連リンク