GitHub共同開発でつながるフロントエンド開発者のためのコミュニティ
Front End Engineer I love JavaScript. Of course, I also love TypeScript.
Vue and Nuxt are what I'm living for. Those who believe them shall be 𝓼𝓪𝓿𝓮𝓭.
I'm a beginner of Engineer. I want to learn Laravel Nuxt Flutter
I'm a FrontEnd Engineer who loves web and animation
I'm a FrontEnd Engineer. I want to learn Nuxt, GraphQL, golang and Kubernetes
Ph.D.student of Information Science. I'm looking forward to developing with you
Frontend Developer in Hyogo. I usually use TypeScript and React. I'm interested in PHP, Express and Docker. Glad to study with you all.
フォークとは GitHub 上の他のユーザーのリポジトリをコピーして自分のリポジトリとすることです。
これを使えば、オリジナルリポジトリ(フォーク元リポジトリ)に影響を与えることなくプロジェクトへの変更を行えます。
フォークされたリポジトリの更新をオリジナルリポジトリからフェッチしに行ったり、フォークリポジトリからオリジナルリポジトリへプルリクエストを送って変更を承認したりできます。
つまり、共同開発ができるということです。
さっそく、commit-mate リポジトリへアクセスして、右上のForkボタンからリポジトリをフォークしてみましょう。
フォークしたリポジトリ名は同じく「commit-mate」などわかりやすい名前にしましょう。
フォークして自分の GitHub 上に commit-mate リポジトリが作成されたら、次はそれをクローンします。
クローンとは GitHub 上のリモートリポジトリをローカル(PC)にコピーすることです。
まず、リポジトリページの右上の「Code」をクリックし、「SSH」タブに切り替えて、出てきた文字列をコピーします。
次に、ローカル(PC)の任意の場所に、作業用のディレクトリを作成します。作成したらそのディレクトリに移動して、コマンドラインツールの$ git clone
コマンドでクローンを実行します。
これでリモートリポジトリがローカルにクローンされました。
開発のための部品(パッケージ)をパッケージ管理ツールでローカルにインストールします。
package.json(とYarn.lock)で使用するパッケージとそのバージョンが書かれているので、これをパッケージ管理ツールでインストールすることで、開発者全員が同じパッケージを使って開発できるようになります。
今回は yarn を使ってインストールしてみましょう。$ yarn
または$ yarn install
コマンドでパッケージをインストールします。
これで開発の準備が終わりました。次のステップで実際にソースコードを編集してフォーク元へプルリクエストを送信しましょう!
components > Memebrs.vue
を開くと、scriptタグ内にmembers
を定義している記述があります。
前回の人の記述の続きから、以下をコピペしてプロパティに自分の情報を記述しましょう。
{
id: 'ここに GitHub ID',
displayname: 'ここに表示名',
bio: 'ここに簡単な自己紹介'
},
書き終わったら保存して、次のステップでcommit
します。
ターミナルを開いてgit commit -a -m "ここにコメント"
を叩きます。
コミットすることで、現在までの変更のスナップショットを撮って保存することができました。
次にその変更をgit push
コマンドでリモートリポジトリ(GitHub上のリポジトリ)へプッシュします。
プッシュすると、ローカルで行ったコミットがリモートリポジトリに送信されます。
実際に変更が反映されているか、自分のGitHub上のリポジトリを確認してみましょう。
プッシュできているのを確認したら、最後はいよいよプルリクエストです。
今回はコマンドラインツールではなくGitHubのサイト上でプルリクエストを送信します。
commit-mate プルリクエストへアクセスして、右上の「New pull request」をクリックします。