paiza開発日誌

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

ゲームで遊ぶだけ!気付いたらプログラミングできるようになれるサービス14

f:id:paiza:20161205151407j:plain
Photo by Carlos Sancho
f:id:paiza:20140916135428p:plainこんにちは。谷口です。

プログラミングの勉強を始めたばかり、またはこれから始めようとしている方々は、何を使って勉強しようと考えていますか?

今は学習サイトや書籍やスクールなど、自分に合ったスタイルで勉強できるようになっていますが、自分一人で勉強しようとすると、だんだん難しくなってきて挫折したり、一度難しいと感じてしまうとプログラミングが楽しくなくなってきたり……ということもあるかと思います。

そこで今回は、あまり勉強っぽくなく初心者でもゲーム感覚で楽しくプログラミングを学べるコンテンツを14個ご紹介いたします。


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

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

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

■プログラミング全く未経験の入門者や子供でもできる!

スターウォーズアナと雪の女王でビジュアルプログラミング

◇1.Code Studio

ビジュアルプログラミング
無料
f:id:paiza:20151214163043p:plain
Code Studio」はプログラミングを全米の教育カリキュラムに組み込む運動をしている非営利団体「Code.org」が運営している、子供たちにプログラミングに興味を持たせるためのサイトです。

たくさんのビジュアルプログラミングによるゲームがありますが、スターウォーズアナと雪の女王のゲームもあります!

スターウォーズ!!
f:id:paiza:20151214163534p:plain

アナ雪!!
f:id:paiza:20151214163706p:plain

大人がやっても楽しいです!「プログラミングのプの字もわからん」という人はこういったビジュアルプログラミングから挑戦してみると取っつきやすいと思います!

◆小学3年生からRubyの勉強を始められる

◇2.Smalruby

対応言語:Ruby(ビジュアルプログラミング)
無料
f:id:paiza:20151214164122p:plain
Smalrubyは、島根のRuby少年団が作った、小学生でもRubyを使ってプログラムを作れるようになることを目的としたビジュアルプログラミングツールです。

f:id:paiza:20151214164401p:plain

組み合わせたブロックはボタン一つでRubyソースコードに変換して見ることもできますので、ただビジュアルプログラミングをするだけでなく、Rubyを学びたいときにも使えます!インストールも詳しい説明があって簡単!

コロコロコミックのキャラクターでビジュアルプログラミング

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

対応言語:JavaScript(ビジュアルプログラミング)
無料
f:id:paiza:20151214150754p:plain

「漫画のキャラクターが勉強を教えてくれる教材があったら楽しく学べるのにな~」と思ったことはありませんか?

コロコロゲーム工作(クラフト)ブロックでは、コロコロコミックのキャラクターが表示されるブロックを使ってビジュアルプログラミング(※ブロック等を画面上で組み合わせて、アプリケーションを作るプログラミング手法)をすることができます。

f:id:paiza:20151214175428p:plain

こちらはもともとオープンソースのプロジェクトenchant.jsで作られたビジュアルプログラミング言語MOONBlock(前田ブロック)のコロコロ版でして、MOONBlockと同様にブロックを組み合わせてコロコロコミックの人気キャラクターを動かしたりゲームを作ったりすることができます。

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

■コードの書き方を学びたい初心者

「プログラミングの基礎を勉強してます」「初心者だけどちょっとはコード書けるよ」という方がゲームっぽく楽しくプログラミングを勉強するなら、穴埋め問題が解けるサイト等はいかがでしょうか。

◆穴埋め問題で楽しく効率よく隙間時間に学習

◇4.Progra!

対応言語:PHPRubyPythonVBA
無料
f:id:paiza:20151214164952p:plain
Progra!は、最低限の基礎的なコードの書き方が、穴埋め問題を順番に解いていくことによって学べるサービスです。

隙間時間などに穴埋め問題を解くだけで素早く学習を進められるので、「あんまり難しそうなサイトはやりたくない」という方におすすめです。

f:id:paiza:20151214175600p:plain

コースも4言語分あって充実していますので、プログラミング学習の初めの一歩を踏み出したい方、難しいのや時間がかかるのは嫌だという方にはぴったりだと思います。

◆画像を見ながらクイズに答えてCSSマスターになれる

◇5.CSS Diner

対応言語:CSS
無料
f:id:paiza:20151214173118p:plain
CSS Dinerは、CSSセレクタを楽しんで覚えることができます。寿司下駄の上で踊る皿が何とも言えずかわいい……。

f:id:paiza:20151214175915p:plain

タグを指定するだけの基本的な問題からだんだん難しい問題に進んでいきます。最初の方の問題はHTML/CSSを使ったことがある方なら余裕だと思います!CSSをマスターしたい方はぜひ挑戦してみてください。

英語になりますが、難しい問題はヒントを見ることもできますよ!

◆穴埋め問題を解いていくだけで動くアプリが作れる

◇6.CODEPREP

対応言語:RubyPHP、HTML、CSSJavaScriptjQueryCanvas、Animate.css
無料
f:id:paiza:20151214173200p:plain
CODEPREPも、穴埋め問題を解くことで様々な言語を学ぶことができます。

プログラミングの基礎から応用、アプリ開発に関してまで学ぶことができます。
例えば「Javascriptでつくるタイマー」や「JavaScriptでつくるおみくじ」といったブックと呼ばれるカリキュラムがあり、問題を解き進めていくと実際にそのアプリができあがります。

f:id:paiza:20151214175746p:plain

実際に自分で動かして勉強しながらアプリを作っていくことができますので、「まだ初心者だけど何か動くものを作ってみたい!」という方に大変おすすめです。

