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

アプギガトップ > 5秒で、Web上にプログラミング勉強用の実行環境が作れるWebサービス9選!
注目記事ピックアップ
動画の中身をAI(人工知能)が認識&タグ付けする「Clarifai」が検索エンジンに革命を起こす!
share0
動画の中身をAI(人工知能)が認識&タグ付けする「Clarifai」が検索エンジンに革命を起こす!
スタートアップや企業Webサイトの作成に必要な機能全部入りの「uKit」が無料公開中!
share0
スタートアップや企業Webサイトの作成に必要な機能全部入りの「uKit」が無料公開中!
発射した弾が、相手のスマホ画面に飛んでいく対戦ゲーム「DUAL」が衝撃的な面白さだった!
share0
発射した弾が、相手のスマホ画面に飛んでいく対戦ゲーム「DUAL」が衝撃的な面白さだった!
今すぐスマホを「リモコン」代わりに遊べる厳選Webアプリが、盛り上がること間違いなし!
share0
今すぐスマホを「リモコン」代わりに遊べる厳選Webアプリが、盛り上がること間違いなし!
ブログ感覚で、独自の「オンライン講座」を作って公開できる「Classmill(無料)」を使ってみた!
share0
ブログ感覚で、独自の「オンライン講座」を作って公開できる「Classmill(無料)」を使ってみた!
好きなYouTube動画の「見て欲しいシーン」だけを抽出して再公開できる「vibby」が便利すぎる件!
share0
好きなYouTube動画の「見て欲しいシーン」だけを抽出して再公開できる「vibby」が便利すぎる件!
思わずWebアプリを開発したくなる「JavaScriptライブラリ7選」を一挙公開!
share0
思わずWebアプリを開発したくなる「JavaScriptライブラリ7選」を一挙公開!
iPadに話しながら手描きするだけで、授業風の動画を作って公開できる「Educreations」が超絶便利!
share0
iPadに話しながら手描きするだけで、授業風の動画を作って公開できる「Educreations」が超絶便利!
コード不要で、独自Webサービスをブラウザ上で無料開発できる「Bubble」を使ってみた!
share0
コード不要で、独自Webサービスをブラウザ上で無料開発できる「Bubble」を使ってみた!
スマホの映像が本当に飛び出す「3Dホログラム」を、30分くらいで作ってみた!
share0
スマホの映像が本当に飛び出す「3Dホログラム」を、30分くらいで作ってみた!
「Prott」新機能のワイヤーフレーム作成ツールで、超高速プロトタイプピングを実践してみた!
share0
「Prott」新機能のワイヤーフレーム作成ツールで、超高速プロトタイプピングを実践してみた!
完全自動で、自分のプログラミング「作業ログ」を収集して可視化する「WakaTime」が素晴らしい件!
share0
完全自動で、自分のプログラミング「作業ログ」を収集して可視化する「WakaTime」が素晴らしい件!
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
share0
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
share0
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
海外のニッチな情報収集に特化したWebサービス7選が、Google先生より詳しいと話題に!
share0
海外のニッチな情報収集に特化したWebサービス7選が、Google先生より詳しいと話題に!
Chromeの「新規タブ」機能が拡張され過ぎて、もはや別アプリと化している件!
share0
Chromeの「新規タブ」機能が拡張され過ぎて、もはや別アプリと化している件!
天才的なアイデアで開発された海外の「iPhoneアプリ事例7選」が、斬新過ぎてヤバイ!
share0
天才的なアイデアで開発された海外の「iPhoneアプリ事例7選」が、斬新過ぎてヤバイ!
プロジェクター不要のプレゼン資料が作れるWebサービス「Slides」があまりに多機能過ぎる件!
share0
プロジェクター不要のプレゼン資料が作れるWebサービス「Slides」があまりに多機能過ぎる件!
欲しいコンテンツを選ぶだけでWebサイトを作成できる「XPRS」が、無料とは思えないクオリティだった件!
share0
欲しいコンテンツを選ぶだけでWebサイトを作成できる「XPRS」が、無料とは思えないクオリティだった件!
URLを指定するだけ!どんなWebデータも一発で可視化できる「Silk」は、そのままWebサイトも制作可能で無料提供中!
share0
URLを指定するだけ!どんなWebデータも一発で可視化できる「Silk」は、そのままWebサイトも制作可能で無料提供中!
プログラミング
2014/09/25 22:30

5秒で、Web上にプログラミング勉強用の実行環境が作れるWebサービス9選!


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

初めてプログラミングの勉強をする際に、意外と面倒なのがコードを実行するための「開発環境」を整えることではないでしょうか…。

そこで、ブラウザ上から「ログイン無し」で素早くプログラミングを実行できる環境を、「無料」で提供しているWebサービスをピックアップしてご紹介しようと思います!

 

Webプログラミング学習に最適なサービス!
webscript


Webサーバーと連携しながらサービスを作る練習としては、こちらがオススメ!

 

サイトに入り、「Accept」ボタンをクリックすると「コード」を入力できるエディタが表示されます。


このエディタ部分に、Lua言語の多彩なサンプルコードを見ながら、コードを入力していくことになります。

入力後に、「実行・確認ボタン」をクリックすることで、別タブが開いて結果を確認することが出来るようになっています。

 

例えば、ログイン画面を作ってみたり…


 

Amazon S3を使って、ファイルのアップロード確認をしてみたりなどが可能です。


他にも、多数公開されているAPIを実行したり、JSONの練習やサーバー側のログ確認の勉強などにも最適ですね。

 
あの、懐かしい「BASIC言語」を学習するのに最適なサービス!
Quite BASIC


