paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

ゲームで楽しく遊ぶように学べた!プログラミング学習サイト14選

f:id:paiza:20161206123300j:plain
Photo by Predi
f:id:paiza:20140916135428p:plainこんにちは。谷口です。

プログラミングを独学で学習している初心者の方の中には、「なかなか一人で勉強を継続することができない……」「なるべく手を動かしながら楽しく勉強したい」と思われている方もいると思います。

また、プログラミング経験者の方でも、未経験者の方や子ども達にプログラミングを教えることになって「何から教えたらいいのだろう」「苦手意識を持たせたくないな……」という状態の方もいるでしょう。

今回は、初心者でもゲーム感覚で楽しくプログラミング学習ができるサービスをご紹介いたします。


現在paizaではプログラミング×異世界ファンタジーRPGロジックサマナー~閃光の召喚プログラマを公開しています!

主人公はひょんなことから異世界に迷い込んだITエンジニア。異世界では、なんとプログラミングしたコードが召喚獣を呼び出すための詠唱魔法だった!?召喚魔法(※プログラミング)が使える主人公は急に世界を救う伝説の召喚士として盛大に歓迎されてしまい……

あなたのプログラミングスキルを駆使しながら、世界に平和を取り戻しましょう!

■ゲーム感覚でプログラミングが学習できるサイト

◆FIGHT CODE

http://fightcodegame.com/
対応言語:JavaScript
f:id:paiza:20150916141712p:plain
FIGHT CODEは、JavaScriptでロボットの動作を記述して、他のユーザーのロボットと対戦することができます。Githubアカウントでログインするだけで、自分のロボットへの命令を書くことができます。プログラミングで他のユーザーと戦えるというのは楽しそうですね。

◆CodinGame

http://www.codingame.com/start
対応言語:複数(JavaPHPRubyなど20言語)
f:id:paiza:20141014143648p:plain
f:id:paiza:20141014143759p:plain
CodinGameのグラフィックはプログラミング学習のためのサイトとは思えないクオリティですね!言語もJavaJavaScript、Go、C、C++C#、ObjectiveC、PHPPerlPythonRuby……などなど20言語に対応しています。

◆RubyWarrior

https://www.bloc.io/ruby-warrior#/
対応言語:Ruby
f:id:paiza:20141014143941p:plain
RubyWarriorはRPG方式のゲームでRubyを学ぶことができます。ファミコンのようなドット絵とBGMがめちゃくちゃかわいいんです!Rubyの勉強が少し進んで、コードの書き方がちょっとは分かってきて、業務以外に家でも何か動かせたらな~という人にはうってつけではないでしょうか。かわいいし。個人的にはかなり好きなプログラミングゲームです。

◆CODECOMBAT

http://codecombat.com/
対応言語:JavaScript
f:id:paiza:20141014144421p:plain
フルボイスの本格RPGJavaScriptが学べるCODECOMBATです。アニメ絵のグラフィックがきれいで、こちらも学習サイトとは思えませんね。コーディングをしながらゲームを進めるモードだけでなく、自ら書いたコードでゲームを作れるモードもあるので、初心者からやりこみたい方まで幅広くおすすめします。

◆paiza オンラインハッカソンVol.6 女子高生プログラマーの大バトル ~コボール文明の逆襲~

https://paiza.jp/poh/joshibato
対応言語:JavaPHPRubyPythonPerl、C、C++C#JavaScript
f:id:paiza:20150831131102j:plain
paizaは9月1日(月)より、「paizaオンラインハッカソンVol.6 女子高生プログラマーの大バトル ~コボール文明の逆襲~」を開催しております。こちらはマンガ+プログラミングで構成されたオンラインマンガとなっております。

好きな女子高生プログラマーを選ぶと、プログラミング問題が出現します。問題に正解すれば、女子高生と一緒に世界を救うことができるかも!?選択キャラクターによって、問題やその後の展開は変わり、問題を解くとその場で採点されて結果が分かります。


ここまでは初心者と言ってもある程度コーディングができる人向けのサイトでしたが、次からは全くのプログラミング未経験者の方でも学べるビジュアルプログラミング言語の学習サイトをご紹介します。

ビジュアルプログラミング言語とは、コードを書かなくても、視覚的な操作のみでプログラミングをしてくれるプログラミング言語のことです。Webブラウザ上でドラッグ&ドロップの操作をするだけで動かせるものが多く、最初のプログラミング体験としては最適です。

■大人も楽しめるビジュアルプログラミング学習サイト

◆コロコロゲーム工作(クラフト)ブロック

http://corocoroblock.jp/
f:id:paiza:20150904124059p:plain
他のサイトと同様にブロックを組み合わせるビジュアルプログラミング言語ですが、ブロックを組み合わせてコロコロコミックの人気キャラクターを動かしたりゲームを作ったりすることができます。ソースボタンをクリックすれば実際のJavaScriptのコードを見ることもできます。

