プロのカウンセラーがキャリアの悩みを解決!

ゲームでプログラミングが楽しく学べる!厳選17サイト【子供から大人まで】

作成: 2016.08.17 更新: 2019.11.14

>>副業・フリーランスという働き方
個人で稼げるスキルを!独立まで完全サポート

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

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

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

2019年のゲーム感覚でプログラミングが学べるおすすめのサービス・アプリは以下の記事で紹介しています。

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

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

Code Studio

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

ゲームで学ぶプログラミング画像1 プログラミング ゲーム感覚

 Code Studio公式サイト (無料)

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

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

 

ゲームで学ぶプログラミング画像2 プログラミング ゲーム感覚

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

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

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

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

Smalruby

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

ゲームで学ぶプログラミング画像3 プログラミング ゲーム感覚

Smalruby (無料)

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

ゲームで学ぶプログラミング画像4 プログラミング ゲーム感覚

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

ゲームで学ぶプログラミング画像5 プログラミング ゲーム感覚

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

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

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

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

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

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

ゲームで学ぶプログラミング画像6 プログラミング ゲーム感覚

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

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

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

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

ゲームで学ぶプログラミング画像7 プログラミング ゲーム感覚

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

ゲームで学ぶプログラミング画像8 プログラミング ゲーム感覚

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

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

Scratch

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

ゲームで学ぶプログラミング画像9 プログラミング ゲーム感覚

Scratch  無料

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

ゲームで学ぶプログラミング画像10 プログラミング ゲーム感覚

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

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

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

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

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

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

CODEPREP

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

 

ゲームで学ぶプログラミング画像11 プログラミング ゲーム感覚

CODEPREP (無料)

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

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

ゲームで学ぶプログラミング画像12 プログラミング ゲーム感覚

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

CodeMonkey

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

ゲームで学ぶプログラミング画像13 プログラミング ゲーム感覚

CodeMonkey  30ステージまで無料

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

ゲームで学ぶプログラミング画像14 プログラミング ゲーム感覚

 

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

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

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

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

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

 

この記事のハッシュタグ

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

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

fight code

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

ゲームで学ぶプログラミング画像15 プログラミング ゲーム感覚

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

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

ゲームで学ぶプログラミング画像16 プログラミング ゲーム感覚

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

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

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

CODECOMBAT

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

ゲームで学ぶプログラミング画像17 プログラミング ゲーム感覚

CODECOMBAT  無料

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

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

ゲームで学ぶプログラミング画像18 プログラミング ゲーム感覚

出展:Code部

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

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

CodinGame

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

ゲームで学ぶプログラミング画像19 プログラミング ゲーム感覚

CodinGame  無料

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

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

ゲームで学ぶプログラミング画像20 プログラミング ゲーム感覚

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

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

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

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

code.9leap.net

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

ゲームで学ぶプログラミング画像21 プログラミング ゲーム感覚

code.9leap.net  無料

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

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

ゲームで学ぶプログラミング画像22 プログラミング ゲーム感覚

出典:がちゃまにあ日報

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

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

将来の不安はスキル習得で解決

「ずっと今の仕事を続けるのは不安」「将来収入があがる職につきたい」「やりたいことがない」

いま、日本では多くの若者がそう感じています。あなた1人じゃありません。
毎月数千人の方がTECH::EXPERTの無料キャリア相談に参加しています。

プロと話してキャリア構築を少しでもクリアにしませんか?

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

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

ChekiO

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

ゲームで学ぶプログラミング画像23 プログラミング ゲーム感覚

ChekiO  無料

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

ゲームで学ぶプログラミング画像24 プログラミング ゲーム感覚

出典:Code部

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

ゲームで学ぶプログラミング画像25 プログラミング ゲーム感覚

出典:Code部

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

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

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

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

CSS Diner

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

ゲームで学ぶプログラミング画像26 プログラミング ゲーム感覚

CSS Diner  無料

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

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

ゲームで学ぶプログラミング画像27 プログラミング ゲーム感覚

出典:プロスタ

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

RubyWarrior

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

ゲームで学ぶプログラミング画像28 プログラミング ゲーム感覚

RubyWarrior  無料

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

ゲームで学ぶプログラミング画像29 プログラミング ゲーム感覚

出典:Hatena Blog

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

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

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

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

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

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

Codeschool

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

ゲームで学ぶプログラミング画像30 プログラミング ゲーム感覚

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

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

ゲームで学ぶプログラミング画像31 プログラミング ゲーム感覚

ゲームで学ぶプログラミング画像32 プログラミング ゲーム感覚

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

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

ドットインストール

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

ゲームで学ぶプログラミング画像33 プログラミング ゲーム感覚

ドットインストール  無料

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

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

ゲームで学ぶプログラミング画像34 プログラミング ゲーム感覚

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

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

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

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

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

Code Babes

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

ゲームで学ぶプログラミング画像35 プログラミング ゲーム感覚

Code Babes  無料

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

ゲームで学ぶプログラミング画像36 プログラミング ゲーム感覚

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

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

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

ゲームで学ぶプログラミング画像37 プログラミング ゲーム感覚

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

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

ゲームで学ぶプログラミング画像38 プログラミング ゲーム感覚

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

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

その他 学習方法

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

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

さいごに

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

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

サイトを活用して楽しみながら学べば、最短でプログラミングをマスターすることができるはずです!

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

TECH::EXPERT(テック エキスパート)でプログラミング未経験からWebエンジニア転職・フリーランスの夢をかなえませんか

TECH::EXPERT(テック エキスパート)はプログラミングが全くの未経験の方がWebエンジニアに転職したりフリーランスとして活躍するまでをサポートするスクールです。

・手に職をつけて10年後も活躍できる人材になりたい
・Webエンジニアとして転職したい
・フリーランスとして場所に縛られずに自由に働きたい

まずは無料キャリア相談(無料カウンセリング)に参加してみてください。毎月1000名以上のお申込みをいただいているため、すぐに日程が埋まってしまいます。予定が合う日があればすぐに予約がおすすめです。

無料カウンセリングの日程をみる

この記事を書いた人