diff --git a/_i18n/ja/_posts/2019/2019-10-09-preact-x10-webhint-browser-extension-v1-typescript-3.7b.md b/_i18n/ja/_posts/2019/2019-10-09-preact-x10-webhint-browser-extension-v1-typescript-3.7b.md new file mode 100644 index 00000000000..ccea94ac976 --- /dev/null +++ b/_i18n/ja/_posts/2019/2019-10-09-preact-x10-webhint-browser-extension-v1-typescript-3.7b.md @@ -0,0 +1,241 @@ +--- +title: "2019-10-09のJS: Preact X(10)、webhint browser extension v1、TypeScript 3.7β" +author: "azu" +layout: post +date : 2019-10-09T00:17:09.603Z +category: JSer +tags: +- Preact +- webhint +- typescript + +--- + +JSer.info #456 - React互換のAPIを持つPreact X(10.0.0)がリリースされました。 +Preact 9.xはスキップしてPreact 10.xになっています。 + +- [Release Preact X - Virtuous DOM and the Fragments of Suspense · preactjs/preact](https://github.com/preactjs/preact/releases/tag/10.0.0) +- [What's new in Preact X | Preact: Fast 3kb React alternative with the same ES6 API. Components & Virtual DOM.](https://preactjs.com/guide/v10/whats-new/) + +Preact Xでは、Fragments、componentDidCatch、Hooks(`preact/hooks`)、createContext、CSS Custom Propertiesの対応などが含まれています。 +[Hooks](https://preactjs.com/guide/v10/hooks/)はPreactのコアには含まれていませんが、`preact/hooks`または`preact/compat`をインポートすることで対応しています。 + +また、いままでは別モジュールとなっていた`preact-compat`が[`preact/compat`](https://preactjs.com/guide/v10/switching-to-preact)という形でインポートするように変更されています。 + +```js +// Preact 8.x +import React from "preact-compat"; + +// Preact X +import React from "preact/compat"; +``` + +また、preact本体はdefault exportをやめたため、named importをして使う形に変更されています。 + +``` +// Preact 8.x +import Preact from "preact"; + +// Preact X +import * as preact from "preact"; + +// Preferred: Named exports (works in 8.x and Preact X) +import { h, Component } from "preact"; +``` + +Preact 8.xから10.xへのマイグレーションガイドも公開されているので、合わせて見てください。 + +- [Upgrading from Preact 8.x | Preact: Fast 3kb React alternative with the same ES6 API. Components & Virtual DOM.](https://preactjs.com/guide/v10/upgrade-guide/) + +---- + +ウェブサイト向けのLintツールである[webhint](https://webhint.io/)のブラウザ拡張版がv1となりました。 + +- [Announcing the webhint v1 browser extension for Microsoft Edge - Microsoft Edge Blog](https://blogs.windows.com/msedgedev/2019/09/30/announcing-the-webhint-v1-browser-extension-for-microsoft-edge/#U2qsHqfdpdTkuKGc.97) + +[beta版](https://medium.com/webhint/announcing-the-webhint-browser-extension-abb22f4cfeb)からの追加点として、 +MDN browser compat dataを使ったクロスブラウザの互換情報の表示、カラーコントラストについてのHintの追加などが含まれています。 + +Chrome(lighthouse)のAuditとの違いとして、webhintはクロスブラウザに関するチェックをあげています。 + +> The webhint extension doesn’t replace the existing audits tab you’ll find in the developer tools for Chrome and the new Chromium-based Edge browser. While there is a little overlap in the information provided, webhint and Lighthouse serve different purposes, and you may find yourself using both. One distinguishing feature of webhint that it’s meant to provide cross-browser insights, including compatibility with Safari, IE, Opera, and so on. +> -- https://medium.com/webhint/announcing-the-webhint-browser-extension-abb22f4cfeb + +---- + + +TypeScript 3.7 Betaがリリースされました。 + +- [Announcing TypeScript 3.7 Beta | TypeScript](https://devblogs.microsoft.com/typescript/announcing-typescript-3-7-beta/) +- [TypeScript 3.7 Iteration Plan · Issue #33352 · microsoft/TypeScript](https://github.com/microsoft/TypeScript/issues/33352) + +ECMAScriptのStage 3 Proposalである[Optional Chaining](https://github.com/tc39/proposal-optional-chaining)と[Nullish Coalescing](https://github.com/tc39/proposal-nullish-coalescing)がサポートされています。 +また、`asserts`によるコントールフロー制御を行うAssertion Functionsがサポートされています。 +その他には、`--declaration`と`--allowJs`の組み合わせのサポートが含まれています。 + + +---- + +

