見出し画像

入江開発室と初めてのGitHub

この記事は、
入江開発室に入った私が、初めてプロジェクトに参加した時にGitHubと出会い、
「GitHubを利用できるようにならないと何もできないぞ...!!」
とはっと気付いたので、今後GitHub知らないけど入江開発室で色々なプロジェクトに参加したい!という方のために、GItHubの簡単な利用方法を書いた記事です。

一応GitHubの簡単な使い方を知りたい、という方のニーズにも答えているのではないかと思いますので、よければご覧ください。

--- 💻 ---

はじめに - 入江開発室って?? -

※前提が長いのでGitHubの使い方だけ知りたい方はここ飛ばしてください。

会社を作って早6年。今年に入ってからは自社サービスを作るように色々とやっております。現在やっていることとしては、友人のエンジニア、デザイナーの方に声をかけて、色々とプロダクトを作っているところ。年内には何かしら発表できたらなと思っています。

で、開発について。私も簡単なコードであれば書けるのですが、ゴリゴリのエンジニアではないのでどうしても手が遅い。そしてデザインが全くできないという弱みがありました。
しかし独学で学ぶのも時間がかかってしまうしなー。と思っていたところ、こんなコミュニティを見つけました。

「入江開発室」という開発チームのコミュニティーです。

入江開発室は「自分が作ったWEBサービスやアプリだけで生きていきたい」そんな人達が集まる場所。
開発室内で好きなプロジェクトに参加して、企画、開発、プロモーションまで学べる実践型コミュニティです。

こちらが代表の入江さん。MENTAJobTagを作っている起業家さんです。

ちなみに入江開発室、最近(8/14現在)では400名くらいになっているとか。すごい。

ということで早速参加することに。そして入ったからには何かしらプロジェクトにも参加したいということで、今回プロジェクトに参加することにしました。

で、そこで初めて利用することになったGitとGitHub。今まで名前は聞いたことがあったけど使ったことはないツールだったので、これを機に覚えようということで、オススメされていた本を買い、実際に手を動かして利用してみたところ...

めちゃめちゃ便利じゃん...!!!

ということでGitHubの使い方を、以前の私のような方々にお伝えしたいという思いから今回の記事を書きました。

(ここまで前提。長かった!!)

--- 💻 ---

(ここからGitHubについて)

GitHubですが、名前は知っていたけど利用方法が全くわからない。という状態だったのですが、本を読んでプロジェクトに参加し利用してみたら以外とすんなりできたので、簡単にやり方をまとめました。ちなみに私は1週間ほど前にGitHub本格的に利用したばかりの超初心者です。

それではGitHubの使い方を説明していきます。

前提

GitHubの使い方を説明していきますが、その前に以下の項目はすでに対応済みという前提で進みます。まずこちらの設定をお願い致します。

・GitHubアカウント作成済(※1)
・Soucetreeインストール、ログイン済(※2)
・SSH key 設定済(※3)
・すでにGItHubで開発が進められているプロジェクトに途中参加する

※1 GitHubのアカウント作成方法はこちら
※2 Soucetreeのアカウント作成方法はこちら
※3 SSH keyの設定についてはこちら

また、この記事を読む前に、GitHubとは何か、Sourcetreeで何ができるのかがわかっていると良いと思います。
(GitHubについてはこちらが詳しいです。)
(Sourcetreeについてはこちらが詳しいです。)

参考本について

もしこの記事を読んでも「何が何だかさっぱりわからないよ!!」となった方は、こちらの本を読むとわかると思います!GitHubについてとてもわかりやすい本です。

私もこの本を読んだおかげで、この解説が書けるくらいまでにはなりました。

それでは具体的に作業に移ります。

目次

1.リポジトリをローカルにコピーする(cloneする)
2.ブランチを作る
3.ローカル環境で作業する
4.「コミット」、「プッシュ」する
 4-1. ステージング環境にアップする
 4-2.コミットする
 4-3.プッシュする
5.プルリクエストを送る
6.masterブランチへマージする
7.ブランチを削除する

1.リポジトリをローカルにコピーする(cloneする)

まずはじめにGitHubのリポジトリをローカル(自分のパソコン)にコピーします。

コピーしたいGitHubのリポジトリページを開き、緑色枠内の「Clone or download」をクリックし、リンクをコピーします。

次にSource Treeを開きます。

SourceTreeのメニューより「ファイル」→「新規...」をクリックします。

「URLからクローン」をクリックします。

下記記入して「クローン」をクリックします。

・ソースURL:先ほどコピーしたリンク
・保存先のパス:フォルダがコピーされる場所(どこでも良いです、お好きな場所へ)
・名前:リポジトリの名前(こちらも自由に決めていいです)

クローンすると、指定したフォルダにコピーしてきたファイルが表示されます。

※「.git」というのは、このフォルダはgit利用していますよ!というしるしです。

以上でローカル(自分のパソコン)へのリポジトリのコピーが完了です。

2.ブランチを作る

GitHubには「ブランチ」という概念があります。デフォルトでは「master」というブランチのみ用意されています。
すごーく簡単に言いますと、masterというのがみんなで作ったファイルがアップされている大元の場所で、なるべくそのmaster自体は触りたくない。その代わりに、「ブランチ」という自分の作業場所を作り、そこで黙々と作業をし、できたら他の方に見てもらい、問題無かったらmasterにマージするといった流れになります。
「ブランチ」についてもっと知りたいという方はこちらの記事をご覧ください。

それではブランチを作ります。

Sourcetreeを開き、「リポジトリ」メニューより「ブランチ」をクリックします。

「新規ブランチ」にブランチ名を入力し、そのほかの設定はデフォルトのままで「ブランチを作成」をクリックします。
(ブランチの名前はなんでも良いです。)

