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

カテゴリー

  • WordPressの基本
  • Web活用相談
  • ホームページ制作
  • ブログ運営
  • おしゃれデザインの作り方
  • ビジネスのヒント
  • WordPressカスタマイズ
  • Web制作スキルアップ
  • アイデア・思考の整理

タグ

Adobe Illustrator Gatsby.js git GitHub HTML/CSS MySQL Node.js Python Sourcetree SWELL WordPress おすすめWPプラグイン おすすめツール エックスサーバー サーチコンソール セキュリティ バレットジャーナル 環境構築 確定申告 開発環境

アーカイブ

  • 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月
あなたのお仕事を育てるホームページ作成・Web活用
ゼロの森
  • プロフィールprofile
  • サービスService
    • IT苦手でも大丈夫!
      ホームページ作成個人レッスン
    • 起業女性の悩みに寄り添う
      WEB活用の個別相談
  • 実績・お客さまの声portfolio
  • ブログblog
  • お問合せcontact
ゼロの森
  • プロフィールprofile
  • サービスService
    • IT苦手でも大丈夫!
      ホームページ作成個人レッスン
    • 起業女性の悩みに寄り添う
      WEB活用の個別相談
  • 実績・お客さまの声portfolio
  • ブログblog
  • お問合せcontact
  1. ホーム
  2. Web制作スキルアップ
  3. Sourcetreeのインストールと具体的な使い方〜gitでファイルをバージョン管理〜

Sourcetreeのインストールと具体的な使い方〜gitでファイルをバージョン管理〜

2022 7/15
Web制作スキルアップ
2020-03-29 2022-07-15

お仕事で資料やファイルを日々を作成/編集するとき、こんなことありませんか?

キャプション
  • 保存しちゃったけど、昨日の状態に戻したい…
  • ファイルに手を入れたい。でも、元の状態も使うかもしれないから、ファイル複製しよう…

ファイル名の後にverをつけたり、日付をつけたりして管理をしていらっしゃると思います。ただ、頻繁に手を入れて、バージョンを変えるのが煩雑になることもあるでしょう。

そんな時はgitがおすすめです。 gitは、ファイルの変更を記録してくれるバージョン管理システムです。

システム開発では、毎日いろんな人がプログラムを編集しているので、プログラムの状態を変更履歴とセットで管理しています。

ちなみに、プログラムだけではなく、Excel、PowerPointとか各種ファイルにも使えます。

つまりgitを導入すると
企画書_v1
企画書_v2
とかファイルを分けて管理しなくてよくなるのです♪

バージョン管理でできること
  • ファイルの変更履歴を管理する
  • 前のバージョンにファイルを戻す
  • 変更履歴を分けて管理する

Git(バージョン管理)の詳しい概念を学ぶには「サルでも分かるバージョン管理入門」をどうぞ。

普段は、誰かと協力してプログラムを書くために使われることが多いですが、
今回は自分1人で、PC上のファイルをバージョン管理できるように、ツールと使い方を紹介します。

目次
スポンサーリンク

SourceTreeのインストール方法

今回はMacユーザー向けの解説になります。
Windowsで使いたい方は、SourceTreeのダウンロードとインストール方法 | サービス | プロエンジニアをご確認下さい。

gitを入れる

Macの場合は、ターミナルから以下のように入力します

$ git --version

このように、バージョンの表記が出てきたら、OKです。

 $ git --version
 git version 2.24.1 (Apple Git-126)

Xcodeをインストールして、ライセンスに同意していない場合は以下のように入力して、管理者パスワードを入れます。

 $ sudo git --version
 Password:

これで、gitを使う準備ができました。

Sourcetreeをインストール

gitを使うだけならこれでOKなのですが。
コマンドでファイルを操作する必要があって、ややこしいです。
なので、Sourcetreeを使います。
アプリ上で、ファイルの変更をみれたり、直感的に操作できるソフトです。

Sourcetreeのサイトから、アプリケーションをダウンロードして、インストールします。

Sourcetreeでファイルをバージョン管理する

Sourcetree初期画面

まずは、バージョン管理したいフォルダを設定します。

右クリック>NEWを選びます。

Sourcetreeでローカルリポジトリを作成

「Create Local Repository(新規ローカルリポジトリを作成)」を選びます

ローカルリポジトリを作る

バージョン管理するフォルダの場所を選びます。

sourcetreeに追加するフォルダを選択

これで、追加されました!

sourcetreeでローカルリポジトリ追加

画面上で新しく追加したフォルダ(ここでは70Manual)をダブルクリックすると、こんな画面が開きます。

Sourcetreeの操作画面


ここに、変更履歴などが表示されます。

ファインダーから、フォルダを見ると図のように、「.git」というファイルが追加されています。

Finder上でのバージョン管理の見え方

これで、準備完了です!

これが基本!コミットで変更を記録する

ここから、具体的なバージョン管理するかをみていきます。

まずは、先ほど作ったディレクトリにファイルを置いてみましょう。ここでは、Pagesで作った説明資料を置いてみました。

バージョン管理中のフォルダにファイルを追加

そうすると、Sourcetree画面上にファイルがでてきます。

Sourcetreeに変更内容が表示されました

そこで、メッセージ欄に「新規作成」とメッセージをいれて、コミットボタンを押します。

