|
| 1 | +--- |
| 2 | +title: "2024-05-26のJS: Next.js 15 RC、SolidStart 1.0、Angular v18(zoneless)" |
| 3 | +author: "azu" |
| 4 | +layout: post |
| 5 | +date: 2024-05-26T14:42:03.718Z |
| 6 | +category: JSer |
| 7 | +tags: |
| 8 | +- CSS |
| 9 | +- HTTP |
| 10 | +- PDF |
| 11 | +- security |
| 12 | +- Electron |
| 13 | + |
| 14 | +--- |
| 15 | + |
| 16 | +JSer.info #694 - Next.js 15 RCがリリースされました。 |
| 17 | + |
| 18 | +- [Next.js 15 RC | Next.js](https://nextjs.org/blog/next-15-rc) |
| 19 | + |
| 20 | +[React 19 RC](https://react.dev/blog/2024/04/25/react-19)に対応、React Compilerを実験的にサポート、Hydration Error表示の改善が行われています。 |
| 21 | +また、Fetch/`GET` Route Handler/Client Routerをデフォルトでキャッシュしないように変更、Partial Prerenderingの`incremental`オプションを追加などの変更も行われています。 |
| 22 | +そのほかには、遅延処理をする`next/after`を追加、`create-next-app`のアップデート、非推奨だった`@next/font`のサポート削除などが行われています。 |
| 23 | + |
| 24 | +---- |
| 25 | + |
| 26 | +SolidStart 1.0がリリースされました。 |
| 27 | + |
| 28 | +- [SolidStart 1.0: The Shape of Frameworks to Come | SolidJS](https://www.solidjs.com/blog/solid-start-the-shape-frameworks-to-come) |
| 29 | + |
| 30 | +[SolidStart](https://start.solidjs.com/)は[Solid](https://www.solidjs.com/)のNext.jsのようなフルスタックウェブアプリケーションフレームワークで、[Vite](https://vitejs.dev/)/[vinxi](https://github.com/nksaraf/vinxi)/[Nitro](https://nitro.unjs.io/)を使って作られています。 |
| 31 | + |
| 32 | +---- |
| 33 | + |
| 34 | +Angular v18がリリースされました。 |
| 35 | + |
| 36 | +- [Angular v18 is now available!. Today we are excited to share the next… | by Minko Gechev | May, 2024 | Angular Blog](https://blog.angular.dev/angular-v18-is-now-available-e79d5ac0affe) |
| 37 | + |
| 38 | +zone.jsを使わない変更検知の仕組みを実験的にサポート、Material 3を正式サポート、Deferrable views/Built-in control flowをStableに変更といった変更が行われています。 |
| 39 | +また、Angular DevToolsの改善やTypeScript 5.4のサポートなども含まれています。 |
| 40 | + |
| 41 | +---- |
| 42 | + |
| 43 | +{% include inline-support.html %} |
| 44 | + |
| 45 | +---- |
| 46 | + |
| 47 | +<h1 class="site-genre">ヘッドライン</h1> |
| 48 | + |
| 49 | +---- |
| 50 | + |
| 51 | +## Release Release v1.7.0 · axios/axios |
| 52 | +[github.com/axios/axios/releases/tag/v1.7.0](https://github.com/axios/axios/releases/tag/v1.7.0 "Release Release v1.7.0 · axios/axios") |
| 53 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">HTTP</span> <span class="jser-tag">library</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">ReleaseNote</span></p> |
| 54 | + |
| 55 | +axios v1.7.0リリース。 |
| 56 | +Fetch APIを使ったadapterを追加など |
| 57 | + |
| 58 | + |
| 59 | +---- |
| 60 | + |
| 61 | +## Bun v1.1.9 | Bun Blog |
| 62 | +[bun.sh/blog/bun-v1.1.9](https://bun.sh/blog/bun-v1.1.9 "Bun v1.1.9 | Bun Blog") |
| 63 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">Bun</span> <span class="jser-tag">ReleaseNote</span></p> |
| 64 | + |
| 65 | +Bun v1.1.9リリース。 |
| 66 | +最大255 DNSレコードを最大30秒キャッシュするように、`dns.prefetch()`/` dns.getCacheStats()`の追加。 |
| 67 | +`bun --no-clear-screen --watch`のサポート、`msw`のサポートなど |
| 68 | + |
| 69 | + |
| 70 | +---- |
| 71 | + |
| 72 | +## Release @ark-ui/react@3.0.0 · chakra-ui/ark |
| 73 | +[github.com/chakra-ui/ark/releases/tag/%40ark-ui%2Freact%403.0.0 ](https://github.com/chakra-ui/ark/releases/tag/%40ark-ui%2Freact%403.0.0 "Release @ark-ui/[email protected] · chakra-ui/ark") |
| 74 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">React</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p> |
| 75 | + |
| 76 | +Ark UI 3.0リリース。 |
| 77 | +React/Vue/Solid対応版がそれぞれリリースされている。 |
| 78 | +3.0では`Context`/`Format`コンポーネントの追加、`HiddenInput`の扱いの変更、React 19に対応など |
| 79 | + |
| 80 | + |
| 81 | +---- |
| 82 | + |
| 83 | +## Next.js 15 RC | Next.js |
| 84 | +[nextjs.org/blog/next-15-rc](https://nextjs.org/blog/next-15-rc "Next.js 15 RC | Next.js") |
| 85 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">Next.js</span> <span class="jser-tag">ReleaseNote</span></p> |
| 86 | + |
| 87 | +Next.js 15 RCリリース。 |
| 88 | +React 19 RCに対応、React Compilerを実験的にサポート、Hydration Error表示の改善。 |
| 89 | +Fetch/`GET` Route Handler/Client Routerをデフォルトでキャッシュしないように変更、Partial Prerenderingの`incremental`オプションを追加。 |
| 90 | +遅延処理をする`next/after`を追加、`create-next-app`のアップデート。 |
| 91 | +非推奨だった`@next/font`のサポート削除など |
| 92 | + |
| 93 | + |
| 94 | +---- |
| 95 | + |
| 96 | +## SolidStart 1.0: The Shape of Frameworks to Come | SolidJS |
| 97 | +[www.solidjs.com/blog/solid-start-the-shape-frameworks-to-come](https://www.solidjs.com/blog/solid-start-the-shape-frameworks-to-come "SolidStart 1.0: The Shape of Frameworks to Come | SolidJS") |
| 98 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">Solid</span> <span class="jser-tag">ReleaseNote</span></p> |
| 99 | + |
| 100 | +SolidStart 1.0リリース。 |
| 101 | + |
| 102 | + |
| 103 | +---- |
| 104 | + |
| 105 | +## Angular v18 is now available!. Today we are excited to share the next… | by Minko Gechev | May, 2024 | Angular Blog |
| 106 | +[blog.angular.dev/angular-v18-is-now-available-e79d5ac0affe](https://blog.angular.dev/angular-v18-is-now-available-e79d5ac0affe "Angular v18 is now available!. Today we are excited to share the next… | by Minko Gechev | May, 2024 | Angular Blog") |
| 107 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">Angular</span> <span class="jser-tag">ReleaseNote</span></p> |
| 108 | + |
| 109 | +Angular v18リリース。 |
| 110 | +zone.jsを使わない変更検知の仕組みを実験的にサポート、Material 3を正式サポート、Deferrable views/Built-in control flowをStableに変更。 |
| 111 | +また、Angular DevToolsの改善などが含まれている |
| 112 | + |
| 113 | + |
| 114 | +---- |
| 115 | +<h1 class="site-genre">アーティクル</h1> |
| 116 | + |
| 117 | +---- |
| 118 | + |
| 119 | +## CVE-2024-4367 - Arbitrary JavaScript execution in PDF.js — Codean Labs |
| 120 | +[codeanlabs.com/blog/research/cve-2024-4367-arbitrary-js-execution-in-pdf-js/](https://codeanlabs.com/blog/research/cve-2024-4367-arbitrary-js-execution-in-pdf-js/ "CVE-2024-4367 - Arbitrary JavaScript execution in PDF.js — Codean Labs") |
| 121 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">PDF</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">security</span> <span class="jser-tag">Electron</span> <span class="jser-tag">article</span></p> |
| 122 | + |
| 123 | +細工したPDFファイルをPDF.jsで表示すると任意のJavaScriptが実行できるXSS脆弱性について。 |
| 124 | +PDF.js v4.2.67で修正されている。また`isEvalSupported: false`にすることでも回避できる。 |
| 125 | + |
| 126 | +- [PDF.js vulnerable to arbitrary JavaScript execution upon opening a malicious PDF · CVE-2024-4367 · GitHub Advisory Database](https://github.com/advisories/GHSA-wgrm-67xf-hhpq "PDF.js vulnerable to arbitrary JavaScript execution upon opening a malicious PDF · CVE-2024-4367 · GitHub Advisory Database") |
| 127 | + |
| 128 | +---- |
| 129 | + |
| 130 | +## CSSでチェックボックスやラジオボタンをカスタマイズする 2024年版: Days on the Moon |
| 131 | +[nanto.asablo.jp/blog/2024/05/24/9686885](https://nanto.asablo.jp/blog/2024/05/24/9686885 "CSSでチェックボックスやラジオボタンをカスタマイズする 2024年版: Days on the Moon") |
| 132 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">HTML</span> <span class="jser-tag">CSS</span> <span class="jser-tag">article</span></p> |
| 133 | + |
| 134 | +チェックボックス(`<input type="checkbox">`)やラジオボタン(`<input type="radio">`)をCSSでカスタマイズする方法について。 |
| 135 | + |
| 136 | + |
| 137 | +---- |
| 138 | + |
| 139 | +## A virtual DOM in 200 lines of JavaScript – Marcelo Lazaroni – Developing for the Interwebs |
| 140 | +[lazamar.github.io/virtual-dom/](https://lazamar.github.io/virtual-dom/ "A virtual DOM in 200 lines of JavaScript – Marcelo Lazaroni – Developing for the Interwebs") |
| 141 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">DOM</span> <span class="jser-tag">article</span></p> |
| 142 | + |
| 143 | +Virtual DOMを実装しながら仕組みについてみていく記事 |
| 144 | + |
| 145 | + |
| 146 | +---- |
| 147 | + |
| 148 | +## Understand errors and warnings better with Gemini | Chrome DevTools | Chrome for Developers |
| 149 | +[developer.chrome.com/docs/devtools/console/understand-messages](https://developer.chrome.com/docs/devtools/console/understand-messages "Understand errors and warnings better with Gemini | Chrome DevTools | Chrome for Developers") |
| 150 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">Chrome</span> <span class="jser-tag">debug</span> <span class="jser-tag">LanguageModel</span> <span class="jser-tag">article</span></p> |
| 151 | + |
| 152 | +Chrome DevToolsのGeminiを使ったエラーの解説機能について。 |
| 153 | + |
| 154 | + |
| 155 | +---- |
| 156 | + |
| 157 | +## Rethinking Text Resizing on Web. Airbnb has made significant strides in… | by Steven Bassett | The Airbnb Tech Blog | May, 2024 | Medium |
| 158 | +[medium.com/airbnb-engineering/rethinking-text-resizing-on-web-1047b12d2881](https://medium.com/airbnb-engineering/rethinking-text-resizing-on-web-1047b12d2881 "Rethinking Text Resizing on Web. Airbnb has made significant strides in… | by Steven Bassett | The Airbnb Tech Blog | May, 2024 | Medium") |
| 159 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">accessibility</span> <span class="jser-tag">article</span> <span class="jser-tag">CSS</span></p> |
| 160 | + |
| 161 | +Airbnbのアクセシビリティの取り組みとしてテキストサイズ/ズームを考慮して、`rem`を優先として使う意思決定をした背景、テストのアプローチ、Figma/デザイナーとの連携方法についてなど |
| 162 | + |
| 163 | + |
| 164 | +---- |
| 165 | +<h1 class="site-genre">スライド、動画関係</h1> |
| 166 | + |
| 167 | +---- |
| 168 | + |
| 169 | +## esbuild 最適化芸人 - Speaker Deck |
| 170 | +[speakerdeck.com/exoego/esbuild-zui-shi-hua-yun-ren](https://speakerdeck.com/exoego/esbuild-zui-shi-hua-yun-ren "esbuild 最適化芸人 - Speaker Deck") |
| 171 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">Lambda</span> <span class="jser-tag">esbuild</span> <span class="jser-tag">slide</span></p> |
| 172 | + |
| 173 | +esbuildを使ってバンドルサイズを最適化することでAWS LambdaのCold Startの時間を短縮することについてのスライド。 |
| 174 | + |
| 175 | +- [exoego/esbuild-bundle-analyzer: Analyzes each PR's impact on esbuild bundle size](https://github.com/exoego/esbuild-bundle-analyzer "exoego/esbuild-bundle-analyzer: Analyzes each PR&#039;s impact on esbuild bundle size") |
| 176 | + |
| 177 | +---- |
| 178 | +<h1 class="site-genre">サイト、サービス、ドキュメント</h1> |
| 179 | + |
| 180 | +---- |
| 181 | + |
| 182 | +## andrico1234/the-dilemmas-youll-face: The Dilemmas You'll Face When Creating Your First Component Library |
| 183 | +[github.com/andrico1234/the-dilemmas-youll-face?tab=readme-ov-file](https://github.com/andrico1234/the-dilemmas-youll-face?tab=readme-ov-file "andrico1234/the-dilemmas-youll-face: The Dilemmas You'll Face When Creating Your First Component Library") |
| 184 | +<p class="jser-tags jser-tag-icon"><span class="jser-tag">UI</span> <span class="jser-tag">document</span></p> |
| 185 | + |
| 186 | +コンポーネントライブラリを作成する際のガイド。 |
| 187 | +ライブラリを使う、npmパッケージとしての公開方法、リポジトリの構成、bundlerなどについて |
| 188 | + |
| 189 | + |
| 190 | +---- |
0 commit comments