そうすると、左サイドバーの「ブランチ」に先ほど作成したブランチが追加されます。

新しく作ったブランチ名を右クリックし、「プッシュ先」から「origin」を選択します。

ダイアログが表示されます。「プッシュしますか?」と「追跡しますか?」のチェックが追加したブランチについていることを確認し、「OK」をクリックします。

以上でブランチの作成は終了です。作業はこちらのブランチで行なっていきます。作業が完了したら、ファイルをmasterにマージしていくような流れになります。

なお、ブランチを追加すると、GitHubにも自動的にブランチが追加されます。
↓GitHubの画面で。「Branch:master」をクリックすると、追加したブランチが表示されます。

以上でブランチの作成が終わりです。

3.ローカル環境で作業する

1と2でローカル環境の作業が完了したので、ローカル環境で作業します。

プロジェクトリーダーよりタスクが割り振られますので、指示のもと作業を行います。

4.「コミット」、「プッシュ」する

作業が完了したら、コミット、プッシュをして内容を確認してもらいます。

確認してもらう方法として、下記作業が必要になります。

1.ステージングエリアにファイルをアップする
2.コミットする
3.プッシュする

以下、1つずつ説明していきます。

4-1.ステージングエリアにファイルをアップする

まずは作成したファイルをステージングエリアにアップします。Sourcetreeを開くと、作業中のファイルが表示されます。(下記画像の赤枠で囲った部分)

(今回だと、3ファイルが新たに制作・修正されたファイルになります)

完成したファイルにチェックを入れると、ステージング環境にアップされます。

上記画像だと、「check.svg」がステージングエリアにアップされました。

次にコミットについて説明します。

4-2.コミットする

ステージング環境にアップしたファイルをコミットします。Sourcetreeの「コミット」をクリックします。

コミットメッセージを入力し、「コミット」をクリックします。コミットメッセージには後から見てもどこを追加・修正したのかがわかるように記載します。

※コミットですが、1機能ができたらコミットを行う、くらいの頻度が良いそうです。少なすぎても多すぎても良くないとのこと。前述した本のP.136参照

次にプッシュについて説明します。

4-3.プッシュする

それではローカルで変更した内容をプッシュして、GitHubのレポジトリに反映させます。

Sourcetreeよりプッシュをクリックします。

(バッチでプッシュ可能なファイルの件数が表示されます。上の画像の場合3ファイルです)

「プッシュ」をクリックするとダイアログが開くので、追加したブランチの方にチェックが入っていることを確認し、「OK」をクリックします。

以上でプッシュ終了です。

5.プルリクエストを送る

プッシュした後にGitHubの画面を見ると、下記のようなメッセージが表示されます。

緑枠の「Compare & request」をクリックします。クリックするとプルリクエストのメッセージを記入する画面に移ります。

タイトルとメッセージ内容を記入し、「Create pull request」をクリックします。

メッセージが投稿されました。

以上で完了です。ソースをレビューしてもらいましょう。

6.masterブランチへマージする

この作業は基本的にはプルリクエストを確認し、ソースチェックする人(プロジェクトマネージャー等)が行います。

GitHubの画面より、「Pull requests」タブをクリックします。するとPull requestsが一覧で表示されます。マージするPull requestsのタイトルをクリックします。

画面中盤にある「Marge pull request」をクリックします。

マージコミットの内容を入力できるフォームが表示されるので、文言を入力し「Confirm merge」をクリックします。

以上でマージが完成です。以下のようなメッセージが表示されます。


7.ブランチを削除する

マージしたらブランチが必要なくなるので、追加したブランチを削除します。

GitHubの対象のPullrequestsページより「Delete branch」をクリックします。

次に、Sourcetreeよりブランチを削除します。masterにチェックアウトし、追加したブランチを左クリックし、「[ブランチ名]を削除」をクリックします。

ダイアログで削除の確認が表示されるので、「OK」を押してブランチが削除できます。

以上です。


ということで、以上で(簡単ですが)一連の流れとなります。


--- 💻 ---

その他の機能について

その他の重要な機能としては、issuesというのがあります。これは簡単にいうとタスク管理になります。

プロジェクトリーダーがissuesを作り、メンバーに割り振っていくようになります。ここではスレッド形式でやりとりもできるので、議論をすることもできます。

ここは実際にプロジェクトやりながら触っていった方がわかりやすいと思いますので、重要ですが今回説明は省きました。使い方の詳細は紹介しているこちらのを読んでご確認ください。

--- 💻 ---

最後に

簡単ですがGItHubの説明は以上です。


今回書いた理由としては、コミュニティーに途中から入るというのは、若干勇気がいることだというのはとてもわかるからです。めちゃめちゃ勇気がいる。わかる。でもせっかく月額でお金を払っている以上、どんどんプロジェクトに入っていった方が良いと感じているのです。

コミュニティーに途中から入るのが大変な理由はいくつかあると思うのですが、その中の一つに「圧倒的に技術力が足りないから」というのもあると思います。

そんな方でも、とりあえずGitHubの使い方だけでも覚えておけば、プロジェクトに入りやすくなるだろうな、と思いこのnote書きました。参考になれば嬉しいです。

無理せず皆さんで良いサービスを作っていきましょう。


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

読んでいただきありがとうございます!『スキ』を押してもらうと、長野県松本市のおすすめカフェを紹介します!

『ザ コートヤード バイ マグ 』店員さんが優しい!
17

Koushi Kagawa 😊

Res, Inc. / Web エンジニア担当 / Laravel / PHP / MySQL / Nuxt.js / Vue.js / Contentful / Netlify / Drupal / Wordpress / が出来ます。

技術メモ

サイト制作等のメモです。
3つ のマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。