【2017年版】ゲーム感覚でプログラミングを学べる日本語対応サイト10選 | サービス | プロエンジニア

    【2017年版】ゲーム感覚でプログラミングを学べる日本語対応サイト10選

    • このページをはてなブックマークに追加

    公開日:2016年12月13日 最終更新日:2019年06月14日

    プログラミングを学ぶというと、分厚い参考書を開いて難解な構文を覚えなければならないというイメージを抱きがちですが、最近ではずいぶん様相が変わってきています。特に子供の頃からプログラミング教育を進めるべきという風潮が強まっている今は、ゲーム感覚で楽しく学べるサイトがたくさん登場しています。

    今回はそんなプログラミングを楽しく学べるサイトのうち、日本語に対応しているサイトを10個ご紹介したいと思います。

    目次

    1.プログラミングの基礎を視覚的に学ぶ

    1.1 Code Studio(コードスタジオ)

    ■対応言語:ビジュアルプログラミング言語(JavaScript)

    ■公式サイト:https://studio.code.org/

    column_image6065_01

    ■概要:

    対象年齢4歳からの、ビジュアルでプログラミングの仕組みを学べるサイトです。 チュートリアルに沿ってプログラミングを楽しめるコース1~4と、コンピュータサイエンスの基礎が学べる上級コースのほかに、スター・ウォーズやアナと雪の女王、マインクラフトといった作品のキャラクターを使って、ゲーム形式でコーディングを学ぶことができます。

    column_image6065_02

    写真はスター・ウォーズのプレイ画面です。マウスを使って「ブロック」と呼ばれる部品をつなげることでキャラクターの動きをプログラミングし、課題をクリアしていきます。

    コーディングは基本的にビジュアルプログラミング言語で行いますが、現在入力している内容をJavaScriptで確認することができる機能が付いています。

    column_image6065_03

    ▲目次へ戻る

    1.2 Scratch(スクラッチ)

    ■対応言語:ビジュアルプログラミング言語

    ■公式サイト:https://scratch.mit.edu/

    column_image6065_04

    ■概要:

    マサチューセッツ工科大学(MITメディアラボ)が開発した、プログラミング教育環境です。こちらもCode Studioと同じように、ブロックをつなげてキャラクターを動かすところから始まります。多くの子供向けプログラミング教室で採用されており、自分が作ったゲームを公開することも可能です。

    column_image6065_05

    豊富に用意されているブロックをつなげて、かなり自由度の高いプログラミングができるようになっています。

    column_image6065_06

    このように本格的な3Dのシューティングゲームを作成しているユーザも多く、使い方次第で子供向けとは侮れない作品作りが可能です。

    スクラッチの基本的な使い方については、以下の記事でもご紹介していますので、ぜひ参考にしてください。

    関連記事: スクラッチ(Scratch 2.0)で始める簡単プログラミング入門

    ▲目次へ戻る

    1.3 Smalruby(スモウルビー)

    ■対応言語:ビジュアルプログラミング言語(Ruby)

    ■公式サイト:https://smalruby.jp/

    column_image6065_07

    ■概要:

    小学生向けに無料のプログラミング教室を開催するなど、Rubyの普及活動を行っているNPO法人「Rubyプログラミング少年団」が運営するサイト内で公開されている、小学生からビジュアルでRubyを学べるツールが「Smalruby」です。

    column_image6065_08

    このツールも他のビジュアルプログラミング言語と同じくキャラクターに対してイベントのブロックをつなげていくことでプログラムを作成していきますが、左上のタブを「ブロック」から「Ruby」に切り替えると、入力した内容をRubyのコードで表示することができます。

    column_image6065_09

    ▲目次へ戻る

    1.4 コロコロゲーム工作ブロック

    ■対応言語:ビジュアルプログラミング言語(JavaScript)

    ■公式サイト:http://corocoroblock.jp/

    column_image6065_10

    ■概要:

    コロコロコミックのキャラクターを使ってWeb上でゲームが作れる、無料ツールです。

    column_image6065_11

    これも同様に部品を組み合わせてゲームを作っていくというパターンなのですが、なんと小学生向けのコロコロコミックながらJavaScriptをブロックの中に埋め込んで使えることが可能という、とても自由度の高い作りになっています。

    column_image6065_12

    さらに、JavaScriptに変換されたソースコードを表示することもできるようになっています。

    ▲目次へ戻る

    1.5 アルゴロジック

    ■対応言語:ビジュアルプログラミング言語

    ■公式サイト:https://home.jeita.or.jp/is/highschool/algo/

    column_image6065_13

    ■概要:

    このサイトは「アルゴリズム体験ゲーム」であり、プログラミング体験ではありません。しかしプログラミングを学ぶ上で、アルゴリズムというのはとても重要な概念になります。パズル感覚で楽しくアルゴリズムについて学ぶことができますので、アルゴリズムに苦手意識がある方におすすめです。

    column_image6065_14

    ▲目次へ戻る

    2.コードを手入力して学ぶ

    2.1 CODE COMBAT(コードコンバット)

    ■対応言語:Python、JavaScript、CoffeeScript、Lua

    ■公式サイト:https://codecombat.com/

    column_image6065_15

    ■概要:

    RPGで遊びながら、スクリプト言語を用いた本格的なコーディング演習を行うゲームです。図のように順にステージをクリアしてステップアップする形式であり、例えば最初のステージでは、「メソッド」「パラメータ」「文字列」「ループ」「変数」について学びます。

    column_image6065_16

    デフォルトの言語は「Python」ですが、「JavaScript」やJavaScriptを拡張した「CoffeeScript」、またゲーム制作に特化したスクリプトである「Lua言語」が選択可能です。

    column_image6065_17

    画面の真ん中にあるコード例から適切なものを選び、右の入力欄に打ち込んでキャラクターを動かすスクリプトを組んでいきます。全くコードが分からなくても、コード例をクリックすれば何を行うコードなのか説明を見ることができるため、初心者でも楽しく学んでいくことができます。

    column_image6065_18

    ▲目次へ戻る

    2.2 code.9leap

    ■対応言語:HTML5、JavaScript

    ■公式サイト:https://code.9leap.net/

    column_image6065_19

    ■概要:

    お手本のコードがあり、それをチュートリアルにそって書き換えていくことでオリジナルのゲームにしていくことができるサイトです。作成したゲームはコンテストに投稿したり、コミュニティで公開することもできます。

    column_image6065_20

    画面左のサンプルプロジェクトを選択すると、編集画面に移ります。

    column_image6065_21

    編集画面では右側のコードを編集して、左下の課題をクリアすることが目的です。RUNを押すと、左上にプレビューが表示されます。ゲームというよりは、本格的なコーディング学習寄りのサイトです。

    ▲目次へ戻る

    2.3 コードモンキー

    ■対応言語:CoffeeScript

    ■公式サイト:https://codemonkey.jp/

    column_image6065_22

    ■概要:

    おさるのモンタを動かすコードを書いて、指令を達成するゲームです。対応する言語は「CoffeeScript」であり聞きなれないと思われるかもしれませんが、CoffeeScriptはJavaScriptにコンパイルすることも可能なスクリプト言語です。

    column_image6065_23

    画面の左にステージが表示され、右にコードを入力します。

    column_image6065_24

    RUNを押すと実行され、次のステージに進んでいきます。対応言語がCoffeeScriptなので直接業務にはつながりにくいですが、より直感的に把握できるコードでコーディング練習をすることができるサイトです。

    ▲目次へ戻る

    2.4 コードガールこれくしょん

    ■対応言語:PHP、Ruby、Java、Python、C、C#、C++、JavaScript

    ■公式サイト:https://paiza.jp/cgc

    column_image6065_25

    ■概要:

    ADVパートとシミュレーションパートの組み合わせで、楽しくプログラミングを学ぶことができるオンラインゲームです。

    column_image6065_26

    対応する言語はとても多く「PHP」「Ruby」「Java」「Python」「C言語」「C#」「C++」「JavaScript」の8種類に対応しており、スクリプト言語だけでなくJavaやCなどのコンパイラ言語にも対応しています。

    column_image6065_27

    ゲームの難易度としては、今回紹介したものの中ではかなり高めです。ゲーム中の課題に対するヒントはほぼないため、初見の言語は参考書などを調べながらのプレイになりそうです。

    column_image6065_28

    「コードガール」というキャラクターを集めるのがゲームの目的ですが、そのガチャの中には「C言語標準ライブラリガチャ」なんてものも。上の画像は「time.h」ちゃんですが、知っていると思わずニヤリとできる作りこみが随所に施されているゲームです。

    ▲目次へ戻る

    2.5 CSS Diner

    ■対応言語:CSS

    ■公式サイト:https://flukeout.github.io/

    column_image6065_29

    ■概要:

    このサイトのみ英語のサイトですが、1画面のみで直感的に操作できると思います。珍しいCSS対応のゲームで、遊び方は画面上でピコピコしているアイテムをCSSのセレクタで指定する(画面左下に入力する)だけです。正解すると次のステージに進み、全26ステージ用意されています。

    column_image6065_30

    ▲目次へ戻る

    3.楽しいゲームでプログラミングの雰囲気に慣れよう

    いかがでしたでしょうか。初期のゲームで学ぶプログラミングのサイトは英語ばかりでしたが、次々と日本語対応サイトが増えており、コードガールなど日本独自のサービスも登場しています。ビジュアル重視のものは一見すると子供向けだと思われそうですが、どれもしっかりとプログラミングの基礎を学べるものばかりですので、この機会にぜひ触れてみて下さいね。

    • このページをはてなブックマークに追加

    おすすめ記事

  • 簡単!30秒登録無料キャリア相談 ちょっと聞いてみる

    無料プログラミング研修

    CTO養成講座&転職支援サービス OCTOPASS 詳細はこちら

    ピックアップ

    フリーランス

    【Swift】アプリ開発エンジニア★コミュニティサービス新規開発(iOS)

    月額単価 :60万円〜90万円

    ・iOS ネイティブアプリケーションの設計、開発 ・プロダクトのUI/UX改善 ・iOSバージョンアップへの...

    フリーランス

    【Python】サーバーサイドエンジニア★EnergyTech向け自社クラウドプラットフォーム開発

    月額単価 :60万円〜100万円

    電力系をメインに自社サービスを展開している企業で 要件定義~テストまでの工程をご担当していただき...

    フリーランス

    【Java】システムエンジニア★国内最大の宅配注文サイト開発

    月額単価 :70万円〜80万円

    自社で運営する国内最大の宅配注文サイトの 設計、開発を担当して頂きます。 担当業務はスキルによ...

    正社員

    【プロジェクトマネージャー】1億4千万ユーザーのアプリ開発/O2Oソリューション

    スマートフォンアプリ向けの自社プロダクトFANSHIPを用いた大規模案件の プロジェクトマネジメント業務...

    株式会社アイリッジ

    正社員

    【JavaScript】アプリケーションエンジニア|訪日旅行者向けプラットフォームサービスの開発

    ・訪日旅行者向けプラットフォームサービス「WAmazing」の 設計・開発・運用を行っていただきます。 ...

    WAmazing株式会社