【無料で学べるプログラミングサイト】CODEPREPがリニューアルされた!!

先日、CODEPREPがリニューアルされるという内容の記事を紹介しましたが、本日ついにCODEPREPがリニューアルされていました。
 
サイトレイアウトが変わっており、ブックの追加もあるようなので、実際にCODEPREPを利用して変更点を探してみました。

はじめに

 
CODEPREPというサイトは、無料で利用することができ、穴埋め形式でプログラミングを学ぶことができるサービスになっています。
 
リニューアル前のCODEPREPに関する記事や、リニューアルに関した記事は過去に紹介しているので、そちらから確認してみてください。
 

 

CODEPREPがリニューアル!

 
本日(2017/02/01)CODEPREPがリニューアルされていました。
CODEPREP
 
リニューアル版公開と同じタイミングで、ブックの追加などもあったようです。
ブックの追加については後述。
 
私自身、CODEPREPは新しい言語に触れてみる時や、基本を学び直したい時などに利用していました。
また、言語が自分に合っているかなどを試す時にも使えると思います。
 
しかもそれらを無料で行うことができたため、大変気に入っておりました。
 
ですが、私はCODEPREPのブックを全て完了させていたので、やることがなくなってしまったんですよね。
そこで、発見したのがリニューアルの通知です。
 
以下から変更点などについて軽く見ていきましょう。
 

トップページがリニューアル

 
CODEPREPのリニューアルに伴って、いくつかサイトレイアウトにも変更がありました。
 
20170515140741
 
まず、トップページがこちらなのですが、「手を動かして学ぶプログラミング」とあるように、CODEPREPとはどんなサービスなのかがわかりやすく、また興味を惹くレイアウトになりましたね。
 
ちなみにリニューアル前はこちら
20170515135845
 

ブックページがリニューアル

 
学習できるブックを確認するページもリニューアルされていました。
 
20170515140746
 
このように、リニューアル前に重宝されていたフィルタ機能などはそのままに、見た目的にはシンプルなものになりましたね。
 
20170515135843
 
こちらはリニューアル前のレイアウトですが、見て分かる通り「言語ごとのフィルタ」が追加されています。
また、検索窓なども追加されているため、より自分が学習したいブックを探しやすくなりましたね。
 
検索窓の下にある「並び順」項目ですが、こちらは検索時の並べ替えになっているようです。
検索していない状態で、並び順を変更しようとしても機能しませんでした。
 

レベル制がなくなった

 
これまでのCODEPREPでは、チャプターをクリアするごとに一定数の経験値が取得でき、レベルアップすることができていました。
 
ただ、レベルが上がるとどうなるというわけではありません。
そのため、廃止したのでしょうか。
 
個人的には、好きだったのでちょっと残念でした。
 

ブックの追加

 
実際に追加されたブックは「2種類」
加えて基本編のブックが幾つかリニューアルされたようです。
 
20170515140745
 
追加された項目には、このように「NEW」マークが表記されているのですぐに見つかると思います。
 
20170515140748
 
ちなみに学習済みのブックには%表示で進捗を確認できました。
 
20170515140746
 
アカウントが同じであれば、リニューアル前の完了数を引き継げるようです。
 
ブック追加の頻度などはどうでも良いですが、やはり新しい学習項目が追加されると嬉しいですね。
そこで、早速追加された「HTMLとCSSで作るWeb名刺」を学習してみました。
 

実際に使ってみた

 
実際にCODEPREPのブックから「HTMLとCSSで作るWeb名刺」を選んで学習してみました。
学習したいブックを選択すると、以下のようなウィンドウになるので早速問題を解いていきましょう。
 
20170515140753
 
このように、左側に問題とヒント、右上部にエディタ(解答欄)、右下部に実行結果が表示されます。
また、左上部にあるボタンから、学習したいチャプターを選択できます。
 
20170515140754
 
リニューアル前に比べて、慣れていない人でも直感的に使えるようなレイアウトになりましたね。
 
ちなみに完成したのがこちら
 
20170515140751
 
やはり、何かを作りながら学べるというのは楽しいですね。
 

Tipsが追加

 
先ほど紹介した学習ページの左側に「HINT」と「TIPS」という項目がありました。
リニューアル前を知っている方なら分かると思いますが、ヒントはほぼ答えに近いヒントを確認できます。
 
そのため、分からない問題があっても詰むことはないです。
 
20170515140749
 
この項目の中にTIPSと言うものが追加されていました。
(多分リニューアル前はなかったと思います)
 
20170515140750
 
ヒントが答えに近いのに対して、TIPSは解説に近い内容になっていました。
こちらのTIPSは、全ての問題に付いているわけではないようです。
 

ディスカッションが問題ごとに

 
リニューアル前は、ユーザーが質問や意見を出し合う場だった「ディスカッション」ですが、こちらが問題ごとに表示されるようになったようです。
 
20170515140756
 
こちらは、はじめてのHTMLについているコメントです。
チャプターごとではなく、ブックごとなので注意してください。
 

まとめ

 
今回CODEPREPがリニューアルされたことで、よりいろいろな物を作りながらプログラミングを学べるようになりました。
 
今後どうなるかはわかりませんが、これらが無料で利用できるため、

Point
プログラミング初心者
言語を学び直したい
別の言語に触れてみたい

 
といった方はぜひ利用してみてください。
 

 
ではまた。

おすすめの記事