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

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

困りました。

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

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

ドヤァとしてますね。

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

オンラインエディタとは

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

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

———————————————

codepen（SNS機能でドヤァ…）

件の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.