「日本でもプログラミング教育が推進されているし今後のために自分も知っておいた方がいいのかな〜」と思いつつも、何から始めたらいいのか分からないと思っていませんか？

スクールや本もどれを選べばいいのかわからないし、呪文のような言葉を話す動画を見ても眠くなるだけで、一向に理解できなくて困っていませんか？

そんなあなたに、楽しくゲームでプログラミングが学べる17サイトを厳選して、レベル別に紹介します！この記事の中から、ぜひあなたにあったサイトを見つけてみてください。

また以下の記事では、ゲーム感覚でプログラミングが学べる最新のおすすめのサービス・アプリを、スマホ・タブレット向けとPC向けに分けて紹介します。ぜひこちらも参考にしてください。

【日本語対応あり】プログラミング入門者や子どもでも始められる

幼い子供の方や、入門者でも楽しくプログラミングをゲームで学べるサイトをご紹介します。

Code Studio

オバマ氏も推薦！「スターウォーズ」や「アナと雪の女王」で学ぶプログラミング

　Code Studio公式サイト　（無料）

「Code Studio」は、オバマ氏が活動に参加していることでも有名な、子どもたちにプログラミングに興味を持たせることに特化したサイトです。

プログラミングを全米の教育カリキュラムに組み込ための運動をしている、NPO法人「Code.org」が運営しています。

 

海外のサービスですが、日本語対応しています。たくさんのビジュアルプログラミングによるゲームがあり、『スターウォーズ』や『アナと雪の女王』などを題材としたものもあるので、お子様と一緒に勉強もできます。

日本語版でのプレイはもちろん、英語版でも子供向けの簡単な英語ですので、あえて英語版でプレイして英語力も養えれば一石二鳥ですね。

※ビジュアルプログラミング：ブロックなどを画面上で組み合わせて、アプリケーションを作るプログラミング手法

（さらに詳しい解説は、「Code.orgのCode Studioは、子供たちにプログラミングを教えるためのツールとカリキュラム」をご覧ください。）

Smalruby

小学3年生からRubyを学べる！「Rubyプログラミング少年団」制作のツール

Smalruby　（無料）

Smalrubyは、島根の「Rubyプログラミング少年団」が制作した、小学生からRubyを使ってプログラムを作れるようになることを目的としたビジュアルプログラミングツールです。

インストールなしで試すことができるので、まずは触ってみましょう。インストールも詳しい説明があるので、簡単にできます。

組み合わせたブロックを、ボタン一つでRubyのソースコードに変換して見ることもできますので、ビジュアルプログラミングだけでなく、Rubyによるプログラミング自体を学びたいときにも使えますね。

文字列のプログラムソースコードを書くこともできるため、プログラミングに慣れた中高生やブロックの直感的なプログラミングを卒業した子供達は、本格的なプログラミングをするようになります。

そのため、Smalrubyで拡張された機能を使って、作りたいものを作れるようになるそうです。

Smalrubyの合宿にスタッフで参加した方の体験談が、こちらからご覧いただけます。

コロコロゲーム工作（クラフト）ブロック

あのキャラクターでゲームプログラミングができる！

コロコロゲーム工作（クラフト）ブロック　　（無料）

コロコロゲーム工作（クラフト）ブロックでは、コロコロコミックのキャラクターを使ってビジュアルプログラミングをすることができます。

こちらはオープンソースのプロジェクト、enchant.jsで作られたビジュアルプログラミング言語 MOONBlock（前田ブロック）のコロコロ版です。

インストールなしで利用でき、また作成したプロジェクトをその場でゲーム画面のように再生し、見ることができます。

プログラムの例や、サンプルも用意されているので、初めてで何を作っていいか分からない方も、真似するところから気軽に楽しくプログラミングを始められます。

組み合わせたブロックは、JavaScriptのソースコードに変換して見ることもできますので、JavaScriptを学びたいときにも使えます。

実際に、このサイトでゲームを作ってみた体験談が こちらのサイトで、詳しく書かれているのでご参考ください。

Scratch

世界で注目！TEDでも紹介されたプログラミング学習サイト

Scratch　　無料

Scratchは主に８歳から16歳までをメインにデザインされていて、難しい専門用語は一切ないので使いやすく、楽しくプログラミングを身につけられる学習サイトです。

