Fork me on GitHub

2018-12-04のJS: TypeScript 3.2、React 16.xロードマップ、ESLintのビルトインJSDocサポート終了の予定

Edit on GitHub 編集履歴を見る

JSer.info #412 - TypeScript 3.2が正式にリリースされました。

strictBindCallApplyオプションが追加されbindcallapplyの型付け改善、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が`node
modules/`以下を探索するようになったため、次のように書けます。

{
    "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による引き継ぎが推奨されています。


ヘッドライン


Dev.Opera — What’s new in Chromium 70 and Opera 57

dev.opera.com/blog/opera-57/

Opera ReleaseNote

Opera 57 (based on Chromium 70)リリース。
Feature Detectionの混乱をさけるためにontouch*イベントの属性はデスクトップにおいてデフォルトで無効化、postMessagetargetOriginオプションの追加。
Web Components V1を非推奨化など


Announcing TypeScript 3.2 | TypeScript

blogs.msdn.microsoft.com/typescript/2018/11/29/announcing-typescript-3-2/

TypeScript ReleaseNote

TypeScript 3.2リリース。strictBindCallApplyオプションが追加されbindcallapplyの型付け改善、Object spread/restとGenericsの組み合わせを改善、BigIntサポート。
tsconfig.jsonextendsが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 article

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 article

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 article

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 article

Chrome 72の開発者ツールの変更点。
Performance metricsのビジュアライズ、"Copy JS path"(セレクタを指定するコードのコピー)を追加、Lighthouseのアップデートなど


Modern Frontend Testing with Cypress.io Framework - Snipcart

snipcart.com/blog/frontend-testing-cypress

E2E testing article

Cypressを使ったE2Eテストについてのチュートリアル


Web workers vs Service workers vs Worklets

bitsofco.de/web-workers-vs-service-workers-vs-worklets/

webworker webservice article

Web Worker、Service Worker、Workletsの役割や動作についてを簡単に紹介している記事。
ブラウザのメインスレッドとは異なるスレッドでコードを実行するWorkerについて


ECMAScript proposal updates @ 2018-11 | ECMAScript Daily

ecmascript-daily.github.io/ecmascript/2018/12/01/ecmascript-proposal-updates

ECMAScript proposal

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

React article

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 article

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/

JavaScript CSS article performance

CSSのロードとパフォーマンスについての記事。
非同期ロード、@importを避ける、CSSとJSのロード順の問題などについて


スライド、動画関係


Scrimba

scrimba.com/

React Angular Vue TypeScript video tutorial

Angular、React、VueやTypeScriptなどのスクリーンキャストを公開しているサイト


書籍関係


The Second Edition of "Refactoring"

martinfowler.com/articles/refactoring-2nd-ed.html

JavaScript book

Refactoring 第二版がリリースされた


この記事へ修正リクエストをする
記事を紹介する