Fork me on GitHub

2020-11-16のJS: Angular 11、Reactアプリの最適化、TypeScriptを採用して学んだこと

Edit on GitHub 編集履歴を見る

JSer.info #514 - Angular 11がリリースされました。

Angular 11ではフォントの自動インライン化の対応、Component Test Harnessesがすべてのコンポーネントに対応、Language Serviceの対応改善、HMRをCLIの引数で有効化できるようになっています。
その他には、webpack5の実験的サポート、Angular CLIのデフォルトLinterの今後について書かれています。

現在のAngularではTSLintを使ったLintが実装されていますが、TSLintは非推奨となりESLintへの移行が進められています。
Angularでも同様のTSLintからESLintの移行が進められていましたが、すでにコミュニティベースで進んでいたAngular ESLintに移行していく方針についても書かれています。

詳しくは次の記事も参照してください。


Optimize React Apps PageSpeed Insights Score - thetuteurという記事では、Reactで書かれたアプリケーションのパフォーマンス改善について書かれています。

未使用のJavaScriptを削除、コンポーネントのLazy Load、TTFBを短縮するためにNode.jsでレスポンスのIn-Memoryでキャッシュする方法について。

react-lazy-load-image-componentを使って画像の遅延ロード、react-lazy-hydrationを使って初期ロードでのメインスレッド処理を減らす方法などについて書かれています。
また、CSSの非同期ロードやcriticalを使ってUAごとに対してクリティカルパスCSSの生成などについても書かれています。


10 Insights from Adopting TypeScript at Scale | Tech At Bloombergという記事では、TypeScriptを採用して学んだことについて色々と書かれています。

TypeScriptという言語、tsconfigの設定、型定義の扱い方などについて次のような判断軸で色々と書かれています。

  • Scalability
  • Ecosystem Coherence
  • Standards Alignment

この記事から参照されているtypeinterfaceの違いやコンパイルパフォーマンスについての記事も興味深いです。


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

JSer.info Sponsors

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


ヘッドライン


Node v15.2.0 (Current) | Node.js

nodejs.org/en/blog/release/v15.2.0/

node.js ReleaseNote

Node v15.2.0リリース。
eventsにイベント名を指定してリスナーを取得するgetEventListenersの追加、fswriteFile/readFileがAbortSignal対応など


Bootstrap 5 Alpha 3 | Bootstrap Blog

blog.getbootstrap.com/2020/11/11/bootstrap-5-alpha-3/

CSS library ReleaseNote

Bootstrap 5 Alpha 3リリース。
.cardベースのアコーディオンの代わりとなる.accordionの追加、.btn-blockの削除、Utilitiesクラスの追加など


Version 11 of Angular Now Available | by Mark Techson | Nov, 2020 | Angular Blog

blog.angular.io/version-11-of-angular-now-available-74721b7952f7

Angular ReleaseNote

Angular 11リリース。
フォントの自動インライン化の対応、Component Test Harnessesがすべてのコンポーネントに対応、Language Serviceの対応改善、HMRをCLIの引数で有効化できるように。
その他には、webpack5の実験的サポートなど


Release v0.22.0 · ryansolid/solid

github.com/ryansolid/solid/releases/tag/v0.22.0

DOM JavaScript library ReleaseNote

UI作成ライブラリのsolid v0.22.0リリース。
splid-js/domを非推奨化し、solid-js/webを代わりに利用。
devオプションのサポート、CDNのJSだけで動かせるようにsolid-js/htmlなどを同梱、renderToWebStreamcreateMutableの追加など


Lunuy/iterable-weak: Iterable WeakSet / WeakMap using ES2021 WeakRef

github.com/Lunuy/iterable-weak

JavaScript library ECMAScript

WeakRefを使ったIterableなWeakMap/WeakSetの実装ライブラリ。
Iterateできるように要素を参照するが、WeakRefのFinalizationRegistryを使って参照を解放するようになっている


アーティクル


What's New In DevTools (Chrome 88)  |  Web  |  Google Developers

developers.google.com/web/updates/2020/11/devtools

Chrome article

Chrome 88の開発者ツールの変更点について。
CSS angleのビジュアライズ、AVIFがサポートされていない状態をエミュレートできるように、storage quota sizeのエミュレートに対応。
PerformanceパネルにWeb Vitalsレーンを追加、ApplicationパネルにCross-Origin Isolatedの状態を表示、network initiatorのコピーに対応。
実験的な機能としてCSS Flexboxのデバッグ機能、ショートカットカスタマイズを追加など


Optimize React Apps PageSpeed Insights Score - thetuteur

thetuteur.com/optimize-react-apps-pagespeed-insights-score/

React performance article

