クリアメモリ

プログラミングやモーショングラフィックス、便利なアプリケーションなど雑多に記録するブログ

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

f:id:clrmemory:20170422182859p:plain 

先日、CODEPREPがリニューアルされるという内容の記事を紹介しましたが、本日ついにCODEPREPがリニューアルされていました。

 

サイトレイアウトが変わっており、ブックの追加もあるようなので、実際にCODEPREPを利用して変更点を探してみました。

 

 

はじめに

 

CODEPREPというサイトは、無料で利用することができ、穴埋め形式でプログラミングを学ぶことができるサービスになっています。

 

リニューアル前のCODEPREPに関する記事や、リニューアルに関した記事は過去に紹介しているので、そちらから確認してみてください。

 

https://clrmemory.com/web/programming-site-codeprep/

 

https://clrmemory.com/web/codeprep-renewal/

 

CODEPREPがリニューアル!

 

本日(2017/02/01)CODEPREPがリニューアルされていました。

 

CODEPREP

 

リニューアル版公開と同じタイミングで、ブックの追加などもあったようです。

ブックの追加については後述。

 

 

私自身、CODEPREPは新しい言語に触れてみる時や、基本を学び直したい時などに利用していました。

また、言語が自分に合っているかなどを試す時にも使えると思います。

 

しかもそれらを無料で行うことができたため、大変気に入っておりました。

 

 

ですが、私はCODEPREPのブックを全て完了させていたので、やることがなくなってしまったんですよね。

そこで、発見したのがリニューアルの通知です。

 

以下から変更点などについて軽く見ていきましょう。

 

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

 

CODEPREPのリニューアルに伴って、いくつかサイトレイアウトにも変更がありました。

 

 

まず、トップページがこちらなのですが、「手を動かして学ぶプログラミング」とあるように、CODEPREPとはどんなサービスなのかがわかりやすく、また興味を惹くレイアウトになりましたね。

 

ちなみにリニューアル前はこちら

 

 

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

 

学習できるブックを確認するページもリニューアルされていました。

 

 

このように、リニューアル前に重宝されていたフィルタ機能などはそのままに、見た目的にはシンプルなものになりましたね。

 

 

こちらはリニューアル前のレイアウトですが、見て分かる通り「言語ごとのフィルタ」が追加されています。

また、検索窓なども追加されているため、より自分が学習したいブックを探しやすくなりましたね。

 

 

検索窓の下にある「並び順」項目ですが、こちらは検索時の並べ替えになっているようです。

検索していない状態で、並び順を変更しようとしても機能しませんでした。

 

レベル制がなくなった

 

これまでのCODEPREPでは、チャプターをクリアするごとに一定数の経験値が取得でき、レベルアップすることができていました。

 

 

ただ、レベルが上がるとどうなるというわけではありません。

そのため、廃止したのでしょうか。

 

個人的には、好きだったのでちょっと残念でした。

 

ブックの追加

 

実際に追加されたブックは「2種類」

加えて基本編のブックが幾つかリニューアルされたようです。

 

 

追加された項目には、このように「NEW」マークが表記されているのですぐに見つかると思います。

 

 

ちなみに学習済みのブックには%表示で進捗を確認できました。

 

 

アカウントが同じであれば、リニューアル前の完了数を引き継げるようです。

 

ブック追加の頻度などはどうでも良いですが、やはり新しい学習項目が追加されると嬉しいですね。

そこで、早速追加された「HTMLとCSSで作るWeb名刺」を学習してみました。

 

実際に使ってみた

 

実際にCODEPREPのブックから「HTMLとCSSで作るWeb名刺」を選んで学習してみました。

 

学習したいブックを選択すると、以下のようなウィンドウになるので早速問題を解いていきましょう。

 

 

このように、左側に問題とヒント、右上部にエディタ(解答欄)、右下部に実行結果が表示されます。

 

また、左上部にあるボタンから、学習したいチャプターを選択できます。

 

 

リニューアル前に比べて、慣れていない人でも直感的に使えるようなレイアウトになりましたね。

 

ちなみに完成したのがこちら

 

 

やはり、何かを作りながら学べるというのは楽しいですね。

 

Tipsが追加

 

先ほど紹介した学習ページの左側に「HINT」と「TIPS」という項目がありました。

リニューアル前を知っている方なら分かると思いますが、ヒントはほぼ答えに近いヒントを確認できます。

 

 

そのため、分からない問題があっても詰むことはないです。

 

 

この項目の中にTIPSと言うものが追加されていました。

(多分リニューアル前はなかったと思います)

 

 

ヒントが答えに近いのに対して、TIPSは解説に近い内容になっていました。

こちらのTIPSは、全ての問題に付いているわけではないようです。

 

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

 

リニューアル前は、ユーザーが質問や意見を出し合う場だった「ディスカッション」ですが、こちらが問題ごとに表示されるようになったようです。

 

 

こちらは、はじめてのHTMLについているコメントです。

チャプターごとではなく、ブックごとなので注意してください。

 

まとめ

 

今回CODEPREPがリニューアルされたことで、よりいろいろな物を作りながらプログラミングを学べるようになりました。

 

今後どうなるかはわかりませんが、これらが無料で利用できるため、

 

プログラミング初心者

言語を学び直したい

別の言語に触れてみたい

 

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

 

 

ではまた。

新着記事