シェアしたくなる最新のWebサービス・ITニュース情報をチェック!
  • follow us in feedly

アプギガトップ > ソースコードを解析することで、プログラミング学習が可能になるWebサービスまとめ!
注目記事ピックアップ
好きなYouTube動画の「見て欲しいシーン」だけを抽出して再公開できる「vibby」が便利すぎる件!
share0
好きなYouTube動画の「見て欲しいシーン」だけを抽出して再公開できる「vibby」が便利すぎる件!
URLを指定するだけ!どんなWebデータも一発で可視化できる「Silk」は、そのままWebサイトも制作可能で無料提供中!
share0
URLを指定するだけ!どんなWebデータも一発で可視化できる「Silk」は、そのままWebサイトも制作可能で無料提供中!
動画の中身をAI(人工知能)が認識&タグ付けする「Clarifai」が検索エンジンに革命を起こす!
share0
動画の中身をAI(人工知能)が認識&タグ付けする「Clarifai」が検索エンジンに革命を起こす!
欲しいコンテンツを選ぶだけでWebサイトを作成できる「XPRS」が、無料とは思えないクオリティだった件!
share0
欲しいコンテンツを選ぶだけでWebサイトを作成できる「XPRS」が、無料とは思えないクオリティだった件!
プロジェクター不要のプレゼン資料が作れるWebサービス「Slides」があまりに多機能過ぎる件!
share0
プロジェクター不要のプレゼン資料が作れるWebサービス「Slides」があまりに多機能過ぎる件!
スタートアップや企業Webサイトの作成に必要な機能全部入りの「uKit」が無料公開中!
share0
スタートアップや企業Webサイトの作成に必要な機能全部入りの「uKit」が無料公開中!
YouTube動画内に、まったく違う動画やWebページを挿入できる「videopath」が衝撃的!
share0
YouTube動画内に、まったく違う動画やWebページを挿入できる「videopath」が衝撃的!
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
share0
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
Chromeの「新規タブ」機能が拡張され過ぎて、もはや別アプリと化している件!
share0
Chromeの「新規タブ」機能が拡張され過ぎて、もはや別アプリと化している件!
天才的なアイデアで開発された海外の「iPhoneアプリ事例7選」が、斬新過ぎてヤバイ!
share0
天才的なアイデアで開発された海外の「iPhoneアプリ事例7選」が、斬新過ぎてヤバイ!
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
share0
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
完全自動で、自分のプログラミング「作業ログ」を収集して可視化する「WakaTime」が素晴らしい件!
share0
完全自動で、自分のプログラミング「作業ログ」を収集して可視化する「WakaTime」が素晴らしい件!
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
share0
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
発射した弾が、相手のスマホ画面に飛んでいく対戦ゲーム「DUAL」が衝撃的な面白さだった!
share0
発射した弾が、相手のスマホ画面に飛んでいく対戦ゲーム「DUAL」が衝撃的な面白さだった!
ブログ読者に「聞いてみたいこと」を簡単にWebコンテンツ化できる「plyfe」を試してみた!
share0
ブログ読者に「聞いてみたいこと」を簡単にWebコンテンツ化できる「plyfe」を試してみた!
ソースコードの「バグ」を修正する速さを競うWebゲーム「CodeFights」で遊んでみた!
share0
ソースコードの「バグ」を修正する速さを競うWebゲーム「CodeFights」で遊んでみた!
Web開発系の情報収集が爆速になる絶対覚えておきたいWebサービス7選+α!
share0
Web開発系の情報収集が爆速になる絶対覚えておきたいWebサービス7選+α!
今すぐスマホを「リモコン」代わりに遊べる厳選Webアプリが、盛り上がること間違いなし!
share0
今すぐスマホを「リモコン」代わりに遊べる厳選Webアプリが、盛り上がること間違いなし!
複数人コラボも可能な楽譜作成エディタを搭載した新SNS「Flat.io」が、完全無料で公開中!
share0
複数人コラボも可能な楽譜作成エディタを搭載した新SNS「Flat.io」が、完全無料で公開中!
ブラウザだけで完結する「bot開発環境」を無償提供した「Meya.ai」は、ボットのホスティングまで可能!
share0
ブラウザだけで完結する「bot開発環境」を無償提供した「Meya.ai」は、ボットのホスティングまで可能!
プログラミング
2014/08/27 22:30

