このページは Cloud Translation API によって翻訳されました。

ES2015

ES2015（旧称 ES6）は大きな進歩を遂げています新しい機能と ES5 で重要なボイラープレートを必要とするパターンのシュガーリング。このクラス、アロー関数、モジュールが含まれます。このエピソードでは JavaScript ウェブアプリを作成する際に、ES2015 を最大限に活用しています。

Babel によるトランスパイル

JavaScript エンジンは進捗: ES2015 の実装が進行中 1 つの問題がありますすべての機能を使用するには現在はコードを ES5 にトランスパイルして戻し、現在のブラウザでは解釈できません幸いなことに、Babel のようなツールを使えばこのプロセスを簡単に行えます

ビルドプロセスでの Babel の使用

Babel では、ES2015 を使用して記述された JavaScript を使用できます。機能を実行し、ES5 にトランスパイルして戻すことで、現在、これらの機能はサポートされていません。Babel をビルドプロセスに追加する方法はできます。

var gulp = require('gulp');
var babel = require('gulp-babel');

gulp.task('default', function () {
    return gulp.src('src/app.js')
        .pipe(babel())
        .pipe(gulp.dest('dist'));
});

Babel がトランスパイルできない機能の一つがモジュールです。ES6 のモジュールを使用すると、クラスの作成、ファイル間でクラスのエクスポート / インポートを行えます。モジュールをトランスパイルする JavaScript を Browserify はこれを Babelify に渡して、（Browserify からの出力を処理できる Babel のバージョン）。

var babelify = require('babelify');
var source = require('vinyl-source-stream');
var browserify = require('browserify');

gulp.task('babelify', function() {
  browserify({ entries: './src.js', debug: true })
    .transform(babelify)
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(gulp.dest('./dist/js/'));
});

複数の JavaScript ファイル

上記の例では特定のファイルを定義する必要がありますが、 Matt は、Gulp で次のことを行ってファイルの検索とトランスパイルを行います。末尾は .es6.js にします。

var config = {
  src: 'src/scripts',
  dest: 'dist/scripts'
};
var es6FileGlob = '/**/*.es6.js';

var gulp = require('gulp');
var plugins = require('gulp-load-plugins')();
var glob = require('glob');
var path = require('path');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');

// Takes an array of bundles to run through browserify and babelify
function transpileES6Modules(browserifyFileEntries) {
  browserifyFileEntries.forEach(function(fileEntry) {
    var browserifyBundle = browserify({
        entries: [fileEntry.srcPath]
      })
      .transform(babelify);

    var finalStream = browserifyBundle.bundle()
      .on('log', plugins.util.log.bind(plugins.util, 'Browserify Log'))
      .on('error', plugins.util.log.bind(plugins.util, 'Browserify Error'))
      .pipe(source(fileEntry.outputFilename));

    return finalStream.pipe(gulp.dest(fileEntry.dest));
  });
}

// This takes a source path and finds all files ending
// with .es6.js and creates the bundles to run through browserify
// and babelify
function handleES6Scripts(srcPath) {
  var browserifyFileEntries = [];

  var es6Filepaths = glob.sync(srcPath + es6FileGlob);
  es6Filepaths.forEach(function(filepath) {
    var filename = path.basename(filepath);
    var directoryOfFile = path.dirname(filepath);
    var relativeDirectory = path.relative(
      srcPath,
      directoryOfFile);

    // Create an object and add to the browserify bundle array
    browserifyFileEntries.push({
      srcPath: './' + filepath,
      outputFilename: filename,
      dest: path.join(config.dest, relativeDirectory)
    });
  });

  transpileES6Modules(browserifyFileEntries);
}

gulp.task('scripts:es6', ['scripts:lint'], function(cb) {
  handleES6Scripts(config.src);

  cb();
});

lint チェックとスタイルチェック

潜在的な問題やスタイルを lint チェックする場合、いくつかの選択肢がある遵守する必要があります

JSHint と JSCS

最も一般的なのは JSHint と JSCS です。最新の JavaScript スタイルチェックに使用されているツールを見てみましょう

JSHint は、コード内の潜在的な問題をハイライト表示し、問題点を指摘します。一般的に好ましくないと考えられています。

JSCS はコードのスタイルを確認します。これには、タブまたはスペースのみを使用し、スペースを一貫した場所に配置する。

ES2015 のコードで JSHint と JSCS を使用するには、"esnext": true を .jshintrc ファイルと .jscsrc ファイル

ESLint

ESLint は、リンターとスタイルチェッカーの代替となるものです。このツールは非常によく利用されており、JSHint よりも優れた機能を備えています。たとえば JavaScript で作成された環境を指定したり特定の問題に対するエラー / 警告レベルの設定。

ESLint は完全にカスタマイズ可能で、どのような環境でもカスタム lint ルールを使用できます。オプションの切り替えをコントロールするのも構成ファイルを定義します。また、React を使用している場合、ESLint は JSX。

ビルドプロセスで ESLint を設定するのも難しくありません。

var gulp = require('gulp'),
    eslint = require('gulp-eslint');

gulp.task('lint', function () {
    return gulp.src(['js/**/*.js'])
        // eslint() attaches the lint output to the eslint property
        // of the file object so it can be used by other modules.
        .pipe(eslint())
        // eslint.format() outputs the lint results to the console.
        // Alternatively use eslint.formatEach() (see Docs).
        .pipe(eslint.format())
        // To have the process exit with an error code (1) on
        // lint error, return the stream and pipe to failOnError last.
        .pipe(eslint.failOnError());
});

