-
-
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.
2024-05-19のJS: Remix + React Router = React Router、State of HTML 2023 (…
…#1194) * Update 693 draft * Update 693 draft * Update 693 draft * Update 693 draft * Update 693 draft * Update 693 draft * Update 693 draft * Update 693 draft * Update 693 draft * Update 693 draft * Update 693 draft * Update 693 draft * Update 693 draft * Update 693 draft * Update 693 draft * Update _i18n/ja/_posts/2024/2024-05-19-remix-react-router-react-router-state-of-html-2023.md * Delete _i18n/ja/_posts/2024/2024-05-19-693draft.md * Update _i18n/ja/_posts/2024/2024-05-19-remix-react-router-react-router-state-of-html-2023.md --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
- Loading branch information
1 parent
b2ed8d8
commit bf0e343
Showing
1 changed file
with
204 additions
and
0 deletions.
There are no files selected for viewing
204 changes: 204 additions & 0 deletions
204
...ja/_posts/2024/2024-05-19-remix-react-router-react-router-state-of-html-2023.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,204 @@ | ||
| --- | ||
| title: "2024-05-19のJS: Remix + React Router = React Router、State of HTML 2023" | ||
| author: "azu" | ||
| layout: post | ||
| date: 2024-05-19T14:15:49.809Z | ||
| category: JSer | ||
| tags: | ||
| - React | ||
| - Angular | ||
| - nodejs | ||
| - Next.js | ||
| - safari | ||
|
|
||
| --- | ||
|
|
||
| JSer.info #693 - 次の記事では、Remix v3はReact Router v7としてリリースする予定という話が紹介されています。 | ||
|
|
||
| - [Merging Remix and React Router | Remix](https://remix.run/blog/merging-remix-and-react-router) | ||
|
|
||
| RemixとReact Routerは、Viteとサーバ以外はほぼ同等の機能になってきています。 | ||
| そのため、React RouterをRemixにマイグレーションするのではなく、React RouterをアップデートするだけでRemixの機能を使えるようにしたいという話が書かれています。 | ||
| 既存のRemixアプリは、import先のパッケージを`react-router`に変更するだけで動く予定とのことです。 | ||
|
|
||
| この意思決定の詳細は、Xでも書かれています。 | ||
|
|
||
| - https://x.com/ryanflorence/status/1791479313939976313 | ||
|
|
||
| React Routerの安定化のために、Remix自体の開発は少しの間止まるとのことですが、 | ||
| 今後Remixプロジェクトとしての予定があるそうです。 | ||
|
|
||
| --- | ||
|
|
||
| State of HTML 2023の結果が公開されました。 | ||
|
|
||
| - [State of HTML 2023](https://2023.stateofhtml.com/en-US/) | ||
|
|
||
| HTMLの要素や属性、Web Components、アクセシビリティ、課題や欲しい機能についてのアンケート結果がまとめられています。 | ||
|
|
||
| ---- | ||
|
|
||
| {% include inline-support.html %} | ||
|
|
||
| ---- | ||
|
|
||
| <h1 class="site-genre">ヘッドライン</h1> | ||
|
|
||
| ---- | ||
|
|
||
| ## WebKit Features in Safari 17.5 | WebKit | ||
| [webkit.org/blog/15383/webkit-features-in-safari-17-5/](https://webkit.org/blog/15383/webkit-features-in-safari-17-5/ "WebKit Features in Safari 17.5 | WebKit") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">safari</span> <span class="jser-tag">ReleaseNote</span></p> | ||
|
|
||
| Safari 17.5の変更点について。 | ||
| CSSの`text-wrap: balance`、`light-dark()`、`@starting-style`、`@import <url> supports(<feature>)`のサポート。 | ||
| AV1 for WebCodecsのサポートなど | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Firefox 126.0, See All New Features, Updates and Fixes | ||
| [www.mozilla.org/en-US/firefox/126.0/releasenotes/](https://www.mozilla.org/en-US/firefox/126.0/releasenotes/ "Firefox 126.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 126リリース。 | ||
| zstdをサポート、CSSの`zoom`プロパティをサポート、`URL.parse()`をサポート、 Screen Wake Lock APIをサポート。 | ||
| Custom ElementのCustomStateSetと`:state()`擬似クラスをサポートなど | ||
|
|
||
| - [Firefox 126 for developers - Mozilla | MDN](https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/126 "Firefox 126 for developers - Mozilla | MDN") | ||
|
|
||
| ---- | ||
|
|
||
| ## Node.js — Node v22.2.0 (Current) | ||
| [nodejs.org/en/blog/release/v22.2.0](https://nodejs.org/en/blog/release/v22.2.0 "Node.js — Node v22.2.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.2.0リリース。 | ||
| fs.globが`withFileTypes`をサポート、`--inspect-wait=host:port`をサポート、`--experimental-policy`を削除。 | ||
| `node:test`に`test.plan`メソッドの追加など | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Release 8.1.0 · google/zx | ||
| [github.com/google/zx/releases/tag/8.1.0](https://github.com/google/zx/releases/tag/8.1.0 "Release 8.1.0 · google/zx") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">nodejs</span> <span class="jser-tag">ShellScript</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p> | ||
|
|
||
| zx 8.1.0リリース。 | ||
| ESMとCJSの両方をサポート、Node.js 12から22までサポート、Deno 1.xとの互換性のサポート。 | ||
| `usePwsh()`の追加、`$.timeout`のサポート、`--cwd`フラグの追加など | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Release v0.21.3 · evanw/esbuild | ||
| [github.com/evanw/esbuild/releases/tag/v0.21.3](https://github.com/evanw/esbuild/releases/tag/v0.21.3 "Release v0.21.3 · evanw/esbuild") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">esbuild</span> <span class="jser-tag">ReleaseNote</span></p> | ||
|
|
||
| esbuild v0.21.3リリース。 | ||
| decorator metadata proposalのサポート | ||
|
|
||
|
|
||
| ---- | ||
| <h1 class="site-genre">アーティクル</h1> | ||
|
|
||
| ---- | ||
|
|
||
| ## Merging Remix and React Router | Remix | ||
| [remix.run/blog/merging-remix-and-react-router](https://remix.run/blog/merging-remix-and-react-router "Merging Remix and React Router | Remix") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">Remix</span> <span class="jser-tag">article</span></p> | ||
|
|
||
| RemixはReact Router v7としてリリースする予定という話。 | ||
| RemixとReact Routerは、Viteとサーバ以外はほぼ同等の機能になってきている。 | ||
| そのため、React RouterをRemixにマイグレーションするのではなく、React RouterをアップデートするだけでRemixの機能を使えるようにしたいという話。 | ||
| 既存のRemixアプリは、import先のパッケージを`react-router`に変更するだけで動く予定という話。 | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Angular 17 Update: Control Flow & App Builder Migration - ANGULARarchitects | ||
| [www.angulararchitects.io/blog/angular-17-update-control-flow-app-builder-migration/](https://www.angulararchitects.io/blog/angular-17-update-control-flow-app-builder-migration/ "Angular 17 Update: Control Flow & App Builder Migration - ANGULARarchitects") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">Angular</span> <span class="jser-tag">article</span></p> | ||
|
|
||
| Angular 18が2024-05-20にリリースされるため、その前にAngular 17へアップデートしようという記事。 | ||
| Angular 17では新しい制御フローやViteへの変更なども含まれていて、アップデート方法について。 | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Introducing Firebase App Hosting | ||
| [firebase.blog/posts/2024/05/introducing-app-hosting/](https://firebase.blog/posts/2024/05/introducing-app-hosting/ "Introducing Firebase App Hosting") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">firebase</span> <span class="jser-tag">Next.js</span> <span class="jser-tag">Angular</span> <span class="jser-tag">article</span></p> | ||
|
|
||
| Firebase App Hostingについて。 | ||
| 設定なしでAngularとNext.jsをサポートするCloud Runベースのホスティングサービス | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## State of HTML 2023 | ||
| [2023.stateofhtml.com/en-US/](https://2023.stateofhtml.com/en-US/ "State of HTML 2023") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">HTML</span> <span class="jser-tag">Survey</span></p> | ||
|
|
||
| State of HTML 2023の結果が公開された。 | ||
| HTMLの要素や属性、Web Components、アクセシビリティ、課題や欲しい機能についてのアンケート | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Digging for SSRF in NextJS apps | ||
| [www.assetnote.io/resources/research/digging-for-ssrf-in-nextjs-apps](https://www.assetnote.io/resources/research/digging-for-ssrf-in-nextjs-apps "Digging for SSRF in NextJS apps") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">Next.js</span> <span class="jser-tag">security</span> <span class="jser-tag">article</span></p> | ||
|
|
||
| Next.js 14.1.1で修正されたSSRFの脆弱性について。 | ||
| Server Actionsで`redirect()`を使ったパスリダイレクトをしてるAPIがある場合に、Next.jsから任意のURLに対してGETリクエストした内容を取得できるSSRF脆弱性について | ||
|
|
||
| - [Next.js Server-Side Request Forgery in Server Actions · CVE-2024-34351 · GitHub Advisory Database](https://github.com/advisories/GHSA-fr5h-rqp8-mj6g "Next.js Server-Side Request Forgery in Server Actions · CVE-2024-34351 · GitHub Advisory Database") | ||
| - [azu/nextjs-CVE-2024-34351: poc](https://github.com/azu/nextjs-CVE-2024-34351 "azu/nextjs-CVE-2024-34351: poc") | ||
|
|
||
| ---- | ||
|
|
||
| ## Introducing the CSS anchor positioning API | Blog | Chrome for Developers | ||
| [developer.chrome.com/blog/anchor-positioning-api](https://developer.chrome.com/blog/anchor-positioning-api "Introducing the CSS anchor positioning API | Blog | Chrome for Developers") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">CSS</span> <span class="jser-tag">article</span></p> | ||
|
|
||
| CSS Anchor Positioning APIについて。 | ||
| コンセプト、基本的な使い方、popover属性や`<dialog>`との組み合わせ、`@position-try`での代替の位置指定、スクロールとの組み合わせなど | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## React Compiler – React | ||
| [react.dev/learn/react-compiler](https://react.dev/learn/react-compiler "React Compiler – React") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">babel</span> <span class="jser-tag">document</span></p> | ||
|
|
||
| React Compilerが実験的に公開された。 | ||
| Babelプラグインとして実装されていて、opt-inでの導入方法や`react-compiler-healthcheck`での互換性のチェック、ESLintプラグインについて書かれている | ||
|
|
||
|
|
||
| ---- | ||
| <h1 class="site-genre">サイト、サービス、ドキュメント</h1> | ||
|
|
||
| ---- | ||
|
|
||
| ## Web Platform Status | ||
| [webstatus.dev/](https://webstatus.dev/ "Web Platform Status") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">browser</span> <span class="jser-tag">webservice</span></p> | ||
|
|
||
| ウェブプラットフォームのブラウザのステータスをまとめてるページ。 | ||
| 機能ごとのブラウザサポートの表示、検索などができる | ||
|
|
||
|
|
||
| ---- | ||
| <h1 class="site-genre">ソフトウェア、ツール、ライブラリ関係</h1> | ||
|
|
||
| ---- | ||
|
|
||
| ## farzher/fuzzysort: Fast SublimeText-like fuzzy search for JavaScript. | ||
| [github.com/farzher/fuzzysort](https://github.com/farzher/fuzzysort "farzher/fuzzysort: Fast SublimeText-like fuzzy search for JavaScript.") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">search</span> <span class="jser-tag">library</span></p> | ||
|
|
||
| fuzzy searchライブラリ | ||
|
|
||
|
|
||
| ---- |