-
-
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.
2022-07-04のJS: Next.js 12.2、Fresh 1.0(Deno Web Framework)、Vue 2.7(2.x…
…の最終minor) (#997) * Update 599 draft * Update 599 draft * Update 599 draft * Update 599 draft * Update 599 draft * Update 599 draft * Update 599 draft * Update 599 draft * Update 599 draft * Update 599 draft * Update 599 draft * Update 599 draft * Update 599 draft * Update 599 draft * Update 599 draft * Update 599 draft * Update _i18n/ja/_posts/2022/2022-07-04-next.js-12.2-fresh-1.0deno-web-framework-vue-2.72.xminor.md * Delete _i18n/ja/_posts/2022/2022-07-04-599draft.md * Update _i18n/ja/_posts/2022/2022-07-04-next.js-12.2-fresh-1.0deno-web-framework-vue-2.72.xminor.md * Update 2022-07-04-next.js-12.2-fresh-1.0deno-web-framework-vue-2.72.xminor.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
- Loading branch information
1 parent
f9ece8a
commit 13cf6c7
Showing
1 changed file
with
222 additions
and
0 deletions.
There are no files selected for viewing
222 changes: 222 additions & 0 deletions
222
...sts/2022/2022-07-04-next.js-12.2-fresh-1.0deno-web-framework-vue-2.72.xminor.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,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's positions on emerging web specifications | ||
| [github.com/WebKit/standards-positions](https://github.com/WebKit/standards-positions "WebKit/standards-positions: WebKit'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 "Naruto" 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 \"Naruto\" 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を使って依存グラフを作りページランクを出すツール。 | ||
|
|
||
|
|
||
| ---- |