JSer.info #398 - Babel 7が正式にリリースされました。

Babel 7 Released · Babel

Node.js 4のサポート終了し、@babelスコープへモジュールを移動、es2015のような年号プリセットを廃止し@babel/preset-envに移行、Stageプリセットを廃止などが行われています。

年号プリセット(babel-preset-es2015) -> 廃止(@babel/preset-envへ移行)
Stageプリセット -> 廃止(個別の@babel/plugin-proposal-*プラグインを使う)
babel-preset-env -> @babel/preset-envへ移行

またJavaScriptで設定を書けるbabel.config.jsでの設定をサポート、パフォーマンスの改善などが行われています。

マイグレーションはbabel-upgradeというツールで行え、マイグレーションガイドも合わせて公開されています。

Upgrade to Babel 7 · Babel

TypeScript and Babel 7 | TypeScriptという記事では、Babel 7でTypeScriptのコードをJavaScriptに変換できる(型情報を取り除ける)ことについて紹介されています。

Babel 7ではTypeScriptのコードをパースできるようになり、@babel/preset-typescriptを利用してFlowと同じように型情報を取り除いてJavaScriptに変換できます。

制限として、Babel自体は型チェックを行なわないことやenum/namespaceのようなTypeScript独自の構文はサポートしてない点についても紹介されています。

Webpagetestから始める継続的パフォーマンス改善というスライドでは、継続的パフォーマンスを行うために継続的にパフォーマンス計測を行うことについてかかれています。

パフォーマンス改善と指標、それを測るためのWebPagetestといったサービスの紹介。
また、計測した可視化する方法や改善した結果を確認したり、実際にどのように問題を見つけるかやパフォーマンスリグレッションを防ぐ方法などについて書かれています。

WebPagetestのUIの使い方についてはA brief guide to using WebpageTest - Frontend News #5という記事が公開されていたので合わせて読むと良さそうです。

またパフォーマンス改善方法についてはWeb Performance Made Easy: Google I/O 2018 edition | Web | Google Developersというリファインされた記事が公開されているので合わせて読むと良さそうです。

お知らせ

2018年9月22日(土)に開催予定のJSer.info 400回記念イベントですが、今週中にconnpassでイベントページを公開予定です。
次のグループのメンバーになっておくと、イベントページが公開された時に通知が飛ぶと思います。（抽選にすると思うので、ゆっくり登録できると思います）

JSer.info - connpass

