Fork me on GitHub

2018-08-28のJS: Babel 7、BabelとTypeScript、継続的なパフォーマンス改善と計測

Edit on GitHub 編集履歴を見る

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

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というツールで行え、マイグレーションガイドも合わせて公開されています。

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でイベントページを公開予定です。
次のグループのメンバーになっておくと、イベントページが公開された時に通知が飛ぶと思います。(抽選にすると思うので、ゆっくり登録できると思います)

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

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

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

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

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


ヘッドライン


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で行える。


アーティクル


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のコマンドと違ってinstalllockrunのみを扱う


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サーバを作成するチュートリアルなど


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.modeRequest.urlなどとの組み合わせについて


スライド、動画関係


Webpagetestから始める継続的パフォーマンス改善

azu.github.io/slide/2018/roppongijs/webpagetest-performance.html

browser performance webservice slide

ウェブアプリの継続的なパフォーマンス改善についてのスライド。
パフォーマンス改善と指標、それを測るための継続的な計測とサービスについて。
WebPagetestを中心にどのように計測して可視化し、改善した結果を確認したりリグレッションを防ぐかについて


サイト、サービス、ドキュメント


A brief guide to using WebpageTest - Frontend News #5

frontendnews.io/editions/2018-08-22-a-brief-guide-to-webpagetest

browser performance webservice

ウェブサイトのパフォーマンス計測サービスであるWebPagetestの使い方を解説した記事。
それぞれのビューの読み方や指標となる値などについて


ソフトウェア、ツール、ライブラリ関係


rikschennink/fitty: ✨ Makes text fit perfectly

github.com/rikschennink/fitty

JavaScript DOM library

指定した要素に対してテキストのサイズを合わせるライブラリ。
カスタムフォントなどにも対応している


この記事へ修正リクエストをする
記事を紹介する