JSer.info #490 - Babel 7.10.0がリリースされたました。
- 7.10.0 Released: Class Fields in preset-env, '#private in' checks and better React tree-shaking · Babel
- Release v7.10.0 · babel/babel
ES2015の\u{...}形式のUnicode escapeをES5に変換する@babel/plugin-transform-unicode-escapesが追加されています。
このプラグインは@babel/preset-envにも追加されています。
また、現在Stage 4でES2020に入る予定のimport.metaのパースがデフォルトでサポートされました。
その他には、現在Stage 1のProposalであるPrivate Fieldに対するin演算子のサポートを追加する@babel/plugin-proposal-private-property-in-object、ES Module AttributesのProposalのパースを行う@babel/plugin-syntax-class-propertiesの追加、@babel/preset-reactに/*#__PURE__#/アノテーションをつけるプラグインが追加されています。
/*#__PURE__#/アノテーションをつけることでUglifyJSによる圧縮によって余計なコードを削除できます。詳しくは次の記事を参照するとよさそうです。
今までの@babel/preset-envではcore-jsのみをサポートしていました。
元々@babel/polyfillというパッケージでES2015サポートを目的としたpolyfillも提供していましたが、これも実質的にcore-jsをラップしたパッケージでした。
@babel/polyfill自体はBabel 7.4で廃止されています。
これは、@babel/preset-envとcore-js 3によって、サポートブラウザの定義(useBuiltIns: "entry")やコード中で利用している機能(useBuiltIns: usage)に基づいて必要な機能のみをpolyfillできるようになったためです。(@babel/polyfillはES2015のサポートに必要なものが全て入った固定のpolyfillで、現在のブラウザに対しては余計なpolyfillが多く含まれてしまうため。)
Babel 7.10.0リリースの記事では、core-js以外のpolyfillライブラリも選択してinjectできる仕組みを試験的に実装している件について書かれています。
これは、@babel/preset-envなどでpolyfillライブラリとしてcore-js以外にもes-shimsなどを選択できるようにする仕組みです。
詳しくはリポジトリやRFCを読むとよさそうです。
- babel/babel-polyfills: A set of Babel plugins that enable injecting different polyfills with different strategies in your compiled code.
- RFC: Rethink polyfilling story · Issue #10008 · babel/babel
- Move "targets"-related options to
@babel/coreby nicolo-ribaudo · Pull Request #2 · babel/rfcs
ES Modulesをネイティブサポートした環境での開発を目的としたビルドツールであるSnowpack 2.0がリリースされました。
Snowpackは、コードをbundleするのではなく、npmでインストールしたいライブラリも含めそれぞれのコードをES Modulesとして読み込み可能な状態にビルドします。
これによって、開発時はファイル単位でビルドを行ってネイティブのES Modulesとしてファイルを読み込める状態で開発できます。
bundleせずにファイルごとにビルドするため、ファイル変更時のビルド時間が小さくすむようになっています。
また、Snowpack 2.0ではデフォルトではesbuildを使ってjs,jsx,ts,tsxのビルドを行っています。
production buildではwebpackやparcelを使ってbundleしたビルドを行えるようになっています。
ビルドの仕組みなどもカスタマイズできるようになっていて、snowpack.config.jsonにBuild ScriptsやPluginを書くことで変更できるようになっています。
Chrome 84のベータ版がリリースされました。
Web OTP API(SMS Receiver APIと呼ばれていたAPI)のサポート、Web Animationsの改善が含まれています。
Origin Trialとして非同期のCookie Store API、Idle Detection API、Origin isolation、WebAssembly SIMDが追加されています。
その他にMixed ContentのAutoupgrade、CSSのrevertキーワードのサポート、JSでは Private Methods and Accessors、Weakrefのサポートなども行われています。
それぞれに解説記事なども出ているので、興味があるものを読んでみるとよさそうです。
また、7月14日にリリース予定のChrome 84安定版に合わせて、一時的に停止していたSameSite Cookieのロールアウトが再開される予定となっています。
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
7.10.0 Released: Class Fields in preset-env, '#private in' checks and better React tree-shaking · Babel
babeljs.io/blog/2020/05/25/7.10.0
Babel 7.10.0リリース。
ES2015のUnicode escapeをES5に変換する@babel/plugin-transform-unicode-escapesの追加。
import.metaのパースをデフォルトでサポート。
ES Module AttributesのProposalのパースを行うbabel-plugin-syntax-module-attributesの追加、@babel/preset-reactに/*#__PURE__#/アノテーションをつけるプラグインの追加。
core-js以外も選べるpolyfillエンジンの追加など
Node v12.17.0 (LTS) | Node.js
nodejs.org/en/blog/release/v12.17.0/
Node v12.17.0リリース。
--experimental-modulesなしにES Modulesを利用可能に、Experimental APIとしてAsyncLocalStorageの追加、REPLの改善。
Diagnostic ReportがStableに、server.headersTimeoutのデフォルト値の変更など
Introducing Snowpack 2.0
www.snowpack.dev/posts/2020-05-26-snowpack-2-0-release/
Snowpack 2.0リリース。
ES Modulesをネイティブに使った開発を行うためのビルドシステム。
開発時はファイルごとにビルドを行い、production buildではwebpackやparcelを使ってbundleしたビルドを行う。
Build ScriptsやPluginでのカスタマイズを行えるようになっている。
デフォルトではesbuildを使ってjs,jsx,ts,tsxのビルドを行う
Release Notes for Safari Technology Preview 107 | WebKit
webkit.org/blog/10585/release-notes-for-safari-technology-preview-107/
Safari Technology Preview 107リリース。
Web Inspectorの改善、Intl.Locale/BigInt.asIntN/BigInt.asUintNの実装。
HTTPリファラのサイズを4KBに制限するように変更など
Release v5.0.2 · pnpm/pnpm
github.com/pnpm/pnpm/releases/tag/v5.0.2
npmパッケージ管理ツールのpnpm 5.0リリース。
パフォーマンスの改善、ハッシュ + hardlinkベースのキャッシュの仕組みへの変更に伴う一部設定の削除など。
また、pnpm publish時にGitのStageがcleanかを判定するgit-checksがデフォルトで有効化など
Chromium Blog: Chrome 84 Beta: Web OTP, Web Animations, New Origin Trials and More
blog.chromium.org/2020/05/chrome-84-beta-web-otp-web-animations.html
Chrome 84 Betaリリース。
Web OTP API、Web Animationsの改善。
Origin Trialとして非同期のCookie Stoer API、Idle Detection API、 Origin isolation、WebAssembly SIMDの追加。
Mixed ContentのAutoupgrade、CSSのrevertキーワードのサポート、JSでは Private Methods and Accessors、WeakRefのサポートなど
Chromium Blog: Resuming SameSite Cookie Changes in July
blog.chromium.org/2020/05/resuming-samesite-cookie-changes-in-july.html
7月14日にリリース予定のChrome 84安定版に合わせて、一時的に停止していたSameSite Cookieのロールアウトが再開される予定
Pug 3.0.0 - RollingVersions - Medium
medium.com/rollingversions/pug-3-0-0-2897d6dec294
テンプレートエンジンのPug 3.0.0リリース。
Bufferに対するフィルターをサポート、each ... of ...構文のサポートなど
アーティクル
Tools to measure Core Web Vitals
Core Web Vitalsのメトリクスを計測するツールの紹介記事
Detect inactive users with the Idle Detection API
ユーザー/スクリーンがアクティブではない状態かを判定するAPI。
Chrome 84でOrigin Trialとして提供されている。
userとscreenのidle状態、変更検知ができる。利用にはnotificationsのパーミッションを取得する必要がある。
The Svelte Compiler Handbook | Tan Li Hau
lihautan.com/the-svelte-compiler-handbook/
Svelteのコンパイルプロセスを解説している記事。
The process: Making Vue 3 – Increment: Frontend
increment.com/frontend/making-vue-3/
Vue 3の作成プロセスについての記事。
Vue 3でなぜ書き直しをしているのかやアーキテクチャの変更について
スライド、動画関係
Jamstack_conf_virtual_2020 - YouTube
www.youtube.com/playlist?list=PL58Wk5g77lF8jzqp_1cViDf-WilJsAvqT
Jamstack Conf 2020の動画一覧
11 years of Node: Let’s have an honest conversation - Anna Henningsen (LNUG May 2020) - YouTube
www.youtube.com/watch?v=TthueRgvVQ4
Node.js開発の現状について話。
Node.jsはsmall coreと言われていたが、今は40以上のモジュールが入った巨大なリポジトリでもある。
Node.jsのコアには非推奨となったモジュール/追加されたモジュール/レガシーなコードが混ざっている。
そのため開発はバランスを取るのが難しく、これはESMサポートにおいても起きている。
一方で、CollaboratorsやN-APIなどうまくいっている部分もある。
また、Denoとエコシステムについてなど
サイト、サービス、ドキュメント
Understanding client-side JavaScript frameworks - Learn web development | MDN
developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks
MDNのJavaScriptフレームワークのチュートリアル。
React、Ember、Vueについてのチュートリアルがある
deeppatel234/webpack-report: Webpack Build Analysis Plugin
github.com/deeppatel234/webpack-report
webpackのbundleされたファイルの依存関係、ビルド時間などのビルド情報、chunkやモジュールなどのサイズのビジュアライズをしてくれるプラグイン。
ソフトウェア、ツール、ライブラリ関係
xFAANG/askql: AskQL is a query language that can express any data request
実行できるコードをリクエストとして利用するクエリ言語。
AskQLは、プログラミング言語ライクなクエリ(AskScript)を書いたものをコード(AskCode)に変換してサーバへ送信し、Sandbox機構をもつAskVMで実行した結果をJSONとして返す
babel/babel-polyfills: A set of Babel plugins that enable injecting different polyfills with different strategies in your compiled code.
github.com/babel/babel-polyfills
Babelのpolyfillエンジン。
core-jsやes-shimsなどpolyfillを選択できる。
polyfillモジュールをinject方法としてentry-global、usage-global、usage-pureをもつ
otiai10/lookpath: The minimum and most straightforward way to check if command exists and where the executable is, WITHOUT spawning subprocess
whichなどのコマンドを使わずに、実行ファイルのパスを取得するNode.jsライブラリ
divy-work/autopilot-deno: Cross-platform desktop automation library for Deno.
github.com/divy-work/autopilot-deno
キーボードやマウスなどデスクトップ処理の自動化を行うDeno向けのライブラリ
RoughNotation
Underline、Box、Highlightなどを手書き風の描画をアニメーションできるライブラリ。
手書き処理にはRoughJSを利用している
書籍関係
Riot.jsで簡単Webアプリケーション開発 | 桑原 聖仁 |本 | 通販 | Amazon
www.amazon.co.jp/dp/4863543115/
2020年6月23日発売予定
Riot.jsについての書籍