以前と同じように、数人の発表者とメモを書いてくれる人と質問を管理してくれるモデレータ(具体的にはhttp://sli.do/周りの管理)を募集する予定です。

テーマは「憶測せずに議論しよう」です。

会場には大体自分より何かしら詳しい人がいると思います。そのため、発表者であっても憶測でしゃべるよりはその場で詳しい人に聞いて議論することを重要視しています。

発表途中でも発表者に質問することや逆に会場の人に質問することを推奨する感じのイベントです（これは会場に「XXXを使ってる人」と聞くのではなく、疑問を解決する話）

発表者は深く考えずに質問時間が長く取れるJavaScriptに関連する発表という感じで応募していただけると幸いです。
(発表に集中してもらえるように細かい補助とかは自分がやります。)

JSer.infoをサポートするには

😘 知り合いにJSer.infoをおすすめする
❤️ GitHub Sponsorsで@azuのスポンサーになる
🐦 X(Twitter)で@jser_infoをフォローする

JSer.info Sponsors

JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。

ヘッドライン

jsdom/Changelog.md at master · jsdom/jsdom

github.com/jsdom/jsdom/blob/master/Changelog.md#1200

JavaScript DOM ReleaseNote

jsdom 12.0.0リリース。
Node.js 8以降が必要になるように、ResourceLoaderの追加、依存の更新など

Johnny-Five.io: Johnny-Five v1.0

johnny-five.io/news/v1_0/

JavaScript library ReleaseNote

Robotics Programming Frameworkの Johnny-Five v1.0リリース

Release v1.1.0 · stimulusjs/stimulus

github.com/stimulusjs/stimulus/releases/tag/v1.1.0

JavaScript HTML library ReleaseNote

Turbolinksと連携できるJavaScriptフレームワークのStimulus 1.1.0リリース。
@stimulus/polyfillsの追加、data-action属性で複数のactionを指定時にその順序を尊重するように、DOMContentLoadedで処理を開始するようになるなど

Almin v0.18 – React Native compatible · Almin

almin.js.org/blog/2018/08/27/almin-0.18.html

JavaScript library ReleaseNote almin

ステート管理ライブラリのAlmin 0.18.0リリース。
TypeScript 3.0に対応、React Nativeとの互換性の向上、ファイルサイズの削減など

Babel 7 Released · Babel

babeljs.io/blog/2018/08/27/7.0.0

babel ReleaseNote

Babel 7リリース。
Node.js 4以下のサポート終了、@babelスコープへモジュールを移動、es2015のような年号プリセットを廃止しpreset-envに移行、Stageプリセットを廃止。
babel.config.jsでの設定をサポート、パフォーマンスの改善など。
マイグレーションはbabel-upgradeで行える。

babel/babel-upgrade: ⬆️ A tool for upgrading Babel versions (to v7): `npx babel-upgrade`

アーティクル

dep: a little Node.js dependency installer – Daijiro Wachi – Medium

medium.com/@watilde/dep-a-little-node-js-dependency-installer-b8fead7596d3

node.js article npm

package.jsonの依存をインストールできるdepについて。
npmのコマンドと違ってinstall、lock、runのみを扱う

WorkerDOM: Concurrency for JavaScript programming with the DOM – Accelerated Mobile Pages Project

amphtml.wordpress.com/2018/08/21/workerdom/

DOM webworker article AMP JavaScript

WebWorkerの中で動くDOMの実装のアルファ版を公開したという話。
メインスレッドでの処理が重なるとjankとなるため、WorkerスレッドでDOM APIの処理を行う実験的実装。
HydrateしたデータでWorkerとの間をやりとりし、変更はMutationObserverで監視する

Why GraphQL: Advantages, Disadvantages & Alternatives - RWieruch

www.robinwieruch.de/why-graphql-advantages-disadvantages-alternatives/

graphic article tutorial

GraphQLに関する連載記事。
GraphQLの特徴、メリット、デメリット、Apolloについて。またApollo Serverとexpressを使ってGraphQLサーバを作成するチュートリアルなど

GraphQL Server Tutorial with Apollo Server and Express - RWieruch

Web Performance Made Easy: Google I/O 2018 edition | Web | Google Developers

developers.google.com/web/updates/2018/08/web-performance-made-easy

browser performance Chrome article

ウェブサイトのパフォーマンスについての概要的な記事の。
LightHouseやChromeの開発者ツールを使った不必要なリソースの把握。
JavaScriptのサイズが起動速度に与える影響やファイルサイズの削減、レンダリングのボトルネックの取り除く方法などについて

TypeScript and Babel 7 | TypeScript

blogs.msdn.microsoft.com/typescript/2018/08/27/typescript-and-babel-7/

TypeScript babel article

Babel 7の@babel/typescriptについて。
BabelでTypeScriptのコードをJavaScriptへ変換(型情報を除去)できる。
型チェックやいくつかのTS独自の構文をサポートしないという制限はあるが、Babelのエコシステム上でTSのコードを扱える。

Service Worker Caching Strategies Based on Request Types

medium.com/dev-channel/service-worker-caching-strategies-based-on-request-types-57411dd7652c

Fetch ServiceWorker article

どの種類に対するリクエストかを判定できるRequest.destinationについて。 Request.destinationを使いキャッシュの戦略を変えるという話。注意点として、一部リクエストは空文字列となり判定できないという話。
またRequest.modeやRequest.urlなどとの組み合わせについて