GitとGitHub超入門 (さわりだけ)

WEB制作基礎知識

Web制作でも使うよ、GitとGitHubを知っておこう

バージョン管理ツールとして「Git」があります。
概念が理解しにくいものなのですが、使えると大変便利なので把握してみましょう!

Gitは、プログラミングやWeb制作で使用されるバージョン管理システムです。

初心者にとっては難しく感じるかもしれませんが、要点を押さえればスムーズに使い始められます!以下、初心者向けに簡単に解説します。

こんなトラブルはありませんか?

納品前のファイルのJavaScriptいじったら全然動かなくなっちゃった!
来週納品なのに!どうしよう!

うそでしょ!バックアップはとってある?

とってあるけど、どれが一番新しいデータか、
わかんなくなっちゃいました・・・

別の日

このまえ言ってた動かないコード直しといたよ
サーバーにアップしといた

え!そこ修正済みです!

しかも追加コンテンツが2つ追加してあったんですが・・・
もしかして消しました?

うそでしょ!ごめん!
バックアップは!?

ありません・・・

こんなことがWeb制作の現場ではよく発生します。
それを解消するためにあるのが「Git」という技術です。
複数人での共同作業となるWeb制作では非常に重要です。

就職した現場で利用している場合は必ず使用する必要があるので、概念くらいは把握しておきましょう。

 

Gitとは何か?

Gitは、「プロジェクトの変更履歴を記録して管理するためのツール」です。たとえば、以下のようなことができます:

  • 過去の状態に戻せる:間違った変更をしても、元に戻すことが可能。
  • 変更内容を比較できる:どの部分が変更されたか確認できる。
  • チームで作業を効率化:複数人で同時に作業しても、互いの変更を管理できる。

Gitを利用できるサービス

Gitを使用してソースを管理できるサービスがあります。

GitとGitHubの違い

  • Git:ツール(ローカルで使う)
  • GitHub:オンラインサービス(リモートリポジトリを提供)

Gitを使って作業を管理し、GitHubでバックアップを取るイメージです。

もしもGitを導入していたら?

納品前のファイルのJavaScriptいじったら全然動かなくなっちゃった!
来週納品なのに!どうしよう!

Gitで動いていた時のデータを確認しましょう!
どうしてもダメならチェックアウトして戻しましょう。

 

※チェックアウト→とある段階のデータに切り替えること

一つまえの状態を確認したら問題がわかりました!

問題解決です!

別の日

サーバーにアップする前に、必ずGitにプッシュするルールだったな。
お!自分が触らなかった間に修正が行われてるみたい。
コンテンツも追加されてる。
じゃあ別の部分を修正して、プッシュ!コミット!

先輩、私のしごとまでやってくれてる!?

Gitの不適切な運用によるトラブルや、エラーでプッシュやコミットができない、などの別の問題が発生することはあるのですが、バージョンを先祖返りや修正の競合などのトラブルは格段に減るはずです。

どのように運用するか?のルール設計が重要となります。

初心者が知るべき3つのポイント

リポジトリ(Repository)

プロジェクトを保存する場所のことです。Gitではリポジトリの中で変更が管理されます。

  • ローカルリポジトリ:自分のパソコン内
  • リモートリポジトリ:GitHubなどのオンライン上

コミット(Commit)

プロジェクトの変更を保存する作業です。
メモをつける感覚で、「何を変更したか」を記録します。

プッシュ(Push)とプル(Pull)

  • Push:ローカルリポジトリの内容をリモートリポジトリに送信する。
  • Pull:リモートリポジトリの内容をローカルリポジトリに取り込む。

基本的な流れ

以下の操作がGitの基本的な使い方です。

Gitの初期化

プロジェクトフォルダでリポジトリを作成。

git init

変更をステージングする

変更内容を「次のコミットに含める準備」をする。

git add .

変更をコミットする

変更内容を記録。

git commit -m "変更内容の説明"

リモートリポジトリにプッシュ

GitHubなどにアップロードする。

git push origin main

初心者がよく使うコマンド

  • リポジトリの初期化:git init
  • 現在の状態確認:git status
  • ファイルの変更を記録(コミット):git commit -m “メッセージ”
  • 変更をリモートリポジトリに送る:git push
  • リモートリポジトリから最新の変更を取得:git pull

学び始めるおすすめ手順

ローカルでGitを使って練習

初めはGitHubを使わず、ローカルでGitの基本操作を練習しましょう。

GitHubを設定

アカウントを作成し、リモートリポジトリにプロジェクトをプッシュしてみる。

小さなプロジェクトで試す

例えば、HTMLとCSSだけの簡単なWebページを使って試してみてください。

まとめ

Gitは、最初は慣れないかもしれませんが、プロジェクトの進行をスムーズにする強力なツールです。最初は基本的な操作だけで十分です。少しずつ練習していきましょう!

環境構築は以下のサイトが非常に参考になります。(Windows)

【Windows】Gitの環境構築をしよう!
Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。

ブランチの状況をビジュアルで見るには

Network Graph · kenwheeler/slick
the last carousel you'll ever need. Contribute to kenwheeler/slick development by creating an account on GitHub.

上記のようなURLを見ると良いです。
こちらはよく使うスライダープラグインの「slick」のものです。

コマンドの練習は以下のサイトを使うと良いです。

Learn Git Branching
An interactive Git visualization tool to educate and challenge!
タイトルとURLをコピーしました