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

アプギガトップ > 5秒で、Web上にプログラミング勉強用の実行環境が作れるWebサービス9選!
注目記事ピックアップ
GoogleドライブにTrello風タスク管理機能を拡張できる「Kanbanchi」を試してみた!
share0
GoogleドライブにTrello風タスク管理機能を拡張できる「Kanbanchi」を試してみた!
Web開発系の情報収集が爆速になる絶対覚えておきたいWebサービス7選+α!
share0
Web開発系の情報収集が爆速になる絶対覚えておきたいWebサービス7選+α!
動画の中身をAI(人工知能)が認識&タグ付けする「Clarifai」が検索エンジンに革命を起こす!
share0
動画の中身をAI(人工知能)が認識&タグ付けする「Clarifai」が検索エンジンに革命を起こす!
コード不要で、独自Webサービスをブラウザ上で無料開発できる「Bubble」を使ってみた!
share0
コード不要で、独自Webサービスをブラウザ上で無料開発できる「Bubble」を使ってみた!
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
share0
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
URLを指定するだけ!どんなWebデータも一発で可視化できる「Silk」は、そのままWebサイトも制作可能で無料提供中!
share0
URLを指定するだけ!どんなWebデータも一発で可視化できる「Silk」は、そのままWebサイトも制作可能で無料提供中!
ブログ感覚で、独自の「オンライン講座」を作って公開できる「Classmill(無料)」を使ってみた!
share0
ブログ感覚で、独自の「オンライン講座」を作って公開できる「Classmill(無料)」を使ってみた!
複数人コラボも可能な楽譜作成エディタを搭載した新SNS「Flat.io」が、完全無料で公開中!
share0
複数人コラボも可能な楽譜作成エディタを搭載した新SNS「Flat.io」が、完全無料で公開中!
脅威の認識技術で別人の顔に変身できるアプリ「MSQRD」が予想以上に変身できる件!
share0
脅威の認識技術で別人の顔に変身できるアプリ「MSQRD」が予想以上に変身できる件!
Chromeの「新規タブ」機能が拡張され過ぎて、もはや別アプリと化している件!
share0
Chromeの「新規タブ」機能が拡張され過ぎて、もはや別アプリと化している件!
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
share0
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
タスク管理の「Trello」にWeb制作機能を搭載できる「CardForm」が斬新過ぎてスゴイ!
share0
タスク管理の「Trello」にWeb制作機能を搭載できる「CardForm」が斬新過ぎてスゴイ!
Webサイトに訪れたユーザーの行動を「映像化」してトラッキングできる「Jaco」を使ってみた!
share0
Webサイトに訪れたユーザーの行動を「映像化」してトラッキングできる「Jaco」を使ってみた!
好きなYouTube動画の「見て欲しいシーン」だけを抽出して再公開できる「vibby」が便利すぎる件!
share0
好きなYouTube動画の「見て欲しいシーン」だけを抽出して再公開できる「vibby」が便利すぎる件!
ブラウザだけで完結する「bot開発環境」を無償提供した「Meya.ai」は、ボットのホスティングまで可能!
share0
ブラウザだけで完結する「bot開発環境」を無償提供した「Meya.ai」は、ボットのホスティングまで可能!
わずか数行のコードで、Adobe製の画像編集エディタを無料で使い放題にできる「Creative SDK」がヤバイ!
share0
わずか数行のコードで、Adobe製の画像編集エディタを無料で使い放題にできる「Creative SDK」がヤバイ!
スマホの映像が本当に飛び出す「3Dホログラム」を、30分くらいで作ってみた!
share0
スマホの映像が本当に飛び出す「3Dホログラム」を、30分くらいで作ってみた!
ブロックを繋げるだけでチャットボットが作成できる「Motion AI」は、WebもSNSも無料で運用可能!
share0
ブロックを繋げるだけでチャットボットが作成できる「Motion AI」は、WebもSNSも無料で運用可能!
完全自動で、自分のプログラミング「作業ログ」を収集して可視化する「WakaTime」が素晴らしい件!
share0
完全自動で、自分のプログラミング「作業ログ」を収集して可視化する「WakaTime」が素晴らしい件!
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
share0
ブロックを繋げてWebアプリやゲームを作れる「Weld Action 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...

ページトップへ戻る