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

アプギガトップ > 5秒で、Web上にプログラミング勉強用の実行環境が作れるWebサービス9選!
注目記事ピックアップ
こんなAR技術が欲しかった!スマホをかざすだけでプロ並みのスケッチを描ける「SketchAR」アプリを使ってみた!
share0
こんなAR技術が欲しかった!スマホをかざすだけでプロ並みのスケッチを描ける「SketchAR」アプリを使ってみた!
指先1本でミニゲームを開発してシェアし合う新型SNSアプリ「Hopscotch」で遊んでみた!
share0
指先1本でミニゲームを開発してシェアし合う新型SNSアプリ「Hopscotch」で遊んでみた!
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
share0
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
share0
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
開発が面倒なWebコンテンツを「ウィジェット化」して誰でも利用可能にする無料サービス「Widgetic」を使ってみた!
share0
開発が面倒なWebコンテンツを「ウィジェット化」して誰でも利用可能にする無料サービス「Widgetic」を使ってみた!
データ可視化の最強ツール!Web上でスライド資料やインフォグラフィックを制作できる万能Webエディタ「Visme」を使ってみた!
share0
データ可視化の最強ツール!Web上でスライド資料やインフォグラフィックを制作できる万能Webエディタ「Visme」を使ってみた!
「アプギガ!!」2016年の総まとめ!もう一度読みたくなる人気のバズ記事をまとめてみた!
share0
「アプギガ!!」2016年の総まとめ!もう一度読みたくなる人気のバズ記事をまとめてみた!
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
share0
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
まだ進化を続けるGoogle検索の特殊機能12選をまとめてみた!
share0
まだ進化を続けるGoogle検索の特殊機能12選をまとめてみた!
天才的な猛者が開発した究極の「HTML5ゲーム」16選が思わず熱くなり過ぎる件!
share0
天才的な猛者が開発した究極の「HTML5ゲーム」16選が思わず熱くなり過ぎる件!
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
share0
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
share0
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
share0
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
Webサイトに訪れたユーザーの行動を「映像化」してトラッキングできる「Jaco」を使ってみた!
share0
Webサイトに訪れたユーザーの行動を「映像化」してトラッキングできる「Jaco」を使ってみた!
登録不要!匿名で記事も公開できる究極にシンプルなWebエディタ「IO」が最高の使い心地だった!
share0
登録不要!匿名で記事も公開できる究極にシンプルなWebエディタ「IO」が最高の使い心地だった!
わずか1行のコードで、Web制作が劇的に捗るサービスと連携し放題になる「StackPile」を使ってみた!
share0
わずか1行のコードで、Web制作が劇的に捗るサービスと連携し放題になる「StackPile」を使ってみた!
JavaScriptの学習にオススメなWebコードエディタ「Carbide」の万能すぎる可視化ウィジェットがヤバイ!
share0
JavaScriptの学習にオススメなWebコードエディタ「Carbide」の万能すぎる可視化ウィジェットがヤバイ!
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
share0
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
スクショ付きでブックマークを一元管理できるWebアプリ「Bookmark OS」を使ってみた!
share0
スクショ付きでブックマークを一元管理できるWebアプリ「Bookmark OS」を使ってみた!
JavaScriptでマインクラフト風の建造物が作れる無料Webアプリ「Web Blocks」で遊んでみた!
share0
JavaScriptでマインクラフト風の建造物が作れる無料Webアプリ「Web Blocks」で遊んでみた!
プログラミング
ad 今の年収で満足ですか?
typeで転職した71%が年収アップ!
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...

ページトップへ戻る