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

目次

はじめに

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

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

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

この記事は

この記事はOSSプロジェクトに1回も貢献したことがない、初心者向けの内容になっています。ベテランの人は直接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
こんな画面↓↓が現れると思います。

image.png

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

image.png

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

ローカルにCloneしてくる

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

image.png

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

image.png

次はパソコンのターミナル(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

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

http://localhost:3000

image.png

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

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

GitHubのissueを見てみる

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

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

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

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

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

開けてみる

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

image.png

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

ラベルを見てみる

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

image.png

以下に対策サイトの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してくる項目で1度やっているはずです。

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

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