JSer.info #514 - Angular 11がリリースされました。
- Version 11 of Angular Now Available | by Mark Techson | Nov, 2020 | Angular Blog
- angular/CHANGELOG.md at master · angular/angular
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
この記事から参照されているtypeとinterfaceの違いやコンパイルパフォーマンスについての記事も興味深いです。
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
Node v15.2.0 (Current) | Node.js
nodejs.org/en/blog/release/v15.2.0/
Node v15.2.0リリース。
eventsにイベント名を指定してリスナーを取得するgetEventListenersの追加、fsのwriteFile/readFileがAbortSignal対応など
Bootstrap 5 Alpha 3 | Bootstrap Blog
blog.getbootstrap.com/2020/11/11/bootstrap-5-alpha-3/
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 11リリース。
フォントの自動インライン化の対応、Component Test Harnessesがすべてのコンポーネントに対応、Language Serviceの対応改善、HMRをCLIの引数で有効化できるように。
その他には、webpack5の実験的サポートなど
Release v0.22.0 · ryansolid/solid
github.com/ryansolid/solid/releases/tag/v0.22.0
UI作成ライブラリのsolid v0.22.0リリース。
splid-js/domを非推奨化し、solid-js/webを代わりに利用。
devオプションのサポート、CDNのJSだけで動かせるようにsolid-js/htmlなどを同梱、renderToWebStreamやcreateMutableの追加など
Lunuy/iterable-weak: Iterable WeakSet / WeakMap using ES2021 WeakRef
github.com/Lunuy/iterable-weak
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 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アプリのパフォーマンス改善。
未使用の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のtypeとinterfaceの違いについて。
interfaceは名前で参照されるのに対して、typeで定義した型はインライン化されることがある。そのためtypeを使った場合にd.tsが肥大化する問題について
Performance · microsoft/TypeScript Wiki
github.com/microsoft/TypeScript/wiki/Performance
TypeScriptのコンパイルパフォーマンスについてまとめられているページ。
typeとinterface、Base TypeとUnion Type、Project Reference、tsconfig.jsonの設定による最適化について
Angular: ESLintサポートの現状 2020 Autumn |
blog.lacolaco.net/2020/11/angular-state-of-linting-2020/
AgularにおけるTSLint/ESLintでのLintの今後について。
TSLintはAngular 12で非推奨となる予定で、ESLintへの対応はコミュニティベースで進んでいるという話
Official Google Webmaster Central Blog: Timing for bringing page experience to Google Search
webmasters.googleblog.com/2020/11/timing-for-page-experience.html
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/JSについてやアプリ開発についての学習コンテンツ
スライド、動画関係
Next.js Conf 2020 - YouTube
www.youtube.com/playlist?list=PLBnKlKpPeagnT2Cmv4giCbosfrbKnuYTD
Next.js Conf 2020の動画一覧
サイト、サービス、ドキュメント
ESM
esbuildで依存を含めてbundleしたパッケージを配布するnpm CDNサービス。
npmパッケージをdenoからES Modulesとして読み込めるようにpolyfillの仕組みも用意されている
open-source-labs/Recoilize: Recoil developer tool
github.com/open-source-labs/Recoilize
recoilのデバッグツール
acot-a11y/acot: More accessible web, all over the world.
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
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ツール
angular-eslint/angular-eslint: Monorepo for all the tooling related to using ESLint with Angular
github.com/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
<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向けのData Loaderライブラリ。
コンポーネントでAPIを叩いてデータの取得、取得中の表示を扱える。クライアントとサーバでそれぞれ対応するAPIを用意してhydrationも扱える
alephjs/aleph.js: The React Framework in Deno.
Deno向けのReactを使ったNext.jsライクなフレームワーク
書籍関係
JavaScriptモダンプログラミング完全ガイド [堅牢なコードを効率的に開発できる! ] (impress top gearシリーズ) | Cay S. Horstmann, 吉川 邦夫 |本 | 通販 | Amazon
www.amazon.co.jp/dp/4295010561/
2020年12月21日発売
Modern JavaScript for the Impatientの翻訳本