チュートリアルもしっかりと用意されていて、自分でプログラミング学習を進めていくことができます。その素晴らしさから教育機関で採用されているほどです。

自由にインタラクティブストーリーやゲーム、アニメーションまで作ることができます。さらに、できあがった作品はオンラインコミュニティで他の人と共有し、見せることができ、SNSやQ&Aサイトのような側面もあります。

※TEDとは、世界的に有名な講演会・プレゼンテーションの場です。

Scratchの基本的な使い方や詳しい学習方法については、以下の記事で解説しています。

本格的なコードに慣れたい初心者向け

プログラミングのコーディングになれたい初心者向けのサイトを紹介します。

CODEPREP

穴埋め問題を解いていくとアプリが制作できる学習サイトです。

 

CODEPREP　（無料）

各言語のプログラミングの基礎から応用、アプリ開発についてまで学ぶことができます。ブックと呼ばれるカリキュラムがあり、問題を解き進めていくとアプリが完成します。

実際に手を動かして、勉強しながらアプリを作っていくことができますので、「プログラミングの楽しさを体感してみたい！」「まだ初心者だけど何か動くものを作ってみたい！」「コードの結果がどうなるか実感してみたい」という方にオススメです。

左側に問題とそのヒント、右側に解答欄が用意されています。穴埋め式なので、手軽で簡単に学習できます。何回でも最初からやり直せるので、復習にも役立てられます。
各ブックをクリアするとエンジニアレベルが上がっていきますし、コミュニティで質問などもできます。こちらのサイトで、どのくらいの学びを得られたのか体験談が見られます。

CodeMonkey

猿といっしょに旅をしてプログラミング学習が出来ます。

CodeMonkey　　30ステージまで無料

サルと旅しながら、JavaScriptを学習できるサイトです。ある日、主人公のサルはゴリラにバナナを奪われてしまい、取り返すためにサルと旅に出ます。

 

コントローラでサルを動かすのではなく、右側の入力画面にコードを入力して、サルに指示を出します。「RUN!」ボタンを押して、バナナを取れたら見事成功です。

バナナの前には障害物があったり、時にはカメなどの動物の力を借りることも必要です。

コードを書いて、すぐサルを動かして実行することで、視覚的に学ぶことができます。コードの動きも、イメージしやすくなります。

またゲームながらも、プログラミングの学習コンテンツとしての完成度も高く、本格的にコードを学ぶことができます。有料版まで含めると150ステージまで用意されており、これで年間5,040円はお得なのではないでしょうか。

トレーラー動画がとても分かりやすいので、ぜひご覧ください。

 

プログラミングにも慣れ、さらに上達したい方向け

ある程度プログラミングのスキルを身に付け、さらに上達したいと考えている方向けのサイトを紹介します。

fight code

JavaScriptでロボットを操作して、他ユーザーと対戦できるゲームです。

fight code　　無料 　※現在はサービス中断中です。

プログラミングコードを使ってロボットを作り、他ユーザーと対戦する格闘ゲームのようなサービスです。対応言語はJavaScriptのみとなります。

ロボット本体を動かしたり、弾を発射するキャノン自体を動かしたりと、コードによってロボットをカスタマイズさせることができます。

他のユーザー同士の対決も見ることもできます。登録にはGithubのアカウントが必要で、対応言語も英語のみになります。

こちらのサイトで詳しい使い方の解説があります。

CODECOMBAT

RPG系のような世界観で、プログラミングを学べます。

CODECOMBAT　　無料

Yコンビネーター（ベンチャーキャピタル）も支援する企業が運営するサービスです。

プログラミングコードを書くことで、RPGゲームが進行していきます。ビジュアルだけでなく、音楽もRPGらしいものでテンションが上がりますよ。

出展：Code部

対応言語は、JavaScript・Python・CoffeeScriptなど6種類です。最初は主人公が右や左に動くだけの簡単なものから始まり、宝石を手に入れるためプログラミングコードを入力して操作します。

日本語にも対応されているので、すぐに使い始めることができます。こちらのサイトでは、体験談とともに具体的な使い方や進み方が詳しく解説されています。

CodinGame

