JSer.info #412 - TypeScript 3.2が正式にリリースされました。
strictBindCallApply
オプションが追加されbind
、call
、apply
の型付け改善、Object spread/restとGenericsの組み合わせを改善、BigIntサポート。
またallowJs
の際にObject.defineProperty
で宣言されたプロパティのチェック(checkJs
)に対応しています。
tsconfig.json
では既存のtsconfig.json
を継承して拡張できますが、今までnode_modules/
にある場合はそのままパスを書く必要がありました。
{
"extends": "../node_modules/@my-team/tsconfig-base/tsconfig.json",
"include": ["./**/*"]
"compilerOptions": {
// Override certain options on a project-by-project basis.
"strictBindCallApply": false,
}
}
プロジェクトなどでtsconfig.json
をnpmで配布して共有する場合には、少し不便でした。(たとえば、nodemodulesがflatかどうかでパスが変わる可能性もあります)
そのため、3.2からextends
が`nodemodules/`以下を探索するようになったため、次のように書けます。
{
"extends": "@my-team/tsconfig-base",
"include": ["./**/*"]
"compilerOptions": {
// Override certain options on a project-by-project basis.
"strictBindCallApply": false,
}
}
React 16.x Roadmap – React BlogではReact 16.xのロードマップについて書かれています。
それぞれのminorアップデートや実装される予定の機能について書かれています。
- React 16.6 with Suspense for Code Splitting (already shipped)
- 16.7?: A minor 16.x release with React Hooks (~Q1 2019)
- 16.8?: A minor 16.x release with Concurrent Mode (~Q2 2019)
- 16.9?: A minor 16.x release with Suspense for Data Fetching (~mid 2019)
また合わせてReact DOMのリファクタリングやSuspenseのSSR対応なども勧めていく予定とのことです。
End-of-Life for Built-in JSDoc Support in ESLint - ESLint - Pluggable JavaScript linterという記事では、現在ESLintにビルトインで入っているJSDocサポートの今後について書かれています。
ESLintコアで行っていたJSDoc周りのパーサやルールなどの開発を終了するという内容です。
これによりESLint本体からrequire-jsdoc
などのJSDoc関係のサポートが終了され、次のメジャーアップデートで削除される可能性があります。
そのためコミュニティで開発されているeslint-plugin-jsdocというプラグインへの移行が推奨されています。
ESLintが利用していたJSDocパーサであるdoctrineも開発が終了され、現在アーカイブ化されています。
これはもともと@constellationさんが開発し、ESLint/JS Foundationにtransferしたパッケージです。
JS Foundationでの開発を引き継ぐには手続きが煩雑になることから、Forkによる引き継ぎが推奨されています。
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
Dev.Opera — What’s new in Chromium 70 and Opera 57
Opera 57 (based on Chromium 70)リリース。
Feature Detectionの混乱をさけるためにontouch*
イベントの属性はデスクトップにおいてデフォルトで無効化、postMessage
にtargetOrigin
オプションの追加。
Web Components V1を非推奨化など
Announcing TypeScript 3.2 | TypeScript
blogs.msdn.microsoft.com/typescript/2018/11/29/announcing-typescript-3-2/
TypeScript 3.2リリース。strictBindCallApply
オプションが追加されbind
、call
、apply
の型付け改善、Object spread/restとGenericsの組み合わせを改善、BigIntサポート。
tsconfig.json
のextends
がnode_modulesのパスに対応など
アーティクル
Lazy loading (and preloading) components in React 16.6
medium.com/@pomber/lazy-loading-and-preloading-components-in-react-16-6-804de091c82d
React.lazy()
を使ったコンポーネントの遅延ロードについて
End-of-Life for Built-in JSDoc Support in ESLint - ESLint - Pluggable JavaScript linter
eslint.org/blog/2018/11/jsdoc-end-of-life
ESLintのJSDocサポートが4.0.0でビルトインではなくなることについて。
これにあわせてJSDocパーサのDoctrineも更新されなくなる。
既存のJSDoc関係のルールは別途プラグインとして切り出される。
React 16.x Roadmap – React Blog
reactjs.org/blog/2018/11/27/react-16-roadmap.html
React 16.xのロードマップについて。
16.7でReact Hooks、16.8でConcurrent Mode、16.9でSuspense for Data Fetchingをリリース予定。
また、React DOMのモダン化やSSRに対するSuspenseを検討中。
What's New In DevTools (Chrome 72) | Web | Google Developers
developers.google.com/web/updates/2018/11/devtools
Chrome 72の開発者ツールの変更点。
Performance metricsのビジュアライズ、"Copy JS path"(セレクタを指定するコードのコピー)を追加、Lighthouseのアップデートなど
Modern Frontend Testing with Cypress.io Framework - Snipcart
snipcart.com/blog/frontend-testing-cypress
Cypressを使ったE2Eテストについてのチュートリアル
Web workers vs Service workers vs Worklets
bitsofco.de/web-workers-vs-service-workers-vs-worklets/
Web Worker、Service Worker、Workletsの役割や動作についてを簡単に紹介している記事。
ブラウザのメインスレッドとは異なるスレッドでコードを実行するWorkerについて
ECMAScript proposal updates @ 2018-11 | ECMAScript Daily
ecmascript-daily.github.io/ecmascript/2018/12/01/ecmascript-proposal-updates
2018年11月のTC39ミーティングで変更があったECMAScript Proposalのステータスまとめ
What’s new in Create React App 2 – LogRocket
blog.logrocket.com/whats-new-in-create-react-app-2-fe8f4f448c75
Create React App 2.0での変更点について。
TypeScript対応、Service Workerがオプトインに変更、Babel macrosの対応、src/setupProxy.js
の対応など
How Does React Tell a Class from a Function? | Overreacted
overreacted.io/how-does-react-tell-a-class-from-a-function/
Reactが関数とクラスで書かれたコンポーネントを呼び分ける必要があるため、内部でどのように判別しているかについての解説
CSS and Network Performance – CSS Wizardry – CSS Architecture, Web Performance Optimisation, and more, by Harry Roberts
csswizardry.com/2018/11/css-and-network-performance/
CSSのロードとパフォーマンスについての記事。
非同期ロード、@import
を避ける、CSSとJSのロード順の問題などについて
スライド、動画関係
Scrimba
Angular、React、VueやTypeScriptなどのスクリーンキャストを公開しているサイト
書籍関係
The Second Edition of "Refactoring"
martinfowler.com/articles/refactoring-2nd-ed.html
Refactoring 第二版がリリースされた