ブラウザで使えるおすすめプログラミングエディタ【オンラインで実行しよう】

プログラミングをやろうと思っても、自分で環境作るの面倒くさい・・・もっと手軽にサクッと試すことはできないものか。きっと思ったことがあると信じます。そんな時に使えるのが、オンラインで実行できるプログラミングエディタ。コードを書けば、そのコードを実行できるからサクッと試すのに便利なんですよね。

今回はそんなオンラインで使えるプログラミングのエディタを紹介していきます。エディタによって使える言語だったり違いがあるから、自分が使いたい言語を使うことのできるエディタを用途に応じて使ってみるといいでしょう。まあちょっと見ていきましょう。

ブラウザで使えるおすすめプログラミングエディタ

paiza.io

paiza.io

paiza.io

paizaをやったことのある人はプログラムをいじったことのある人なら結構多いんじゃないかなー、と思う。paiza.ioはpaiza何やっているオンラインで試せるプログラミング実行環境。

ちなみにトップページにおすすめコードなんてものが出てくるけど、4,5年前のものだったりしてうまく実行できなかったりするから見なくてもいいと思う。4,5年もしたら使えない関数なんかも出てくるだろうしね。

paiza.ioのおすすめコード

paiza.ioで試すことのできる言語はこんな感じ。結構ありますよね。これだけあれば、あまり困ることはなさそうです。

paiza.ioで使うことのできる言語

実行は言語を選択して、その言語でガリガリコードを書いて[実行]ボタンを押せばいいだけ。以下のコードを書いて実行してみます。

package main
import "fmt"
func main(){
    // Your code here!
    
    fmt.Println("Hello World")
}

paiza.ioのエディタでHello World

下のほうに[Hello World]が表示されますね。他の言語でも同じようにやってくれます。

paiza.ioのエディタでPHP版Hello World

ちなみにMySQLを選ぶことができたので、ちょっと試してみました。ブラウザでSQL試せるのかーって思ってね。

create table Test(id integer, title varchar(100));
insert into Test(id, title) values(1, "Hello");
select * from Test;

paiza.ioでSQLを試す

実行してみると、作成したテーブルのデータを見ることができた。ブラウザでSQL実行できるなんて思っていなかったから結構便利かもしれない。ちなみにMySQLはあるけど、Postgresはないですね。

Piaza.io結構いろんな言語でコード書いて実行することができるからブラウザで迷ったら使ってみるといいかもしれない。というよりブラウザでサクッと試すならもうこれでいいんじゃないか感ある。

codingground

codingground

あまり見ないサイトかもしれないけど、codinggroundはかなり多くの言語をブラウザで試すことができる。その網羅範囲が凄いです。

codinggroundで使えるプログラミング言語

ちょっと多すぎて収まらないんだけど、まあこれだけでもかなり多くのものを使うことができるんだなあっていうのが分かると思う。実行はコードを書いて、[Execute]をクリックすれば行われる。

codinggroundでプログラムを実行する

Paiza.io使ってみたけど、使いたい言語が対応していなかった・・・っていう場合にはこのサイトを覗いてみるといいと思うよ。

JSFiddle

JSFiddleはブラウザでHTML・CSS・JavaScriptを試すことのできるエディタ。これ結構使ったりします。デザインも良い感じで悪くない。[Run]を押せば書いたコードの実行結果を右下から見ることができるし、いいです。

JSFiddlede
Hello World

ちなみにjQueryやVue、Reactなんかも使うことができてboilerplateから始めることができる。

JSFiddleのboilerplate

例えばVue、TypeScriptならこんな感じですね。

JSFiddleでVueJSFiddleでTypeScript

良い感じ、綺麗です。

CodePen

CodePenも結構見る機会ありますよね。ネットでコードを検索したりするとCodePenで公開している人とかいるので、その時とか結構助かる。CodePenもJSFiddleと同じようにHTML・CSS・JavaScriptを書いてその実行結果を見ることができます。

Codepen画面

CodePenはただ試すだけじゃなくて、いろんなコードが掲載されていたりするのがなかなか便利。ReactやVue、FlutterなどたくさんのTopicがありますね。

CodePenではいろんなコードが掲載されている

例えばSassをみてみると、Sassに関する誰かのコードが見れたりする。単に自分でコードを書くのを試すだけじゃなくて、他の人が書いたコードを参考にしたい時にも使える。

CodePen見るときって、実装方法検索しててリンククリックしたらCodepenで誰かの参考コードが掲載されていた・・・っていうパターンが多い気がする。CodePenのトップページちゃんと見たことのある人って意外と少ないんじゃないかなーって思うけどどうだろう。

トップページ見てみるとさっき見たTopicなんかかなり種類あるから、普段からコード書くなら一度は見ておくのがおすすめ。HTMLやCSS、JavaScriptを書くならJSFiddleとCodePenなイメージかな。

SQLFiddle

SQLをよく書く人ならお世話になっている人もいるかもしれない。SQLFiddleは、SQLを書いて実行結果を試すことができるオンラインエディタ。

SQLFiddle

ちなみにMySQL以外にもOracleやPostgresも使うことができる。Paiza.ioではMySQLしか使えなかったけど、SQL特化だけあっていくつかDBの種類あって良い感じ。

SQLFiddleではMysql/Postgres/SQLiteなどが使える

ただ、MySQLのバージョンって最新8.0とかじゃなかったけ。そういったところの対応はなされていないようですね、まあしょうがない。

TypeScript Playground

TypeScript PlaygroundはTypeScriptを試すことのできるオンラインエディタ。左側にコードを書いて[Run]で実行すると右側に実行結果が表示されます。

TypeScript Playground

Exampleがいくつかあるけど、結構エラー出たりしたりしてちょっとなんとかして欲しい感がある。

TypeScript Playground 

まあ、TypeScriptを試したいっていう時にはいいかな。ちなみにplaygroundはtypescriptlang.orgの1つの機能で、Docsなんかもあるからタブから色々見てみるといいです。

TypeScript Playground Documentation

まとめ

オンラインで使うことのできるプログラミングのエディタを見てみたけど、どうだっただろうか。調べてみると結構あるからどれ使っていいか迷いますよね。個人的にはJSFiddleなんかをサクッと試したい時によく使うかなーっていう感じです。デザインも綺麗で見やすくて良い感じ。

サーバーサイドの言語は考えてみると、オンラインエディタでそこまで試したことないかなあ・・・っていう感じだ。大体ローカルに環境作ってそこで色々やることが多い気がする。サーバーサイドDBのデータなんかと関連するしね。オンラインだとちょっと試しづらいかもしれない。

まあ、良い感じのあったら、オンラインでも試してみるといいと思いますよ。