◆Flappy Code

http://studio.code.org/flappy/1
f:id:paiza:20141014151338p:plain
「米国の全ての学校にプログラミングの授業を導入しよう」とするNPO団体Code.orgのサイトでは、人気ゲーム「Flappy Bird」でビジュアルプログラミングの学習ができます。

コードを表すブロックを組み合わせて問題を解いていく中で、最終的には自分で設定したゲームを作って公開することができ、友達に遊んでもらうこともできます。

実際に、プログラミング経験の全くない弊社社員にも、こちらのFlappy Codeを使ってビジュアルプログラミングを学習してもらい、ゲームを作成するところまでやってもらいました。
paiza.hatenablog.com

◆Lightbot

http://lightbot.com/hocflash.html
f:id:paiza:20141014151624p:plain
矢印やジャンプなどのマークを組み合わせて、Light Botというロボットを動かすゲームです。レベルが上がると、メソッドを作ったりループが出てきたり、プログラミングの基礎的な概念も学べるようになっていきます。

◆Code monkey

http://www.playcodemonkey.com/
f:id:paiza:20141014151742p:plain
橋を渡ったり障害物を避けたりしながらサルを動かして、遠くにあるバナナを取らせてあげるCode monkeyです。かわいい。バナナに到達するとサルが喜んでくれるんですが、失敗すると誰にも拾われないまま腐ったバナナが表示されるのがシュールです。

◆Tynker

http://www.tynker.com/hour-of-code/puzzle
f:id:paiza:20141014152000p:plain
ビジュアルプログラミング学習ができるゲームをいろいろ試せるサイト、Tynkerです。

個人的にはLost in Spaceから始めてみるのがお勧めです。最初はどこかの星に不時着した宇宙飛行士を動かすだけですが、ロケットに乗って脱出したりするうちに、for文やwhile文の概念が出てきます。


プログラミングをゼロから学びたいという方は、まず上記のようなサイトでプログラミングの概要を掴むと良いと思います。それから、下記のような学習サイトで実際にコードを書く勉強をしていけば、ゲーム系学習サイトで遊べる程度にはプログラミング能力が身についていくはずです。

■いろんな方法でコードの書き方が学習できるサイト

◆ドットインストー

http://dotinstall.com/
f:id:paiza:20141014152641p:plain
コードの書き方や環境設定のやり方、サーバ構築の仕方など、Webサービスを作るための1から10を動画で公開してくれているサイトです。まず最初にこちらで「手軽にプログラミングができるJavaScriptを覚えよう」、「Webサービスが作れるPHPを勉強してみよう」などを見てみるのが良いかと思います。

◆CODEPREP

https://codeprep.jp/
f:id:paiza:20141014152835p:plain
表示されるプログラムに対し、穴埋め式で記述をする問題が出ます。ヒントも出ます。実行環境が用意されており、実行結果がすぐに分かるので、環境設定に手間取らずに学習ができます。

AtCoder

http://atcoder.jp
f:id:paiza:20150413135050p:plain
AtCoderは日本語でプログラミングコンテストを開催しているサイトです。

AtCoder Beginner Contest」という初級者・中級者向けのプログラミングコンテストが定期的(月1~2回ペース)で開催されています。過去問にはスライドによる解説もついておりますので、「ネットで公開問題とか見ても、何でそういう答えになるのかがよく分かんないんだよな……」といった方にも大変勉強になるかと思います!

◆paizaラーニングの学習動画(Ruby,PHP)

https://paiza.jp/learning
f:id:paiza:20150225112328p:plain
paizaには、オンラインでプログラミング学習ができるパイザ・ラーニングという無料コンテンツがございます。動画でRubyPHPを使ったプログラミングが学習できるレッスンもありますので、ぜひごらんください!


初心者でも楽しく学べるプログラミング入門サービス | paizaラーニング

プログラミング未経験者の方向けの動画レッスンもありますので、「本当にプログラミングを全くやったことがないんだけど、大丈夫なの?」という方でも安心してチャレンジしていただけます。

■まとめ

プログラミング未経験者の方でも、ビジュアルプログラミングから初めて、実際に動画や解説を見ながらコーディングをしていけば、ゲーム系学習サイトでもある程度プレイできるような力がついてくると思います。

何も知らない状態から独学でプログラミングを勉強していくというのは、なかなか大変なことだと思います。

本を読んでいるだけではよく分からない……何か作ろうにも環境設定の段階でつまずいてしまう……という人は、まずこういった作ったものをすぐに動かせるタイプの学習サイトを使うこと、そして自分でコードを書きながら学んでいくと、無理なく学習を進められてよいかと思います。

さらに、勉強してある程度の基礎が身につきましたら、ぜひpaizaでご自分のスキルをはかってみてください!


paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

↓詳しくはこちら
paiza.jp

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
paiza.jp
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

ITプログラマ・エンジニア向け転職・就活・学習サービスのpaiza


プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編