2022-07-04のJS: Next.js 12.2、Fresh 1.0(Deno Web Framework)、Vue 2.7(2.xの最終minor)

_i18n/ja/_posts/2022/2022-07-04-next.js-12.2-fresh-1.0deno-web-framework-vue-2.72.xminor.md

@@ -0,0 +1,222 @@
+---
+title: "2022-07-04のJS: Next.js 12.2、Fresh 1.0(Deno Web Framework)、Vue 2.7(2.xの最終minor)"
+author: "azu"
+layout: post
+date : 2022-07-04T12:32:13.426Z
+category: JSer
+tags:
+- webkit
+- safari
+- deno
+- React
+- testing
+
+---
+
+JSer.info #599 - Next.js 12.2がリリースされました。
+
+- [Blog - Next.js 12.2 | Next.js](https://nextjs.org/blog/next-12-2)
+
+MiddlewareとOn-Demand ISRのStableな機能となりました。
+API RouteとSSRをCloudflare Workersを使ったEdgeで動かす`runtime`オプションを追加など。
+これに合わせて、[Edge Runtime](https://nextjs.org/docs/api-reference/edge-runtime)をローカルでエミュレートするための`edge-runtime`というパッケージが公開されています。
+
+- [What is Edge Runtime | Edge Runtime](https://edge-runtime.vercel.app/)
+
+そのほかには、`next/image`の改善、SWCプラグインのサポート、React 18のサポート改善などが含まれています。
+また、`next/link`が常に `<a>` で囲まれるようになる機能をopt-inで導入できるようになっています。
+
+- [Rework <Link> behavior (backwards compatible) by timneutkens · Pull Request #36436 · vercel/next.js](https://github.com/vercel/next.js/pull/36436)
+
+----
+
+Denoで書かれたウェブフレームワークであるFresh 1.0が公開されました。
+
+- [Fresh 1.0](https://deno.com/blog/fresh-is-stable)
+
+Freshは、Preact(JSX)を使ってUIを作りサーバサイドレンダリングを行い、必要な時のみクライアントサイドのJSを含める[Islands Architecture](https://jasonformat.com/islands-architecture/)を採用しています。
+
+また、Freshは <https://deno.land/> でも利用されています。
+
+- [denoland/dotland: deno.land website](https://github.com/denoland/dotland)
+
+----
+
+Vue 2.7がリリースされました。
+
+- [Vue 2.7 "Naruto" Released | The Vue Point](https://blog.vuejs.org/posts/vue-2-7-naruto.html)
+
+Vue 2.7はVue 2.xの最後のminorアップデートとなり、Vue 2は1年半後の2023年末にサポートが終了する予定となっています。
+Vue 3からのバックポートとして`defineComponent()`、`h()`、`useSlot()`、`useAttrs()`、`useCssModules()`のサポートが追加されています。
+またESMビルドにはnamed exportとして提供されることについてや、Vue 3との動作の違いについてなどについても書かれています。
+
+----
+
+<h1 class="site-genre">ヘッドライン</h1>
+
+----
+
+## WebKit/standards-positions: WebKit&#039;s positions on emerging web specifications
+[github.com/WebKit/standards-positions](https://github.com/WebKit/standards-positions "WebKit/standards-positions: WebKit&#039;s positions on emerging web specifications")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">webkit</span> <span class="jser-tag">proposal</span> <span class="jser-tag">safari</span> <span class="jser-tag">apple</span></p>
+
+ウェブ標準のProposalに対するWebKitのポジションを管理するリポジトリ。
+
+
+----
+
+## Blog - Next.js 12.2 | Next.js
+[nextjs.org/blog/next-12-2](https://nextjs.org/blog/next-12-2 "Blog - Next.js 12.2 | Next.js")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Next.js</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Next.js 12.2リリース。
+MiddlewareがStableに、On-Demand ISRのStableに。
+API RouteとSSRをCloudflare Workersを使ったEdgeで動かす`runtime`オプションを追加など。
+`next/image`の改善、SWCプラグインのサポート、React 18のサポート改善など
+
+
+----
+
+## Fresh 1.0
+[deno.com/blog/fresh-is-stable](https://deno.com/blog/fresh-is-stable "Fresh 1.0")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">deno</span> <span class="jser-tag">React</span> <span class="jser-tag">ReleaseNote</span></p>
+
+DenoとPreactを使ったウェブフレームワークであるFresh 1.0リリース。
+
+- [Release 1.0.0 · denoland/fresh](https://github.com/denoland/fresh/releases/tag/1.0.0 "Release 1.0.0 · denoland/fresh")
+
+----
+
+## Release Notes for Safari Technology Preview 148 | WebKit
+[webkit.org/blog/12992/release-notes-for-safari-technology-preview-148/](https://webkit.org/blog/12992/release-notes-for-safari-technology-preview-148/ "Release Notes for Safari Technology Preview 148 | WebKit")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">webkit</span> <span class="jser-tag">ReleaseNote</span> <span class="jser-tag">safari</span></p>
+
+Safari Technology Preview 148リリース。
+CSSでは`:has()`擬似クラスのサポート改善、`text-indent`プロパティで`each-line`をサポート、`:modal`擬似クラスのサポートなど。
+`<link>`要素の`nonce`属性のサポート。
+ITPでCookieのcapをScript-Writeable Storageと同じlast user interactionから7days、interactionない場合は24hで消えるように変更。
+
+- [text-indent - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent "text-indent - CSS: Cascading Style Sheets | MDN")
+- [Full Third-Party Cookie Blocking and More | WebKit](https://webkit.org/blog/10218/full-third-party-cookie-blocking-and-more/ "Full Third-Party Cookie Blocking and More | WebKit")
+
+----
+
+## Release v6.0.0 · capricorn86/happy-dom
+[github.com/capricorn86/happy-dom/releases/tag/v6.0.0](https://github.com/capricorn86/happy-dom/releases/tag/v6.0.0 "Release v6.0.0 · capricorn86/happy-dom")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">DOM</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Happy DOM v6.0.0リリース。
+複数windowに関する問題を修正、`Document.createRange()`/`Document.getSelection()`、`Text.splitText()`のサポートなど
+
+
+----
+
+## Date and Time Pickers for All – React Spectrum Blog
+[react-spectrum.adobe.com/blog/date-and-time-pickers-for-all.html](https://react-spectrum.adobe.com/blog/date-and-time-pickers-for-all.html "Date and Time Pickers for All – React Spectrum Blog")
+<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> <span class="jser-tag">accessibility</span></p>
+
+React AriaとReact Spectrumで日付入力のUIをサポート。
+アクセシビリティ、国際化、カスタマイズ性などを持った日付フィールド/カレンダーのUIコンポーネントを提供する。
+また併せて複数のタイムゾーン/カレンダーシステム/ロケールをサポートした日付ライブラリも公開している。
+
+- [@internationalized/date – Internationalized](https://react-spectrum.adobe.com/internationalized/date/index.html "@internationalized/date – Internationalized")
+
+----
+
+## Release v1.23.0 · microsoft/playwright
+[github.com/microsoft/playwright/releases/tag/v1.23.0](https://github.com/microsoft/playwright/releases/tag/v1.23.0 "Release v1.23.0 · microsoft/playwright")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">browser</span> <span class="jser-tag">testing</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>
+
+playwright v1.23.0リリース。
+harファイルを使ったNetwork Replay機能の追加、`<select multiple>`に対応する`toHavevalues()`の追加、テキストマッチの`ignoreCase`オプションを追加など
+
+
+----
+
+## Release 4.0.0 · prisma/prisma
+[github.com/prisma/prisma/releases/tag/4.0.0](https://github.com/prisma/prisma/releases/tag/4.0.0 "Release 4.0.0 · prisma/prisma")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">database</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Prisma 4.0.0リリース。
+`extendedIndexes`/`filterJson`/`improvedQueryRaw`がGAに。
+Node.js 12のサポート終了、`DbNull`/`JsonNull`/`AnyNull`はobject型に変更、statement cache sizeのデフォルト値を変更など
+
+- [Upgrade to Prisma 4 | Prisma Docs](https://www.prisma.io/docs/guides/upgrade-guides/upgrading-versions/upgrading-to-prisma-4 "Upgrade to Prisma 4 | Prisma Docs")
+
+----
+
+## Release v7.4.0 · pnpm/pnpm
+[github.com/pnpm/pnpm/releases/tag/v7.4.0](https://github.com/pnpm/pnpm/releases/tag/v7.4.0 "Release v7.4.0 · pnpm/pnpm")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">npm</span> <span class="jser-tag">pnpm</span> <span class="jser-tag">ReleaseNote</span></p>
+
+pnpm v7.4.0リリース。
+依存関係にpatchファイルをあてる`patchedDependencies`フィールドと`pnpm patch`コマンドの追加。
+productionの依存だけをインストールして、デプロイ用にコピーする`pnpm deploy`コマンドの追加など
+
+
+----
+
+## Vue 2.7 &quot;Naruto&quot; Released | The Vue Point
+[blog.vuejs.org/posts/vue-2-7-naruto.html](https://blog.vuejs.org/posts/vue-2-7-naruto.html "Vue 2.7 \&quot;Naruto\&quot; Released | The Vue Point")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">Vue</span> <span class="jser-tag">ReleaseNote</span></p>
+
+Vue 2.7リリース。
+Vue 2.xの最後のminorアップデートとなり、Vue 2は1年半後の2023年末にサポートが終了する予定。
+
+
+----
+<h1 class="site-genre">アーティクル</h1>
+
+----
+
+## ブラウザ, Node, Cloudflareでも動くDenoモジュール開発
+[zenn.dev/dajiaji/articles/c5340c38d11d4d](https://zenn.dev/dajiaji/articles/c5340c38d11d4d "ブラウザ, Node, Cloudflareでも動くDenoモジュール開発")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">deno</span> <span class="jser-tag">node.js</span> <span class="jser-tag">cloudflare</span> <span class="jser-tag">library</span> <span class="jser-tag">article</span></p>
+
+Deno向けのコードをベースにして、dntを使ってNode.js向けのパッケージを作成、Cloudflare Workersでの動作テストをするパッケージの開発について。
+
+
+----
+
+## jestでDBありのテストを高速化する | kohsweblog
+[blog.koh.dev/2022-07-02-jest-speedup/](https://blog.koh.dev/2022-07-02-jest-speedup/ "jestでDBありのテストを高速化する | kohsweblog")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">testing</span> <span class="jser-tag">performance</span> <span class="jser-tag">article</span></p>
+
+Jestで実行するテストのパフォーマンス改善についての記事。
+ローカルではmaxWorkers、CIはshardを使いテストを並列に実行することで、実行時間を短くする方法について
+
+----
+
+## 縦書きHTMLにおける文字の向きはどのように定まるか - ドワンゴ教育サービス開発者ブログ
+[blog.nnn.dev/entry/2022/07/01/180000](https://blog.nnn.dev/entry/2022/07/01/180000)
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">HTML</span> <span class="jser-tag">CSS</span> <span class="jser-tag">font</span> <span class="jser-tag">article</span></p>
+
+縦書きHTMLの表示についての記事。
+CSSの`writing-mode`と`text-orientation`での文字の向きの扱い、フォントとVertical_Orientationごとの表示の差異、ブラウザの実装の差異などについて
+
+----
+<h1 class="site-genre">サイト、サービス、ドキュメント</h1>
+
+----
+
+## ニコニコ生放送 WebフロントエンドのKubernetes移行ハンドブック 2022 | ニコニコ生放送 Webフロントエンド Kubernetes移行ハンドブック 2022
+[dwango.github.io/nicolive-kubernetes-migration-handbook-2022/](https://dwango.github.io/nicolive-kubernetes-migration-handbook-2022/ "ニコニコ生放送 WebフロントエンドのKubernetes移行ハンドブック 2022 | ニコニコ生放送 Webフロントエンド Kubernetes移行ハンドブック 2022")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">kubernetes</span> <span class="jser-tag">document</span></p>
+
+Kubernatesにおけるフロントエンドの管理についてのガイド
+
+- [大規模サービスのBFFサーバーをKubernetesに移行した記事で書いていないこと](https://zenn.dev/himenon/articles/0e049f65c462a1 "大規模サービスのBFFサーバーをKubernetesに移行した記事で書いていないこと")
+
+----
+<h1 class="site-genre">ソフトウェア、ツール、ライブラリ関係</h1>
+
+----
+
+## codemix/deprank: Use PageRank to find the most important files in your codebase.
+[github.com/codemix/deprank](https://github.com/codemix/deprank "codemix/deprank: Use PageRank to find the most important files in your codebase.")
+<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">Tools</span></p>
+
+dependency-cruiserを使って依存グラフを作りページランクを出すツール。
+
+
+----