web-dev-qa-db-ja.com

ECMAScript 6の使い方

私は自分のブラウザのコンソールでECMAScript 6コードを実行する方法を探していますが、ほとんどのブラウザは私が探している機能をサポートしていません。たとえば、Firefoxは矢印機能をサポートする唯一のブラウザです。

Chromeでこれらの機能を実行できる方法（拡張子、ユーザースクリプトなど）はありますか？

google-chromegoogle-chrome-extensionuserscriptsecmascript-6
153
Spedwards

Chromeでは、ほとんどのES6機能が「実験的JavaScript機能」と呼ばれるフラグの背後に隠されています。 chrome://flags/#enable-javascript-harmonyにアクセスしてこのフラグを有効にし、Chromeを再起動すると 多くの新機能 が表示されます。

矢印機能は V8/Chromeではまだ実装されていません なので、このフラグは矢印機能を「ロック解除」しません。

矢印関数は構文が変更されているため、JavaScriptの解析方法を変更せずにこの構文をサポートすることはできません。 ES6での開発が大好きな場合は、ES6コードを作成し、ES6からES5へのコンパイラを使用して、既存の（最新の）すべてのブラウザと互換性のあるJavaScriptコードを生成できます。

たとえば、 https://github.com/google/traceur-compiler を参照してください。これを書いている時点で、 ES6のすべての新しい構文機能 をサポートしています。この答えの冒頭で述べたフラグと一緒に、あなたは非常に望ましい結果に近づくでしょう。

ES6構文をコンソールから直接実行したい場合は、コンソールのJavaScriptエバリュエーターを上書きしてみることができます（コードを実行する前にTraceurプリプロセッサーが実行されるなど）。あなたがこれをしているのなら、開発者ツールの振る舞いを変更する方法を学ぶために この答え を見てください。

151
Rob W

Babel はES6を試してみるための素晴らしいトランスピラーです。 Webサイトの「試してみる」セクションのブラウザでES6を実行できます。 jsfiddleと同様に機能します。

例えば矢印

let add = (x,y) => x + y;
let result = add(1,1);
console.log(result);

結果を表示します2。

Babelは "transpiles"、つまりES6を現在のブラウザテクノロジで実行可能なES5 JavaScriptに変換します。 Babelはnpm install -g babel経由でインストールできます。インストールしたら、上の矢印の例をファイルに保存できます。ファイルを "ES6.js"と呼ぶとしましょう。 nodeがインストールされていると仮定して、コマンドラインで出力をnodeにパイプします。

babel ES6.js | node

そして、あなたは出力2を見るでしょう。次のコマンドで翻訳ファイルを永久保存することができます。

babel ES6.js --out-file output.js

output.js "transpiled"：

"use strict";

var add = function (x, y) {
  return x + y;
};

var result = add(1, 2);

console.log(result);

もちろん、どのブラウザでも実行できます。

クラスを使った例

ES6は動きの速いターゲットです。 TraceurやBabelなどのtranspilerでサポートされている機能やブラウザのサポートについては 互換性表 を参照してください。チャートを拡張して、互換性を検証するためのテストを確認することもできます。

enter image description here

ブラウザでEdge ES6の血抜きを試すには、 Firefox夜間ビルド または Chromeリリースチャンネル を試してください。

43
P.Brian.Mackey

ECMAScript Nextの使用（ES6、ES7など）

新しい機能がすべての視聴者に確実に機能するようにするには、transpilerを使用します。 transpilerはあなたのコードをすべてのブラウザで互換性のあるコードに変換することによって今日の最新のECMAScript機能を使うことを可能にします。以下は良いtranspilerです。



transpilerを設定したくない、またはまだtranspilerでサポートされていない機能を使いたいですか？

ブラウザで実験的なECMAScript機能を有効にするには、 chrome：// flags /＃enable-javascript-harmony に進み、JavaScript Harmonyフラグを有効にします。一部の機能では、フラグを有効にして Chrome Canary を使用する必要があります。

JS harmony screenshot


矢印機能を使う

この質問では、特に矢印関数の使用について言及しました。矢印機能は、IEとOpera Miniを除くすべてのブラウザでネイティブにサポートされるようになりました。 caniuse を参照してください。

あなたが矢印機能で遊んでみたければ、それは少し困難でした。以下の履歴は、この機能を使用するのに異なる時点で何が必要かを示しています。

1）最初は、矢印関数はchrome://flags/#enable-javascript-harmonyフラグが有効になっているChrome Canaryでのみ機能しました。この機能は少なくともバージョン39で 部分的に実装された であるように見えます。

2）それから、矢印はJavaScript Harmonyフラグの後ろのGoogle Chromeで利用可能にされるところで機能します。

3）最後に、Google Chrome 45では、デフォルトで矢印が有効になっています。

他の新しいECMAScript機能でも同様のパターンが発生することが予想されます。

9
Mr. Me

厳密にuse strictモードを使用するだけで（不要ですが、これは素晴らしい方法です）、ChromeはコードをES6として実行できます。

(function(){
  'use strict';
  //your ES6 code...
})();

ここでの例は... http://jsbin.com/tawubotama/edit?html,js,console,outputuse stricを削除してみてくださいモード行を再試行してください。コンソールのエラーがログに記録されます。

5
Miguel Lattuada

2015年11月現在、 Firefox と Edge がES6の主流となっています。Chromeにない機能を試してみたい場合は、それらを使用してください。 Edgeは class/subclass を持ち、Firefoxは Proxy を持ちます。それらの間には、ほとんどすべてのものがあります ES6の機能 。

ChromeコンソールでES6を使用する必要がある場合は、簡単で実証済みの方法が1つあります。

我慢して。

ブラウザはES6を採用しています - Safariでも、ほとんどのHTML 5規格に力を入れています。 Googleに時間を与えてください。そうすれば、彼らはES6の機能を一つずつ実装するでしょう。たとえば、矢印機能は、生産チャネルで、フラグなしで利用可能になりました。

拡張を期待しないでください。 ES6をES5に1行ずつ変換することはできませんので、 Babel で extend consoleを使用することはできません。

Experiment jsフラグがあるのは事実ですが、それは正当な理由で存在します。 V8にはProxyがありますが、古い（非標準）構文であり、 セキュリティー上の問題 を持っています。そのデストラクタリングも不完全です。場合によってはうまくいくこともあれば、うまくいかないこともあります。

ES6だけをプレイしたい場合は、Edge/Firefoxでプレイしてください。どちらもほぼすべてのBabelをカバーし、コンソールとデバッガを持ち、そしてBabelが提供できない機能を持っています。

2
Sheepy