読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

文系新卒プログラマーのメモ

クロームでES6が実行できる拡張機能「ScratchJS」の使い方

ES6

きっかけはこちらの神ブラウザ。

 

www.slideshare.net

 

周回遅れのフロントエンドエンジニアとしては、もう藁にもすがる思いで跳ぶつきましたね。ええ。

このスライドの中で、「ES6を実行できるクロームExtensionがある!」とのことだったので、それらしくものを試してみました。

 

ScratchJSとは??!

f:id:chuck0523:20151019220032p:plain

これです。

ロームストアで「ES6」で検索したらヒットします(2015年10月現在)

 

 

f:id:chuck0523:20151019215957p:plain

このスライドで言うところの、一番上のExtensionって、ScratchJSのことですよね。たぶん。

 

ちなみに公式はこちら。

github.com

開発者イケメンですね。爽やか笑顔に癒やされます。(もちろんGitHubTwitterフォローしました)

 

使ってみる

1,クロームを立ち上げます。

f:id:chuck0523:20151019220653p:plain

 

2,開発者ツールを開きます。

f:id:chuck0523:20151019220714p:plain

 

3,ScratchJSを選択します。

f:id:chuck0523:20151019220758p:plain

 

一番下にある項目ですね。

f:id:chuck0523:20151019220808p:plain

 

 

いざ、ハーモニー

※ハーモニー=ES6のコードネーム

 

f:id:chuck0523:20151019220908p:plain

じゃん!書きました。

 

⌘+Enterで実行すると、下のコンソール画面に表示されます。カンタンですね。

 

所感

やっぱりコーディングしながら、⌘+Sを押しちゃいますよね〜。

すると、エディタではないので、現在開いているページを保存しようとしまいます。これが若干気になりました。

ただ、軽くES6を試すくらいならいいのかな〜と思いました。Babel公式のtry画面に行く手間が省けます。

 

というわけで、入れておいて損はないんじゃないかなといったところです。

 

おまけ

Settingをいじれます。

f:id:chuck0523:20151019221252p:plain

 

Themeを僕らのMonokaiにすると…

 

f:id:chuck0523:20151019221307p:plain

ローム上でSublimeを開いている気分になれます!