MENU
  • 無料レッスンLesson
  • プロフィールprofile
  • サービスService
    • パソコン苦手でも大丈夫!
      ホームページ作成個人レッスン
    • 起業女性に寄りそうWEBお悩み相談
  • 実績・お客さまの声portfolio
  • ブログblog
  • お問合せcontact

    カテゴリー

    • Web・SNS集客
    • Web系プログラミング
    • WordPressプログラミング
    • フリーランスの小技
    • Web活用相談
    • はじめてのWordPress
    • アメブロカスタマイズ
    • ホームページ制作
    • 自分で作れるおしゃれデザイン
    • アイデア・思考の整理

    タグ

    Adobe IllustratorGatsby.jsgitGitHubHTML/CSSMySQLNode.jsPythonSourcetreeSWELLWordPressおすすめWPプラグインおすすめツールアメブロエックスサーバーサーチコンソールセキュリティバレットジャーナルライブドアブログ環境構築確定申告開発環境

    アーカイブ

    • 2023年1月
    • 2022年12月
    • 2022年11月
    • 2022年8月
    • 2022年4月
    • 2022年3月
    • 2022年2月
    • 2022年1月
    • 2021年12月
    • 2021年11月
    • 2021年10月
    • 2021年9月
    • 2021年8月
    • 2020年10月
    • 2020年8月
    • 2020年7月
    • 2020年6月
    • 2020年5月
    • 2020年4月
    • 2020年3月
    • 2020年1月
    • 2019年11月
    • 2019年9月
    • 2019年8月
    • 2019年5月
    • 2019年2月
    • 2019年1月
    • 2018年11月
    • 2018年9月
    • 2018年8月
    • 2018年7月
    • 2018年6月
    • 2017年10月
    • 2017年9月
    • 2017年7月
    個人事業主・女性起業家のためのWordPress・HP・ブログレッスン
    自分で作れる優しいホームページ作成・個人レッスン 中谷恵美
    • 無料レッスンLesson
    • プロフィールprofile
    • サービスService
      • パソコン苦手でも大丈夫!
        ホームページ作成個人レッスン
      • 起業女性に寄りそうWEBお悩み相談
    • 実績・お客さまの声portfolio
    • ブログblog
    • お問合せcontact
    自分で作れる優しいホームページ作成・個人レッスン 中谷恵美
    • 無料レッスンLesson
    • プロフィールprofile
    • サービスService
      • パソコン苦手でも大丈夫!
        ホームページ作成個人レッスン
      • 起業女性に寄りそうWEBお悩み相談
    • 実績・お客さまの声portfolio
    • ブログblog
    • お問合せcontact
    1. ホーム
    2. Web制作スキルアップ
    3. Web系プログラミング
    4. GitHubの基本の使い方〜導入からいつもの運用まで〜

    GitHubの基本の使い方〜導入からいつもの運用まで〜

    2022 12/19
    Web系プログラミング
    2020-04-04 2022-12-19

    大規模な開発なら必ず行なっているバージョン管理。
    とはいえ、個人開発でも、プログラムの変更記録を管理したいこともあるのではないでしょうか。

    でも、バージョン管理って専門用語ばかりでわかりにくいんですよね…

    今回は、初心者がgitを使うための知識と手順をステップバイステップで解説しました。

    目次

    gitとはバージョン管理のサービス

    gitは、システム開発で使われるバージョン管理システムです。

    バージョン管理とはゲームでいうセーブポイントみたいなもの。ファイルにセーブポイントをいくつか作っておくことで、後からその状態に簡単に戻れるようになります。

    gitを使うメリット
    • コードやファイルの変更を記録する
    • 変更履歴を確認する
    • ファイル内容を任意の時点まで戻すことができる

    ちなみに、ソースコード以外のファイルも管理できます。

    GitHubはgitを用いたオンラインサービスです。
    gitはローカル環境(自分のPC上のみ)ですが、GitHubはweb上でソースコードや変更履歴を共有できるようになります。

    GitHubを使うメリット
    • 自分の書いたプログラムを世界に公開できる
    • クラウド上にソースコードと変更履歴を保管できる
    • 他の端末でソースコードや変更履歴を共有できる

    なお、GitHubにはプライベート機能があり、アップしたファイルの公開/非公開を自分で選ぶことができます。
    以前は、無料版では使えなかったのですが、最近は使えるようになったみたいです☺️

    覚えておきたいgit基本用語

    バージョン管理には専用用語があります。
    はじめて個人で使うときには、まずこれだけ覚えればいいかと。

    リポジトリ変更履歴の保管場所
    コミットファイルの変更を記録する
    プッシュクラウド上にデータを送る
    プルクラウド上からデータをもらう

    リポジトリ= データの変更履歴を保管する場所

    gitのレポジトリとは

    リポジトリは変更履歴を保管する場所です。

    自分のPC上:ローカルリポジトリ
    インターネット上:リモートリポジトリ

    と呼びます。

    コミット

    gitのコミットとは

    コミット= ファイルの変更履歴をリポジトリに保存すること

    ただファイル保存しただけでは、変更履歴は記録されません。
    自分がセーブポイントとして保存したいところ(作業が一段落したところ)で、自分で作業内容を入力して記録します。

    プルとプッシュ

    gitのプルとプッシュとは

    プル = リモートリポジトリの内容をローカルリポジトリに反映すること

    作業を始める時に、最新版のデータを自分のPC上にダウンロードします。

    プッシュ = ローカルリポジトリの内容をリモートリポジトリに反映すること

    自分のPC上でファイルを編集した後、ファイルと変更履歴をweb上にアップロードイメージです。

    自分のPCからみて、
    プッシュ(push)が「送る(押し出すイメージ)」、
    プル(pull)が「もらう(引っ張ってくるイメージ)」

    です。

    バージョン管理で出てくる用語
    • リポジトリ : 変更履歴の保管場所。リモートレポジトリ(Web上)とローカルレポジトリ(自分のPC上)がある。
    • コミット : 変更を記録する
    • プッシュ : ローカルレポジトリ(自分のPC上)からリモートレポジトリ(Web上)にデータを送る
    • プル: リモートレポジトリ(Web上)からローカルレポジトリ(自分のPC上)にデータをもらう

    GitHubの始め方【Mac導入編】

    ここから実際にMacでバージョン管理のツールを入れていきます。

    使うもの

    • GitHub
    • Sourcetree

    GitHubを導入する

    GitHubの公式サイトにアクセスします

    GitHub公式サイト

    ID,メールアドレス,パスワードを入力して、次に進みます。

    GitHub新規登録

    プランは「個人(Free)」を選びます。

    GitHubのプラン選択

    メールが届くので、メールで本人確認を行い、登録完了させます。

    登録完了

    SourcetreeにGitHubを連携する

    SourcetreeはGitを簡単に操作するためのツールです。

    gitを使う際、コミットやプッシュなどをコマンドで打ち込む必要があります。コマンドに慣れていないと分かりにくいです。
    そこで、Sourcetreeを使うと、画面でファイルの変更履歴を見れたり、操作できるので初心者にも使いやすいです。

    公式サイトからSourcetreeをインストールします。

    Soucetreeを開きます。

    GitHubのアカウントを、Sourcetreeに追加していきます。

    SourcetreeからGitHubに接続

    アカウント追加ボタンを押します。

    Sourcetreeのアカウント追加

    Webブラウザが立ち上がって、GitHubとの連携画面が表示されます。

    「Authorize atlassian」をクリックします。

    SourcetreeからGitHubアカウントを連携

    これで、アカウントが追加されました。

    SourcetreeとGitHubの連携が完了した状態

    GithHub使い方

    プロジェクトを始める時にはレポジトリを作成する

    1.新規リポジトリ作成

    プロジェクトの始めに、GitHubでレポジトリ(変更履歴を管理する場所)を作ります。

    GitHubでレポジトリー作成

    レポジトリの作成が完了したところ。

    GitHubでレポジトリー作成完了

    右に共有用のURLが出てくるので
    「https://github〜〜」のURLをコピーします。

    2. クローン

    続いて、GitHub上のリモートリポジトリの内容を丸ごとローカルのPCにデータをコピー(クローン)してきます。

    クローン(clone)とは

    このコピーする作業をクローン(clone)と呼びます。
    GitHubにあるリモートリポジトリの内容を、ローカルPC上に複製する作業のことです。
    通常プロジェクトの最初に行います。

    Sourcetreeの上部にある「New」から「Clone from URL」をえらびます。

    Sourcetreeのクローンの手順

    リモートレポジトリの情報を入力します。

    リモートレポジトリの情報を入力
    • Source URL:先ほどGitHubでコピーしたURL
    • Destination Path:自分のPC内の作業フォルダ

    入力したら、Cloneを押します。

    ふだんの作業でやること(プル→作業→コミット→プッシュ)

    1.リモートレポジトリの最新データを、ローカルPCにダウンロードする(プル)

    複数の人で、同じプログラムを編集している場合には、古いデータで作業してしまう可能性があるので、自分が作業に入る前に必ずやります。

    個人の場合は、自分以外にファイルを更新しないので、プルをしても変更がないと思います。
    例えば、他の端末でも作業していて、更新内容がリモートレポジトリに反映されているときなどは、ローカルPC上のデータを、リモート上データと同期させます。

    Sourcetreeからプル

    2.適宜ファイルを更新する

    プログラムなどを編集します。
    試しに、sample.phpを作成して入れてみました。

    ファイルを追加

    すると、Sourcetree上では変更されたファイルが表示されます。

    Sourcetreeで変更が入ったファイルが表示される

    3.ファイルの変更を記録(コミット)する

    作業が終わったら、その作業ごとにコミットをしていくのが基本。

    コミット=作業単位です

    ファイルにチェックを入れます。(複数ファイルをまとめて選ぶこともできます)
    作業内容をメッセージ欄を入れて、コミットボタンを入れます。

    Sourcetreeでコミット

    コミットが完了すると、変更履歴が見えるようになります。

    Sourcetreeで変更ログが表示される

    4.ローカルの変更内容をリモートリポジトリへアップロードする(プッシュ)

    作業が終わったら、PC上の内容をネット上に反映します(プル)。

    Pullボタンを押します。

    Sourcetreeでプル

    OKを押します。

    完了すると、履歴に反映されます。

    まとめ

    • Gitはシステム開発で使われるバージョン管理システム
    • GitHubとSourcetreeを連携してバージョン管理ができる

    以上、GitHubの導入から基本的な使い方までのご紹介でした。
    使いこなして、プログラム開発の効率をあげてくださいね!

    Web系プログラミング
    git GitHub Sourcetree 環境構築
    よかったらシェアしてね!
    中谷恵美
    あなたのお仕事を育てるホームページの先生
    システムエンジニア、ITコンサルタントを経て、フリーランスに。

    ・ホームページ作成
    ・ブログのカスタマイズ
    ・LINEやメルマガのセットアップ
    ・Canvaを使ったデザインの作り方
    ・Googleの分析ツール
    ・自分の強みを生かした集客
    などの、個人レッスンをしています。

    「仕事の発信に使えるようになりたい」
    「自分でも使えるスキルを身につけたい」
    ITが苦手な個人事業主さんに向けて、困ったときのWEB担当として幅広くサポートしています。

    HP作成のほかにも、心理カウンセラーとしても活動中。

    趣味は、文房具集め、ゲーム(牧場系とモンハン)、手芸(刺繍、洋裁)。
    運動が苦手で体が硬いのが悩み。今年、腰痛改善にジムに通い始めたが、果たして続くのか。。。
    詳しいプロフィールを見る

    メルマガバナー

    活動実績

    【HP個人レッスン】

    ●ハワイアン伝統ロミロミサロン・Aさま
    ・2ヶ月でサロンのHPをリニューアル。新サービス立上げ時も自分でHPを作成できるように。
    「最初はパソコン音痴の私にできるか不安でしたが、とても丁寧な指導でわかりやすかったです。
    私好みの素敵なHPができあがり、とっても嬉しいです!」

    ●Mさま
    ・2回のミーティングでWordPress運営スキルを習得。オウンメディアを立上げ。

    ●Sさま
    ・5日間で無料ブログからWordPressへのお引越し。
    「半ば諦めかけていた移管を短期間で終えることが出来ました」

    【ホームページ作成】

    ●これまでご依頼いただいたお客さま
    (個人)写真家・サロン・カウンセラー・占い師

    (法人)メーカー代理販売店、コンサルティング企業、人事支援企業

    【経歴・資格など】
    ・基本情報技術者
    ・簿記2級

    【営業時間】平日:10:00~19:00
    【休業日】土、日、祝、年末年始

     

    新着記事
    • 個人事業主のお仕事ブログには、独自ドメインを使おう!
      2023-01-27
      Web・SNS集客
    • WordPressテーマの選び方〜おすすめ有料・無料テーマ〜
      2023-01-13
      はじめてのWordPress
    • 【アメブロ】記事に定型文をいれる方法
      2022-12-30
      アメブロカスタマイズ
    • 【アメブロ】メッセージボードをおしゃれにカスタマイズ!
      2022-12-23
      アメブロカスタマイズ
    • ブログで使えるタイトル付き囲み枠のCSS
      2022-12-21
      アメブロカスタマイズ
    人気記事
    • 【Mac】SourcetreeからGitHubへSSH接続する
      2021-08-05
      Web系プログラミング
    • 【CSSコピペOK】おしゃれな引用blockquoteデザイン10選
      2018-09-13
      WordPressプログラミング
    • Node.js+ExpressでMySQLに接続して一覧表示する
      2020-04-25
      Web系プログラミング
    • CSSとJavaScriptで作るハンバーガーメニュー
      2020-07-25
      Web系プログラミング
    • 【CSS】シンプルで女性らしい囲み枠デザイン48選
      2018-08-24
      アメブロカスタマイズ
    目次