GitHub共同開発でつながるフロントエンド開発者のためのコミュニティ

GitHub共同開発でつながるフロントエンド開発者のためのコミュニティ

STEP 1リポジトリをフォークする

フォークとは GitHub 上の他のユーザーのリポジトリをコピーして自分のリポジトリとすることです。
これを使えば、オリジナルリポジトリ(フォーク元リポジトリ)に影響を与えることなくプロジェクトへの変更を行えます。
フォークされたリポジトリの更新をオリジナルリポジトリからフェッチしに行ったり、フォークリポジトリからオリジナルリポジトリへプルリクエストを送って変更を承認したりできます。
つまり、共同開発ができるということです。

さっそく、commit-mate リポジトリへアクセスして、右上のForkボタンからリポジトリをフォークしてみましょう。
フォークしたリポジトリ名は同じく「commit-mate」などわかりやすい名前にしましょう。

STEP 2フォークしたリポジトリをローカルにコピーする

フォークして自分の GitHub 上に commit-mate リポジトリが作成されたら、次はそれをクローンします。
クローンとは GitHub 上のリモートリポジトリをローカル(PC)にコピーすることです。

まず、リポジトリページの右上の「Code」をクリックし、「SSH」タブに切り替えて、出てきた文字列をコピーします。

STEP 3ローカルに作業用のディレクトリを作成してクローンする

次に、ローカル(PC)の任意の場所に、作業用のディレクトリを作成します。作成したらそのディレクトリに移動して、コマンドラインツールの$ git cloneコマンドでクローンを実行します。
これでリモートリポジトリがローカルにクローンされました。

STEP 4パッケージをインストール

開発のための部品(パッケージ)をパッケージ管理ツールでローカルにインストールします。
package.json(とYarn.lock)で使用するパッケージとそのバージョンが書かれているので、これをパッケージ管理ツールでインストールすることで、開発者全員が同じパッケージを使って開発できるようになります。

今回は yarn を使ってインストールしてみましょう。
$ yarnまたは$ yarn installコマンドでパッケージをインストールします。

これで開発の準備が終わりました。次のステップで実際にソースコードを編集してフォーク元へプルリクエストを送信しましょう!

STEP 5Members.vue コンポーネントに情報を追加する

components > Memebrs.vueを開くと、scriptタグ内にmembersを定義している記述があります。
前回の人の記述の続きから、以下をコピペしてプロパティに自分の情報を記述しましょう。


{
  id: 'ここに GitHub ID',
  displayname: 'ここに表示名',
  bio: 'ここに簡単な自己紹介'
},

書き終わったら保存して、次のステップでcommitします。

STEP 6変更をコミット&プッシュする

ターミナルを開いてgit commit -a -m "ここにコメント"を叩きます。
コミットすることで、現在までの変更のスナップショットを撮って保存することができました。
次にその変更をgit pushコマンドでリモートリポジトリ(GitHub上のリポジトリ)へプッシュします。
プッシュすると、ローカルで行ったコミットがリモートリポジトリに送信されます。

実際に変更が反映されているか、自分のGitHub上のリポジトリを確認してみましょう。

STEP 7GitHub UIでプルリクエストを送信する

プッシュできているのを確認したら、最後はいよいよプルリクエストです。
今回はコマンドラインツールではなくGitHubのサイト上でプルリクエストを送信します。
commit-mate プルリクエストへアクセスして、右上の「New pull request」をクリックします。

step-1
step-2
step-3-1step-3-2
step-4
step-5
step-6
step-6