ソースコードを解析することで、プログラミング学習が可能になるWebサービスまとめ!


どうも、まさとらん(@0310lan)です!

プログラミングの勉強を始めた方であれば、「自分のコードって汚いなぁ〜」と感じている人は決して少なくないはず!

今回は、初心者から中級者にステップアップするため、「きれいで、ムダがなく、再利用しやすい」コーディングスキルを学習できるWebサービスを厳選してみましたのでご紹介しようと思います!

 

プログラミングした通りに動くロボットで、世界一を目指すゲーム!
FightCode


ユーザー登録(無料)をすると「戦車型のロボット」を貰えるのですが、こちらでプログラミングをしないと一切動かないという驚きの仕様になっています。

ドキュメント類は豊富に揃っており、簡単なコードで動いてくれるので、意図した通りに動かすまではそれほど困らないはず。

 

問題は、このロボットを使って不特定多数の人とオンライン対戦をしなければいけないという点!


対戦中は、「プログラミングした通りの動きしかできない」という点がミソで、対戦相手がどのように攻めてくるのかを予想しつつ、敵の弾に当たらないような動きをプログラミングする必要があります。

 

最初は、なかなか勝てないのですが、相手のロボットがどのようにプログラミングされているのかを閲覧(fork)することが出来るようになっています!(Public指定のモノに限る…)


単純なコードを組むだけではダメで、勝つための「要素」を敵のソースコードから読み解かなければいけません。

一方的に負けると腹が立つので、何とかして勝とうと必死にコードを解析します。すると、徐々に多くの人が似たようなパターンのコードを書いていることに気付き、それを自己改良することで負けにくいロボットを作り上げることができるわけです。

(個人的には、かなりハマりました…)

 
ゲームプログラミングの「黄金パターン」を習得できるサービス!
Game Mechanic Explorer


主に、ゲームプログラミングに関連するスキルを身に付けられるサービスとなっています。

面白いのは、紹介されているコードがすべて、「よく使われるパターン」としてまとまっている点です。つまり、最初にこの通りにコードを書く方法を覚えてしまえば、初心者にありがちな「汚いコード」には絶対ならない…ということですね。

 

例えば、「キャラクターを左右に動かしたい!」場合は、実際に動くサンプルと「黄金パターン」としてまとめられたコードを見る事ができます。


1行ずつ、丁寧に解説コメントも挿入されているので、何を意味しているコードなのかも分かりやすいです。

他にも、「ジャンプ、追尾ミサイル、弾の発射、エフェクト効果」など、ゲーム作りには必ず必要となるサンプルが豊富に揃っているので非常に便利です。

もちろん、このパターンを覚えてしまえば、多言語への展開やゲーム以外のシーンでも有効に活用できるでしょう。

 
わざと仕掛けられた「バグ」を修正しながら遊ぶWebゲーム!
hackforplay


ネット上でも話題になっていましたが、斬新な設定が施されたゲームとなっています!

サイトから、ファイルをダウンロードして「index.html」をブラウザで起動するとゲームが始まります。

が、しかし!

 

「スライム」を攻撃したいのですが、何をどうやっても倒せない…という状況に直面します。


そして、ダウンロードしたファイルの中から「main.js」をテキストエディタで開きます。

すると、ソースコードの中にもゲームの一部となるストーリーが記載されており、バグを修正してゲームとして成立させてから遊ぶように指示を受けます。

 

そして、よーくコードを見ながら、1行ずつ解析していくと「スライム」のHPが99万というあり得ない数値が入力されているのに気付くでしょう…。


コードの仕組みを理解し、何が関連してゲームが動いているのかを理解しやすいように作られているのが特徴で、クリアする頃にはある程度ゲームの仕組みが把握できるようになっているでしょう。

ちなみに、答えは1つだけじゃなく、例えばスライムを移動させてしまったり、主人公の攻撃力を上げたりなど…自由度が高いのも魅力の1つでしょう。(ゲームとしては成立しないかもしれませんが…)

 
不特定多数の人が書いたコードを「レビュー」できるサービス!
CodePen


