イケてるオンラインエディタでドヤ顔を…！

こんにちは。
ついに自分の番が回ってきて、かなりのプレッシャーを感じております。
社会人４ヶ月目、新米フロントエンジニア（デザインもしますよ）の坂本です。

フロントエンドの記事で上司がヒエログリフなんて彫ってしまったもんなので、どんな面白い記事を書いたらよいのかと余計にプレッシャーを感じております。
参考：2016年6月30日ヒエログリフを彫る。cssで

困りました。

ところで、フロントエンドの人なんかがブログを書くとなると、
面白い文章の記事よりも実際に作ってみたサンプルを動かしてみて、どうです？すごいでしょ！？的な記事が多くなってくると思うんです。
そこで、活躍するのが、先のヒエログリフでも使われておりましたコレです。

See the Pen <a href="http://codepen.io/haradabox/pen/jryJdR/" class="liexternal" data-wpel-link="external" rel="external noopener noreferrer">Making hieroglyph with cartouche</a> by haradabox (<a href="http://codepen.io/haradabox" class="liexternal" data-wpel-link="external" rel="external noopener noreferrer">@haradabox</a>) on <a href="http://codepen.io" class="liexternal" data-wpel-link="external" rel="external noopener noreferrer">CodePen</a>.<br />

これならhtml、css、jsのコードが簡単に見ることができるので、簡単に「ドヤァ」とできます。

ドヤァとしてますね。

これはオンラインエディタというサービスなんですが、今回はドヤァとしたい方たちのためにイケてるオンラインエディタをご紹介いたします。

オンラインエディタとは

上では、フロントエンドがドヤ顔するためのサービスのように紹介しましたが、基本的には
「html、css、jsなどをブラウザ上で編集してすぐ検証できる。」
というものです。
サービスによって、機能に差異はありますが大体こんなもんです。

ということでサクッとまとめます。

codepen（SNS機能でドヤァ…）

See the Pen <a href="http://codepen.io/eeonk/pen/YWaVmW/" class="liexternal" data-wpel-link="external" rel="external noopener noreferrer">doya_cat</a> by kohei sakamoto (<a href="http://codepen.io/eeonk" class="liexternal" data-wpel-link="external" rel="external noopener noreferrer">@eeonk</a>) on <a href="http://codepen.io" class="liexternal" data-wpel-link="external" rel="external noopener noreferrer">CodePen</a>.<br />

件のcodepenです。
なんだか最近やたら盛り上がっているサービスです。機能が豊富で、SNS機能もあり他人のコードを自由に編集したりすることもできます。
もはやSNS機能の方がメインで、オンラインでコードを書く共有するサービスという感じです。
存分に自分が書いたコードをドヤァする機能が備わってるなという印象でした。
ちなみに現在のcodepen内はPokémon GOに浮かれたアメリカ人たちであふれています参考

memo

SNS機能
他人のすごいコードをコピペしなくともいじれる。（結構クオリティ高い）
コードの投稿だけでなく、記事の投稿も可能。
他の人の見ててふつうに楽しい
console見れる
カスタマイズしやすいエディタ
head,Bodyタグいらない
ドヤァしたい人の巣窟だった

使える言語

html	CSS	Javascript
Haml	scss	CoffeeScript
markdown	sass	LiveScript
slim	less	Babel
jade	stylus
	postCSS

jsbin（おしゃれ感あふれるオンラインエディタでドヤァ…）

on jsbin.com

機能的にも、見た目的にもかなりシンプルな作りですが、
洗練されたデザインでおしゃれ感あふれるオンラインエディタです。
実際に使ってみると、なんだかおしゃれな気持ちになります。もっと言うとすごく仕事できる人になった気持ちになります。

memo

キャラクタがかわいい
consoleもついているので検証しやすい
やたらシンプル
html,css,jsがコンパイル可能なのがイカしてる
自動保存してくれる。
jsライブラリのバージョンも選べる

使える言語

html	CSS	Javascript
markdown	less	EC6/Babel
jade	Sass(with Compas)	JSX(React)
	SCSS(with Compas)	CoffeeScript
	stylus	Traceur
		TypeScript
		Processing
		LiveScript
		ClojureScript

(それぞれhtml,css,javascriptにコンバート可能)

jsfiddle.net（すっきりした埋め込みタグでドヤァ…）

埋め込みタグがすっきりしてるのが良いですね、
「派手な装飾なんていらない！俺のコードだけを見てくれ！」という方にピッタリです。
あと、共同編集機能ってのが気になります。

memo

共同編集ができる。キニナル
これもjsのライブラリ豊富
head,bodyタグなどがいらない
jsライブラリのバージョンも選べる

使える言語

html	CSS	Javascript
	SCSS	CoffeeScript
		JavaScript 1.7
		Babel
		TypeScript

plnkr.co（大規模なコードを書いてドヤァ…）

一つのプロジェクトに、複数ファイルを作ることができるので大規模なコードを書くときに便利ですね。
さらに、なにげに多機能でSNS機能もついております。だけどcodepenほどは盛り上がってなさげ…

memo

jsライブラリのバージョンも選べる
SNS的な機能はあるけど、若干ドヤァしずらい…？
一つのプロジェクトに複数ファイルを作れる
自動保存してくれる（バージョンが分かりやすい）
ここにも！共同編集機能アリ
埋め込みタグ用意してないので、自分でiframe作んなきゃ…
地味に多機能！

使える言語

html	CSS	Javascript
Jade	Stylus	Coffee-Script
Markdown	Sass	Iced-Coffee-Script
	Less	LiveScript

公式のドキュメントなかったので…
参考：Compiled languages now supported by Plunker!

まとめ

ああ、どれも甲乙つけがたい。

以上4つを紹介しましたが、一番「俺のコードドヤァ」とできるサービスはcodepenかなという印象でした。codepenのSNSはドヤァとしたい人の巣窟でした。
個人的にオンラインエディタをざっくり比べてみて、レーダーチャートにまとめてみましたので、ご参考までに。

JS Bin on jsbin.com

おもにドヤァとすることをメインとしましたが、どれも雰囲気や機能などが結構違っていてるので場面ごとい使い分けたりするとよいかもしれませんね。まぁ自分の使いやすいやつを見つけてください。

ドヤァとする以外にも、ちょっと試してみたいことがあるときなど、ブラウザですぐに実行できるので結構便利ですし、
js初心者、web初心者の方なんかは、学習ツールとしても有効かもですね。

ここで紹介しきれなかったオンラインエディタもありますので、気になる人はそちらも見てみてください。
今回紹介したのは海外のサービスのみでしたが、日本製のものもあるみたいですよ！

その他のオンラインエディタ

thimble.mozilla.org / jsdo.it / runstant.com / liveweave.com / etc.