コミットボタンを押すと、
本当にバージョンコントロールに追加していいですか?
ファイルサイズ大きいですけどいいですか?
と、聞かれるかもしれませんが「OK」で進みます。

コミットとは

「コミット」とは変更履歴を記録することです。
自分で作業が終わったときに、コミットボタンを押して、「何を変更したか」メッセージを残すことができます。
ファイルが保存されるごとに勝手に変更履歴が追加されるわけではありませんので注意くださいませ。

コミットが終わった後、Historyを選ぶと、ファイルの変更履歴が残ります。

Historyで変更履歴を確認する

続いて、ファイルを編集してみましょう。説明資料をPagesで編集→保存します。
すると、File Statusに変更があったファイルが表示されます。

ちなみに、今回はOffice系のソフトのファイルなので、変更内容を画面上では確認できません。
テキストファイルだと、変更の差分を確認したり、合体できるようになります。

ファイルにチェックを入れて、メッセージを入れて、コミットします。

sourcetree上で変更をコミット

編集履歴が追記されています。

まとめ

  • git=ファイルのバージョン管理ツール
  • SourceTreeで視覚的に編集履歴が見える
  • コミットすると、ファイルの変更を記録する

いかがでしたか?
何度も更新が入るファイルはこれを機に、バージョン管理しちゃった方が作業が楽になるかもしれませんね。

GitHubと連携することで、Web上でプログラムを公開したり、複数の開発者と協力してプロジェクトを進めることができます。

Web制作スキルアップ
git
よかったらシェアしてね!
  • 30日で人生を変える「続ける」習慣を読んで私が身に付けた3つのこと
  • GitHubの基本の使い方〜導入からいつもの運用まで〜

関連記事

  • 【図解】WordPressのテーブル構造はどうなっているの?
    2021-12-03
  • WordPressの投稿に管理者用メモをいれるプラグインを作る
    2021-11-29
  • 記事をランダム表示するウィジェットを作る
    2021-11-27
  • WordPressプラグインを作ってみる。はじめの一歩。
    2021-11-10
  • 【Mac】Localなら超簡単!WordPressのローカル環境を作る。
    2021-10-07
  • GatsbyJSサイトをv3へアップデート
    2021-08-23
  • 【Mac】Node開発環境のアップデート
    2021-08-06
  • 【Mac】SourcetreeからGitHubへSSH接続する
    2021-08-05
中谷恵美
あなたのお仕事を育てるホームページの先生
システムエンジニア、ITコンサルタントを経て、フリーランスに。
ITが苦手な女性の個人事業主さんにホームページ作成・集客・Web活用をトータルでサポートしています。

仕事の戦略、ホームページの作成やWebツールの整理、操作の疑問など、さまざまなお困りごとにお答えします。
詳しいプロフィールを見る
活動実績

【HP個人レッスン】

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

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

 

【ホームページ作成】

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

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

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

新着記事
  • 【お客様の声】フワッとした質問に対しても具体的に教えてくれます。
    2022-08-14
    Web活用相談
  • 株式会社 ビードゥー様 (BeDoh Corporation)
    2022-04-11
    ホームページ制作
  • 【2022年版】Smash Balloon Social Photo Feedの使い方〜インスタグラムを表示できるプラグイン〜
    2022-03-25
    WordPressの基本
  • AIが自動で文字起こし!「Notta」で議事録、原稿作成、勉強を効率的に!
    2022-03-11
    ビジネスのヒント
  • 2021年の確定申告は、スマホで申告!
    2022-02-16
    ビジネスのヒント
人気記事
  • 【CSSコピペOK】おしゃれな引用blockquoteデザイン10選
    2018-09-13
    Web制作スキルアップ
  • 【Mac】SourcetreeからGitHubへSSH接続する
    2021-08-05
    Web制作スキルアップ
  • CSSとJavaScriptで作るハンバーガーメニュー
    2020-07-25
    Web制作スキルアップ
  • Node.js+ExpressでMySQLに接続して一覧表示する
    2020-04-25
    Web制作スキルアップ
  • デザインのドリルで30個トレースして学んだこと
    2020-08-20
    おしゃれデザインの作り方
メニュー
  • プロフィール
  • サービス
    • IT苦手でも大丈夫!
      ホームページ作成個人レッスン
    • 起業女性の悩みに寄り添う
      WEB活用の個別相談
  • 実績・お客さまの声
  • ブログ
  • お問合せ
カテゴリー
  • 実績・お客様の声 (10)
    • Web活用相談 (1)
    • ホームページ制作 (9)
  • WEB・SNS集客 (1)
    • ブログ運営 (1)
  • はじめてのホームページ作り方 (12)
    • WordPressの基本 (12)
  • おしゃれデザインの作り方 (6)
  • ビジネスのヒント (8)
  • Web制作スキルアップ (39)
    • WordPressカスタマイズ (12)
  • アイデア・思考の整理 (2)
タグ
Adobe Illustrator (2) Gatsby.js (3) git (3) GitHub (1) HTML/CSS (7) MySQL (2) Node.js (2) Python (2) Sourcetree (2) SWELL (1) WordPress (28) おすすめWPプラグイン (7) おすすめツール (3) エックスサーバー (4) サーチコンソール (1) セキュリティ (3) バレットジャーナル (2) 環境構築 (1) 確定申告 (1) 開発環境 (3)
  • サイトマップ
  • プライバシーポリシー
  • 特定商取引法に基づく表記

© Zero*forest

目次