title:"2019-11-26のJS: Node.js 13.2.0(ES Modules)、jQueryがAMDからES Modulesへ"

author:"azu"

layout:post

date:2019-11-26T02:19:47.092Z

category:JSer

tags:

-Node.js

-jQuery

-Modules

JSer.info#463 - 開発版となるNode.js 13.2.0がリリースされました。

-[Node v13.2.0 (Current) | Node.js](https://nodejs.org/en/blog/release/v13.2.0/)

今までは`--experimental-modules`というフラグ付きで起動したときのみ、[ECMAScript Modules](https://nodejs.org/api/esm.html)をサポートしていませんでした。

13.2.0からはこのフラグなしでも、デフォルトで拡張子が`.mjs`のファイルや`package.json`の`"type"`フィールドが`"module"`となっているパッケージをECMAScript Modulesとして`import`できるようになりました。

-[ECMAScript Modules | Node.js v13.2.0 Documentation](https://nodejs.org/api/esm.html)

-[Announcing core Node.js support for ECMAScript modules](https://medium.com/@nodejs/announcing-core-node-js-support-for-ecmascript-modules-c5d6dc29b663)

次のような[サンプルコード](https://github.com/azu/node-mjs-example)でECMAScript Modulesがフラグなしで実行できることが確認できます。

`mod.mjs`:

exportfunctionadd(x,y) {

return x+ y;

}

`index.mjs`:

import {add }from"./mod.mjs"

console.log(add(1,2));

Node.js 13.2.0からはこの`index.mjs`を`--experimental-modules`のフラグなしで実行できるうようになっています。

ただし、ExperimentalWarningは自動的に表示されます。

まだリリースはされていませんが、jQueryのコードベースが[AMD](https://requirejs.org/docs/whyamd.html)からECMAScript Modulesを使ったコードに変更されています。

-[Core: Migrate from AMD to ES modules 🎉 by mgol · Pull Request#4541 · jquery/jquery](https://github.com/jquery/jquery/pull/4541)

最終的な`jquery.js`は[rollup.js](https://rollupjs.org)を使ってbundleしたものを配布する予定となっています。

<blockquoteclass="twitter-tweet"><plang="en"dir="ltr">The <ahref="https://twitter.com/jquery?ref_src=twsrc%5Etfw">@jquery</a> source is now authored in ES6 modules![1] You can import from `src/jquery.js` directly from the browser without any build process.[2]<ahref="https://twitter.com/RollupJS?ref_src=twsrc%5Etfw">@RollupJS</a> is used to create the final jquery.js file.<br><br>[1] <ahref="https://t.co/mLGFF4n2WE">https://t.co/mLGFF4n2WE</a><br>[2] <ahref="https://t.co/uTWs7URXXW">https://t.co/uTWs7URXXW</a></p>&mdash; Michał Gołębiowski-Owczarek (@m_gol) <ahref="https://twitter.com/m_gol/status/1196893162859573250?ref_src=twsrc%5Etfw">November 19, 2019</a></blockquote> <scriptasyncsrc="https://platform.twitter.com/widgets.js"charset="utf-8"></script>

<h1class="site-genre">ヘッドライン</h1>

[github.com/jquery/jquery/pull/4541](https://github.com/jquery/jquery/pull/4541"Core: Migrate from AMD to ES modules 🎉 by mgol · Pull Request #4541 · jquery/jquery")

<pclass="jser-tags jser-tag-icon"><spanclass="jser-tag">jQuery</span> <spanclass="jser-tag">issue</span> <spanclass="jser-tag">module</span> <spanclass="jser-tag">news</span></p>

jQueryのコードベースがAMDからES modulesに書き換えられた

[webkit.org/blog/9658/release-notes-for-safari-technology-preview-96/](https://webkit.org/blog/9658/release-notes-for-safari-technology-preview-96/"Release Notes for Safari Technology Preview 96 | WebKit")

<pclass="jser-tags jser-tag-icon"><spanclass="jser-tag">safari</span> <spanclass="jser-tag">ReleaseNote</span></p>

Safari Technology Preview 96リリース。

Web Animations APIをデフォルトで有効化、`navigator.clipboard.read()`の実装など

[nodejs.org/en/blog/release/v13.2.0/](https://nodejs.org/en/blog/release/v13.2.0/"Node v13.2.0 (Current) | Node.js")

<pclass="jser-tags jser-tag-icon"><spanclass="jser-tag">node.js</span> <spanclass="jser-tag">ReleaseNote</span> <spanclass="jser-tag">module</span></p>

Node.js 13.2.0リリース。

`--experimental-modules`のフラグが外れたため、デフォルトでES Modulesが利用できるように。

`worker_threads`に`resourceLimits`オプションの追加、`child_process`などに`serialization`オプションの追加など

-[ECMAScript Modules | Node.js v13.2.0 Documentation](https://nodejs.org/api/esm.html"ECMAScript Modules | Node.js v13.2.0 Documentation")

-[Announcing core Node.js support for ECMAScript modules](https://medium.com/@nodejs/announcing-core-node-js-support-for-ecmascript-modules-c5d6dc29b663"Announcing core Node.js support for ECMAScript modules")

[aws.amazon.com/jp/blogs/compute/node-js-12-x-runtime-now-available-in-aws-lambda/](https://aws.amazon.com/jp/blogs/compute/node-js-12-x-runtime-now-available-in-aws-lambda/"Node.js 12.x runtime now available in AWS Lambda | AWS Compute Blog")

<pclass="jser-tags jser-tag-icon"><spanclass="jser-tag">aws</span> <spanclass="jser-tag">Lambda</span> <spanclass="jser-tag">node.js</span> <spanclass="jser-tag">news</span></p>

AWS LambdaがNode.js 12.xをサポート

[devexpress.github.io/testcafe/blog/testcafe-v1-7-0-released.html](https://devexpress.github.io/testcafe/blog/testcafe-v1-7-0-released.html"TestCafe v1.7.0 Released | TestCafe")

<pclass="jser-tags jser-tag-icon"><spanclass="jser-tag">browser</span> <spanclass="jser-tag">testing</span> <spanclass="jser-tag">E2E</span> <spanclass="jser-tag">ReleaseNote</span></p>

TestCafe v1.7.0リリース。

テストコード内で実行してるブラウザやOSの情報を取得できる`t.browser`オブジェクトのサポートなど

[openjsf.org/blog/2019/11/20/web-framework-fastify-joins-openjs-foundation-as-an-incubating-project/](https://openjsf.org/blog/2019/11/20/web-framework-fastify-joins-openjs-foundation-as-an-incubating-project/"Web Framework Fastify Joins OpenJS Foundation as an Incubating Project - OpenJS Foundation")

<pclass="jser-tags jser-tag-icon"><spanclass="jser-tag">node.js</span> <spanclass="jser-tag">library</span> <spanclass="jser-tag">news</span></p>

Node.jsのウェブアプリケーションフレームワークであるFastifyがOpenJS FoundationのIncubating Projectとなった。

-[Fastify, Fast and low overhead web framework, for Node.js](https://www.fastify.io/"Fastify, Fast and low overhead web framework, for Node.js")

<pclass="jser-tags jser-tag-icon"><spanclass="jser-tag">JavaScript</span> <spanclass="jser-tag">library</span> <spanclass="jser-tag">ReleaseNote</span></p>

CanJS 6.0リリース。

WebComponentベースになり、コンポーネントのPropsの型システムの刷新、Proxyを使ったObservableObjectの仕組みなどが導入された。

マイグレーションガイドとツールも公開されている。

-[Migrating to CanJS 6 | upgrade | Guides | CanJS — Build CRUD apps in fewer lines of code.](https://canjs.com/doc/migrate-6.html#MigratetoObservableObjectandObservableArrayformodels"Migrating to CanJS 6 | upgrade | Guides | CanJS — Build CRUD apps in fewer lines of code.")

-[Using Codemods | upgrade | Guides | CanJS — Build CRUD apps in fewer lines of code.](https://canjs.com/doc/guides/upgrade/using-codemods.html"Using Codemods | upgrade | Guides | CanJS — Build CRUD apps in fewer lines of code.")

[eslint.org/blog/2019/11/eslint-v6.7.0-released](https://eslint.org/blog/2019/11/eslint-v6.7.0-released"ESLint v6.7.0 released - ESLint - Pluggable JavaScript linter")

<pclass="jser-tags jser-tag-icon"><spanclass="jser-tag">ESLint</span> <spanclass="jser-tag">ReleaseNote</span></p>

ESLint 6.7.0リリース。

ルールからSuggestionの候補を提供するAPIの追加、設定ファイルに`ignorePatterns`を記述できるようになるなど。

また`no-constructor-return`などのルールを新規に5つ追加など

-[ESLint v6.7.0 - Qiita](https://qiita.com/mysticatea/items/377b6ca6558dc253159b"ESLint v6.7.0 - Qiita")

<h1class="site-genre">アーティクル</h1>

[pqina.nl/blog/cropping-images-to-an-aspect-ratio-with-javascript/](https://pqina.nl/blog/cropping-images-to-an-aspect-ratio-with-javascript/"Cropping Images to a specific Aspect Ratio with JavaScript • PQINA")

<pclass="jser-tags jser-tag-icon"><spanclass="jser-tag">JavaScript</span> <spanclass="jser-tag">canvas</span> <spanclass="jser-tag">article</span></p>

Canvasを使って画像を切り抜きするチュートリアル。チュートリアルではカバーできてない画像を扱う際の問題についてなど

[2ality.com/2019/10/regexp-lookaround-assertions.html](https://2ality.com/2019/10/regexp-lookaround-assertions.html"Regular expressions in #"diff-f6a03416fd1e1bbf5d27177dac320ed40f514a03b0c93bc0c1255d5a065eb87f-empty-166-0" data-selected="false" role="gridcell" tabindex="-1" valign="top">

<pclass="jser-tags jser-tag-icon"><spanclass="jser-tag">JavaScript</span> <spanclass="jser-tag">RegExp</span> <spanclass="jser-tag">article</span></p>

JavaScriptの正規表現の先読み/後読みのパターンについて。

<h1class="site-genre">スライド、動画関係</h1>

<pclass="jser-tags jser-tag-icon"><spanclass="jser-tag">JavaScript</span> <spanclass="jser-tag">JSON</span> <spanclass="jser-tag">performance</span> <spanclass="jser-tag">video</span></p>

オブジェクトリテラルより`JSON.parse`した方が、パフォーマンスが良い理由についての解説動画。

JSONには出現するトークンが限定されているためオブジェクトリテラルよりパースが高速にできること、SSRでのユースケースなどについて紹介している。

10kB以上など大きなデータに関しては`JSON.parse`を使うことを推奨している

-[The cost of JavaScript in 2019 · V8](https://v8.dev/blog/cost-of-javascript-2019#json"The cost of JavaScript in 2019 · V8")

<h1class="site-genre">サイト、サービス、ドキュメント</h1>

[easydb.io/](https://easydb.io/"EasyDB")

<pclass="jser-tags jser-tag-icon"><spanclass="jser-tag">DB </span> <spanclass="jser-tag">webservice</span> <spanclass="jser-tag"> node</span> <spanclass="jser-tag">npm</span> <spanclass="jser-tag">python</span></p>

Node.jsやPythonから24時間使えるKVSなDBを作ってくれるウェブサービス。

アカウントを作ると72時間使うことができ、永続化したい場合は$5/monthで利用できる。

ハッカソンなどの一時的なイベント向けのデータベースサービス。

[github.com/liyasthomas/postwoman](https://github.com/liyasthomas/postwoman"liyasthomas/postwoman: 👽 API request builder - A free, fast, and beautiful alternative to Postman https://postwoman.io 🔥")

<pclass="jser-tags jser-tag-icon"><spanclass="jser-tag">webservice</span> <spanclass="jser-tag">API</span> <spanclass="jser-tag">Tools</span></p>

REST API、WebSockets、GraphQLに対応したAPIへのリクエスト/レスポンスをテストできるツール。

<h1class="site-genre">ソフトウェア、ツール、ライブラリ関係</h1>

[github.com/jeremydaly/lambda-api](https://github.com/jeremydaly/lambda-api"jeremydaly/lambda-api: Lightweight web framework for your serverless applications")

<pclass="jser-tags jser-tag-icon"><spanclass="jser-tag"> node</span> <spanclass="jser-tag">aws</span> <spanclass="jser-tag">Lambda</span> <spanclass="jser-tag">library</span></p>

AWS Lambda向けのNode,jsフレームワーク。

依存がなく、HTTPメソッド対するルーティング、HTTPリクエスト/レスポンスに対する基本的な処理を持っている

<h1class="site-genre">書籍関係</h1>

[pragprog.com/book/tbreact/test-driven-react](https://pragprog.com/book/tbreact/test-driven-react"Test-Driven React: Find Problems Early, Fix Them Quickly, Code with Confidence by Trevor Burnham | The Pragmatic Bookshelf")

<pclass="jser-tags jser-tag-icon"><spanclass="jser-tag">React</span> <spanclass="jser-tag">testing</span> <spanclass="jser-tag">book</span></p>

テスト駆動でのReactアプリケーション開発についての書籍