Reactアプリのパフォーマンス改善。
未使用のJavaScriptを削除、コンポーネントのLazy Load、TTFBを短縮するためにレスポンスのキャッシュ。
react-lazy-load-image-componentを使って画像の遅延ロード、react-lazy-hydrationを使い初期ロードでのCPU処理を減らす方法。
また、CSSの非同期ロード、criticalを使ってUAごとに対してクリティカルパスCSSの生成などについて


TypeScript: Prefer Interfaces — @ncjamieson

ncjamieson.com/prefer-interfaces/

TypeScript article

TypeScriptのtypeinterfaceの違いについて。
interfaceは名前で参照されるのに対して、typeで定義した型はインライン化されることがある。そのためtypeを使った場合にd.tsが肥大化する問題について


Performance · microsoft/TypeScript Wiki

github.com/microsoft/TypeScript/wiki/Performance

TypeScript performance article

TypeScriptのコンパイルパフォーマンスについてまとめられているページ。
typeinterface、Base TypeとUnion Type、Project Reference、tsconfig.jsonの設定による最適化について


Angular: ESLintサポートの現状 2020 Autumn |

blog.lacolaco.net/2020/11/angular-state-of-linting-2020/

Angular ESLint article

AgularにおけるTSLint/ESLintでのLintの今後について。
TSLintはAngular 12で非推奨となる予定で、ESLintへの対応はコミュニティベースで進んでいるという話


webmasters.googleblog.com/2020/11/timing-for-page-experience.html

google SEO performance article search

2021年5月からCore Web Vitals(LCP、FID、CLS)のスコアがGoogle検索結果のシグナルに使われる。
ウェブパフォーマンスが検索結果のランキングへ影響を与えるようになる


microsoft/Web-Dev-For-Beginners: 24 Lessons, 12 Weeks, Get Started as a Web Developer

github.com/microsoft/Web-Dev-For-Beginners

HTML CSS JavaScript tutorial

ウェブ開発のチュートリアル集、レッスン。HTML/CSS/JSについてやアプリ開発についての学習コンテンツ


スライド、動画関係


Next.js Conf 2020 - YouTube

www.youtube.com/playlist?list=PLBnKlKpPeagnT2Cmv4giCbosfrbKnuYTD

Next.js video Conference

Next.js Conf 2020の動画一覧


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


ESM

esm.sh/

ECMAScript JavaScript deno cdn library

esbuildで依存を含めてbundleしたパッケージを配布するnpm CDNサービス。
npmパッケージをdenoからES Modulesとして読み込めるようにpolyfillの仕組みも用意されている


open-source-labs/Recoilize: Recoil developer tool

github.com/open-source-labs/Recoilize

JavaScript debug Tools React

recoilのデバッグツール


acot-a11y/acot: More accessible web, all over the world.

github.com/acot-a11y/acot

ESLint accessibility Tools

ESLintライクなプラグインシステムをもったAccessibilityテストフレームワーク。


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


trivago/prettier-plugin-sort-imports: A prettier plugin to sort imports in typescript and javascript files by the provided RegEx order.

github.com/trivago/prettier-plugin-sort-imports

JavaScript plugin

import文の順番をソートするprettier plugin


vinissimus/next-translate: i18n tool for Next.js 10 🌍 - Load page translations and use them in an easy way!

github.com/vinissimus/next-translate

Next.js i18n library

Next.js向けのi18nツール


github.com/angular-eslint/angular-eslint

Angular ESLint

Angular向けのESLintプラグインセット。
Codelyzer/TSLintからのマイグレーションを目的にしている


felixfbecker/dom-to-svg: Library to convert a given HTML DOM node into an accessible SVG "screenshot".

github.com/felixfbecker/dom-to-svg

DOM SVG JavaScript library

<foreignObject>を使わずに、DOMからSVGを作成するライブラリ。
DOM上のWAI-ARIAやリンクなども維持した状態のSVGを作成する


davnicwil/react-frontload: Async data loading for React components, on client & server

github.com/davnicwil/react-frontload

React library server

React向けのData Loaderライブラリ。
コンポーネントでAPIを叩いてデータの取得、取得中の表示を扱える。クライアントとサーバでそれぞれ対応するAPIを用意してhydrationも扱える


alephjs/aleph.js: The React Framework in Deno.

github.com/alephjs/aleph.js

deno React library

Deno向けのReactを使ったNext.jsライクなフレームワーク


書籍関係


JavaScriptモダンプログラミング完全ガイド [堅牢なコードを効率的に開発できる! ] (impress top gearシリーズ) | Cay S. Horstmann, 吉川 邦夫 |本 | 通販 | Amazon

www.amazon.co.jp/dp/4295010561/

JavaScript book

2020年12月21日発売
Modern JavaScript for the Impatientの翻訳本


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