2024-09-09のJS: Vue 3.5、jsprimer v6、a11y-visualizer (#1220)

_i18n/ja/_posts/2024/2024-09-09-vue-3.5-jsprimer-v6-a11y-visualizer.md

@@ -0,0 +1,194 @@
+---
+title: "2024-09-09のJS: Vue 3.5、jsprimer v6、a11y-visualizer"
+author: "azu"
+layout: post
+date: 2024-09-09T00:48:44.816Z
+category: JSer
+tags:
+- nodejs
+- Firefox
+- ECMAScript
+- book
+- Vue
+
+---
+
+JSer.info #706 - Vue 3.5がリリースされました。
+
+- [Announcing Vue 3.5 | The Vue Point](https://blog.vuejs.org/posts/vue-3-5)
+
+パフォーマンス改善、`defineProps`の返り値をDestructureできるようになっています。
+また、`useId()`の追加、`data-allow-mismatch`属性の追加、`defineCustomElement()` APIを追加しCustom Elementの対応を改善、`useTemplateRef()`、`onWatcherCleanup()`の追加なども行われています。
+
+----
+
+JavaScriptの入門書である[jsprimer](https://jsprimer.net/) v6.0.0がリリースされました。
+
+- [JavaScript Primer v6.0.0リリース: ES2024の対応とNode.jsのユースケースを刷新 | Web Scratch](https://efcl.info/2024/09/02/jsprimer-v6/)
+
+ES2024の対応とNode.jsのユースケースの章が刷新されています。
+ECMAScript関係では`Map.groupBy`/`Object.groupBy`、ECMAScript Proposal Stage 2.7の対応が行われています。
+また、Node.jsでは標準モジュールに追加された`node:util`の`parseArgs`、`node:test`への対応が行われています。
+
+----
+
+[Accessibility Visualizer Browser Extension](https://github.com/ymrl/a11y-visualizer)というウェブアクセシビリティのデバッグを補助するブラウザ拡張が公開されています。
+
+- [ymrl/a11y-visualizer: A Browser Extension for Enhanced Web Accessibility Checking](https://github.com/ymrl/a11y-visualizer)
+- [HTMLを直接読み書きせず、スクリーンリーダーも使わずに、アクセシビリティを向上させられないだろうか（と思ってブラウザ拡張を作ってる）](https://zenn.dev/ymrl/articles/761efe95091798)
+
+a11y-visualizerでは、画像のaltや見出しレベルなどを可視化することで、アクセシビリティの問題を発見しやすくしています。
+
+----
+
+{% include inline-support.html %}
+
+----
+
+<h1 class="site-genre">ヘッドライン</h1>
+
+----
+
+## JavaScript Primer v6.0.0リリース: ES2024の対応とNode.jsのユースケースを刷新 | Web Scratch
+[efcl.info/2024/09/02/jsprimer-v6/](https://efcl.info/2024/09/02/jsprimer-v6/ "JavaScript Primer v6.0.0リリース: ES2024の対応とNode.jsのユースケースを刷新 | Web Scratch")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">ReleaseNote</span> <span class="jser-tag">book</span></p>
+
+JavaScript Primer v6リリース。
+ECMAScript 2024の対応とNode.jsの標準モジュールの追加に対応した更新。
+`Map.groupBy`/`Object.groupBy`、ECMAScript Proposal Stage 2.7、`node:util`の`parseArgs`、`node:test`の対応など
+
+
+----
+
+## Release v9.0.0 · faker-js/faker
+[github.com/faker-js/faker/releases/tag/v9.0.0](https://github.com/faker-js/faker/releases/tag/v9.0.0 "Release v9.0.0 · faker-js/faker")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Node.js Faker v9.0.0リリース。
+Node.js 14,16のサポート終了、localeごとのimportができるように、RNGのseedの扱いの変更など、非推奨なAPIの削除など
+
+- [Upgrading to v9 | Faker](https://v9.fakerjs.dev/guide/upgrading.html "Upgrading to v9 | Faker")
+
+----
+
+## Node.js — Node v22.8.0 (Current)
+[nodejs.org/en/blog/release/v22.8.0](https://nodejs.org/en/blog/release/v22.8.0 "Node.js — Node v22.8.0 (Current)")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">nodejs</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Node.js v22.8.0リリース。
+`module.enableCompileCache()` APIの追加、`vm.createContext()`に`vm.constants.DONT_CONTEXTIFY`を追加。
+カバレッジのしきい値をチェックできる`--experimental-test-coverage`フラグの追加など
+
+
+----
+
+## Announcing Vue 3.5 | The Vue Point
+[blog.vuejs.org/posts/vue-3-5](https://blog.vuejs.org/posts/vue-3-5 "Announcing Vue 3.5 | The Vue Point")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Vue</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Vue 3.5リリース。
+パフォーマンス改善、`defineProps`の返り値をDestructureできるように、`useId()`の追加、`data-allow-mismatch`属性の追加。
+`defineCustomElement()` APIを追加しCustom Elementの対応を改善、`useTemplateRef()`、`onWatcherCleanup()`の追加など
+
+
+----
+
+## Firefox 130.0, See All New Features, Updates and Fixes
+[www.mozilla.org/en-US/firefox/130.0/releasenotes/](https://www.mozilla.org/en-US/firefox/130.0/releasenotes/ "Firefox 130.0, See All New Features, Updates and Fixes")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Firefox</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Firefox 130リリース。
+`<details name>`の対応、X25519 digital signature algorithmのサポート、Web Codecs API のサポート。
+実験的な機能として`requestVideoFrameCallback()`、`ReportingObserver`でCSP違反を監視できるようになるなど
+
+- [Firefox 130 for developers - Mozilla | MDN](https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/130 "Firefox 130 for developers - Mozilla | MDN")
+
+----
+
+## Release v1.47.0 · microsoft/playwright
+[github.com/microsoft/playwright/releases/tag/v1.47.0](https://github.com/microsoft/playwright/releases/tag/v1.47.0 "Release v1.47.0 · microsoft/playwright")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">playwright</span> <span class="jser-tag">ReleaseNote</span></p>
+
+playwright v1.47.0リリース。
+Network Tabの改善、`--tsconfig`フラグの追加、Playwright ImageをUbuntu 24.04ベースに変更など
+
+
+----
+
+## ESLint v9.10.0 released - ESLint - Pluggable JavaScript Linter
+[eslint.org/blog/2024/09/eslint-v9.10.0-released/](https://eslint.org/blog/2024/09/eslint-v9.10.0-released/ "ESLint v9.10.0 released - ESLint - Pluggable JavaScript Linter")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">ESLint</span> <span class="jser-tag">ReleaseNote</span></p>
+
+ESLint v9.10.0リリース。
+`eslint`パッケージに`@types/eslint`と同じ型定義ファイルが含まれるようになる変更など
+
+
+----
+
+## Bun v1.1.27 | Bun Blog
+[bun.sh/blog/bun-v1.1.27](https://bun.sh/blog/bun-v1.1.27 "Bun v1.1.27 | Bun Blog")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">bum</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Bun v1.1.27リリース。
+`node:zlib`のパフォーマンス改善、`npm pack`と同等の処理をする`bun pm pack`コマンドを追加。
+`Bun.serve()`にStatic routesの追加、`--max-http-header-size`フラグの追加など
+
+
+----
+
+## Release v8.0.0 · redwoodjs/redwood
+[github.com/redwoodjs/redwood/releases/tag/v8.0.0](https://github.com/redwoodjs/redwood/releases/tag/v8.0.0 "Release v8.0.0 · redwoodjs/redwood")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">nodejs</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Redwood v8.0.0リリース。
+Background Jobの対応、SSRとRSCの対応改善、StorybookにViteを使うように、Dockerのサポートなど
+
+- [Upgrade Guide](https://redwoodjs.com/upgrade/v8 "Upgrade Guide")
+
+----
+<h1 class="site-genre">アーティクル</h1>
+
+----
+
+## JS Dates Are About to Be Fixed | TimeTime
+[docs.timetime.in/blog/js-dates-finally-fixed/](https://docs.timetime.in/blog/js-dates-finally-fixed/ "JS Dates Are About to Be Fixed | TimeTime")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">ECMAScript</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">article</span></p>
+
+ECMAScript Proposal Stage 3のTemporal APIについて
+
+
+----
+
+## What’s new in React 19 – Vercel
+[vercel.com/blog/whats-new-in-react-19](https://vercel.com/blog/whats-new-in-react-19 "What’s new in React 19 – Vercel")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">article</span></p>
+
+React 19の新しい機能についての紹介。
+Server Component、Server Action、`useActionState`/`useFormState`/`useOptimistic`/`use`などの新しいHooks。
+リソースのpreload、`ref` callback、`<title>`などのメタデータの対応。
+Custom Elementの対応、エラー表示の改善など
+
+
+----
+
+## The Ultimate Guide to Font Performance Optimization | DebugBear
+[www.debugbear.com/blog/website-font-performance](https://www.debugbear.com/blog/website-font-performance "The Ultimate Guide to Font Performance Optimization | DebugBear")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">article</span> <span class="jser-tag">fonts</span> <span class="jser-tag">performance</span></p>
+
+WebFontのパフォーマンス最適化について
+
+
+----
+<h1 class="site-genre">サイト、サービス、ドキュメント</h1>
+
+----
+
+## ymrl/a11y-visualizer: A Browser Extension for Enhanced Web Accessibility Checking
+[github.com/ymrl/a11y-visualizer?tab&#x3D;readme-ov-file](https://github.com/ymrl/a11y-visualizer?tab=readme-ov-file "ymrl/a11y-visualizer: A Browser Extension for Enhanced Web Accessibility Checking")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">accessibility</span> <span class="jser-tag">Firefox</span> <span class="jser-tag">Chrome</span> <span class="jser-tag">Extension</span></p>
+
+アクセシビリティの情報を視覚的に表示するブラウザ拡張。
+アクセシビリティの構造を可視化することで、問題を見つけやすくするツール
+
+
+----