東京都 新型コロナウイルス対策サイトへの貢献方法を解説

目次

• はじめに
• この記事は
• Slackチャンネルへの参加
• 環境構築
  • GitHubリポジトリをFork
  • ローカルにCloneしてくる
  • yarnによる環境構築
    • yarnのインストール
    • 必要なパッケージのインストール
    • サーバー起動
• GitHubのissueを見てみる
  • 開けてみる
  • ラベルを見てみる
• 気になったissueを改善してみる
• 自分で改善したものをプルリクエストする
  • ForkしたリポジトリにPush
  • プルリクエストを送る
    • テンプレートに沿った文章を書く
  • マージされるの待つ
• その他の注意事項
• さいごに

はじめに

この記事を見ている人は少なからず東京都の新型コロナウイルス対策サイトへの貢献に興味を持っているのではないでしょうか。

「ガチガチのプロしか参加しちゃいけないんでしょ？」
「OSSにプルリクなんて敷居高そう...」

そんなことありません！現に私は高校２年生ですが、対策サイトのGitHubのissueには私でもできそうな課題がいっぱいあります。数多くある課題から自分にできそうなものを選び、改善し、更新の依頼（プルリクエスト）を送るだけです。簡単でしょう？

この記事は

この記事はOSSプロジェクトに１回も貢献したことがない、初心者向けの内容になっています。ベテランの人は直接GitHubのリポジトリを見て頂いた方が速いと思います。

Slackチャンネルへの参加

対策サイトのコントリビューター（貢献者）たちが集まったコミュニケーション用のSlackチャンネルがあります。
分からないことの質問や新たな提案を気軽にすることができるので、参加した方が良いと思います。

参加リンクはこちらから↓
https://cfjslackin.herokuapp.com/
チャンネル名は #covid19

環境構築

対策サイトのプログラムを修正して、内容を確認したい時にいちいちどこかしらのサーバに上げていたら面倒くさいですよね。そこで、自分のパソコン内だけでの対策サイトの動かし方を解説します。

Gitのインストール、GitHubのアカウント登録は済んでいる前提で進めます。まだの方は以下の記事を参考にしてください。
自分用 Git For Windowsのインストール手順
【2019年1月現在】GitHubアカウント作成方法
Macの場合最初からGitがインストールされています。

また、ローカルでの構築だけでなく、自分の開発用サーバを本番と同じような環境（Netlify）にデプロイしたいというベテランの方がいれば、以下の記事が参考になると思います。

東京都新型コロナウイルス感染症対策サイトをforkしてnetlifyでdev環境を立ち上げる手順

GitHubリポジトリをFork

東京都 新型コロナウイルス対策サイトのGitHubページを開けてください。
https://github.com/tokyo-metropolitan-gov/covid19
こんな画面↓↓が現れると思います。

青色の線で囲ったForkボタンをクリックしてください。

しばらくすると、自分のアカウント上でForkしてきたリポジトリが作られていると思います。

ローカルにCloneしてくる

Forkしてきたリポジトリの画面に、（下の画像では）青色の線で囲ったClone or downloadというボタンが作られていると思います。

押すと何やらURLなどが書かれた小さい画面が出てくると思うので、（下の画像では）青色の線で囲んだところのボタンをクリックして、書かれているURLをコピーしてください。

次はパソコンのターミナル（Windowsならコマンドプロンプトという名前）を開いてください。そして、Cloneしてきたいディレクトリまでcdコマンドで移動し、以下のコマンドを打ってください。

$ git clone コピーしたGitHubのリポジトリのURL

そしたら自分のパソコンの中にGitHubにあるフォルダやファイルがすべてコピーされたと思います。

yarnによる環境構築

新型コロナウイルス対策サイトほどの規模になってくると、たくさんのパッケージを使用します。パッケージとは、ある機能を作るのが簡単にできるようにするために作られたプログラムの集まりみたいなものと思えばよいと思います。

そこで、多くのパッケージを管理してくれるパッケージマネージャがとても活躍します。
東京都新型コロナウイルス対策サイトでは、yarnというパッケージマネージャが使われています。
以下では、yarnを使った環境構築を解説します。
（実はDockerというものを使った方法もありますが、今回は導入がDockerよりも楽なyarnだけ解説します）

yarnのインストール

yarnの公式サイトを開き、yarnのインストールをしてください。
https://classic.yarnpkg.com/ja/docs/install/#windows-stable
Windowsの方はインストーラーを入れるだけ、MacOSの方はHomebrewを使えばすぐ終わると思います。

必要なパッケージのインストール

またターミナルを開きます。
先ほどGitHubからクローンしてきたものがあるディレクトリまで移動して、以下のコマンドを打ってください。

$ yarn install

そこそこ時間かかると思います。完了すると必要なパッケージがすべてインストールされます。

サーバー起動

ついにサーバーを起動させます。ターミナルで以下のコマンドを打ってください。

$ yarn dev

初回はビルドという作業をするのでかなり時間がかかると思います。ビルドが終わったら、以下のリンクにアクセスしてみてください。

やったー！対策サイトそのまんまが表示されましたね。

ここまでくれば環境構築はほぼ全て終了です。お疲れさまでした。

GitHubのissueを見てみる

いよいよ対策サイトに貢献する時です。

GitHubにはissueというものがあります。issueは日本語訳で課題です。

対策サイトの「こんな機能がほしい！」「こんなバグがあるから治してくれ！」という課題たちがissueに全て登録されています。

対策サイトのissueを見てみましょう。以下のリンクを開いてください。
https://github.com/tokyo-metropolitan-gov/covid19/issues

こんな感じになってると思います。
ここに対策サイトの課題が登録されています。

開けてみる

適当なissueを開けてみてください。以下のような画面が出ると思います。

