GitHubを使ったプロジェクトの始め方

こんにちはマツイです。

プロジェクトを始める時にGitHubというものを利用して進めていきます。

GitHabって何?という方はこちらをご覧ください。

https://www.sejuku.net/blog/73468

一人で進行する場合は、特段必要かどうかはわかりませんが、GitHubを使うと、プロジェクトを進行するにあたり、差分や作業内容が可視化できバージョン管理が簡単にできるのでとても便利です。

ちなみに、デザインでも同じような差分をみたりコミットしたりできるAbstractというツールがありますので参考サイトをご覧ください。

参考サイト
デザインデータのバージョン管理ができるAbstractを試してみた


必要な物をインストール

それでは、早速GitHubのサイトに移動してみましょう。

https://github.co.jp/

メールアドレスとパスワードを入力して、フリープランを選択して「Sign up」します。

GitHubを使う際に、知っておきたい基礎知識があります。コミットやブランチ、プルリクエスト、マージなどです。こちらについては、下記urlで説明していますので、こちらも確認しておきましょう。

GitHubを使ってみよう!👶基本的な操作をざっと確認!


Southtreeをインストールする

GitHubと併用してSouthtreeも使いますので、こちらも使えるようにしておきます。

まずは、southtreeで検索しインストールします。

<img src="https://rubydesign.jp/wp-content/uploads/2019/06/スクリーンショット-2019-06-18-6.31.21-1024×595.png" alt="" class="aligncenter size-large wp-image-3098" />

https://ja.atlassian.com/software/sourcetree

インストール方法は、こちらを見るとクリアできるはずです。

絶対できる!Source Treeの使い方を初心者向けに説明してみた!
バージョン管理システム入門(初心者向け)

これでGitHubとSouthtree、どちらも使える状況になりました。


GitHubでリポジトリを作成する

プロジェクトをGitHub側で作成していきましょう。

GitHubのwebサイトに戻りsign inしている状況で、Start Projectボタンを選択します。

選択したら、[Repository name:レポジトリ名]「Description:説明」を入力します。

Repository nameは、プロジェクトの名前をつけて、Descriptionはその簡単な説明を書いておくといいかと思います。

GitHubは、基本誰でもソースが除けますが、「Private」にする事で鍵をつける事ができます。

まずは、プロジェクトを「Private」にチェックしておいていいかと思います。

最後に、Initialize this repository with a READMEと聞かれてますが、翻訳すると「このリポジトリをREADMEで初期化する」と書かれています。READMEは作成がいりますが、現時点ではNoneを選択して大丈夫です。

必要項目が完了して「Create repository」ボタンを押すとリポジトリの作成が完了します。


Southtreeの設定

まずは、ローカル環境にGithubでバージョン管理したいフォルダを用意します。

フォルダはリポジトリ名と同じ名前でいいかと思います。作成したら、先ほどインストールしたSouthtreeを開きます。

開くと下記添付画像の画面が出てくるので、URLからクローンを選択します。

このinputエリアの入力が必要となりますので、GitHubのサイトを開き、作成したリポジトリをクリックし、clone or donwloadボタンをクリック、urlをコピーして貼り付けます。

READMEを入れてない状態での画面

READMEを入れた状態での画面

保存先のpassは、任意のディレクトリで大丈夫です。

私の場合は、dropbox内にファイルを作成して利用しているので、

dropbox内でフォルダを作成して指定しています。

指定すると自動的に、名前のエリアに指定したフォルダ名が表示されます。

あとは、クローンすると同機が始まります。

これで、SouthtreeでのGitHubの管理ができるようになります。

今回は、ここまでです。


余談ですが

gitの管理などは、ターミナルやコマンドラインで管理ができますが、周りのプログラマーの方に聞いても使用している割合はバラバラでした。なので、ターミナルでもSouthtreeどちらでもいいのではないかと思います。

特にデザイナーの場合、ビジュアルイメージの方が使いやすいかもしれないので、把握できればターミナルで実装する流れでもいいのではと思います。

ではでは、またです。

環境の構築についての記事はこちらがおすすめです。

デザイナーでもカンタン!dockerで環境構築!

Laravelの環境構築から ローカルで表示する方法(其の壱)

松井 貴史
顧問・パートナー型の受託専門WEBデザイナー兼ディベロッパー。UXUI改善運用からWEBシステム開発までワンストップで提供しています。自身でもデザイナー発!個人開発者として日々の気づき、アクション、考え、ノウハウをTwitterで発信中。オンラインゲームSAKETUMA開発

類似記事

GridGuidを使用してグリッド設計プロセスを自動化する

Githubページの作り方

デザイナーの僕がプログラミングを学ぶ | GitHub Pageのつくりかた

なぜVue.js ? Laravelで Vue.js を使う理由と導入方法。

Sassの導入とgulp4でコンパイルして自動監視する方法