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

アプギガトップ > ソースコードを解析することで、プログラミング学習が可能になるWebサービスまとめ!
注目記事ピックアップ
URLを指定するだけ!どんなWebデータも一発で可視化できる「Silk」は、そのままWebサイトも制作可能で無料提供中!
share0
URLを指定するだけ!どんなWebデータも一発で可視化できる「Silk」は、そのままWebサイトも制作可能で無料提供中!
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
share0
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
脅威の認識技術で別人の顔に変身できるアプリ「MSQRD」が予想以上に変身できる件!
share0
脅威の認識技術で別人の顔に変身できるアプリ「MSQRD」が予想以上に変身できる件!
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
share0
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
好きなYouTube動画の「見て欲しいシーン」だけを抽出して再公開できる「vibby」が便利すぎる件!
share0
好きなYouTube動画の「見て欲しいシーン」だけを抽出して再公開できる「vibby」が便利すぎる件!
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
share0
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
JavaScriptの学習にオススメなWebコードエディタ「Carbide」の万能すぎる可視化ウィジェットがヤバイ!
share0
JavaScriptの学習にオススメなWebコードエディタ「Carbide」の万能すぎる可視化ウィジェットがヤバイ!
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
share0
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
Webサイトに訪れたユーザーの行動を「映像化」してトラッキングできる「Jaco」を使ってみた!
share0
Webサイトに訪れたユーザーの行動を「映像化」してトラッキングできる「Jaco」を使ってみた!
タスク管理の「Trello」にWeb制作機能を搭載できる「CardForm」が斬新過ぎてスゴイ!
share0
タスク管理の「Trello」にWeb制作機能を搭載できる「CardForm」が斬新過ぎてスゴイ!
Web開発系の情報収集が爆速になる絶対覚えておきたいWebサービス7選+α!
share0
Web開発系の情報収集が爆速になる絶対覚えておきたいWebサービス7選+α!
実はゲーム機として優秀なスマホ「Galaxy S7 edge」でポケモンGOを遊び倒してみた!<PR>
share0
実はゲーム機として優秀なスマホ「Galaxy S7 edge」でポケモンGOを遊び倒してみた!<PR>
天才的な猛者が開発した究極の「HTML5ゲーム」16選が思わず熱くなり過ぎる件!
share0
天才的な猛者が開発した究極の「HTML5ゲーム」16選が思わず熱くなり過ぎる件!
わずか1行のコードで、Web制作が劇的に捗るサービスと連携し放題になる「StackPile」を使ってみた!
share0
わずか1行のコードで、Web制作が劇的に捗るサービスと連携し放題になる「StackPile」を使ってみた!
今すぐ、自分の知識を「オンライン学習コース」としてWebに公開できる「Thinkific」の多機能ぶりに驚愕!
share0
今すぐ、自分の知識を「オンライン学習コース」としてWebに公開できる「Thinkific」の多機能ぶりに驚愕!
動画の中身をAI(人工知能)が認識&タグ付けする「Clarifai」が検索エンジンに革命を起こす!
share0
動画の中身をAI(人工知能)が認識&タグ付けする「Clarifai」が検索エンジンに革命を起こす!
ブロックを繋げるだけでチャットボットが作成できる「Motion AI」は、WebもSNSも無料で運用可能!
share0
ブロックを繋げるだけでチャットボットが作成できる「Motion AI」は、WebもSNSも無料で運用可能!
思わずWeb開発したくなる最強のJavaScriptライブラリ7選が楽し過ぎてヤバイ!
share0
思わずWeb開発したくなる最強のJavaScriptライブラリ7選が楽し過ぎてヤバイ!
コード不要で、独自Webサービスをブラウザ上で無料開発できる「Bubble」を使ってみた!
share0
コード不要で、独自Webサービスをブラウザ上で無料開発できる「Bubble」を使ってみた!
指先1本でミニゲームを開発してシェアし合う新型SNSアプリ「Hopscotch」で遊んでみた!
share0
指先1本でミニゲームを開発してシェアし合う新型SNSアプリ「Hopscotch」で遊んでみた!
プログラミング
ad 今の年収で満足ですか?
typeで転職した71%が年収アップ!
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...

ページトップへ戻る