Fork me on GitHub

2019-07-09のJS: Babel 7.5.0(Dynamic Import)、Next.js 9(Dynamic routing)、React Native 0.60

Edit on GitHub 編集履歴を見る

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

現在Stage 1 ProposalsであるPipeline Operatorの変換がサポートされています。

2019年6月のTC39 MeetingでDynamic ImportがStage 4となりました。(ES2020にDynamic Importが入る)
そのため、Babelでも@babel/preset-envがDynamic Importをデフォルトでサポートするようになりました。
(今までは別途プラグインが必要になっていた)

また、babel/plugin-transform-typescriptallowNamespacesというオプションでTypeScriptのnamespacesを試験的にサポートしています。


Reactを使ったフレームワークであるNext.js 9がリリースされました。

Next.js 6で@zeit/next-typescriptを使ったTypeScriptが入っていましたが、Next.js 9でTypeScriptのビルトインサポートしています。
また、path-to-regexp形式でDynamically Routingのサポート、api/に置いたファイルがAPIになるAPI Routesのサポートしています。
その他にもページごとのconfigを設定できるようになり、ビルドの最適化などが含まれています。


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

JSer.info Sponsors

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


ヘッドライン


Release v7.5.0 · babel/babel

github.com/babel/babel/releases/tag/v7.5.0

babel ReleaseNote

Babel 7.5.0リリース。
dynamic importのサポートを@babel/preset-envに追加、
babel-plugin-transform-typescriptがnamespaceをサポートなど


Release 0.7.0 · markedjs/marked

github.com/markedjs/marked/releases/tag/v0.7.0

JavaScript Markdown security ReleaseNote

marked 0.7.0リリース。
XSS脆弱性を修正、sanitizesanitizerオプションを非推奨化しDOMPurifyなどの外部ライブラリの利用を推奨するように変更。
TableサポートをGFMオプションに移動など


Announcing React Native 0.60 · React Native

facebook.github.io/react-native/blog/2019/07/03/version-60

React iOS Android ReleaseNote

React Native 0.60リリース。
アクセシビリティの改善、スタート画面の変更、AndroidXのサポート、CocoaPodsの対応改善、コアからコミュニティに移動したNetInfoWebViewGeolocationを削除など


Blog - Next.js 9 | Next.js

nextjs.org/blog/next-9

React JavaScript library ReleaseNote

Next.js 9リリース。
TypeScriptのビルトインサポート、Next.jsのコアをTypeScriptで書き直し、Dynamically Routingのサポート、api/でAPI Routesのサポート。
また、ページごとのconfigをサポート、ビルドの最適化など


Node v12.6.0 (Current) | Node.js

nodejs.org/en/blog/release/v12.6.0/

node.js ReleaseNote

Node.js 12.6.0リリース。
child_process.exec/execFileの返すPromiseオブジェクトがchildプロパティを持つように、process.resourceUsage()の追加など


アーティクル


Automatically detect memory leaks with Puppeteer - Article by Christoph Guttandin - Media Codings

media-codings.com/articles/automatically-detect-memory-leaks-with-puppeteer

JavaScript browser testing

Puppeteerを使ってウェブページのメモリリークテストを書く方法について。
page.queryObjectsを使って処理前後のHeapにあるオブジェクトの数を比較することでテストする方法について


Request.destinationでリソースの種類別にキャッシュ戦略 | フロントエンドBlog | ミツエーリンクス

www.mitsue.co.jp/knowledge/blog/frontend/201907/05_0944.html

Fetch article

Fetch APIのRequest.destinationについて。
Service Workerで取得先のリソースの種類に応じたキャッシュの切り分けなどについて


Using Slots In Vue.js — Smashing Magazine

www.smashingmagazine.com/2019/07/using-slots-vue-js/

Vue article

VueのSlotについての記事。
<slot>の使い方、v-slotディレクトティブ、Scoped Slotについて。
また再利用可能なコンポーネントの書き方についてなど


Fetch API: Building a Fetch Polyfill From Scratch (For Fun and Promise)

www.valentinog.com/blog/fetch-api/

Fetch article

Fetch APIの簡単なPolyfillを書きながら、Fetch APIとPromiseについて学ぶ記事。


CSS Custom Properties In The Cascade — Smashing Magazine

www.smashingmagazine.com/2019/07/css-custom-properties-cascade/

CSS article

CSS Custom Propertiesについての記事。
コンポーネント側の変数の定義とカスケーディング、コンポーネントとCSS Custom Propertiesなど応用的な内容


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


tilk/digitaljs: Teaching-focused digital circuit simulator

github.com/tilk/digitaljs

JavaScript Tools

ブラウザで動作する教育用の電子回路シミュレータ


jsdoctypeparser/jsdoctypeparser: Parser module for JsDoc or Closure Compiler format type-annotation.

github.com/jsdoctypeparser/jsdoctypeparser

JavaScript JSDoc library

JSDocパーサライブラリ。
Closure Compiler形式、TypeScript形式などに対応していて、JSDocをパースしてASTを出力する。


greggman/twgl.js: A Tiny WebGL helper Library

github.com/greggman/twgl.js

WebGL JavaScript library

WebGLヘルパーライブラリ


frenic/csstype: Strict TypeScript and Flow types for style based on MDN data

github.com/frenic/csstype

TypeScript CSS library

MDNのデータをつかいCSSプロパティのTypeScript型定義を生成したライブラリ


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