読者です 読者をやめる 読者になる 読者になる

paiza開発日誌

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

初心者も楽しく勉強できる!ゲーム感覚でプログラミングが学べる15サイト

f:id:paiza:20161209203008j:plain
Photo by Blake Patterson

f:id:paiza:20140916135428p:plainこんにちは。谷口です。

初心者がプログラミングの勉強を始めるにあたって、独学でどう勉強したらいいか分からないという方も多いと思います。また、プログラミング言語の本を読んでみたけど難しくて…という方や、環境構築が大変で挫折したという方もいるのではないでしょうか。

今回は、そういった初心者だけど楽しく勉強したい!という方のために、ゲーム感覚で楽しくプログラミング学習ができるサイトを紹介していきます。


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

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

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

■このゲームで勉強ができるの?進化したプログラミング学習サイト

◆CodinGame

http://www.codingame.com/start
対応言語:複数(JavaPHPRubyなど20言語)

f:id:paiza:20141014143648p:plain

このCodinGame、学習サイトとは思えないグラフィックと内容で構成されています。

f:id:paiza:20141014143759p:plain

素晴らしいのが、対応言語の数です。JavaJavaScript、Go、C、C++C#、ObjectiveC、PHPPerlPythonRuby……などなど20言語に対応しているのです。

グラフィックはかっこいいし、ゲーム内容は作りこまれている上、エディタはVim/Emacsバインドにも対応しています。Webブラウザでこんなエディタを使えるのはすごいですね!

◆RubyWarrior

https://www.bloc.io/ruby-warrior#/
対応言語:Ruby

f:id:paiza:20141014143941p:plain

こちらはRPG方式のゲームでRubyを学べるRubyWarriorです。ファミコンのようなドット絵とBGMが非常にかわいくて懐かしい!

本などでRubyの書き方がちょっとは分かってきて、実際に家でも何か動かせたらな……でも何を作ろうか……という人にはうってつけではないでしょうか。

◆CODECOMBAT

http://codecombat.com/
対応言語:JavaScript

f:id:paiza:20141014144421p:plain

フルボイスの本格RPGJavaScriptが学べるCODECOMBATです。アニメ絵のグラフィックがきれいで、こちらも学習サイトとは思えませんね。

コーディングをしながらゲームを進めるモードだけでなく、自ら書いたコードでゲームを作れるモードもあるので、初心者からやりこみたい方まで幅広くおすすめします。

◆CheckiO

http://www.checkio.org/
対応言語:Python

f:id:paiza:20141014144603p:plain

こちらはPythonの学習サイト、CheckiOです。

アカウント登録の前に最初の問題が出され、それが解けなければアカウントすら作れない仕組みとなっている、非常に意識の高い学習サイトとなっております。ちなみに最初の問題は難しいものではありませんので、Python初心者の方でもそんなに心配はありません。

◆Code Babes

https://codebabes.com/
対応言語:複数(PHP、HTML、CSSなど)

f:id:paiza:20141014144747p:plain

なんとコーディング問題に正解すると、女の人がだんだん服を脱いでいってくださるという、けしからんもっとやれな学習サイトです。これは勉強も捗りますね。

◆paiza

http://paiza.jp/
対応言語:JavaPHPRubyPythonPerl、C、C++C#JavaScript

f:id:paiza:20141014173345p:plain

用意された問題を解くと、プログラミングスキルを6段階で評価してくれるサービスです。実行環境が用意されているので、すぐにコーディングする事が可能です。

そして、問題を解くと結果に応じてランクマスターバッジや言語マスターの称号がもらえたり、問題クリアトロフィーを集めることができます。

また、ストーリーに沿った問題を解くと、その場で採点がされるオンラインハッカソンもおすすめです。

paizaオンラインハッカソンLite「天才火消しエンジニア霧島~もしもPMおじさんが『丸投げ』を覚えたら~」
paizaオンラインハッカソンVol.2「女子大生とペアプロするだけの簡単なお仕事です!」
paizaオンラインハッカソンVol.1「新人女子の書いたコードを直すだけの簡単なお仕事です!」


ここまで読んで、「初心者って言ってもある程度コーディングができる人向けのサイトばっかりじゃねーか!」「俺はゼロからプログラミングの学習がしたいんだよ!」「子供にプログラミングの勉強をさせたいんだけどもっと簡単なサイトはないのか!」という方もいらっしゃるかもしれません。

プログラミングについて、全く知識がないところから学びたいという入門者の方は、まずビジュアルプログラミング言語の学習サイトに触れてみることをお勧めします。

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

■こんなに楽しい!大人も遊べるビジュアルプログラミング学習サイト

◆Flappy Code

http://studio.code.org/flappy/1

f:id:paiza:20141014151338p:plain

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

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

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

次回のブログでは、その模様をお送りいたします。

◆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文の概念が出てきます。

◆MOONBlock

http://moonblock.jp/

f:id:paiza:20141014152158p:plain

他のサイトと同様にブロックを組み合わせるビジュアルプログラミング言語ですが、ソースボタンをクリックすれば実際のJavaScriptのコードを見ることができるというのが、MOONBlockのすごいところです。


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

■実際のコードの書き方が学習できるサイト

◆ドットインストー

http://dotinstall.com/
対応言語:JavaScriptPHPRubyPythonJavaPerl、C、Node.js、HTML、CSS

f:id:paiza:20141014152641p:plain

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

◆CODEPREP

https://codeprep.jp/
対応言語:JavaScriptRubyPHPPythonRuby、HTML、CSS

f:id:paiza:20141014152835p:plain

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

◆CodeFactory

http://codefactory.jp/
対応言語:複数(JavaScript、HTML、CSSなど)

f:id:paiza:20141014152948p:plain

2014年10月にローンチしたばかりの、さまざまなアプリの作り方が公開されているサービスです。初心者でも自分の作りたいものを選んで、手順に従ってインストールやコーディングをしていくだけでアプリを作ることができます。

この公開されている作り方ですが、かなり詳しく親切に書いてあり、作者に質問を送ることもできますので、プログラミングは初心者だけどアプリを作ってみたいという方にはもってこいです。

◆コーディング道場

http://www.coding-doujo.jp/
対応言語:PHPRuby

f:id:paiza:20141014153053p:plain

自分で作ったコーディング問題を公開したり、人が作った問題を解いたりすることができるコーディング道場です。問題はレベルごとに☆がついていて、基礎問題もありますので、初心者から上級者まで幅広く使えます。慣れてきたら、自分で問題を作ってみるのも良いかと思います。

ちなみに学生向けサービスなだけあって、就職支援もやっています。

■まとめ

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

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

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

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

paiza動画ラーニングについて

f:id:paiza:20160307113923p:plain
paizaには、オンラインでプログラミング学習ができるパイザ・ラーニングという無料学習コンテンツがございます!現在、PHPRubyPythonの入門編を学ぶことができますが、対応言語は今後もどんどん追加される予定となっています。

プログラミング未経験の方でも、「やさしく・楽しく・わかりやすい1本約3分のレッスン動画」 や 「ブラウザ上でコードを書いて実行できるオンライン実行環境」「複数の練習問題」で、未経験者でも無理なく学習を続けることができます。




paizaではITエンジニアとしてのスキルレベル測定(9言語に対応)や、プログラミング問題による学習コンテンツ(paiza Learning)を提供(こちらは21言語に対応)しています。テストの結果によりS,A,B,C,D,Eの6段階でランクが分かります。自分のプログラミングスキルを客観的に知りたいという方は是非チャレンジしてみてください。

http://paiza.jp

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

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