ECMAScript 6の使用


162

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

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

回答:


158

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プリプロセッサーが実行されるようにするなど)。これを行うのが好きな場合は、この回答を見て、開発者ツールの動作を変更する方法を学んでください。


5
Chromeの開発
pixel 67

8
アロー関数は、最新バージョンのChromeで完全に実装されています。ただし、このヒントは他のES6機能にも役立ちます。classたとえば、構文のように。
Adam Brown、

7
この回答は、ほとんどが古くなっています。
のMichałPerłakowski

@Gothdo詳細は確かに古くなっています(矢印関数は最近よくサポートされています)が、実験的なJS関数を有効にするための一般的なアドバイスはまだ当てはまります。たとえば、正規表現の後読みはデフォルトでまだ無効になっています。--enable-javascript-harmonyフラグが設定されている/(?<!a)b/.test('ab')場合、次のコードはfalseを返します(フラグが設定されていない場合は次のエラーをスローします: "Uncaught SyntaxError:Invalid regular expression:/(?<!a)b /:Invalid group")
Rob W

古いものではなく、古いバージョンのウィンドウを備えたクライアントのarrow_functionsで同じ問題がありました。旗はトリックをしました、ありがとう!
Jaime Yule

47

BabelはES6を試すのに最適なトランスパイラーです。ES6は、Webサイトの「試してみる」セクションにあるブラウザーで実行できます。jsfiddleと同様に機能します。

矢印の例:

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

結果を表示します 2

ES6を現在のブラウザテクノロジーで実行できるES5 JavaScriptに変換するBabelの「トランスパイル」。Babelはからインストールできnpm install -g babelます。インストールしたら、上の矢印の例をファイルに保存できます。ファイルを「ES6.js」と呼びます。ノードがインストールされているとすると、コマンドラインで出力をノードにパイプします。

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などのトランスパイラでサポートされている機能とブラウザサポートについては、互換性テーブルを参照してください。チャートを展開して、互換性の確認に使用されるテストを表示することもできます。

ここに画像の説明を入力してください

ブラウザで最先端のES6を試すには、FirefoxナイトリービルドまたはChromeリリースチャネルをお試しください


まだ聞いたことがない場合は、jspmをチェックしてください。CommonJS、AMD、ES6モジュールを使用できます。実行前にブラウザでES6をES5に「コンパイル」するには、TraceurまたはBabelに依存しています。jspmの優れた利点の1つは、Githubからnpmモジュールまたは(少しの構成で)モジュールを使用できることです。その他のモジュールリポジトリは将来追加される可能性があります。jspmは、かなりまともなブラウザもサポートしています。テストされていませんが、IE9 +だと思います。(ES6コンパイラーもこれに影響します。)
Kevin Dice

Ubuntu 17.04では、実行sudo npm install -g --save-dev babel-cli babel-preset-es2015$(npm bin)/babel ES6.js --presets es2015て機能させる必要があります。rf
Fruit

12

次のリンクのいずれかを探している可能性があります。

バベルWebPACKのためガルプためうなり声のために他のフレームワークと言語用

開発パイプラインでBabelを使用すると、JavaScriptが自動的にトランスパイル(変換)され、クロスブラウザー互換になります。または、TypeScriptを使用している場合は、安心できます。コードは既に変換されています。




トランスパイラー(Babel / Typescriptなど)をセットアップしたくない、またはトランスパイラーでまだサポートされていない機能を試してみませんか?

ブラウザで試験的なECMAScript機能を有効にするには、chrome:// flags /#enable-javascript-harmonyに移動してJavaScript Harmonyフラグを有効にします。一部の機能では、JavaScriptハーモニーフラグを有効にしてChrome Canaryを使用する必要がある場合があります。

JS harmonyスクリーンショット

新しいJavaScript APIは通常Babelの対象ではなく、独自のChromeフラグを持っています。


矢印関数の使用

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

アロー機能を操作したい場合は、少し難しいものでした。以下の履歴は、この機能を使用するためにさまざまな時点で要したことを示しています。

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

2)次に、Google Chrome でJavaScript Harmonyフラグの背後にある矢印関数が使用可能になります

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

他の新しいECMAScript機能でも同様のパターンが発生することが期待できます。


TypeScriptには優れたトランスパイラーが付属しています。Babelも一般的なJavaScriptトランスパイラーです。es6コードをes5にトランスパイルすると、ブラウザーサポートがes6の素晴らしさを使い始めるのを待つ必要がなくなります!
wp-overwatch.com 2016

6

ただ、使用使用厳格な閉鎖へ、モードを(必要ではないが、それは偉大なアプローチだ)とChromeはES6として、あなたのコードを実行することができるようになります...

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

ここに例があります... http://jsbin.com/tawubotama/edit?html,js,console,output use stric mode行を削除してもう一度試してください。コンソールのエラーがログに記録されます。


3

2015年11月の時点で、FirefoxEdgeがES6レースをリードしてきました。Chromeにない機能を実験したい場合は、それらを使用してください。Edgeにはクラス/サブクラスがあり、FirefoxにはProxyがあります。それらの間には、実質的にすべてのES6機能があります

ChromeコンソールでES6を使用する必要がある場合、シンプルで試行錯誤した真の方法が1つあります。

我慢して。

ブラウザはES6を採用しています。ほとんどのHTML5標準に足を踏み入れてきたSafariもそうです。Googleに時間を与えれば、ES6の機能が1つずつ実装されます。たとえば、矢印機能は現在、生産チャネルでフラグなしで利用できます。

拡張を期待しないでください。ES6を1行ずつES5に変換することはできないため、コンソールをBabelで拡張することはできません。

実験jsフラグがあることは事実ですが、それは正当な理由で存在しています。V8にはプロキシがありますが、古い(非標準)構文であり、セキュリティ上の問題があります。その破壊も不完全です。場合によっては機能し、場合によっては機能しないことがあります。

ES6をプレイしたいだけなら、単にEdge / Firefoxでプレイしてください。どちらもBabelのほぼ全体をカバーし、コンソールとデバッガーを備え、Babelが提供できない機能を備えています。


2
ES6サポートでは、Safariは実際にはすべてのデスクトップブラウザーよりも優れており、ios10モバイルはChrome for Androidよりも優れています。kangax.github.io/compat-table/es6
Louis Duran

@Louis iOS 10以前は、Safariは新興のウェブ技術無視してきました。それから半年経った今でも、古いiOSはブラウザーのみをアップグレードできないため、21%の古いiOSユーザーはES5で立ち往生しています。クロム)。QとAはどちらも時代遅れなので、私はこの答えを変更しないでおきますが、ES6 をわずか超えて見ただけでは、Safari 10は非同期関数またはフェッチAPIがないために遅れています。
Sheepy
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.