個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

ブラウザでプログラミング!ブラウザでコードが書けて実行・確認できるサービス14

ブラウザがあればOK!コードを即実行・確認できるツール

ブラウザでコードが書けて実行・確認できるサービスをご紹介します。
サイトを実際に公開する前にテストするのは当然ですのことですが、できれば手早く、お金を掛けずに、サッサとテストして確認作業を済ませてしまいたいところ。
そんなときに便利なのがブラウザ上でコードをテストできるサービスです。
多くはコードを共有できるサービスとしても有名ですが、テスト環境としてはとっても便利なので、利用しない手はないでしょう。
またコードを勉強する側にとっても、とくに準備することなく即勉強を進められるのでオススメです。

paiza.IO

ブラウザでプログラミング!ブラウザでコードが書けて実行・確認できるサービス14
日本語で公開されているサービス。
対応言語はJava、C、C++、C#、Ruby、PHP、Python、Perl、JavaScriptと言ったメジャーな言語からGo言語やScala、Haskellなど24言語以上に対応。
プログラミングを練習する場合、まずつまづくのが開発環境をセットアップすることでしょう。
でも、このサービスなら、すぐに勉強したいプログラミング言語を始めることが可能です。
オンラインでプログラミングを練習したいという場合は最適のサービスです。
paiza.IO

Coding Ground

ブラウザがあればOK!コードを即実行・確認できるツール
HTML、CSS、JS、Scala、Ruby、C、Objective-C、AngularJS、jQueryなど、非常に幅広い言語に対応。
100以上のプログラミング言語をブラウザ上で実行させることが出来るサービスです。
以前は「CompileOnline」という名前のサービスでした。
Coding Ground

Ideone

ブラウザがあればOK!オンラインでコードを即実行・確認できるツール13
人気のあるオンラインコンパイラとデバッグツール。
60以上のプログラミング言語をオンラインで実行することができます。
Ideone

Codepad

ブラウザがあればOK!オンラインでコードを即実行・確認できるツール13
Webベースのコンパイラ/インタプリタ。
PHP、C++、Ruby,Perlなどのようなプログラミング言語を実行できるツールです。
Codepad

Google Code Playground

ブラウザがあればOK!オンラインでコードを即実行・確認できるツール13
Googleが提供するAPIのJavaScriptサンプルの実行環境。
サンプルソースは編集することができ、編集したあとのプログラムは、そのままブラウザ上で実行することも可能です。
Google Code Playground

WriteCodeOnline

ブラウザがあればOK!オンラインでコードを即実行・確認できるツール13
PHPとJSをオンライン上ですぐにテストできるツール。
WriteCodeOnline

CSSDesk

ブラウザがあればOK!オンラインでコードを即実行・確認できるツール13
HTMLとCSSに絞った、シンプルなサービス。
通常のHTMLサイトだけなら、これで十分かも。
CSSDesk

JSBin

ブラウザがあればOK!オンラインでコードを即実行・確認できるツール13
HTML、CSS、JSを実行できるサービス。
JSBin

jsFiddle

ブラウザがあればOK!オンラインでコードを即実行・確認できるツール13
世界でももっとも人気のあるといっていいHTML、CSS、JSを実行できるサービス。
PrototypeやjQueryといった有名ライブラリも準備されています。
ライブラリを選んで、コードを書き、「Run」を押して実行。必要があれば保存します。
jsFiddle

Codepen

ブラウザがあればOK!オンラインでコードを即実行・確認できるツール13
コードスニペット集として世界的に人気のサービス。
自分でも、HTML、CSS、JSを実行可能です。
Normalize.cssまたはReset.cssを選択することも可能です。
Codepen

Jsdo.it

ブラウザがあればOK!オンラインでコードを即実行・確認できるツール13
HTML、CSS、JSを即実行できる日本発のサービス。
Jsdo.it

Dabblet

ブラウザがあればOK!オンラインでコードを即実行・確認できるツール13
CSSとHTMLコードのスニペットを試すための「インタラクティブな遊び場」。
手軽に実行させたいときに最適です。
Dabblet

Liveweave

ブラウザがあればOK!オンラインでコードを即実行・確認できるツール13
HTML、CSS、JSを実行できるサービスですが、最大の特徴はなんといってもコードヒント機能があること。
例えば、CSSでコードを入力する場合、最初の1文字を入力すれば候補が列挙されるので、うろ覚えの方にはうってつけのサービスといえるでしょう。
Liveweave

Tinkerbin

ブラウザがあればOK!オンラインでコードを即実行・確認できるツール13
HTML、CSS、JSを実行できるサービス。
CoffeeScript, Sass (Compass), Less, HAMLなどもサポートしているのが特徴です。
Tinkerbin

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 2
  • 23

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

商用無料で高画質画像を配布するUnsplashがプレースホルダー画像サービスを開始

便利すぎる!商用無料で高画質画像を配布するUnsplashがプレースホルダー画像生成サービスを開始

商用無料で高画質画像を配布するUnsplashがプレースホルダー画像生成サービスを開始しました。

記事を読む

twitterでのキーワードのひろがりを調べられるツール「twimp」

twitterでのキーワードのひろがりを調べられるツール「twimp」

twitterでのキーワードのひろがりを調べられるツール「twimp」をご紹介します。 作成者した

記事を読む

コピペで完了!12種類のプログレスバーを簡単に導入できるPACE.js

すでに当サイトにも導入してみたのですが、お気づきでしょうか。 PC版で当サイトをご覧いただくと、画

記事を読む

レスポンシブ対応のコンテンツスライダー/スライドショーベスト8

以前の記事「レスポンシブ対応などコンテンツスライダー/スライドショー用jQueryプラグイン50+」

記事を読む

プログラミング・コーディングの作業効率UP!ミスを激減させる見やすいフリーフォント18

プログラミングやコーディングするとき、どんなフォントを使っていますか? 私の場合、Coda 2とい

記事を読む

CSSだけでブルブル震えるエフェクトを簡単実装!CSS Shakeを使ってみた

CSSだけでブルブル震えるエフェクトを簡単実装!CSS Shakeを使ってみた

CSSだけでブルブル震えるエフェクトを簡単実装!CSS shakeを使ってみた すでにお気づき

記事を読む

月額ゼロ円(無料)でホームページ・ECサイトを制作・運営できるサービス12

ホームページ制作を生業としているものにとっては、穏やかではないのが「無料でホームページを制作できてし

記事を読む

HTML,CSS,JSのコードを美しく整形し?部分の指摘もしてくれるDirty Markup

HTML,CSS,JSのコードを美しく整形し?部分の指摘もしてくれるDirty Markup

HTML,CSS,JSのコードを美しく整形し、?部分の指摘もしてくれるDirty Markupをご紹

記事を読む

CSSを丸裸にして見やすく統計的に整理してくれる「CSS STATS」

サイトのCSSを解析してくれるサービスってたくさんありますが、項目ごとに見やすくまとめてくれて、活用

記事を読む

WEBデベロッパーのためのおすすめYouTubeチャンネル15選

WEBデベロッパーのためのおすすめYouTubeチャンネルをご紹介します。 対象はHTML、CSS

記事を読む