圧倒的なビジュアルの美しさ・対応プログラミング言語数・ゲーム数を誇ります！

CodinGame　　無料

本格的なプログラミング言語を身に着けたいなら、こちらのサイトがお勧めです。

公式サイトをご覧いただくとより分かりやすいのですが、ビジュアルの美しさ・動きのスムーズさが圧倒的です。

会員登録が必要で日本語非対応ではありますが、こちらではC・C++・Java・JavaScript・Ruby・PHP・Python等など、幅広い言語が取り扱われています。

Vim/Emacsバインドなどのテキストにも対応していて、上級者もきっと楽しめるはずです。

ゲームプログラマーやシステムエンジニア、Webデザイナー・コーダーなどの専門職の方々が日頃使用している言語を学ぶことができるため、なりたい職業が具体的であれば、それに合わせた言語を選ぶと良いですね。

シューティングやアクション、パズル等を学習サイトの中でも最多の言語でプレイできますよ。レベルもトレーニングコースから応用コースまでありますので、まさに楽しく遊びながらプログラミングを学ぶことができます。

code.9leap.net

ゲームエンジンを使ってオリジナルゲームを開発して投稿できます。

code.9leap.net　　無料

ゲームプログラミングに特化した学習サイトです。ゲームエンジン「enchant.js」を使ったプログラミングを学ぶことができ、サンプルコードを課題に沿って書き変えていくと自分のゲームを開発することができます。

もちろん、課題通りでなく、オリジナルを開発してもOKです。

出典：がちゃまにあ日報

結構本格的なゲームプログラミングができる上、作ったゲームを投稿することもできますよ！投稿されたゲームは9leapで見て遊ぶことができ、ランキングもあります。

こちらから開発した企業の詳しい解説が読めます。

海外の学習サイトでプログラミングと英語を同時に学べる！？

海外のプログラミングがゲーム感覚で学べるサイトを紹介します。英語だけのものもあるので、英語力も高められて一石二鳥です。

ChekiO

世界中のユーザーと競いながらPythonを学習できます。

ChekiO　　無料

おしゃれな見た目のPython・JavaScriptを学習できるゲームサービスです。

出典：Code部

基礎編では「中央値を計算する」「パスワードの強度を高める」など、処理ごとの課題が提示されているので、プログラムの組み合わせ方を学ぶことにも適しています。

出典：Code部

課題の内容もかなり具体的なので、実務に近い課題をこなすことができます。解答後は、複数の別解を見ることができるので、より良いプログラミングの書き方を知ることができます。

FacebookやGitHub、Google+のアカウントでユーザー登録ができるので、楽ですよ。単にゲームをするだけでなくユーザーランキングが見れたり、世界大会が行われたりと本格的です。

サイト自体は英語ですが、解答画面では日本語対応されていますので安心して使えるでしょう。ぜひレベルアップして海外のユーザーと競ってみましょう！

解説画面の他は、英語のみなのでチャレンジし辛いという方は、こちらの体験レポートを参考にされるとよいと思います。

CSS Diner

画像を見ながらクイズに答えていくとCSSマスターになれます。

CSS Diner　　無料

CSSのセレクタを学べるゲームです。動いているお皿や食べ物のタグを指定するだけの簡単なゲームです。基本的な問題からだんだん難しい問題に進んでいきます。

HTML/CSSを使ったことがある方なら、はじめのうちは簡単だと思います。全26問まであるので、CSSをマスターしたい方はぜひ挑戦してみてください。

出典：プロスタ

英語対応のみですが、難しい問題は右側のウィンドウでヒントを見ることもできます。使い方に関してはこちらの解説も参考にしてみてください。

RubyWarrior

かわいいドット絵のゲームでRubyをマスターできます。

RubyWarrior　　無料

レトロなドット絵のRPGゲームサービスです。音もレトロゲームっぽくて、可愛いですよ。会員登録がなしで、手軽にRubyを学ぶことができます。

出典：Hatena Blog

画面下に表示されるエディタにコードを入力して、「RUN!」を押すと正解の判定ができます。

行き先には、モンスターがいるので体力を回復しながら進まなければいけません。体力を回復する条件として、どのマスで回復するのか、どれだけ体力が減った時に回復するのかなど、細かい指示をキャラクターに出してプレイします。

