Java
Ruby
Python
JavaScript
C#

【Codewars】ブラウザでコーディングの基礎からトレーニングできるサイト (ブラウザでvimが使えて32種類のプログラミング言語に対応。4000個以上の問題が投稿されています!)

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

この前【CodinGame】をご紹介しましたが、簡単な問題が少ないのと問題を検索する方法がないので、毎日ドリルのようにトレーニングするのには【CodinGame】はちょっと不向きだと思います…ので、今回は Codewars を紹介したいと思います。

CodinGame については 【CodinGame】ブラウザでコーディングの基礎からトレーニングできるサイト (疑似ゲーム開発環境を使って学べます。解答は25種類のプログラミング言語から選択して記述可能!) の方をご覧ください(ゲーム開発風の演出があるので、まずは 【CodinGame】 の方を体験していただいた方が楽しいかもしれません。それで楽しめたら、こちらの記事も併せてお読みいただくのも良いと思います)。

Codewars では、32種類 (BF, C, Clojure CoffeeScript, C++, Crystal, C#, Dart, Elixir, Erlang, F#, Go, Groovy, Haskell, Java, JavaScript, Kotlin, Lua, Nim, Objective-C, OCaml, PHP, Python, R, Ruby, Rust, Scala, Shell, Solidity, SQL, Swift, TypeScript) のプログラミング言語がサポートされています。但し、CodinGame と異なる点は、問題によって対応している言語と対応していない言語があるところです。(そのため、問題投稿の敷居が下がって問題数が多いのかもしれませんね) また、一度解いた問題を別の言語を使って(繰り返し)チャレンジすることができます。よりよいアルゴリズムや実装方法を思いついたら再挑戦するのも良いでしょう。

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

1. Mac/Linux/WindowsのWebブラウザから https://www.codewars.com/ にアクセスします

image.png

2. 簡単なテストに答えます

image.png

3. 自分の GitHub アカウントに接続して必要事項を記入します

image.png

image.png

4. GitHub アカウントに接続した場合の記入例

image.png

5. 学習したいプログラミング言語についての選択を行う (言語選択はここでは変更しない)

image.png

6. サインアップが終了し https://www.codewars.com/dashboard に移動します。

image.png

image.png

7. 問題(Kata)の一覧画面を眺めてみる

image.png

image.png

8. チャレンジする問題(Kata)を選択する

image.png

9. 問題の説明を読みトレーニングを開始する

image.png

10. IDE (解答作成・テスト実行画面)

この記事では JavaScript を選択した場合の例をご紹介していますが、Codewars で C# を使う場合のコツとして、Console.WriteLine() でなく Console.Error.WriteLine() を使わないとデバッグ出力が確認できないという点があります。この点に留意ください。尚、Console.Error.WriteLine() を含めたままでは(テストは成功しますが)全体としてエラーとみなされてしまいますので、デバッグが済んだら、コメントアウトするか削除してください。

image.png

凡庸な解答例
function solution(number){
  console.log("number=" + number);
  let sum = 0;
  for (let i=1; i<number; i++) {
    console.log(i);
    if ((i % 3 === 0) || (i % 5 === 0)) sum += i;
  }
  return sum;
}

11. ソースコード完成⇒本テスト実行

image.png

image.png

12. 達人のコード(自分以外の人の解答)をみることができます

@yoskeoka さんによれば
下図のスクショにある「良質なコード」では:

  • 与えられる自然数が1000万とかになったときでも計算量が増加しないで、一瞬で計算できる
  • 等差数列の和の公式を適用している

ということになるとのことです。
(@yoskeoka さんコメントありがとうございました。)

image.png

13. 7に戻って問題(Kata)を探します

または、https://www.codewars.com/dashboard (画面左上のメニューから「HOME」を選択) に戻っておすすめの問題を解くのもよいでしょう。

最後に

タイトルの「ブラウザでvimが使えて」というのは「10. IDE (解答作成・テスト実行画面)」のスクショにあるキーバインドがvimになることを指しているんですが…盛りました!!

問題文を日本語訳してみるプロジェクト!!w (どんどん問題がチャレンジングになりますよ~!)