ヘッドライン

+ +---- + +## Release Preact X - Virtuous DOM and the Fragments of Suspense · preactjs/preact +[github.com/preactjs/preact/releases/tag/10.0.0](https://github.com/preactjs/preact/releases/tag/10.0.0 "Release Preact X - Virtuous DOM and the Fragments of Suspense · preactjs/preact") +

React library ReleaseNote

+ +Preact X(10.0.0)リリース。 +`Fragments`、`componentDidCatch`、`createContext`のサポート、Hooks APIのサポートなど + +- [What's new in Preact X | Preact: Fast 3kb React alternative with the same ES6 API. Components & Virtual DOM.](https://preactjs.com/guide/v10/whats-new/ "What's new in Preact X | Preact: Fast 3kb React alternative with the same ES6 API. Components & Virtual DOM.") +- [Upgrading from Preact 8.x | Preact: Fast 3kb React alternative with the same ES6 API. Components & Virtual DOM.](https://preactjs.com/guide/v10/upgrade-guide/ "Upgrading from Preact 8.x | Preact: Fast 3kb React alternative with the same ES6 API. Components & Virtual DOM.") + +---- + +## Release v3.2.0 · facebook/create-react-app +[github.com/facebook/create-react-app/releases/tag/v3.2.0](https://github.com/facebook/create-react-app/releases/tag/v3.2.0 "Release v3.2.0 · facebook/create-react-app") +

React Tools ReleaseNote

+ +create-react-app 3.2.0リリース。 +`yarn build --profile`でproduction buildでのプロファイル対応、`TSC_COMPILE_ON_ERROR`のサポートなど + + +---- + +## vuejs/vue-next +[github.com/vuejs/vue-next](https://github.com/vuejs/vue-next "vuejs/vue-next") +

Vue Github news

+ +Vue 3候補のソースコードが公開された + +---- + +## Announcing TypeScript 3.7 Beta | TypeScript +[devblogs.microsoft.com/typescript/announcing-typescript-3-7-beta/](https://devblogs.microsoft.com/typescript/announcing-typescript-3-7-beta/ "Announcing TypeScript 3.7 Beta | TypeScript") +

TypeScript ReleaseNote

+ +TypeScript 3.7 Betaリリース。 +Optional Chaining、Nullish Coalescing、Assertion Functionsのサポート。 +`--declaration`と`--allowJs`の組み合わせのサポート、TypeScriptファイル内で`// @ts-nocheck`の追加など + +- [TypeScript 3.7 Iteration Plan · Issue #33352 · microsoft/TypeScript](https://github.com/microsoft/TypeScript/issues/33352 "TypeScript 3.7 Iteration Plan · Issue #33352 · microsoft/TypeScript") + +---- + +## Release v5.5.0 · GoogleChrome/lighthouse +[github.com/GoogleChrome/lighthouse/releases/tag/v5.5.0](https://github.com/GoogleChrome/lighthouse/releases/tag/v5.5.0 "Release v5.5.0 · GoogleChrome/lighthouse") +

Tools ReleaseNote Chrome

+ +Lighthouse 5.5.0リリース。 +Largest Contentful Paint(LCP)のサポート + + +---- + +## Version 1.0 released : Node-RED +[nodered.org/blog/2019/09/30/version-1-0-released](https://nodered.org/blog/2019/09/30/version-1-0-released "Version 1.0 released : Node-RED") +

node.js IoT ReleaseNote

+ +フローベースのビジュアルエディタを使って、Node.jsで動くプログラムを作成できるツールキットであるNode-RED 1.0リリース。 + + +---- + +## Announcing the webhint v1 browser extension for Microsoft Edge - Microsoft Edge Blog +[blogs.windows.com/msedgedev/2019/09/30/announcing-the-webhint-v1-browser-extension-for-microsoft-edge/](https://blogs.windows.com/msedgedev/2019/09/30/announcing-the-webhint-v1-browser-extension-for-microsoft-edge/ "Announcing the webhint v1 browser extension for Microsoft Edge - Microsoft Edge Blog") +

browser Tools ReleaseNote Extension accessibility

+ +webhint browser extension 1.0.0リリース。 +プラグインでカスタマイズできるウェブサイト向けのLintツールのブラウザ拡張版。 +MDN browser compat dataを使ったクロスブラウザの互換情報の表示、カラーコントラストについてのHintの追加など + +- [webhint, the hinting engine for web best practices](https://webhint.io/ "webhint, the hinting engine for web best practices") +- [webhint browser extension](https://medium.com/webhint/the-webhint-browser-extension-v1-release-df9044ddaf69) + +---- +

アーティクル

+ +---- + +## I created the exact same app in React and Vue. Here are the differences. \[2019 Edition\] +[medium.com/javascript-in-plain-english/i-created-the-exact-same-app-in-react-and-vue-here-are-the-differences-2019-edition-42ba2cab9e56](https://medium.com/javascript-in-plain-english/i-created-the-exact-same-app-in-react-and-vue-here-are-the-differences-2019-edition-42ba2cab9e56 "I created the exact same app in React and Vue. Here are the differences. \[2019 Edition\]") +

React Vue JavaScript article

+ +ReactとVueでのTodoアプリを例にした比較。 +React Hooksに対応したバージョン + + +---- + +## Fixing layout instability  |  web.dev +[web.dev/fixing-layout-instability/](https://web.dev/fixing-layout-instability/ "Fixing layout instability  |  web.dev") +

Chrome performance JavaScript article

+ +`PerformanceObserver`でCumulative Layout Shift (CLS)を計測し、どのようなレイアウトの変化が起きてるのかをWebPageTestで確認する方法について。 +また、実際にプレースホルダーデータを使ってlayout instabilityを修正する方法について。 + +- [Measuring Cumulative Layout Shift (CLS) in WebPageTest - DEV Community 👩‍💻👨‍💻](https://dev.to/chromiumdev/measuring-cumulative-layout-shift-cls-in-webpagetest-5cle "Measuring Cumulative Layout Shift (CLS) in WebPageTest - DEV Community 👩‍💻👨‍💻") + +---- + +## How to read a Web Page Test waterfall chart - Frontend Web Developer, Oxfordshire, UK - Matt Hobbs +[nooshu.github.io/blog/2019/10/02/how-to-read-a-wpt-waterfall-chart/](https://nooshu.github.io/blog/2019/10/02/how-to-read-a-wpt-waterfall-chart/ "How to read a Web Page Test waterfall chart - Frontend Web Developer, Oxfordshire, UK - Matt Hobbs") +

webservice performance browser article

+ +WebPageTestのウォーターフォールチャートの読み方について。 +図の要素ごとに解説やHTTP/1.1とHTTP/2での流れの違いなどについて書かれている + + +---- +

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

+ +---- + +## Accessibility Support +[a11ysupport.io/](https://a11ysupport.io/ "Accessibility Support") +

accessibility webservice WAI-ARIA

+ +スクリーンリーダごとのWAI-ARIAなどのアクセシビリティサポート状況についてまとめているサイト。 +Can I Use...のアクセシビリティ版 + + +---- +

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

+ +---- + +## cevek/ttypescript: Over TypeScript tool to use custom transformers in the tsconfig.json +[github.com/cevek/ttypescript](https://github.com/cevek/ttypescript "cevek/ttypescript: Over TypeScript tool to use custom transformers in the tsconfig.json") +

TypeScript Tools plugin

+ +TypeScriptでのコンパイル処理に対して、プラグインで変換処理を追加できるコンパイラーの実装 + +---- + +## algolia/shipjs: Take control of what is going to be your next release. +[github.com/algolia/shipjs](https://github.com/algolia/shipjs "algolia/shipjs: Take control of what is going to be your next release.") +

JavaScript npm Tools CI

+ +リリースの準備とリリースを行うツール。 +semantic-releaseとは異なりすべてを自動で行うのではなく、Pull Requestを作成して、手動で確認やCHANGELOGの更新をしてからリリースを行うといったプロセスが取れる。 + +---- + +## fengyuanchen/cropperjs: JavaScript image cropper. +[github.com/fengyuanchen/cropperjs](https://github.com/fengyuanchen/cropperjs "fengyuanchen/cropperjs: JavaScript image cropper.") +

JavaScript library

+ +Image Cropperライブラリ。 +画像の切り抜き、回転、移動などができる画像加工を行うライブラリ + + +---- + +## Bin-Huang/prray: "Promisified" Array, comes with async method supports(such as mapAsync). And it is compatible with normal array. +[github.com/Bin-Huang/prray](https://github.com/Bin-Huang/prray "Bin-Huang/prray: \"Promisified\" Array, comes with async method supports(such as mapAsync). And it is compatible with normal array.") +

JavaScript Promises library

+ +コールバック関数にAsync Functionを取るArrayの実装ライブラリ + + +----