|
| 1 | +--- |
| 2 | +title: "2019-10-09のJS: Preact X(10)、webhint browser extension v1、TypeScript 3.7β" |
| 3 | +author: "azu" |
| 4 | +layout: post |
| 5 | +date : 2019-10-09T00:17:09.603Z |
| 6 | +category: JSer |
| 7 | +tags: |
| 8 | +- Preact |
| 9 | +- webhint |
| 10 | +- typescript |
| 11 | + |
| 12 | +--- |
| 13 | + |
| 14 | +JSer.info #456 - React互換のAPIを持つPreact X(10.0.0)がリリースされました。 |
| 15 | +Preact 9.xはスキップしてPreact 10.xになっています。 |
| 16 | + |
| 17 | +- [Release Preact X - Virtuous DOM and the Fragments of Suspense · preactjs/preact](https://github.com/preactjs/preact/releases/tag/10.0.0) |
| 18 | +- [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/) |
| 19 | + |
| 20 | +Preact Xでは、Fragments、componentDidCatch、Hooks(`preact/hooks`)、createContext、CSS Custom Propertiesの対応などが含まれています。 |
| 21 | +[Hooks](https://preactjs.com/guide/v10/hooks/)はPreactのコアには含まれていませんが、`preact/hooks`または`preact/compat`をインポートすることで対応しています。 |
| 22 | + |
| 23 | +また、いままでは別モジュールとなっていた`preact-compat`が[`preact/compat`](https://preactjs.com/guide/v10/switching-to-preact)という形でインポートするように変更されています。 |
| 24 | + |
| 25 | +```js |
| 26 | +// Preact 8.x |
| 27 | +import React from "preact-compat"; |
| 28 | + |
| 29 | +// Preact X |
| 30 | +import React from "preact/compat"; |
| 31 | +``` |
| 32 | + |
| 33 | +また、preact本体はdefault exportをやめたため、named importをして使う形に変更されています。 |
| 34 | + |
| 35 | +``` |
| 36 | +// Preact 8.x |
| 37 | +import Preact from "preact"; |
| 38 | +
|
| 39 | +// Preact X |
| 40 | +import * as preact from "preact"; |
| 41 | +
|
| 42 | +// Preferred: Named exports (works in 8.x and Preact X) |
| 43 | +import { h, Component } from "preact"; |
| 44 | +``` |
| 45 | + |
| 46 | +Preact 8.xから10.xへのマイグレーションガイドも公開されているので、合わせて見てください。 |
| 47 | + |
| 48 | +- [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/) |
| 49 | + |
| 50 | +---- |
| 51 | + |
| 52 | +ウェブサイト向けのLintツールである[webhint](https://webhint.io/)のブラウザ拡張版がv1となりました。 |
| 53 | + |
| 54 | +- [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) |
| 55 | + |
| 56 | +[beta版](https://medium.com/webhint/announcing-the-webhint-browser-extension-abb22f4cfeb)からの追加点として、 |
| 57 | +MDN browser compat dataを使ったクロスブラウザの互換情報の表示、カラーコントラストについてのHintの追加などが含まれています。 |
| 58 | + |
| 59 | +Chrome(lighthouse)のAuditとの違いとして、webhintはクロスブラウザに関するチェックをあげています。 |
| 60 | + |
| 61 | +> 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. |
| 62 | +> -- https://medium.com/webhint/announcing-the-webhint-browser-extension-abb22f4cfeb |
| 63 | +
|
| 64 | +---- |
| 65 | + |
| 66 | + |
| 67 | +TypeScript 3.7 Betaがリリースされました。 |
| 68 | + |
| 69 | +- [Announcing TypeScript 3.7 Beta | TypeScript](https://devblogs.microsoft.com/typescript/announcing-typescript-3-7-beta/) |
| 70 | +- [TypeScript 3.7 Iteration Plan · Issue #33352 · microsoft/TypeScript](https://github.com/microsoft/TypeScript/issues/33352) |
| 71 | + |
| 72 | +ECMAScriptのStage 3 Proposalである[Optional Chaining](https://github.com/tc39/proposal-optional-chaining)と[Nullish Coalescing](https://github.com/tc39/proposal-nullish-coalescing)がサポートされています。 |
| 73 | +また、`asserts`によるコントールフロー制御を行うAssertion Functionsがサポートされています。 |
| 74 | +その他には、`--declaration`と`--allowJs`の組み合わせのサポートが含まれています。 |
| 75 | + |
| 76 | + |
| 77 | +---- |
| 78 | + |
| 79 | +<h1 class="site-genre">ヘッドライン</h1> |
| 80 | + |
| 81 | +---- |
| 82 | + |
| 83 | +## Release Preact X - Virtuous DOM and the Fragments of Suspense · preactjs/preact |
| 84 | +[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") |
| 85 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p> |
| 86 | + |
| 87 | +Preact X(10.0.0)リリース。 |
| 88 | +`Fragments`、`componentDidCatch`、`createContext`のサポート、Hooks APIのサポートなど |
| 89 | + |
| 90 | +- [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.") |
| 91 | +- [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.") |
| 92 | + |
| 93 | +---- |
| 94 | + |
| 95 | +## Release v3.2.0 · facebook/create-react-app |
| 96 | +[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") |
| 97 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">Tools</span> <span class="jser-tag">ReleaseNote</span></p> |
| 98 | + |
| 99 | +create-react-app 3.2.0リリース。 |
| 100 | +`yarn build --profile`でproduction buildでのプロファイル対応、`TSC_COMPILE_ON_ERROR`のサポートなど |
| 101 | + |
| 102 | + |
| 103 | +---- |
| 104 | + |
| 105 | +## vuejs/vue-next |
| 106 | +[github.com/vuejs/vue-next](https://github.com/vuejs/vue-next "vuejs/vue-next") |
| 107 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">Vue</span> <span class="jser-tag">Github</span> <span class="jser-tag">news</span></p> |
| 108 | + |
| 109 | +Vue 3候補のソースコードが公開された |
| 110 | + |
| 111 | +---- |
| 112 | + |
| 113 | +## Announcing TypeScript 3.7 Beta | TypeScript |
| 114 | +[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") |
| 115 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">TypeScript</span> <span class="jser-tag">ReleaseNote</span></p> |
| 116 | + |
| 117 | +TypeScript 3.7 Betaリリース。 |
| 118 | +Optional Chaining、Nullish Coalescing、Assertion Functionsのサポート。 |
| 119 | +`--declaration`と`--allowJs`の組み合わせのサポート、TypeScriptファイル内で`// @ts-nocheck`の追加など |
| 120 | + |
| 121 | +- [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") |
| 122 | + |
| 123 | +---- |
| 124 | + |
| 125 | +## Release v5.5.0 · GoogleChrome/lighthouse |
| 126 | +[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") |
| 127 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">Tools</span> <span class="jser-tag">ReleaseNote</span> <span class="jser-tag">Chrome</span></p> |
| 128 | + |
| 129 | +Lighthouse 5.5.0リリース。 |
| 130 | +Largest Contentful Paint(LCP)のサポート |
| 131 | + |
| 132 | + |
| 133 | +---- |
| 134 | + |
| 135 | +## Version 1.0 released : Node-RED |
| 136 | +[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") |
| 137 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">node.js</span> <span class="jser-tag">IoT</span> <span class="jser-tag">ReleaseNote</span></p> |
| 138 | + |
| 139 | +フローベースのビジュアルエディタを使って、Node.jsで動くプログラムを作成できるツールキットであるNode-RED 1.0リリース。 |
| 140 | + |
| 141 | + |
| 142 | +---- |
| 143 | + |
| 144 | +## Announcing the webhint v1 browser extension for Microsoft Edge - Microsoft Edge Blog |
| 145 | +[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") |
| 146 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">browser</span> <span class="jser-tag">Tools</span> <span class="jser-tag">ReleaseNote</span> <span class="jser-tag">Extension</span> <span class="jser-tag">accessibility</span></p> |
| 147 | + |
| 148 | +webhint browser extension 1.0.0リリース。 |
| 149 | +プラグインでカスタマイズできるウェブサイト向けのLintツールのブラウザ拡張版。 |
| 150 | +MDN browser compat dataを使ったクロスブラウザの互換情報の表示、カラーコントラストについてのHintの追加など |
| 151 | + |
| 152 | +- [webhint, the hinting engine for web best practices](https://webhint.io/ "webhint, the hinting engine for web best practices") |
| 153 | +- [webhint browser extension](https://medium.com/webhint/the-webhint-browser-extension-v1-release-df9044ddaf69) |
| 154 | + |
| 155 | +---- |
| 156 | +<h1 class="site-genre">アーティクル</h1> |
| 157 | + |
| 158 | +---- |
| 159 | + |
| 160 | +## I created the exact same app in React and Vue. Here are the differences. \[2019 Edition\] |
| 161 | +[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\]") |
| 162 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">Vue</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">article</span></p> |
| 163 | + |
| 164 | +ReactとVueでのTodoアプリを例にした比較。 |
| 165 | +React Hooksに対応したバージョン |
| 166 | + |
| 167 | + |
| 168 | +---- |
| 169 | + |
| 170 | +## Fixing layout instability | web.dev |
| 171 | +[web.dev/fixing-layout-instability/](https://web.dev/fixing-layout-instability/ "Fixing layout instability | web.dev") |
| 172 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">Chrome</span> <span class="jser-tag">performance</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">article</span></p> |
| 173 | + |
| 174 | +`PerformanceObserver`でCumulative Layout Shift (CLS)を計測し、どのようなレイアウトの変化が起きてるのかをWebPageTestで確認する方法について。 |
| 175 | +また、実際にプレースホルダーデータを使ってlayout instabilityを修正する方法について。 |
| 176 | + |
| 177 | +- [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 👩💻👨💻") |
| 178 | + |
| 179 | +---- |
| 180 | + |
| 181 | +## How to read a Web Page Test waterfall chart - Frontend Web Developer, Oxfordshire, UK - Matt Hobbs |
| 182 | +[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") |
| 183 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">webservice</span> <span class="jser-tag">performance</span> <span class="jser-tag">browser</span> <span class="jser-tag">article</span></p> |
| 184 | + |
| 185 | +WebPageTestのウォーターフォールチャートの読み方について。 |
| 186 | +図の要素ごとに解説やHTTP/1.1とHTTP/2での流れの違いなどについて書かれている |
| 187 | + |
| 188 | + |
| 189 | +---- |
| 190 | +<h1 class="site-genre">サイト、サービス、ドキュメント</h1> |
| 191 | + |
| 192 | +---- |
| 193 | + |
| 194 | +## Accessibility Support |
| 195 | +[a11ysupport.io/](https://a11ysupport.io/ "Accessibility Support") |
| 196 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">accessibility</span> <span class="jser-tag">webservice</span> <span class="jser-tag">WAI-ARIA</span></p> |
| 197 | + |
| 198 | +スクリーンリーダごとのWAI-ARIAなどのアクセシビリティサポート状況についてまとめているサイト。 |
| 199 | +Can I Use...のアクセシビリティ版 |
| 200 | + |
| 201 | + |
| 202 | +---- |
| 203 | +<h1 class="site-genre">ソフトウェア、ツール、ライブラリ関係</h1> |
| 204 | + |
| 205 | +---- |
| 206 | + |
| 207 | +## cevek/ttypescript: Over TypeScript tool to use custom transformers in the tsconfig.json |
| 208 | +[github.com/cevek/ttypescript](https://github.com/cevek/ttypescript "cevek/ttypescript: Over TypeScript tool to use custom transformers in the tsconfig.json") |
| 209 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">TypeScript</span> <span class="jser-tag">Tools</span> <span class="jser-tag">plugin</span></p> |
| 210 | + |
| 211 | +TypeScriptでのコンパイル処理に対して、プラグインで変換処理を追加できるコンパイラーの実装 |
| 212 | + |
| 213 | +---- |
| 214 | + |
| 215 | +## algolia/shipjs: Take control of what is going to be your next release. |
| 216 | +[github.com/algolia/shipjs](https://github.com/algolia/shipjs "algolia/shipjs: Take control of what is going to be your next release.") |
| 217 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">npm</span> <span class="jser-tag">Tools</span> <span class="jser-tag">CI </span></p> |
| 218 | + |
| 219 | +リリースの準備とリリースを行うツール。 |
| 220 | +semantic-releaseとは異なりすべてを自動で行うのではなく、Pull Requestを作成して、手動で確認やCHANGELOGの更新をしてからリリースを行うといったプロセスが取れる。 |
| 221 | + |
| 222 | +---- |
| 223 | + |
| 224 | +## fengyuanchen/cropperjs: JavaScript image cropper. |
| 225 | +[github.com/fengyuanchen/cropperjs](https://github.com/fengyuanchen/cropperjs "fengyuanchen/cropperjs: JavaScript image cropper.") |
| 226 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">library</span></p> |
| 227 | + |
| 228 | +Image Cropperライブラリ。 |
| 229 | +画像の切り抜き、回転、移動などができる画像加工を行うライブラリ |
| 230 | + |
| 231 | + |
| 232 | +---- |
| 233 | + |
| 234 | +## Bin-Huang/prray: "Promisified" Array, comes with async method supports(such as mapAsync). And it is compatible with normal array. |
| 235 | +[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.") |
| 236 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">Promises</span> <span class="jser-tag">library</span></p> |
| 237 | + |
| 238 | +コールバック関数にAsync Functionを取るArrayの実装ライブラリ |
| 239 | + |
| 240 | + |
| 241 | +---- |
0 commit comments