Fork me on GitHub

2021-01-18のJS: Snowpack 3.0、Front-End Performance Checklist、State of JS 2020

Edit on GitHub 編集履歴を見る

JSer.info #523 - Snowpack v3.0がリリースされました。

Snowpack 3.0ではPre-bundled Streaming Importsという機能がopt-inで利用できます。
オプションで有効にすると、ローカルでbundleしたファイルではなくSkypackからESM(ECMAScript Modules)をロードできます。
一度ロードしたESMはキャッシュされ、次回からはオフラインでも利用できます。
また、この仕組みでロードするパッケージのバージョンは snowpack.deps.json というファイルで管理できます。

その他には、esbuildを使ったbundleの最適化のサポート、snowpackをJavaScriptから扱うAPIの更新などが含まれています。


Front-End Performance Checklist 2021 — Smashing Magazineでは、フロントエンドのパフォーマンスに関して幅広い範囲でまとめられています。

チェックリストという方式でパフォーマンスに関してまとめられていて、要約バージョンとしてPDFなども用意されています。

記事では、それぞれのチェック項目について詳細な解説が書かれています。


JavaScriptを扱う開発者アンケートであるState of JSの2020の結果が公開されています。

ECMAScriptの言語機能、ライブラリ、ツール、エディタ、リソースなど各項目ごとに認知、満足度、興味、利用しているかなどをアンケートを行いその結果をまとめられています。
結果の元となった回答者の属性についてはDemographicsで公開されています。
また、回答結果のJSONデータは State of JS | Kaggle に公開されています。


お知らせ

2021年1月16日でJSer.infoが10周年を迎えたので、10周年を記念した記事を書きました。

今年もよろしくお願いします。


ヘッドライン


Snowpack v3.0

www.snowpack.dev/posts/2021-01-13-snowpack-3-0

JavaScript ECMAScript debug Tools ReleaseNote

Snowpack 3.0リリース。
Streaming Importsのサポート、esbuildを使ったbundleの最適化のサポート、JavaScript APIの更新など


Release v6.0.0 · karma-runner/karma

github.com/karma-runner/karma/releases/tag/v6.0.0

browser testing ReleaseNote library

Karma 6.0.0リリース。
customFileHandlerscustomScriptTypesの削除、不正なオプションを渡した時にエラーを出すようになるなど


Node v15.6.0 (Current) | Node.js

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

node.js ReleaseNote

Node.js 15.6.0リリース。
child_processoverlappedオプション、.forkがAbortSinalに対応。
cryptoモジュールにrandomUUIDメソッドの追加、X509Certificate APIのサポート。
server.listenがAbortSignalをサポート、http.AgentschedulingオプションにLIFOアルゴリズムを追加など


Announcing TypeScript 4.2 Beta | TypeScript

devblogs.microsoft.com/typescript/announcing-typescript-4-2-beta/

TypeScript ReleaseNote

TypeScript 4.2 Betaリリース。
Tuple TypesでRest Elementをサポート、Type Aliasの型追跡の改善、template literal typesの改善。
noPropertyAccessFromIndexSignatureオプションの追加、abstract newのサポートなど。
また、--explainFilesでなぜファイルが含まれるかを表示できるようになるなど


Adobe Flash Player End of Life

www.adobe.com/products/flashplayer/end-of-life.html

flash browser news

Adobe Flash Playerが2021年1月12日でサポートを終了した。


Announcing Scala.js 1.4.0 - Scala.js

www.scala-js.org/news/2021/01/12/announcing-scalajs-1.4.0/

scala JavaScript ReleaseNote

Scala.js 1.4.0リリース


アーティクル


Reflections for 2020-2021 | The Vue Point

blog.vuejs.org/posts/hello-2021.html

Vue article

Vueの2020年の取り組みと2021の取り組み予定について。
Vue 2から3へのマイグレーションツール、Vue CLIのwebpack 5対応、Vue 3のIE 11対応、Vue 2.7のリリースなどを予定している。


Front-End Performance Checklist 2021 — Smashing Magazine

www.smashingmagazine.com/2021/01/front-end-performance-2021-free-pdf-checklist/

performance article

フロントエンドパフォーマンスチェックリスト。
サマリ版のPDFと詳細な解説をした記事で構成されている。
全部で77コの項目があり、パフォーマンスの文化、メトリクスの設定や収集、さまざまなパフォーマンスTipsについて書かれている


Deno in 2020

deno.land/posts/deno-in-2020

deno article

Denoの2020年の変更点のサマリと2021年のロードマップについて。


スライド、動画関係


State of JS 2020

2020.stateofjs.com/en-US/

JavaScript アンケート

JavaScript開発者アンケートであるState of JS 2020の結果が公開された。
言語、ライブラリ、ツール、エディタ、リソースなど各項目ごとに認知、満足度、興味、利用しているかなどをアンケートをとったもの


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


znck/vue-developer-experience: A collection of tools for vue ecosystem.

github.com/znck/vue-developer-experience

Vue Tools VSCode plugin

Vueに関するツール、VSCodeプラグインを扱うリポジトリ。
静的解析ツール、パーサ、ASTヘルパー、VScode向けのプラグインなどが含まれている


imolorhe/altair: ✨⚡️ A beautiful feature-rich GraphQL Client for all platforms.

github.com/imolorhe/altair

GraphQL EmEditor Tools

GraphQLクライアントのIDE


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


egoist/tsup: Bundle your TypeScript library with no config, powered by esbuild.

github.com/egoist/tsup

JavaScript TypeScript Tools

esbuildを使ったTypeScriptのコードをbundleしてesm,cjs,iife形式のコードを出力するツール


tw-in-js/twind: The smallest, fastest, most feature complete Tailwind-in-JS solution in existence.

github.com/tw-in-js/twind

CSS JavaScript library

Tailwind CSSをCSS-in-JSで行うライブラリとツール。
Template Literalを使ったクラスの生成するAPI、SSR向けにCSSファイルの作成、ビルド無しでTailwindクラスを利用するshimライブラリなどを提供する。


TomerAberbach/grfn: 🦅 A tiny (~400B) utility that executes a dependency graph of async functions as concurrently as possible.

github.com/TomerAberbach/grfn

JavaScript library

Promiseを使った非同期処理のコントロールフローを管理するライブラリ。
デバッグ用にコントールフローの図を生成する機能を持っている


natemoo-re/microsite: A fast, opinionated static site generator powered by Snowpack. Build simple static sites with fool-proof performance by leveraging automatic partial hydration.

github.com/natemoo-re/microsite

JavaScript Tools React

SnowpackとPreactを使ったNext.jsライクなディレクトリ構造のルールを持った静的サイトジェネレーター


github/jtml: Write HTML in JavaScript, using template-tags.

github.com/github/jtml

JavaScript HTML library WebComponents

GitHubのlit-htmlインスパイアなテンプレートレンダリングライブラリ。
WHAWG HTMLで提案中のTemplate Partsの実装を含んでいる


Catalyst

github.github.io/catalyst/

Github WebComponents library

GitHubのWeb Componentsライブラリ。
Custom Elementの登録、Stimulusインスパイアなdata-action属性を使ったイベントリスナー、Custom Element内からHTMLの要素を紐付けるクエリ機能を持っている。


書籍関係


JavaScript[完全]入門 | 柳井 政和 | コンピュータ・IT | Kindleストア | Amazon

www.amazon.co.jp/dp/B08PKHSVFZ/

JavaScript book

2021年2月4日 発売
JavaScriptの入門書


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