◆わかりやすいレッスン動画を見て楽しく学習できる

◇7.Codeschool

対応言語:Ruby、HTML/CSSJavaScriptiOS、DB
有料版は月$25(一部無料コンテンツあり)
f:id:paiza:20151214174712p:plain

Codeschoolは、動画でプログラミングを学習できるサイトです。(※英語です)

まず動画を見て、見終わった後にクイズに答える形式でコーディングを学ぶ形式となっており、正解するとバッジがもらえる機能もあります。

f:id:paiza:20151214180157p:plain

映像にはゾンビが出てきたりして、動画も課題もコミカルに楽しく学習できますよ!

■プログラミングを多少学んでコーディングができるようになってきた人向け

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

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

対応言語:HTML、CSSPHPAndroid
無料
f:id:paiza:20151214192741p:plain

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

f:id:paiza:20151214193117p:plain

時は20xx年……日々プログラミングを頑張りながら、クリスマスは一人寂しく過ごしていた俺たちについに恋の女神が微笑んだ――――。なんと俺たちのことを彼氏と認識してくれるアンドロイド彼女の「安藤 杏(あんどう あん)」ちゃんが開発されたのだ!!!!

杏ちゃんのすごいところは、世界で初めて開発された「プログラミングでお着がえ機能」。杏ちゃんと同居生活を始めたあなたは、プログラミング問題をどんどん解いて、杏ちゃんの着せ替えアイテムを集めたり、2人の親密度を上昇させたりしてください。

「既にアイテムコンプリートしたぜ」という方も、12月14日に新アイテムの眼帯と縞ニーソが追加されましたので、ぜひ再び挑戦してみてくださいね!!

f:id:paiza:20151214193128p:plain

JavaScriptでロボットの動きを組んで対戦ができる

◇9.fight code

対応言語:JavaScript
無料
f:id:paiza:20151214180253p:plain

fight codeでは、JavaScriptでロボットの動作を記述することで、そのロボットを他のユーザーと対戦させて遊ぶことができるサイトです。

実際にロボットを動かして見ながらプログラミングをすることができますし、他のユーザーのロボットのコードも見ることも、他のユーザー同士の対戦を見ることができます。

f:id:paiza:20151214180831p:plain

これ楽しい……強いロボットを作るためにもJavaScriptの勉強が捗ります。

◆楽しいRPGで遊びながらプログラミングを学べる

◇10.CODECOMBAT

対応言語:PythonJavaScriptCoffeeScriptClojureLua、lo
無料
f:id:paiza:20151214181353p:plain
CODECOMBATは、まさにRPGゲーム!をプレイしながら、プログラミングを学ぶことができます。

例えばキャラクターが指示通りに行動するようなコードを書いて進めていきます。
f:id:paiza:20151214181654p:plain
ビジュアルがすっごいゲーム!!楽しい!!序盤は難しくないので初心者でも解くことができますよ。

◆圧倒的ビジュアルと対応言語数のプログラミングゲーム

◇11.CodinGame

対応言語:JavaScript、Go、C++、ObjectiveC、HaskellPHPPerlPythonScalaRubyなどなど
無料
f:id:paiza:20151214182233p:plain

CodinGameはビジュアルがすごく美しいですよね。対応言語もすごく多いです。

f:id:paiza:20151214182528p:plain

シューティングやアクション、パズル等いろんな言語でいろんなゲームをプレイすることができます。

レベルもトレーニングコースから様々な応用コースで遊べますので、まさに楽しく遊びながらプログラミングを学ぶことができますよ。

◆かわいいドット絵のゲームでRubyをマスターできる

◇12.RubyWarrior

対応言語:Ruby
無料
f:id:paiza:20151214183842p:plain
RubyWarriorRubyのコードを書くことで、ドット絵がかわいいRPGを進めることができます。か、かわい~~。レトロゲー好きな方におすすめです。

f:id:paiza:20151214184036p:plain

プログラミングしてキャラクターを動かして進めるタイプのゲームはこのようにいろいろありますので、対応言語はもちろんですが自分が好きな雰囲気のビジュアルで選ぶのもいいと思います。

ゲームエンジンでオリジナルゲームを作って投稿しよう

◇13.code.9leap.net

対応言語:Ruby
無料
f:id:paiza:20151214190800p:plain
code.9leap.netは、ゲームプログラミングに特化した学習サイトです。

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

f:id:paiza:20151214190511p:plain

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

f:id:paiza:20151214190659p:plain

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

◇14.Code Babes

対応言語:HTML、CSSPHPAndroid
無料
f:id:paiza:20151214191245p:plain
Code Babesは、プログラミングの基礎を動画で学んだ後に選択問題を解き、正解するとお姉さんが1枚ずつ服を脱いでいくというサービスです。

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

f:id:paiza:20151214192551p:plain

えーこれ男性版も作ってくれないかな……



■まとめ

プログラミングを勉強するときは「何が作りたいか」が重要であるとよく言われます。

しかし、「何ができるのかもわからない」「とにかくプログラミングがどんなものか触れてみたい」という初心者の方は、あまり難しい部分から勉強を始めるとすぐに挫折してしまう可能性もあります。

まずはこういったゲーム感覚でプログラミングを学べるサービスで「気軽に遊んで触れてみる」というのも、初心者のとっかかりとしてはよいのではないかと思います。

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


paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

↓詳しくはこちら
paiza.jp

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
paiza.jp
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

ITプログラマ・エンジニア向け転職・就活・学習サービスのpaiza


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

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