プログラミングの学習サイトの中には、ゲームを楽しみながらコードに関する知識や概念などを学ぶことができるものが多数存在します。ここではそれらの中から10のサービスをいくつかの段階に分けて紹介していきます。

まず、コードに関する知識がないところからでも始められる教育・学習サイトになります。

code studio

/uploads/picture/asset/25/pr_ga_1.png

Code.orgという非営利団体によるプログラミング教育サイトです。
ブロックで行動を組み立ててステージをクリアしていくモードでは、ブロックベースで組み合わせた命令が実際のコードでどうなるかというのも見ることができるようになっています。
アルゴリズム・シーケンスなどの概念についても感覚的に学ぶことができます。

code studio

Scratch

/uploads/picture/asset/26/pr_ga_2.png

様々な役割を持ったスクリプトを組み合わせて作品を作るサービスで、コードが書けなくても利用が可能です。
作ったものを公開したり、他の人が作成したもので遊ぶことができます。
簡単に触ることができるのが特徴ですが、中には本格的な作品を公開しているユーザーも存在します。
また、他ユーザーのプログラムの内容を見ることもできるため、自分で作る際の参考にすることもできます。

Scratch

プログラミン

/uploads/picture/asset/27/pr_ga_3.png

文部科学省が提供しているプログラミング学習サイトです。
code studioやScratchのようなブロックを使用した構成で、下のアイコンから動作させたい命令を画面にドラッグして作成していきます。
作品の共有もScratch同様に可能になっています。

プログラミン

Codecombat

/uploads/picture/asset/28/pr_ga_4.png

簡単な命令のコードを入力することによって、画面内のキャラクターをその場で動かし目的を達成するゲームです。
フェイスブックやGoogleアカウントで登録することでプレイ経過を保存することができます。
ゲーム自体も楽しくボリュームもあるため、使用する際はアカウント登録を行うのがおすすめです。

Codecombat

CodeMonkey

/uploads/picture/asset/29/pr_ga_5.png

Codecombatと同じく簡単なコードで命令を出し進行していく構成になります。
有料サービス(¥6,480/年)ですが、30ステージまでは無料で遊ぶことができます。
最初はとても簡単なことから始めて、少しずつ複雑なことに挑戦していきます。

CodeMonkey

次に実際に自分でコードを書きながら、基本的なことを学ぶことができるサイトです。

MOZER

/uploads/picture/asset/30/pr_ga_6.png

LifeisTech社が提供するオンラインの学習サイトです。
ストーリーの中でWebサイトを作成しながらHTML+CSSを学びます。
デザインやキャラクターも可愛く、物語を楽しみながらプレイすることができます。

MOZER

paiza

/uploads/picture/asset/31/pr_ga_7.png

プログラミングに関連した総合求職・学習サイトです。
「コードガール」「もし次の常駐先が女子エンジニアばっかりだったら」など多数の本格ゲームが存在します。
初心者向けのものからある程度基本を理解した人向けのものまで難易度はさまざまです。
動画による学習もできるため、調べたいことがあったときに参照することができます。

paiza

以下は基本を覚え、ある程度自分で構成が組めるようになってきた方向けのサイトになります。

CheckiO

/uploads/picture/asset/32/pr_ga_8.png

文章問題を解きながら進めていく形式のゲームサイトです。使用言語はJavaScriptとPythonになります。
出題されている内容について、実際にどのような場面で役に立つかということを解説しているのが特徴です。実践的なプログラミングを学習したい方向けの内容になっています。
英語サイトですが、設定で日本語にすることもできます。

CheckiO

CodinGame

/uploads/picture/asset/33/pr_ga_9.png

本格的なグラフィックと動作が特徴の学習サービスです。英語サイトになります。
指示に従いプログラムを組み、それによって最終的にどう動くかをその場で再生し確認します。
経過についてどの部分でどう作動したかなどを詳細に確認できるため、間違いを探しながら問題を問いていくことが可能です。

CodinGame

Code9leap

/uploads/picture/asset/34/pr_ga_10.png

HTML5+JavaScriptを使ったフレームワークenchant.jsにより、自分でゲームを作成することができるサイトです。
enchant.jsはとても簡単にゲーム作成を行うことができるため、まず何か作品を作ってみたいという方にもおすすめです。
各命令・動作については分かりやすい解説つきのテンプレートが用意されており、それを使いながら自分の作りたいものを作成していくことができます。

Code9leap

子供から大人まで楽しめる学習サイトを集めました。
挫折しやすい文法をいきなり学ぶのではなく、ゲームをしながら遊ぶようにプログラミングの全体像を理解すると面白さを感じられるはずです。
ぜひ一度試してみてください。