Fork me on GitHub

2021-08-17のJS: Next.js 11.1、Rails 7で予定されているimport mapsベースのJSライブラリの利用

Edit on GitHub 編集履歴を見る

JSer.info #553 - Next.js 11.1 がリリースされました。

オープンリダイレクタの脆弱性が修正されています。
experimental.esmExternalsオプションでNode.jsのESMをサポートしています。
その他には、node-fetchのkeepAliveをデフォルトで有効化、Source Map/ESLint/next/imageの改善なども含まれています。

また、Rust製のJS/TS Compiler/BundlerであるSWCの作者であるDongYoon KangがVercelに入り、Next.jsでのコンパイルにSWCを利用できるように開発中とのことです。


Rails 7.0では、現在のwebpacker(webpack)ではなく、Import mapsを使ってJavaScriptライブラリを利用する方法をデフォルトする方針が提案されています。

Import mapsはES Modulesでimportする際に、importするモジュールの名前解決を定義するウェブ標準です。

次のようにtype="importmap"でImport mapsを定義します。

<script type="importmap">
{
  "imports": {
    "app": "./src/app.js",
    "md5": "https://cdn.skypack.dev/md5"
  }
}
</script>

このImport mapsの定義が、各モジュールでの名前解決に利用されます。

import app from "app"; // ./src/app.js をロードする
import md5 from "md5"; // https://cdn.skypack.dev/md5 をロードする

Import mapsはChrome系ブラウザのみがサポートしているため、他のブラウザではES Module Shimsを利用する必要があります。(rails/importmap-railsにはshimが同梱されています)

Rails 7では、JavaScriptのbuildやbundleをせずにCDNからライブラリを取得できる仕組みをImport mapsを使って実現して、現在のwebpackerをオプションへと変更する予定となっています。
TypeScriptやReactのようなビルドを前提とする仕組みはwebpackerを利用する必要があります。

詳しい動作については次の動画でデモが公開されています。


ヘッドライン


August 2021 Security Releases | Node.js

nodejs.org/en/blog/vulnerability/aug-2021-security-releases/

node.js security ReleaseNote

Node.jsのセキュリティアップデート。
それぞれ対応するNode v12.22.5 (LTS)、 Node v14.17.5 (LTS)、Node v16.6.2がリリースされている。
DNSライブラリc-aresのセキュリティ修正、http2のstreamを閉じた際のUse after freeの修正。
rejectUnauthorizedundefinedを渡すと期限切れの証明書を受け付けていた問題の修正など


Hopping on Firefox 91 - Mozilla Hacks - the Web developer blog

hacks.mozilla.org/2021/08/hopping-on-firefox-91/

Firefox ReleaseNote

Firefox 91リリース。
Visual Viewport API、Intl.DateTimeFormatの改善、Error Causeのサポートなど。
またGamepad APIがSecure Contextでのみ動作するようになる変更など


Blog - Next.js 11.1 | Next.js

nextjs.org/blog/next-11-1

Next.js ReleaseNote

Next.js 11.1リリース。
オープンリダイレクタの脆弱性の修正、experimentalでNode.jsのESMをサポート。
node-fetchのkeepAliveをデフォルトで有効化、Source Map/ESLint/next/imageの改善など


Announcing TypeScript 4.4 RC | TypeScript

devblogs.microsoft.com/typescript/announcing-typescript-4-4-rc/

TypeScript ReleaseNote

TypeScript 4.4 RCリリース。
Control Flow Analysisの改善、Index SignaturesにSymbolやTemplate Stringを利用できるように。
Catch節のデフォルトをunknown型にするuseUnknownInCatchVariablesオプションの追加。
optionalとundefined値の区別をするexactOptionalPropertyTypesオプションの追加。
また、ES Proposal Stage 3のclass static blockをサポート。
declarationの生成やstrictモードでのビルドパフォーマンスの改善も含まれている


Release v6.0.0 · vueuse/vueuse

github.com/vueuse/vueuse/releases/tag/v6.0.0

Vue ReleaseNote library

vueuse 6.0.0リリース。
Vue 3.2のeffectScope APIに対応、createSharedComposable/toReactive/useEventBusの追加。
useStorageにonErrorコールバックの追加など


アーティクル


JavaScript Development: Making a Web Worker optional | by Tobias Uhlig | Aug, 2021 | ITNEXT

itnext.io/javascript-development-making-a-web-worker-optional-f23a13490b28

JavaScript webworker article

重たいロジックを別のWeb Workerで分けることには意味があるが、スレッドがほとんどアイドル状態の場合にWorkerを分けるとpostMessage分の遅延が発生してしまう。
Workerとして分けて実行していた処理を、同じAPIを維持しつつ同じスレッドで実行するように処理を変更するアプローチについて。
neo.mjs 2.3.4ではどのように対応したかについて。


<Lazy> rendering in Vue to improve performance | by Martin Malinda | Vue.js Developers | Aug, 2021 | Medium

medium.com/js-dojo/lazy-rendering-in-vue-to-improve-performance-dcccd445d5f

Vue article performance

Vueでの遅延レンダリングを使ったパフォーマンス改善について。
レンダリングのタイミングをずらす、Intersection Observerを使ってviewportに入るタイミングでレンダリング、無限リストの実装についてなど


Slinkity

slinkity.dev/

JavaScript Tools React Vue Svelte

静的サイトジェネレータである11tyにReact/Vue/Svelteなどのコンポーネントをimportとして利用できるようにする拡張


Modern web apps without JavaScript bundling or transpiling

world.hey.com/dhh/modern-web-apps-without-javascript-bundling-or-transpiling-a20f2755

rails JavaScript article

Rails 7.0でwebpacker(webpack)ではなくimport mapsベースのbundlerを使わないアプローチをデフォルトにすることを検討しているという話。


Don’t attach tooltips to document.body - Atif Afzal

atfzl.com/don-t-attach-tooltips-to-document-body

JavaScript DOM CSS performance article

document.body直下にツールチップ表示用の要素を追加すると、多くの要素のスタイル更新処理が行われパフォーマンスの問題となった話。
どのようにレイアウト計算の影響を確認したか、ツールチップを表示用の要素をラップすることでスタイル更新の影響範囲を小さくした話


CSS Grid tooling in DevTools - Chrome Developers

developer.chrome.com/blog/css-grid-tooling/

CSS Chrome debug article

Chrome DevToolsのCSS Gridのデバッグ機能と追加されたCDP(chrome devtools protocol)について。
DevToolsのGridのオーバーレイ表示を永続化、DOMの変更を即時反映、ComputedなStyleでの要素検索を実現するために、CDPに対して新しいコマンドを実装したという話。


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


craigmichaelmartin/pure-orm: A Node.js SQL toolkit for writing native SQL queries yielding pure business objects

github.com/craigmichaelmartin/pure-orm

DB node.js library

ORMライブラリ。
Business Object(BO)とData Access Object(DAO)を使ってDBとのデータをやり取りする。
DAOはクエリビルダーではなく、生に近いSQL構文を利用する


microlinkhq/keyv: Simple key-value storage with support for multiple backends.

github.com/microlinkhq/keyv

JavaScript node.js library

redis/mongo/SQLite/MySQL/PostgreSQLなどの各種バックエンドに対応したKVSライブラリ。


jlongster/absurd-sql: sqlite3 in ur indexeddb (hopefully a better backend soon)

github.com/jlongster/absurd-sql

SQL JavaScript IndexedDB library

sql.jsのIndexedDBバックエンド


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