この画面では、そのissueの概要を見たり、そのissueに対して質問できたりします。
issueに対しての質問や提案は自由に行えます。気になったことがあれば気軽に聞いてみましょう。

ラベルを見てみる

issueのタイトルを見てみてください。なにやら様々な色でgood first issueやらhelp wantedやらと書いてあります。これはラベルと言われ、そのissueの種類みたいなものです。

以下に対策サイトのissueにおけるいくつかのラベルを紹介します。
good first issue: 初心者にお勧めのissueです。
help wanted: 特別な注意が必要。
bug: 名前の通り、バグです。
improve: 改善提案
good first issueとhelp wantedとbugは優先度が高く、なるべくこれらのラベルがついたissueに対応すると尚良いです。improveは改善提案なので、必ず反映されるかどうかは分かりません。

気になったissueを改善してみる

先ほどのissue一覧から自分ができそうなのを選びましょう。

ここで重要なのが、やりたいissueが見つかったらコメントで「このissue私がやりたいです！」と意思表明をしましょう。
意思表明をしないと誰もまだこのissueをやってないと認識され、自分が作業している間に他の人がパパッとやってしまうかもしれません。

意思表明をしたら、さっそく実装です。
自分の得意分野を活かして、より良い物を作りましょう。

自分で改善したものをプルリクエストする

ついに、自分で改善したものを実際の対策サイトに「こういう変更をしたので更新してくだい」という依頼（プルリクエスト）を送ります。

ForkしたリポジトリにPush

自分のアカウントでForkしてきたリポジトリのURLをコピーしてきてください。環境構築編の、ForkしたリポジトリをCloneしてくる項目で１度やっているはずです。

そしたら、ターミナルを開いてプロジェクトのディレクトリまで移動し、以下のコマンドを打ちましょう。

$ git add .
$ git commit -m "ここは、自分がどのような変更したかを分かりやすく書いてください。"
$ git push コピーしてきたURL development

自分で変更したところが更新されたはずです。

プルリクエストを送る

Forkしてきた方ではなく、公式の対策サイトのGitHubページを開けてください。
そして、Pull Requestsというボタンをクリックしてください。以下の画像では青色の線で囲ってあるところです。

そしたら現在送られているすべてのプルリクエストが表示されたページが開きます。このページのやや右上にあるNew Pull Requestというボタンをクリックしてください。

以下の画像のようなページが開くので、青色の線で囲ったcompare across forksというところをクリックしてください。

これで自分のForkしてきたリポジトリを指定できるようになりました。
青色の線で囲ったところをクリックすると、いろいろなリポジトリのリストが表示されます。
ここで、自分のGitHubのユーザー名/covid19を選択してください。
下の画像で言うと赤色の線で囲った部分です。

そしたら緑色のCreate pull qequestというボタンをクリックしてください。
どのような変更をしたのか書くページが開くと思います。

テンプレートに沿った文章を書く

このプルリクエストは一体どのような変更を加えるのか、という文章を書きますが、対策サイトのGitHubではこれの書き方のテンプレートが用意されています。それは以下のようになっていると思います。

## 📝 関連issue / Related Issues
<!--
  ・ 関連するissue 番号を記載してください。 Issue 番号がない PR は受け付けません。
  ・ issueを閉じるとは関係ないものは#{ISSUE_NUMBER}だけでOKです🙆‍♂️

  ・ You can remove this section if there are no related issues
  ・ If the issue is related but doesn't close upon merge, you can just write - #{ISSUE_NUMBER} 🙆‍♂️
-->
<!--
  ・ Please specify related Issue ID. We don't accept PRs which has no issue ID.
  ・ If there's no reason to close the issue, just "#{ISSUE_NUMBER}" is OK🙆‍♂️
-->
- close {ISSUE NUMBER} 

## ⛏ 変更内容 / Details of Changes
<!-- 変更を端的に箇条書きで -->
<!-- List down your changes concisely -->

## 📸 スクリーンショット / Screenshots
<!-- スタイルなどの変更の場合はスクリーンショットがあるとレビューしやすいです -->
<!-- Changes in styles would be easier to review with screenshots! -->

関連issue: 全てのプルリクエストにおいて、必ずここで元のissueの番号を書く必要があります。
変更内容: どのような変更をしたか箇条書きで書いてください。
スクリーンショット: UIのスクショを貼ります。

issue番号については、改善したissueページのタイトルの右に#から始まる数字が書いてあると思います。これを#含め書いてください。

既に多くのプルリクエストがあります。他のプルリクエストの書き方を参考にして、より分かりやすく書きましょう。

書けたら緑色のCreate pull requestボタンをクリックしてください。これでプルリクエストは終わりです。お疲れさまでした。

マージされるの待つ

誰かが自分のプルリクエストの内容をコードレビュー（プログラムに何らかの問題がないかレビューすること）をして、マージ（変更内容を取り込むこと）されるのを待ちます。

もし無事マージされれば、これであなたも東京都 新型コロナウイルス対策サイトのコントリビューターの１人となります。

その他の注意事項

この記事では書ききれなかったけど、対策サイトへの貢献に際して非常に重要なことが公式のドキュメントに書いてあります。
必ず目を通しておいてください。

貢献の仕方
行動規範
Code for Japanの行動規範
Issue 番号の無いPRは禁止としました。

さいごに

最後までお読み頂きありがとうございました。
新型コロナウイルスの脅威が高まっている中、みんなで力を合わせて危機を乗り越えましょう。

ところで、これは言い訳ですが、筆者はこの記事を徹夜明けに書いています。つまりなにが言いたいかというと、どこかしらで支離滅裂なことを書いてそうなので、変なところがあればコメントで指摘して頂ければ幸いです。