-
-
Notifications
You must be signed in to change notification settings - Fork 70
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
2023-12-15のJS: Safari 17.2、Deno 1.39(WebGPU)、SvelteKit 2 (#1146)
* Update 673 draft * Update 673 draft * Update 673 draft * Update 673 draft * Update 673 draft * Update 673 draft * Update 673 draft * Update 673 draft * Update 673 draft * Update 673 draft * Update 673 draft * Update 673 draft * Update 673 draft * Update 673 draft * Update 673 draft * Update _i18n/ja/_posts/2023/2023-12-15-safari-17.2-deno-1.39webgpu-sveltekit-2.md * Delete _i18n/ja/_posts/2023/2023-12-15-673draft.md * Update _i18n/ja/_posts/2023/2023-12-15-safari-17.2-deno-1.39webgpu-sveltekit-2.md * Update 2023-12-15-safari-17.2-deno-1.39webgpu-sveltekit-2.md * Update _i18n/ja/_posts/2023/2023-12-15-safari-17.2-deno-1.39webgpu-sveltekit-2.md --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
- Loading branch information
1 parent
99f2544
commit 5550613
Showing
1 changed file
with
238 additions
and
0 deletions.
There are no files selected for viewing
238 changes: 238 additions & 0 deletions
238
_i18n/ja/_posts/2023/2023-12-15-safari-17.2-deno-1.39webgpu-sveltekit-2.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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/kit@2.0.0 · 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'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'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でのウェブ開発についての書籍。 | ||
| サンプルアプリケーションを通してウェブシステム開発を学ぶ書籍 | ||
|
|
||
|
|
||
| ---- |