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. Sourcetreeのインストールと具体的な使い方〜gitでファイルをバージョン管理〜

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

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

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

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

    ファイル名の後に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
    よかったらシェアしてね!
    中谷恵美
    あなたのお仕事を育てるホームページの先生
    システムエンジニア、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
      アメブロカスタマイズ
    目次