2023-12-15のJS: Safari 17.2、Deno 1.39(WebGPU)、SvelteKit 2

_i18n/ja/_posts/2023/2023-12-15-safari-17.2-deno-1.39webgpu-sveltekit-2.md

@@ -0,0 +1,238 @@
+---
+title: "2023-12-15のJS: Safari 17.2、Deno 1.39(WebGPU)、SvelteKit 2"
+author: "azu"
+layout: post
+date: 2023-12-15T04:39:54.932Z
+category: JSer
+tags:
+- Next.js
+- React
+- debug
+- python
+- book
+
+---
+
+JSer.info #673 - Safari 17.2がリリースれました。
+
+- [WebKit Features in Safari 17.2 | WebKit](https://www.webkit.org/blog/14787/webkit-features-in-safari-17-2/)
+
+さまざまな変更が含まれています。
+
+- HTMLでは、`<detail name>`のサポート、`<input autocomplete="one-time-code">`のサポートなど
+- CSSでは、Nestingのルール緩和、`cap` unit、`rem()`/`mod()`/`round()`の追加、`mask-border`のサポート、Custom Highlight APIのサポートなど
+- JavaScriptでは、Import attributesのサポートなど
+
+その他には、`<link rel=preload>`で`imagesizes`/`imagesrcset`属性でのresponsive imageをサポート。
+SVG画像を`<image crossorigin>`で読み込むときにCORSを考慮して扱えるようになり、
+Fetch Priorityのサポート、HTML Formの`form.reportValidity()` APIをサポートなども含まれています。
+
+----
+
+Deno 1.39がリリースされました。
+
+- [Deno 1.39: The Return of WebGPU](https://deno.com/blog/v1.39)
+
+WebGPU APIを再導入、`deno coverage --html`でHTMLのカバレッジレポートを表示できるように、`deno compile`の改善が含まれています。
+`deno taak`で`node_modules/.bin/`へのPATHを通すように、`Object.prototype.__proto__`を有効化する`--unstable-unsafe-proto`フラグが追加されています。
+その他には、Jestのexpect互換の`std/expect`を追加、コマンドライン引数のパースをする`std/cli`を追加などの変更も含まれています。
+
+----
+
+SvelteKit 2がリリースされました。
+
+- [Announcing SvelteKit 2](https://svelte.dev/blog/sveltekit-2)
+
+`load`関数でのPromisesの扱いに一貫性を持たせるように、`paths.relative`をデフォルトで`true`に変更、`dangerZone.trackServerFetches`の削除などの変更が含まれています。
+
+次のコマンドでマイグレーションができるようになっていて、合わせてマイグレーションガイドも公開されています。
+
+```
+$ npx svelte-migrate sveltekit-2
+```
+
+- [Migrating to SvelteKit v2 • Docs • SvelteKit](https://kit.svelte.dev/docs/migrating-to-sveltekit-2)
+
+
+
+----
+
+{% include inline-support.html %}
+
+----
+
+<h1 class="site-genre">ヘッドライン</h1>
+
+----
+
+## ECMAScript proposal updates @ 2023-11 | ECMAScript Daily
+[ecmascript-daily.github.io/ecmascript/2023/12/10/ecmascript-proposal-update](https://ecmascript-daily.github.io/ecmascript/2023/12/10/ecmascript-proposal-update "ECMAScript proposal updates @ 2023-11 | ECMAScript Daily")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">ECMAScript</span> <span class="jser-tag">proposal</span> <span class="jser-tag">news</span></p>
+
+2023-11のTC39ミーティングでのECMAScript Proposalのステータス変更のまとめ。
+Array Groupingと`Promise.withResolvers`がStage 4となりES2024に含まれる。
+
+
+----
+
+## WebKit Features in Safari 17.2 | WebKit
+[www.webkit.org/blog/14787/webkit-features-in-safari-17-2/](https://www.webkit.org/blog/14787/webkit-features-in-safari-17-2/ "WebKit Features in Safari 17.2 | WebKit")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">safari</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Safari 17.2リリース。
+HTMLでは、`<detail name>`のサポート、`<input autocomplete="one-time-code">`のサポートなど。
+CSSでは、Nestingのルール緩和、`cap` unit、`rem()`/`mod()`/`round()`の追加、`mask-border`のサポート、Custom Highlight APIのサポートなど。
+JavaScriptでは、Import attributesのサポート。
+その他には、`<link rel=preload>`で`imagesizes`/`imagesrcset`属性でのresponsive imageをサポート。
+SVG画像を`<image crossorigin>`で読み込むときにCORSを考慮して扱えるように。
+Fetch Priorityのサポート、HTML Formの`form.reportValidity()` APIをサポートなど
+
+
+----
+
+## Oxlint General Availability | The JavaScript Oxidation Compiler
+[oxc-project.github.io/blog/2023-12-12-announcing-oxlint.html](https://oxc-project.github.io/blog/2023-12-12-announcing-oxlint.html "Oxlint General Availability | The JavaScript Oxidation Compiler")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">ESLint</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">Rust</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Oxlintが公開された。
+ESLintと同じようにJavaScriptやTypeScriptのLintをするツール。
+パフォーマンスを目的として設計されており、色々なESLintのルールをコアに取り込んでいる。
+
+
+----
+
+## Deno 1.39: The Return of WebGPU
+[deno.com/blog/v1.39](https://deno.com/blog/v1.39 "Deno 1.39: The Return of WebGPU")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">deno</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Deno v1.39リリース。
+WebGPU APIを再導入、`deno coverage --html`でHTMLのカバレッジレポートを表示できるように、`deno compile`の改善。
+`deno taak`で`node_modules/.bin/`へのPATHを通すように。
+`Object.prototype.__proto__`を有効化する`--unstable-unsafe-proto`フラグを追加。
+Jestのexpect互換の`std/expect`を追加、コマンドライン引数のパースをする`std/cli`を追加など
+
+
+----
+
+## Announcing SvelteKit 2
+[svelte.dev/blog/sveltekit-2](https://svelte.dev/blog/sveltekit-2 "Announcing SvelteKit 2")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Svelte</span> <span class="jser-tag">ReleaseNote</span></p>
+
+SvelteKit 2リリース。
+`load`関数でのPromisesの扱いに一貫性を持たせるように、`paths.relative`をデフォルトで`true`に変更、`dangerZone.trackServerFetches`を削除など
+
+- [Migrating to SvelteKit v2 • Docs • SvelteKit](https://kit.svelte.dev/docs/migrating-to-sveltekit-2 "Migrating to SvelteKit v2 • Docs • SvelteKit")
+- [Release @sveltejs/[email protected] · sveltejs/kit](https://github.com/sveltejs/kit/releases/tag/%40sveltejs%2Fkit%402.0.0 "Release @sveltejs/[email protected] · sveltejs/kit")
+
+----
+<h1 class="site-genre">アーティクル</h1>
+
+----
+
+## npm install --productionみたいなの色々ありすぎ問題
+[zenn.dev/zawa\_kyo/articles/d671e0935ae0c0](https://zenn.dev/zawa_kyo/articles/d671e0935ae0c0 "npm install --productionみたいなの色々ありすぎ問題")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">npm</span> <span class="jser-tag">article</span></p>
+
+`npm install --omit=dev`や`--production`、`--inculde`フラグについて
+
+
+----
+
+## Vite は使ってないけど Jest を Vitest に移行する
+[zenn.dev/sa2knight/articles/migrating\_vitest\_from\_jest](https://zenn.dev/sa2knight/articles/migrating_vitest_from_jest "Vite は使ってないけど Jest を Vitest に移行する")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">testing</span> <span class="jser-tag">article</span></p>
+
+JestからVitestへの移行方法について
+
+
+----
+
+## Baseline&#039;s evolution on MDN | MDN Blog
+[developer.mozilla.org/en-US/blog/baseline-evolution-on-mdn/](https://developer.mozilla.org/en-US/blog/baseline-evolution-on-mdn/ "Baseline&#039;s evolution on MDN | MDN Blog")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">article</span> <span class="jser-tag">browser</span></p>
+
+主要なブラウザでサポートされてるかをわかりやすく表示するBaselineについて。
+MDNやcaniuseでのAPIのサポート状況の表示に利用されているBaselineの定義について
+
+- [Baseline 2023  |  web.dev](https://web.dev/blog/baseline2023?hl=en "Baseline 2023  |  web.dev")
+
+----
+
+## Storybook for React Server Components
+[storybook.js.org/blog/storybook-react-server-components/](https://storybook.js.org/blog/storybook-react-server-components/ "Storybook for React Server Components")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">debug</span> <span class="jser-tag">article</span></p>
+
+StorybookのReact Server Components(RSC)のサポートについて。
+RSCをクライアントサイドでレンダリングして対応予定。Storybook 8のα版で利用できるようになっている。
+
+----
+
+## 【月間9000万PVのPR TIMES】プレスリリース掲載ページの Next.js 移行でやったこと | PR TIMES 開発者ブログ
+[developers.prtimes.jp/2023/12/13/replace-press-release-page-with-nextjs/](https://developers.prtimes.jp/2023/12/13/replace-press-release-page-with-nextjs/ "【月間9000万PVのPR TIMES】プレスリリース掲載ページの Next.js 移行でやったこと | PR TIMES 開発者ブログ")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Next.js</span> <span class="jser-tag">article</span></p>
+
+Next.jsのPages Routerに移行し、キャッシュの処理はCDN(Fastly)に寄せるという話。
+
+----
+
+## 1年かけてNext.jsのapp routerへ完全移行した話
+[zenn.dev/urotea/articles/3fbaa77d77b788](https://zenn.dev/urotea/articles/3fbaa77d77b788 "1年かけてNext.jsのapp routerへ完全移行した話")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Next.js</span> <span class="jser-tag">GraphQL</span> <span class="jser-tag">article</span></p>
+
+Next.jsのPage RouterからApp Routerへの移行について。
+移行の手順、App Routerへの移行後のメリットやデメリットについて。
+Intercepting Routesでのダイアログ管理、layoutやエラー画面の管理、キャッシュの問題について
+
+
+----
+
+## 一休レストランで Next.js App Router から Remix に乗り換えた話 - 一休.com Developers Blog
+[user-first.ikyu.co.jp/entry/2023/12/15/093427](https://user-first.ikyu.co.jp/entry/2023/12/15/093427 "一休レストランで Next.js App Router から Remix に乗り換えた話 - 一休.com Developers Blog")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Next.js</span> <span class="jser-tag">Remix</span> <span class="jser-tag">article</span></p>
+
+Next.jsのApp RouterからRemix Runに移行した話。
+Next.jsのApp RouterではCache-Controlが暗黙的で変更できない問題、RemixではRequest/Responseを自由に変更できるなどの違いについて。
+
+
+----
+<h1 class="site-genre">サイト、サービス、ドキュメント</h1>
+
+----
+
+## BuilderIO/hydration-overlay: Overlay for hydration errors with explicit diff between renders.
+[github.com/BuilderIO/hydration-overlay](https://github.com/BuilderIO/hydration-overlay "BuilderIO/hydration-overlay: Overlay for hydration errors with explicit diff between renders.")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">debug</span> <span class="jser-tag">library</span></p>
+
+ReactのHydrationでのmismatchのエラーをDiff表示するライブラリ。
+SSRとCSRでのレンダリング結果にズレがある場合にHydrationエラーのデバッグに利用できる。
+
+- [Announcing React Hydration Overlay - Easily Squash Hydration Errors](https://www.builder.io/blog/announcing-react-hydration-overlay "Announcing React Hydration Overlay - Easily Squash Hydration Errors")
+
+----
+<h1 class="site-genre">ソフトウェア、ツール、ライブラリ関係</h1>
+
+----
+
+## Onyx Programming Language
+[onyxlang.io/](https://onyxlang.io/ "Onyx Programming Language")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">WebAssembly</span> <span class="jser-tag">program</span></p>
+
+WebAssemblyへとコンパイルできる言語
+
+- [Onyx, a new programming language powered by WebAssembly](https://wasmer.io/posts/onyxlang-powered-by-wasmer "Onyx, a new programming language powered by WebAssembly")
+
+----
+<h1 class="site-genre">書籍関係</h1>
+
+----
+
+## 実装で学ぶフルスタックWeb開発 エンジニアの視野と知識を広げる「一気通貫」型ハンズオン | 株式会社オープントーン, 佐藤 大輔, 伊東 直喜, 上野 啓二 |本 | 通販 | Amazon
+[www.amazon.co.jp/dp/4798179337/](https://www.amazon.co.jp/dp/4798179337/ "実装で学ぶフルスタックWeb開発 エンジニアの視野と知識を広げる「一気通貫」型ハンズオン | 株式会社オープントーン, 佐藤 大輔, 伊東 直喜, 上野 啓二 |本 | 通販 | Amazon")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Next.js</span> <span class="jser-tag">React</span> <span class="jser-tag">python</span> <span class="jser-tag">book</span></p>
+
+2023年12月18日発売
+Next.jsとDjangoでのウェブ開発についての書籍。
+サンプルアプリケーションを通してウェブシステム開発を学ぶ書籍
+
+
+----