ファミコン世代の人は、恐らくBASIC言語をしっかりと学んだのではないでしょうか…。

 

サイトを訪れると、すぐにプログラミングできる画面となっており、サンプルコードも多数閲覧できるようになっています。


このサンプルを見ながら勉強をしてみたり、Googleなどで検索しながら学習するのも良いでしょう。

 

昔懐かしいゲームも、いくつか収録されています。


ちなみに「RUN命令」は使わずに、上部の再生ボタンをクリックすることで実行されるようになっています。

 
Apple社が提供する新言語「Swift」の勉強に最適なサービス!
RunSwift


iPhoneのアプリ制作などに使われる言語として「Objective-C」が有名ですが、最近は新言語の「Swift」も人気が高くなっています。

「RunSwift」は、文字通りSwiftでコードを入力して、すぐに実行結果を確認することが出来るサービスとなっています。

サイトを訪れると、すでにコードが入力できる状態となっており、下部の「Compile」ボタンをクリックすることで実行される仕組みです。

 

また、エディタだけの提供ではなく、上部メニューの「Learn」タブから「オンライン学習コース」を受けることも可能です。


Swiftの基礎から、例文を使った使用方法などを一通り学べる内容になっているので、初心者にも最適でしょう。

 
「非通信」ですぐにプログラミングを始められるサービス!
runstant


お馴染みのHTML、CSS、JavaScriptを使ったプログラミング学習に最適なのがコチラ!

サーバーとの通信が不要にも関わらず、コードの実行や確認・保存が出来るようになっているので、動作が非常にスムーズなのが特徴です。

また、設定からマークダウン、Sass、less、typescript、CoffeeScriptなどを使ったプログラミングも学習できるようになっています。

 

作成したコードは、簡単にSNSなどへ共有することも出来るので便利です。


 
ビジュアル・プログラミングを学ぶのに最適なサービス!
Flower


プログラミングの骨組みを、視覚的に分かりやすく勉強する方法として「ビジュアル・プログラミング」を使うと便利です。

現在では、「Scratch」などが有名ですが、Flowerはデータの流れを具体的に見ることができるようになっているのが特徴です。

 

データが、どのように視覚化されて流れていくのかは、以下の動画を見ると分かりやすいです。



サイト上で、実際にブロックを組み立てながらプログラミング出来るようになっているので、ご興味ある方はぜひ挑戦してみてください。

 
Gitの基礎を、ブラウザ上で学ぶのに最適なサービス!
Explain Git width D3


Gitコマンドをブラウザ上から入力して、基本的な概念まで学習できるサービスとなっています。

トップページから、「Free Playground」のリンクをクリックします。

 

すると、Gitコマンドが入力できるようになります。


 

しかも、コマンドを入力すると、右側にアニメーションしながら現在の状態を視覚化してくれる機能が搭載されているのです。


これで、ちょっと分かりにくいGitの概念を理解しやすくなっているのが特徴です。

 
マークダウンを学習するのに役立つサービス!
StackEdit


マークダウン記法を自由に書き込んで試せるサービスがコチラ!

 

学習するのに便利なサービスですが、他にもWordPressやGitHub、独自サーバーなどへ書き出すことが出来るようになっているのが非常に便利な点です!


これにより、マークダウンでサクッと文章を書いておき、そのままブログなどへ書き出すことも簡単です。

 

さらに、シーケンス図やフローチャート図も簡単な記法で変換できるようになっているので、文書で説明するのが難しいケースなどに便利ですね。


数多くある、類似のマークダウンエディタの中でも、StackEditはかなり優秀なサービスかと思います。

 
CSSをガッツリ学習したい人に最適なサービス!
CSSDesk


一応、HTMLもいじれるのですが、基本的にCSSをメインでコーディングするのに特化したエディタがコチラ!

EnjoyCSS」のような高機能ジェネレーターのサービスもありますが、こちらはコードを直接入力しながら操作するため、CSSの文法を学習するのには最適かと思います。

 
ニッチな分野のプログラミング学習に最適なサービス!
repl.it


プログラミング言語は、非常にたくさんの種類があるわけですが、なかにはかなりニッチな分野のモノもあります。

スタック指向の言語「Forth」、多次元配列処理が得意な言語「APL」など、普段あまり使いそうにないような言語を学習する時にはこちらのサービスが良いかもしれません。

 

エディタは、言語を選択すればすぐに利用できるようになっています。


他にも、よく使われているPython、JavaScript、Rubyなども利用できるので、こちらをメインで使うのも問題ありません。

 

 
おまけ
最後に、あらゆるプログラミング言語をブラウザ上で実行させることが出来るサービスをご紹介しておきます。

CompileOnline


有名なサービスなので、ご存知の方も多いかと思います。

HTML、CSS、JS、などが利用できるのは当然で、Scala、Ruby、C、Objective-CやAngularJS、jQueryなどなど…。かなり幅広い言語を網羅しているので、ぜひチェックしてみてください!

 

 
まとめ
書籍や、ブログなどの記事を読みながら、気軽にプログラミングを学べる環境がWeb上で整うのは非常に便利です。

現在、勉強をされている人以外にも、ちょっとコードを試したいような人でも便利に使えるのではないかと思います。

さらに、本格的な開発環境が必要になったら、「Nitrous」や「Cloud9」のようなWebサービスもあるので、本当にブラウザさえあればOK!という時代になりつつあるのではないでしょうか。

 

 

written by まさとらん

 

 

まさとらん

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

twitter:0310lan

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

ページトップへ戻る