サーチ…


前書き

ES6、ECMAScript 6またはES2015はJavaScriptの最新の仕様であり、構文上の砂糖をその言語に導入しています。それは言語への大きなアップデートであり、多くの新機能を紹介しています

NodeとES6の詳細は、それぞれのサイトのhttps://nodejs.org/ja/docs/es6/にあります。

ノードES6 Babelによるプロジェクトのサポートと作成

ES6全体の仕様はまだ完全には実装されていないので、新機能の一部しか使用できません。 http://node.green/で現在サポートされているES6の機能の一覧を見ることができます

NodeJS v6以来、かなり良いサポートがありました。したがって、NodeJS v6以上を使用している場合は、ES6を楽しむことができます。ただし、リリースされていない機能の一部とそれ以降の機能を使用することもできます。このためには、蒸散器を使用する必要があります

ランタイムにビルドを実行してビルドし、すべてのES6機能などを使用することができます。 JavaScript用の最も一般的なトランスバイザーはBabel

Babelでは、ES6仕様のすべての機能と、 ' var thing = require('thing')代わりにimport thing from 'thing - import thing from 'thingのような' stage-0 'のimport thing from 'thing機能が追加されています

インポートなどの「ステージ0」機能を使用するプロジェクトを作成したい場合は、バベルをトランスバータとして追加する必要があります。あなたは、反応とVueを使ったプロジェクトと他のcommonJSベースのパターンがstage-0をかなり頻繁に実装するのを見ています。

新しいノードプロジェクトを作成する

mkdir my-es6-app
cd my-es6-app
npm init

ES6プリセットとステージ0を設定してください

npm install --save-dev babel-preset-es2015 babel-preset-stage-2 babel-cli babel-register

server.jsという名前の新しいファイルを作成し、基本的なHTTPサーバーを追加します。

import http from 'http'

http.createServer((req, res) => {
  res.writeHead(200, {'Content-Type': 'text/plain'})
  res.end('Hello World\n')
}).listen(3000, '127.0.0.1')

console.log('Server running at http://127.0.0.1:3000/')

import http from 'http'を使用していますが、これはステージ0の機能です。動作すれば、正しく動作していることを意味します。

node server.jsを実行すると、インポートの処理方法がわからなくなりnode server.js

ディレクトリのルートに.babelrcファイルを作成し、次の設定を追加します

{
  "presets": ["es2015", "stage-2"],
  "plugins": []
}

これで、 node src/index.js --exec babel-nodeサーバーを実行できますnode src/index.js --exec babel-node

プロダクションアプリで実行時にトランスヒーラーを実行するのは良い方法ではありません。ただし、package.jsonにスクリプトを実装して、使いやすくすることができます。

"scripts": {
    "start": "node dist/index.js",
    "dev": "babel-node src/index.js",
    "build": "babel src -d dist",
    "postinstall": "npm run build"
  },

上記はnpm installにdistiledディレクトリにトランスビルドされたコードをビルドします。npm npm startプロダクションアプリ用にトランスビルドされたコードを使用できるようにします。

npm run devは、プロジェクトをローカルで作業するときにうまく動作する、サーバーとbabelランタイムを起動します。

さらに進んでいくと、nodemon npm install nodemon --save-devnpm install nodemon --save-devして変更を監視し、ノードアプリケーションを再起動することができます。

これにより、バーベルとNodeJSの処理速度が大幅に向上します。あなたはpackage.jsonで単に "dev"スクリプトを更新してnodemonを使用します

"dev": "nodemon src/index.js --exec babel-node",

NodeJSアプリケーションでJS es6を使用する

JS es6(es2015とも呼ばれます)は、OOPを使用しているときや現代的な開発作業に直面しているときに、より直観的にするためのJS言語の新機能のセットです。

前提条件:

  1. http://es6-features.orgの新しいes6機能をチェックしてください。次のNodeJSアプリケーションで本当に使用する予定があるかどうかを明確にすることができます

  2. http://node.greenでノードのバージョンの互換性レベルを確認してください

  3. すべてが大丈夫なら - コードを書こう!

JS es6を使った簡単なhello world appのサンプルです

'use strict'

class Program
{
    constructor()
    {
        this.message = 'hello es6 :)';
    }

    print()
    {
        setTimeout(() =>
        {
            console.log(this.message);
            
            this.print();

        }, Math.random() * 1000);
    }
}

new Program().print();

このプログラムを実行して、同じメッセージを繰り返し印刷する方法を観察できます。

さて、行ごとに分けてみましょう。

'use strict'

この行は、js es6を使用する場合に実際に必要です。 strictモードは、意図的に、通常のコードとは異なるセマンティクスを持っています(MDN - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode)

class Program

信じられない - classキーワード!簡単なリファレンスのために - es6の前に、jsのクラスを定義する唯一の方法は... functionキーワードであった!

function MyClass() // class definition
{

}

var myClassObject = new MyClass(); // generating a new object with a type of MyClass

OOPを使用する場合、クラスはシステムの特定の部分を表現するために開発者を支援する非常に基本的な機能です(コードが大きくなるとコードを分解することが重要です。たとえば、サーバーサイドコードを書くときなど)

constructor()
{
    this.message = 'hello es6 :)';
}

あなたは認めなければなりません - これはかなり直感的です!これは私のクラスのc'torです。このユニークな "関数"は、この特定のクラスからオブジェクトが作成されるたびに発生します(プログラムでは1回のみ)

print()
{
    setTimeout(() => // this is an 'arrow' function
    {
        console.log(this.message);
        
        this.print(); // here we call the 'print' method from the class template itself (a recursion in this particular case)

    }, Math.random() * 1000);
}

printはクラススコープで定義されているため、実際にはメソッドです。クラスのオブジェクトかクラス自体から呼び出すことができます。

だから今までにクラスを定義しました。使用する時間:

new Program().print();

これは真に次のものと同じです:

var prog = new Program(); // define a new object of type 'Program'

prog.print(); // use the program to print itself

結論として、 JS es6はコードを単純化することができます(以前のバージョンのJSと比較して、直感的でわかりやすくなります)。既存のコードを書き直してみてください。

楽しい :)



Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow