【CodinGame】ブラウザでコーディングの基礎からトレーニングできるサイト (疑似ゲーム開発環境を使って学べます。解答は25種類のプログラミング言語から選択して記述可能！)

2019/02/15: [『CodinGame はBOT(AIプログラム)でバトルするのが正しい楽しみ方かもしれません』](https://qiita.com/javacommons/items/b178c924199d1a6d524d) という記事を新たに書きました。宜しければ、こちらも併せてお読みください。


# 25種類のプログラミング言語を使ってテストファーストの開発スタイルを身に着けることができます。

* ゲーム(または「疑似ゲーム開発環境」)でプログラミングを勉強できるサイトです。25種類のプログラミング言語に対応しています。複数の言語が使えるようになりたい方におススメです。テストを実行するとゲームのグラフィックが動くのでコーディング・デバッグ作業が楽しいです！

* 解答に使うプログラミング言語は、C#, C++, Java, Javascript, Python3, Bash, C, Clojure, Dart, F#, Go, Groovy, Haskell, Kotlin, Lua, ObjectiveC, OCaml, Pascal, Perl, PHP, Python2, Ruby, Rust, Scala, Swift, VB.NET の中から自由に選べます。また、一度解いた問題を別の言語を使って(繰り返し)チャレンジすることができます。

* 留意していただきたい点は、このサイトの問題はパズルとして提供されていて、日々のプログラミングの勉強用としてはベストではないかもしれないというところですね。問題数もそんなに多くはありません。プログラミングのドリルとして使いたい場合は、[【Codewars】ブラウザでコーディングの基礎からトレーニングできるサイト (ブラウザでvimが使えて32種類のプログラミング言語に対応。4000個以上の問題が投稿されています！)](https://qiita.com/javacommons/items/7c473cda7825ab99e08c) の方をお奨めします (*ただし、これは 2019/02/14時点での私の個人的な意見です*)。

**[CodinGame](https://qiita.com/javacommons/items/86efba2d0ce6b2a21fb9) はブラウザ上で(自分のマシンに開発環境がなくても)コード作成・デバッグ・(問題作成者が提供する)テストの実行がワンボタンクリックでできて、「正解であるとお墨付きがもらえた時点で解答を提出できる」という特徴があります。(なので、ラクチンで安心です。また、[Codewars](https://qiita.com/javacommons/items/7c473cda7825ab99e08c) もその点は同じです)**

# 1. CodinGameサイトのPRACTICE画面

Mac/Linux/WindowsのWebブラウザで [https://www.codingame.com/training](https://www.codingame.com/training) にアクセスします。最初に、Googleアカウントを使ってサインアップします。画面右上の「SIGN UP」をクリックします。

* 【サイトの説明文】CodinGame is a challenge-based training platform for programmers where you can improve your coding skills with fun exercises.

![image.png](https://qiita-image-store.s3.amazonaws.com/0/140610/25e45549-22cb-4842-80c3-36b3188ab3b1.png)

# 2. サインアップ

![image.png](https://qiita-image-store.s3.amazonaws.com/0/140610/2b683750-a695-7938-6890-f195db9a634b.png)

 # 3. 最初にやるトレーニングを位置づける

![image.png](https://qiita-image-store.s3.amazonaws.com/0/140610/ef5ee4f1-faa4-8411-2940-c3837ea2d53d.png)

# 4. トレーニングに関する情報をチェックする

![image.png](https://qiita-image-store.s3.amazonaws.com/0/140610/defe1dab-2a9a-cc37-043b-a26281d243df.png)

# 5. 問題(THE DESCENT)の画面を開く

一覧から THE DESCENT の画像をクリックして問題の説明画面に飛びます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/140610/a484e177-e5be-389a-d90e-56e7f02fc866.png)

# 6. IDE(解答画面)でコーディング・テストをする

解答に使うプログラミング言語は、C#, C++, Java, Javascript, Python3, Bash, C, Clojure, Dart, F#, Go, Groovy, Haskell, Kotlin, Lua, ObjectiveC, OCaml, Pascal, Perl, PHP, Python2, Ruby, Rust, Scala, Swift, VB.NET の中から自由に選べます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/140610/102db344-d960-5484-a56f-01001413cbd7.png)

# 7. 説明を読んでみる(コードを先見ておくとよいかも！)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/140610/76dab083-ea98-6849-6fb1-f1bd3ba6d4ae.png)

# 8. コードエディタの初期ソースコードを見る

* このトレーニングはサーバーサイドで処理されるロジックを記述しますが、初級の課題ではデーターのやり取りが「標準入力」と「標準出力」を用いて行われます。デバッグは(Javascriptの場合は) printErr(X); を用いて標準エラー出力に書き出すことで行えます。

* 13行目で `parseInt(readline())` が8回呼ばれて、mountainH という変数に高さが入りますが捨ててますね、値を。19行目では、`print('4');` で無条件に４(5番目という意味になりますね)を出力しています。

* この問題は、そんなにチャレンジングじゃないので(?)、IDEの使い方の説明のために解いちゃいます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/140610/7b11b5f4-8469-26ec-6d32-987affe80ee6.png)

# 9. デバッグ文を追加して実行する(解いてないのでテストは失敗します)

* デバッグ文で表示させているのと同等の出力は左下のペインを上方向にスクロールしてみれば確認できます。(あくまで、printErr() の使い方の説明ということで)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/140610/f12cf8a9-50d6-852f-6612-e4b89fa8505a.png)

# 10. テストが全て通ったら「提出」！

![image.png](https://qiita-image-store.s3.amazonaws.com/0/140610/7f0dc0d4-03e8-9b3e-8dae-bb1e76fa0ed7.png)

# 最後に

CodinGameサイトでは、他のユーザーと競争するマルチプレイヤーモードもあります。
英語の勉強と、C#, C++, Java, Javascript, Python3, Bash, C, Clojure, Dart, F#, Go, Groovy, Haskell, Kotlin, Lua, ObjectiveC, OCaml, Pascal, Perl, PHP, Python2, Ruby, Rust, Scala, Swift, VB.NET でのロジック開発の練習ができるので得意な言語からチャレンジを開始してみてはいかがでしょうか？

* 一回解いた問題を別のプログラミング言語でチャレンジしなおすこともできます。再度チャレンジするには [https://www.codingame.com/training](https://www.codingame.com/training) にアクセスした上で下図の手順で解答済みの問題にアクセスできます。

* Javascriptに関する情報を求めて、海外のサイトの記事をみていて見つけたサイトですが、他にも紹介したい内容があるので、もし CodinGame について新たな発見があったらまた記事を書きますね！

![image.png](https://qiita-image-store.s3.amazonaws.com/0/140610/a615b6ec-6274-2964-ea87-6ff07012275f.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/140610/184f13e7-9747-e8a1-e0a0-f8f26c7a93a2.png)

<hr />

2019/02/15: 冒頭にも書きましたが、[『CodinGame はBOT(AIプログラム)でバトルするのが正しい楽しみ方かもしれません』](https://qiita.com/javacommons/items/b178c924199d1a6d524d) という記事を新たに書きました。C#でコードを書きましたが、コメントを書いているので他の言語で利用する際にも役立てることができると思います。宜しければ、こちらも併せてお読みください。