Fork me on GitHub

2020-10-19のJS: Babel 7.12.0、 Chrome 87 Beta、npm 7リリース

Edit on GitHub 編集履歴を見る

JSer.info #510 - Babel 7.12.0がリリースされました。

TypeScript 4.1のサポート、Stage 2 proposalのClass static blocksのサポートが追加されています。
import/export名の扱いをECMAScriptの変更に追従、Import assertionsのパースを@babel/syntax-import-assertionsプラグインに切り出しなどが行われています。


Chrome 87 betaがリリースされました。

DevToolsにCSS GridのデバッグツールやWebAuthnタブの追加などが行われています。
DevToolsについては、次の記事で解説されています。

カメラのpan/tilt/zoomのサポート、Cookie Store APIをデフォルトで有効化、cross-origin isolationのサポート改善などが行われています。
また、入力中かを判定するisInputPending()、Service WorkerでRangeリクエストのサポート、postMessageで渡せるTransferable Streamsのサポートしています。

その他には、Chrome 86で非推奨化となったFTPサポートが、87ではデフォルトで無効化(15%のユーザーを対象)されています。


npm 7.0.0がリリースされました。

破壊的な変更として、peerDependenciesの自動インストール、package-lock.jsonの形式変更とyarn.lockのサポート、npm auditの出力内容の変更などが行われています。
また、npm execコマンドが追加され、npxコマンドは内部的にnpm execコマンドを使うように変更されています。

機能追加として、Workspacesのサポート、yarnのresolusionsに相当するacceptDependenciesのサポートなども追加されています。


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

JSer.info Sponsors

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


ヘッドライン


Release v5.1.0 · webpack/webpack

github.com/webpack/webpack/releases/tag/v5.1.0

webpack ReleaseNote

webpack 5.1.0リリース。
cleverMergeEntryOptionPluginDynamicEntryPluginをPublic APIに変更。
try-catch内でrequireを使ってモジュールの有無を判定する処理がエラーとなる問題の修正


7.12.0 Released: TypeScript 4.1, strings as import/export names, and class static blocks · Babel

babeljs.io/blog/2020/10/15/7.12.0

babel ReleaseNote

Babel 7.12.0リリース。
TypeScript 4.1のサポート、
Stage 2 proposalのClass static blocksのサポート。
import/export名の扱いをECMAScriptの変更に追従、Import assertionsのパースをプラグインに切り出しなど


Node v14.14.0 (Current) | Node.js

nodejs.org/en/blog/release/v14.14.0/

node.js ReleaseNote

Node v14.14.0リリース。
fs.rmの追加、res.setHeaderなどでヘッダを配列として渡せるようになるなど


Chromium Blog: Chrome 87 Beta: WebAuthn in DevTools, Pan/Tilt/Zoom, Flow Relative Shorthands and More

blog.chromium.org/2020/10/chrome-87-beta-webauthn-in-devtools.html

Chrome ReleaseNote

Chrome 87ベータリリース。
DevToolsにWebAuthnタブを追加、カメラのpan/tilt/zoomのサポート、cross-origin isolationのサポート改善。
また、isInputPending、Service WorkerでRangeリクエストのサポート、postMessageで渡せるTransferable Streamsのサポートなど


Presenting v7.0.0 of the npm CLI - The GitHub Blog

github.blog/2020-10-13-presenting-v7-0-0-of-the-npm-cli/

npm ReleaseNote

npm 7リリース。
破壊的な変更として、peerDependenciesの自動インストール、package-lock.jsonの形式変更とyarn.lockのサポート、npm auditの出力内容の変更。
機能追加として、Workspacesのサポート、npm execの追加など


アーティクル


min(), max(), and clamp(): three logical CSS functions to use today

web.dev/min-max-clamp/

CSS article

CSSのmin()max()clamp()関数についての記事。


GraphQLの基礎の基礎 - Qiita

qiita.com/shotashimura/items/3f9e04b93e79592030a4

node.js JavaScript GraphQL article

Node.jsでのGraphQL APIサーバの実装についての記事


Create TypeScript declarations from JavaScript and JSDoc - Human Who Codes

humanwhocodes.com/snippets/2020/10/create-typescript-declarations-from-javascript-jsdoc/

TypeScript JavaScript article

JSDocからTypeScriptの型定義ファイルを生成する方法について。
TypeScriptの出力オプションでemitDeclarationOnlyallowJsを組み合わせることでJSDocからd.tsファイルを作成できる


Video processing with WebCodecs

web.dev/webcodecs/

JavaScript WebPlatformAPI Chrome article

Chrome 86でOrigin Trialとして導入されたWebCodecsについて。
動画と音声のエンコードとデコードができるAPI。
VideoTrackReaderVideoEncoderVideoDecoderについて


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


Liaison – A love story between the frontend and the backend

liaison.dev/

JavaScript node.js library

バックエンド、フロントエンドを含んだフルスタックなJavaScriptフレームワーク。


samizdatco/skia-canvas: A canvas environment for Node.js

github.com/samizdatco/skia-canvas

node.js canvas library

Skiaを使ったNode.jsでのCanvas実装


sciter – Multiplatform HTML/CSS UI Engine for Desktop and Mobile Application

sciter.com/

JavaScript HTML CSS software

アプリ組み込み向けのHTML/CSSエンジン。
バイナリサイズが小さいアプリを作るためのフレームワークで、HTML/CSSのサブセットとスクリプトエンジンをもっている。


MTG/essentia.js: JavaScript library for music/audio analysis and processing powered by WebAssembly

github.com/MTG/essentia.js

JavaScript WebAssembly C++ library

C++で書かれた音声/音楽処理ライブラリであるEssentiaをWebAssemblyにコンパイルしたJavaScriptラッパーライブラリ。


TimvanScherpenzeel/detect-gpu: Classifies GPUs based on their 3D rendering benchmark score allowing the developer to provide sensible default settings for graphically intensive applications.

github.com/TimvanScherpenzeel/detect-gpu

JavaScript WebGL library performance

WebGLを使った3DレンダリングのベンチマークからGPUの判定、クラス分けをするライブラリ


書籍関係


フロントエンド開発入門 プロフェッショナルな開発ツールと設計・実装 | 安達 稜, 武田 諭 |本 | 通販 | Amazon

www.amazon.co.jp/dp/4798061778/

HTML CSS JavaScript book Tools

2020年10月9日発売
ウェブフロントエンドとエコシステムについての書籍


accrefs - Webアクセシビリティの参考資料まとめ

accrefs.jp/

accessibility links

ウェブアクセシビリティについての資料をまとめたページ


この記事へ修正リクエストをする
JSer.info Slackに参加する