HTML、CSS、JavaScriptで作られた、数多くの作品を公開しているサービスがコチラ!

 

例えば、以下のような「動く太陽系」をシミュレートした高度な作品も多く掲載されています。


もちろん、中身はすべて見れるので、一体どのような仕組みで作られているのかを研究するには最適な材料となるわけです。

タグ付けの仕方や、CSSの指定方法などは、みなさんよく研究されているので非常に勉強になります。日本国内では、「jsdo.it」という同様のサービスもあるのでご興味ある方は要チェック!

 
コードの脆弱性を突き止めるゲーム!
Game of Hacks


どちらかと言うと「上級者向け」の内容が出題されるクイズなのですが、非常に勉強になるサービスとなっています。

内容としては、各問題に対して「脆弱性」が含まれたコードが表示されるので、そのコードがどんな危険性を持っているのかを当てるゲームとなっています。

 

回答は選択方式なのですが、かなりレベルの高い知識が求められます。


このサービスで最も勉強になるのは、「あっ、こういうコードの書き方はマズイのかぁ〜」と、気付くことができる点です。

特に、Webアプリなどを作る場合には、脆弱性があると大問題になりかねないので、このサービスで出題されるコードを何度も熟読すると良いでしょう。

ちなみに、似たようなサービスで「XSS game」と言う、クロスサイト・スクリプティング(XSS)に関するセキュリティ問題が出題されるモノもあります。

 
プログラミングしないと「楽曲製作」できない作曲エディタ!
wavepot


パッと見ると、コードを書くためのテキストエディタかと思ってしまいますが、実はちゃんと楽曲を作れるエディタとなっています。

テンポの設定から、シンセの細かい調節まで、すべてコードを書いて指定するという斬新な作りになっているのが特徴で、音楽系プログラミングに興味ある方であればハマると思います。

右メニューから、作成済みの楽曲を視聴できるので、どのようなコードを書いて音を出しているのかをざっくり確認するのにも役立ちます!

 
他人が作った「データベース」のモデル設計を閲覧できるサービス!
dbpatterns


Webサービスなどを構築する際に、必ず必要となるのがデータベースですが、その際に必須となるモデル設計のパターンを公開しているサービスがコチラ!

世界中の人が作ったモデルのパターンを、自由に閲覧できる貴重なサービスとなっており、ブログや社内システム、飲食店など、多彩なモデルが一般公開されています。

 

例えば、ブックマーク系のWebサービスを作る場合、同様なサービスのモデルパターンを検索しつつ、MySQL、Postgres、Oracle、SQLiteなどのコードも同時に見ることが出来ます。


データベースにあまり慣れていないと、どのようにモデルを作って良いのか迷いがちです。

そんな時に、みんなが一般的に作る設計を参考にできるというのは、個人で開発している方であれば、とても貴重な情報源となるのではないでしょうか。

 

 
おまけ
過去に、アプギガでは「プログラミング入門」に関するWebサービスもいくつかご紹介してきました。

そこで、人気のあった特集記事をいくつか掲載しておきますので、ご興味ある方はお時間ある時にでも一読くださいませ!

 

【クイズに答えるだけで「プログラミングの勉強」ができるWebサービスたちにハマる!】


 

【今すぐ動画で「プログラミングの基礎」を独学できるWebサービス10選はコレだ!】


 

【Webアプリの開発でありがちな問題を「一発解消」するWebサービス10選が便利過ぎる!】


 

 
まとめ
プログラミングの基礎を学ぶことができるWebサービスは、着実に増加しているのを感じます。

その一方で、入門者が次のステップへ階段を上がる際に、今回ご紹介したようなサービスが今後も増えてくると、もっと楽しい世界が広がりそうですね。

これからプログラミングを学習しようと考えている方は、ぜひWebサービスを有効活用してみてください!

 

 

written by まさとらん

 

 

 


 

まさとらん

国内外問わず「良いモノ」だけひたすら集めて情報共有してます。
厳選ネタはアプギガ内で分かりやすく情報発信中!
その他の旬なネタは、twitterにて発信してますので、お気軽にどうぞ!

twitter:0310lan

この記事を読んでいる人は、他にこんな記事も読んでいます。
Related Posts Plugin for WordPress, Blogger...

ページトップへ戻る