ストーリーとクリアするためのヒントは、英語対応のみですが、Rubyの基礎を学びたい人はチャレンジしてみてください。

こちらのブログでは実際にこのゲームを進めていく様子をステージごとに紹介しています。一通りの使い方などはこちらを参考にしていただけるとよいでしょう。

動画で楽しくプログラミングの基礎知識をつけよう

動画で楽しくプログラミングの基礎が身に付けられるサイトを紹介します。

Codeschool

わかりやすいレッスン動画とクイズで楽しく学習できます。

Codeschool　　有料版は月$25（一部無料コンテンツあり）

動画見終わった後に、問題に答える形式でコーディングやプログラミングを学べます。映像にはゾンビが出てくるなど動画や課題もコミカルで楽しく学習できます。

動画では、単に講師が話をするだけでなく、おしゃれな雰囲気で教材のように分かりやすい解説付きです。英語対応のみのサイトですが、視覚的にも理解できます。

課題をこなしていくとポイントが付いていき、コースを修了するとバッジがもらえます。モチベーションを保ちながら学習できますよ。iOSアプリもあるので、まさに隙間時間の活用ができますね。

ドットインストール

３分の動画から学習を始められます。

ドットインストール　　無料

短時間で実践的なプログラミング言語を学びたいのなら、こちらのサイトがおすすめです。

「ホームページを作れるようになろう」「JavaScriptから始めるお気軽プログラミング」など、目的にあったテーマを選び、レッスンをこなしていくと目的を達成できます。

1レッスンたったの3分ですので、押さえるべきポイントだけを学習できます。社会人の方々にも、人気があります。隙間時間を活用してプログラミングを学びましょう。

テキストエディタのAtomのパッケージ機能を利用すると、動画を見ながらコーディングもできます。

独学で続ける自信がないという方はこちらの方の体験レポートが役に立つかもしれません。

一人学習だとモチベーション維持が心配な時に頼れるサービス（男性向け）

学習のモチベーションを面白い角度から保つアプローチを行っている男性向けのサービスを紹介します。

Code Babes

プログラミングの問題に正解するとお姉さんが服を……？

Code Babes　　無料

プログラミングの基礎を動画で学んだ後に選択問題を解き、正解するとお姉さんが1枚ずつ服を脱いでいくというサービスです。

問題前の動画の講義では基礎的なことがきちんと学べますので、決してプログラミングはお姉さんのおまけではありません。

paizaオンラインハッカソン7

プログラミング×恋愛SLGでかわいい彼女が作れる！？

paizaオンラインハッカソン7　プログラミングで彼女をつくる　　無料

paizaオンラインハッカソン第7弾の「paizaオンラインハッカソン7　プログラミングで彼女をつくる」は、シリーズ初の恋愛シミュレーションゲームの要素を取り入れた、世界初の恋愛プログラミングゲームです。

問題を解いていくと、彼女の着せ替えアイテムを手に入れることができます。同時に親密度もアップしていき、無表情だった彼女の顔にも変化が出てきます。

また、レアアイテムを手に入れると最終的には、デートもできます。こちらで詳しい解説をご覧いただけます。

その他　学習方法

ここまで、ゲームで楽しく学べるプログラミング学習サイトをご紹介させていただきました。

しかし、ゲーム以外にもプログラミングを学べる方法はたくさんあります。ぜひ以下のサイトを学習に役立ててください。

さいごに

プログラミングをゲームで学べるサイトをご紹介しましたが、いかがでしたでしょうか。あなたもこの中から興味のあるゲームサイトを見つけて、まずは挑戦しみてください。

勉強なのに楽しみながら学習できるのは、ゲームと相性の良いプログラミングだからこそといえます。同じ言語を様々なサイトで反復学習したり、腕試ししてみるのもいいですね。

サイトを活用して楽しみながら学べば、最短でプログラミングをマスターすることができるはずです！ もし「学習サイトがたくさんありすぎて選べない！」という場合は、プログラミング学習サイトを比較した以下の記事もあわせて参考にしてくださいね。

また、どうしてもサイトだけでは独学は難しいという方は、下記記事に独学に関する内容をまとめておりますのでぜひご覧ください。