gulp.task('default', ['lint'], function () {
    // This will only run if the lint task is successful...
});

Babel チームは babel-estlint を管理しています。 ESLint を使用して有効な Babel コードを lint チェックできるツールです。ESLint ははカスタムパーサーをサポートしていますが、Babel でサポートされている構文の一部は ESLint がサポートされているため、さらなるテストや柔軟性が必要ですこれを設定するには、Terraform の parser セクションを .eslintrc ファイル:

{
  "parser": "babel-eslint",
  "rules": {
    "strict": 0
  }
}

ESLint と babel-eslint の設定については、Dan Abramov 氏が Lint いいね 2015 年。また、 Google Cloud リソースを SublimeLinter-eslint を Sublime Text での ES2015 lint サポートのワークフローを確認しましょう。

どれを使用すればよいですか。さまざまな方法を試して、自分にとって何が一番効果的かを実践しましょう。

ES2015 構文のハイライト表示

もちろん、ES2015 コードの構文が正しくハイライト表示されている必要があります。水 babel-sublime を使用すると、 Package Control からインストールします。設定する際は、すべてのファイルのデフォルトとして設定することをおすすめしますハイライト表示されます。これにはもちろん JS も含まれますが、 React を使用する場合は JSX も扱います。

ES2015 のドキュメント

私たちはこれまで、JavaScript コードの文書化に JSDoc を多用してきました。残念なことに、ES2015 のサポートに関して未解決の問題があります（JSDoc 3 で対処される予定）。ただし、対応が遅れるまで、利用可能な代替手段の数が増え続けています。そうした選択肢の一つが ESDoc です。Jonathan Creamer はこれに関する記事を最近執筆しており、一読の価値があります。

Babel を使用した Gulp.js ファイルの作成

ビルドプロセスで Gulp を使用している場合は、Gulpfile を使用して Babel でサポートされている構文を使用して作成されますこれは、Web Starter キット設定は比較的簡単です最新バージョンの Gulp と gulpfile.js の名前を gulpfile.babel.js に変更するだけで、Gulp は Babel を使用して ES2015 の gulpfile を自動的に解釈してトランスパイルできます。

ES2015 のお気に入り機能

モジュール

モジュールは、1 つのファイルから値、関数、クラスをエクスポートする手段です。別のファイルにインポートできます

export function exampleFunction() {
  console.log('I\'m an example. #TrueStory');
}



import { exampleFunction } from './example-function';
import BaseController from './base-controller';

export default class ExampleController extends BaseController {
  constructor() {
    super();

    exampleFunction();
  }

  doSomething() {
    console.log('What should I do? Change the DOM? Print a dancing shark to the console?');
  }
}

このサイトにはモジュールをご覧ください。

テンプレート文字列

テンプレート文字列では、文字列のポートを変数に置き換えることができます。

// Simple string substitution
var name = "Brendan";
console.log('Yo, ${name}!');

// =&gt; "Yo, Brendan!"

テンプレート文字列の長所は、置換が JavaScript であり、つまり、関数またはインライン式を使用できます。

var a = 10;
var b = 10;
console.log('a+b = ${a+b}.');
//=&gt; a+b = 20.

function fn() { return "I am a result. Rarr"; }
console.log('foo ${fn()} bar');
//=&gt; foo I am a result. Rarr bar.

詳しくは、こちらの便利なブログ投稿 Addy。

省略形オブジェクトリテラル

オブジェクトリテラルを使用すると、実行時にキーと値を定義する必要がなくなります。変数の名前とその変数の名前が同じ場合、指定します。

意味:

function createObject(name, data) {
  return { name: name, data: data };
}

次のようになります。

function createObject(name, data) {
  return { name, data };
}

計算済みプロパティ名

ES2015 のこの機能を使用すると、渡されます。Mozilla のドキュメントは有用な情報源となっており、例をご覧ください。

var a = {
  ["foo" + ++i]: i,
  ["foo" + ++i]: i,
  ["foo" + ++i]: i
};

console.log(a.foo1); // 1
console.log(a.foo2); // 2
console.log(a.foo3); // 3

脂肪の矢印の関数

脂肪アロー関数を使用すると、次のような簡単な関数を記述できます。

button.addEventListener('click', function(event) {
  console.log('The button has received a click', event);
});

次のようになります。

button.addEventListener('click', (event) => {
  console.log('The button has received a click', event);
});

太い矢印を使用すると構文が短くなるほかオブジェクトのスコープが包含ステートメントと同じである点です。つまり、関数で .bind(this) を呼び出す必要なく、 =this という変数を作成します。

Google Cloud のデータについては、 MDN。

詳細情報へのリンク

Addy の ES6 ツールリポジトリ

Addy は ES2015 のツールのリストを管理するのに忙しく、上記のツールがそうではない場合 Gulp の代わりに Grunt を使っているなら、答えを導き出すことができます。

https://github.com/addyosmani/es6-tools

上記には、単体テストなどを行います

バベルの塔

コマンドラインで ES2015 の機能について学ぶには、 tower-of-babel では一連の演習が用意されていますどの方法でもバベル。

参考となるその他のリソース:

ES2015 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。