【binarysearch.io】Codewars と併用すると良いかもしれないオンラインプログラミング学習サイト (Master algorithms together)

Twitter でのつぶやきで知ったオンラインのプログラミング学習サイトです。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/%E6%9C%9D%E3%83%80%E3%82%A4%E3%82%B8%E3%82%A7%E3%82%B9%E3%83%88?src=hash&amp;ref_src=twsrc%5Etfw">#朝ダイジェスト</a><br><br>競技プログラミングとかリートコードよりもまずはcodewarsやこういうのでまったりやってからだよな。<br><br>Binary Search | Master algorithms together<a href="https://t.co/jvb7UhSdym">https://t.co/jvb7UhSdym</a></p>&mdash; Alyson //东京黑客/แฮกเกอร์โตเกียว (@Alyson__T) <a href="https://twitter.com/Alyson__T/status/1222284398889881600?ref_src=twsrc%5Etfw">January 28, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

* Java, Ruby, Python, C++, JavaScript に対応しています (2020/02/20現在)。
* チャットしながら複数人で解答を作っていくという醍醐味があるみたいですが、今回は一人で(他人のチャットに邪魔されずに)学習する方法をお教えします。
* [Codewars](https://qiita.com/javacommons/items/7c473cda7825ab99e08c) よりも問題の質が安定しているという印象を受けました。(公式が作成した問題のみ)
* 競技プログラミングではないので、プログラミング学習のドリルとして使う、プログラミングのレベルアップに使う等の用途に向いていると思います。

#1. https://binarysearch.io/ にアクセスし「Get Started」をクリックしてサインアップを行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140610/56bcee0e-7526-97f1-b3fc-f54b3f5a176f.png)

#2. 「Full Name」「Username」「Email」「Password」を入力して「Sign up for Binary Search」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140610/5f5cfd75-d18a-962a-451c-c9788ebe4880.png)

#3. 2で登録した「Email」に登録確認用メールが送信された旨が表示されるので、メールアプリを開いて確認用のリンクをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140610/f9a4e7a0-dca0-2115-585a-dc2a2d915a6e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140610/56daaae1-ab53-e3b0-12ab-056d1aab596f.png)

#4. メールアドレスの確認が完了したら「Start」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140610/27c5704b-c38f-9ccd-831b-f24db6c126b2.png)

#5. https://binarysearch.io/ のログイン後の画面が表示されます。問題を解くには「Create room」ボタンを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140610/6170f8ec-6349-6781-a308-0b10d004477a.png)

#6. Difficulty で問題の難易度を選びます。外国人の方からチャットで話かかけられたりしないように Capacity を「1 player」にしておく(または Open to public を Private にしておく)と良いかもしれません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140610/417262b2-fad5-1b26-b77c-13377868137f.png)

#7. room を作成したら「Start Room」ボタンを押して問題を開始します。(今回は Easy で作成しました)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140610/c359a539-9089-474f-2ebb-3a4110f80305.png)

#8. 「引数として与えられた配列の長さが１かどうかを返す」よう関数を完成させなさい、という問題です(注記：こんな簡単すぎる問題ばかりではありません)。解答言語としてJavaScriptを 選択しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140610/0986ff77-1f4a-5bc4-dcbb-ae91240b62d2.png)

#9. 解答を作成したら「Run▶」ボタンをクリックします。「Correct!」と表示されたら「Submit code」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140610/775a39b9-78b9-25ee-e21f-5c28c307d53c.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140610/f9322c9c-1758-885b-19a4-04de73f4ac91.png)

#10. 問題によっては、「Solution」というタブに解法・解説が提示されることがあります。(この問題は簡単すぎなので解説がないんだと思います)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140610/b4111f4b-d4c2-9ddf-20ff-5bac8b6fddcc.png)

#11. 別の問題を解くには「Start Room」ボタンを再度押して次の問題を開始します。部屋を抜けるには画面右上の×ボタンをクリックしてから「Leave」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140610/4c7d9119-9a11-f993-ffe2-16afb747af5c.png)

# 最後に
公式の問題ばかりなので(?)問題の質が安定している(均一)なのが良いですね。気になったのは同じレベルで学習を続けていると同じ問題が出てくることがあることですが、そのまま解いちゃえば良いので大きな問題ではないと思います。