先日ついにAtCoder Problemsにコミットすることができました！
AtCoderユーザーでAtCoder Problemsを使用していない人はほぼいないと思われます。
AtCoder Problemsは個人開発されているwebサイトで、無料で使わせてもらえることにとても感謝しており、何かしらの形で貢献したいとずっと思っていました。
最近ではAdminのkenkooooさんのGitHubにSponsorとして課金できるようにもなりましたが、折角webアプリ開発の勉強をしたので、何かしらの機能を実装してContributeしてみたい！！と思い、チャレンジしてみることにしました。
同じような気持ちの方は少なくないと思うので、コミットするまでの流れを書いていきます。
事前準備
AtCoder ProblemsはフロントエンドをTypeScript & React、バックエンドをRustで書かれています。
フロントを少しいじるくらいの実装であれば初心者にもできると思うので、TypeScriptとReactの勉強を少しします（前提となるHTMLとCSSも軽く触っておきましょう）。どちらも公式チュートリアルが充実しているので検索して勉強します。
追加したい機能が決まっていて、バックエンドの改良も必要な場合は、Rustを勉強して自分で実装するか、GitHubのissueをたてて相談してみるといいかもしれません。
コミットの流れ
環境構築と準備
こちらに簡単な流れが説明されています。
実際は本家のリポジトリから自分のリポジトリにforkしてから、自分のリモートリポジトリをgit cloneになると思います。
上記の記事で書かれているように、yarn start してブラウザからlocalhost:3000でサイトを確認できれば、あとはコードを編集するだけです！
余裕がある方はgit branchで適切に名前をつけてブランチをきっておくと、どのような機能追加なのかわかりやすくなって良いと思います。
何を実装するか
開発に貢献したい！でも特にアイデアがないという方はIssuesを確認しましょう。
色々なアイデアやバグ報告などが記載されています。
一覧を眺めてみて、自分にできそうなやつや、この機能自分も欲しいと思うようなやつを探します。
もしすでに自分で追加したい機能がある場合は、Issueを立てて相談してみると良いと思います。
私は以下のIssueに目が止まりました。（終わった後にスクショしたのでClosedになっていますが、Openのものを探しましょう。Closedはもう終わった課題です。）
何度かAtCoder Problemsのバチャをやったことがありますが、自分の順位を探しにくいなと思っていました。
また、実装もそれほど難しくならないだろうなと予想されました。（すでに順位表が実装されているので、自分の行をピックアップして一番上に追加するだけのはず）
あるいはKaggleのように自分の位置まで自動でスクロールするボタンを実装するのでも良いかなと思いましたが、とりあえずはIssueどおり、一番上に自分の行を表示させるのみとしました。
実装する
フロントエンドの実装はだいたいページ別にファイルが分けられているので、ディレクトリの中を漁りつつ、どのファイルをいじれば良いのか探します（今回だとVirtual Contestに関するファイル）。
編集した後はyarn startして、うまく実装できているか確認しましょう。
今回私が実装した機能は、ロジック的にはABCのB問題くらいで、追加した行数も50行くらいです。
もちろんTypeScriptやReactの作法を勉強する必要はありますが、0からワーシャルフロイドやダイクストラを勉強して実装するよりかははるかに簡単かなと個人的には思います。
ログインが必要な場合
Virtual Contestの一部機能など、AtCoder Problemsにログインした状態でないと機能が確認できないものがあります。
ただ、localhostでページを表示していても、ログインすると本家のドメインに飛んでしまうので、以下のように対応します。（kenkooooさんに質問したらとても丁寧に教えてくれました。）
pushしてpull request
実装が完了したら、forkした自分のリモートに一度pushします。
pushした後、本家のリポジトリにpull requestをだします！
メッセージなどは、先人たちのpull request（closed）をながめながら、なるべくどのような機能の追加なのかわかりやすいように書きます。フロントの改良の場合はスクショを貼っておくと良さそうです。
また、この際コメント欄にresolves #(issue番号)のように書いておくと、対応するissueがすぐわかってリンクも貼られる＆プルリクがマージされた際に自動でissueがclosedになるなどいいことづくめなのでぜひ活用しましょう。
追加で対応する場合
勇気をだしてプルリクをだしたあと、この辺をもうちょっと変えてみては？というアドバイスをいただいた場合、どうしていいのかよくわからなくなります。
今だしているプルリクを一度引っ込めてもう一度出すのか？などわからないことだらけですが、実はとってもシンプルです。
ローカルに戻ってプルリクを出しているブランチで追加実装してコミットします。その後普通にプッシュします。そうすると勝手にプルリクの中身にも追加のコミットが反映されます。便利ですね。
何回かキャッチボールをした後、無事マージされればミッションコンプリートです！！
私の無様なプルリク
参考までに私のプルリクのリンクを貼っておきます。
初心者が四苦八苦している姿と、そんな私に丁寧にアドバイスをくれるkenkoooさんの図がみられます。
開発に興味はあるけどなんかよくわからなくて怖いという方の心理的ハードルが少しでも下がればと思います。
まとめ
AtCoder Problemsにプルリクを出してマージしていただきました。
ちょっとした実装なら初心者でも貢献できることがあります。
最近全然精進していないのが顕著にratingにでてきているので、精進も頑張ります
コメント