Skip to content

Commit 6c7a627

Browse files
azugithub-actions[bot]
azu
and
github-actions[bot]
authored
2021-03-16のJS: Safari Technology Preview 122、React Native 0.64、SvelteKit (#845)
* Update 531 draft * Update 531 draft * Update 531 draft * Update 531 draft * Update 531 draft * Update 531 draft * Update 531 draft * Update 531 draft * Update 531 draft * Update 531 draft * Update 531 draft * Update 531 draft * Update 531 draft * Update 531 draft * Update 531 draft * Update 531 draft * Update 531 draft * Update 531 draft * Update 531 draft * Update _i18n/ja/_posts/2021/2021-03-16-safari-technology-preview-122-react-native-0.64-sveltekit.md * Delete _i18n/ja/_posts/2021/2021-03-15-531draft.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
1 parent 9336c1d commit 6c7a627

File tree

1 file changed

+243
-0
lines changed

1 file changed

+243
-0
lines changed

‎_i18n/ja/_posts/2021/2021-03-16-safari-technology-preview-122-react-native-0.64-sveltekit.md

Lines changed: 243 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,243 @@
1+
---
2+
title: "2021-03-16のJS: Safari Technology Preview 122、React Native 0.64、SvelteKit"
3+
author: "azu"
4+
layout: post
5+
date : 2021-03-15T23:42:20.954Z
6+
category: JSer
7+
tags:
8+
- Tools
9+
- debug
10+
- Chrome
11+
- CSS
12+
- React
13+
14+
---
15+
16+
JSer.info #531 - Safari Technology Preview 122がリリースされました。
17+
18+
- [Release Notes for Safari Technology Preview 122 | WebKit](https://webkit.org/blog/11577/release-notes-for-safari-technology-preview-122/)
19+
20+
Safari Technology Preview 122では色々な機能が実装されています。
21+
実験フラグ付きでCSS `:focus-visible`とCSS Color 5の`color-mix()`/`color-contrast()`/[Relative color syntax](https://drafts.csswg.org/css-color-5/#relative-colors)が実装されています。
22+
ES Proposal Stage 3の[Private method](https://github.com/tc39/proposal-private-methods)、[Static private methods](https://github.com/tc39/proposal-static-class-features)、[Top-Level await](https://github.com/tc39/proposal-top-level-await)、[RegExp Match Indices](https://github.com/tc39/proposal-regexp-match-indices)のサポート。
23+
Web WorkerとService Workerで`type: module`をサポート、Paint Timingの(再)有効化なども含まれます。
24+
25+
- [Threading the web with module workers](https://web.dev/module-workers/)
26+
- [Chrome 80 から Web Worker (Dedicated Worker) で ES Modules が使えます](https://nhiroki.jp/2019/12/05/es-modules-for-dedicated-workers)
27+
28+
Safariとは直接関係しませんが、2021年6月ごろにリリースされる予定のECMAScript 2021のリリース候補も公開されています。
29+
30+
- [Release ES2021 Candidate March 2021 · tc39/ecma262](https://github.com/tc39/ecma262/releases/tag/es2021-candidate-2021-03)
31+
- [ECMAScript 2021: the final feature set](https://2ality.com/2020/09/ecmascript-2021.html)
32+
33+
---
34+
35+
SvelteKitのソースコードが公開されています。
36+
SvelteKitはSvelteベースのNext.jsライクなフレームワークであった[Sapper](https://sapper.svelte.dev/)を置き換える目的で作られています。
37+
38+
- [sveltejs/kit: A monorepo for SvelteKit and friends](https://github.com/sveltejs/kit)
39+
40+
まだソースコードの公開だけでリリースはされていません。
41+
[What is SvelteKit? | SK Incognito](https://sk-incognito.vercel.app/learn/what-is-sveltekit)というチュートリアルサイトでは、SvelteKitがどのようなものか紹介されているので、興味がある人は見てみるといいかもしれません。
42+
43+
---
44+
45+
React Native 0.64がリリースされました。
46+
47+
- [Announcing React Native 0.64 with Hermes on iOS · React Native](https://reactnative.dev/blog/2021/03/12/version-0.64)
48+
49+
AOTによる事前コンパイルでfootprintを最適化してアプリの起動速度などを改善する目的である[Hermes JS Engine](https://github.com/facebook/hermes)がiOSでも利用可能になっています。
50+
また、HermesにES2015の[Proxy object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)のサポートが追加されています。
51+
その他には、MetroでInline Requiresがデフォルトで有効化、[React 17](https://reactjs.org/blog/2020/10/20/react-v17.html)へアップデートなどが含まれています。
52+
53+
----
54+
55+
<h1 class="site-genre">ヘッドライン</h1>
56+
57+
----
58+
59+
## Release v0.9.0 · evanw/esbuild
60+
[github.com/evanw/esbuild/releases/tag/v0.9.0](https://github.com/evanw/esbuild/releases/tag/v0.9.0 "Release v0.9.0 · evanw/esbuild")
61+
<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">Tools</span> <span class="jser-tag">relre</span></p>
62+
63+
esbuild 0.9.0リリース。
64+
package.jsonの`exports`フィールドのサポート、`esbuild.startService()` APIの削除、bannerとfooterを言語ごとに指定できるように
65+
66+
67+
----
68+
69+
## Release Notes for Safari Technology Preview 122 | WebKit
70+
[webkit.org/blog/11577/release-notes-for-safari-technology-preview-122/](https://webkit.org/blog/11577/release-notes-for-safari-technology-preview-122/ "Release Notes for Safari Technology Preview 122 | WebKit")
71+
<p class="jser-tags jser-tag-icon"><span class="jser-tag">safari</span> <span class="jser-tag">webkit</span> <span class="jser-tag">ReleaseNote</span></p>
72+
73+
Safari Technology Preview 122リリース。
74+
実験フラグ付きでCSS `:focus-visible`とCSS Color 5の実装を追加。
75+
ES ProposalのPrivate method、Top-Level await、RegExp Match Indicesのサポート。
76+
Workerで`type: module`をサポート、Paint Timingの有効化など
77+
78+
79+
----
80+
81+
## Chromium Blog: Chrome 90 Beta: AV1 Encoder for WebRTC, New Origin Trials, and More
82+
[blog.chromium.org/2021/03/chrome-90-beta-av1-encoder-for-webrtc.html](https://blog.chromium.org/2021/03/chrome-90-beta-av1-encoder-for-webrtc.html "Chromium Blog: Chrome 90 Beta: AV1 Encoder for WebRTC, New Origin Trials, and More")
83+
<p class="jser-tags jser-tag-icon"><span class="jser-tag">Chrome</span> <span class="jser-tag">ReleaseNote</span></p>
84+
85+
Chrome 90 Betaリリース。
86+
AV1 Encoderのサポート。
87+
Origin Trialとして`getCurrentBrowsingContextMedia()`、Breakout Box、WebAssembly Exception Handlingのサポート。
88+
CSSの`aspect-ratio`とwidthかheightが指定されているときに推論されるように、`:state`、`overflow: clip`のサポート。
89+
Feature-Policyに代わるPermissions-Policy、`StaticRange`のサポートなど。
90+
`navigator.plugins`と`navigator.mimeTypes`が空要素を返すようになるなど
91+
92+
93+
----
94+
95+
## Announcing React Native 0.64 with Hermes on iOS · React Native
96+
[reactnative.dev/blog/2021/03/12/version-0.64](https://reactnative.dev/blog/2021/03/12/version-0.64 "Announcing React Native 0.64 with Hermes on iOS · React Native")
97+
<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">iOS</span> <span class="jser-tag">Android</span> <span class="jser-tag">ReleaseNote</span></p>
98+
99+
React Native 0.64リリース。
100+
iOSでもJSエンジンのHermesを利用可能に、MetroでInline Requiresがデフォルトで有効化、HermesがES Proxyのサポート、React 17へアップデートなど
101+
102+
103+
----
104+
105+
## sveltejs/kit: A monorepo for SvelteKit and friends
106+
[github.com/sveltejs/kit](https://github.com/sveltejs/kit "sveltejs/kit: A monorepo for SvelteKit and friends")
107+
<p class="jser-tags jser-tag-icon"><span class="jser-tag">Svelte</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">Tools</span> <span class="jser-tag">news</span></p>
108+
109+
SvelteKitのソースコードが公開された
110+
111+
112+
----
113+
114+
## Release ES2021 Candidate March 2021 · tc39/ecma262
115+
[github.com/tc39/ecma262/releases/tag/es2021-candidate-2021-03](https://github.com/tc39/ecma262/releases/tag/es2021-candidate-2021-03 "Release ES2021 Candidate March 2021 · tc39/ecma262")
116+
<p class="jser-tags jser-tag-icon"><span class="jser-tag">ECMAScript</span> <span class="jser-tag">spec</span> <span class="jser-tag">ReleaseNote</span></p>
117+
118+
ECMAScript 2021のリリース候補が公開された。ECMAScript 2021に入る予定の機能は決定され仕様もフリーズされたため、masterブランチはES 2022となった
119+
120+
- [ECMAScript 2021: the final feature set](https://2ality.com/2020/09/ecmascript-2021.html "ECMAScript 2021: the final feature set")
121+
- [proposals/finished-proposals.md at master · tc39/proposals](https://github.com/tc39/proposals/blob/master/finished-proposals.md "proposals/finished-proposals.md at master · tc39/proposals")
122+
123+
----
124+
125+
## Socket.IO 4.0.0 | Socket.IO
126+
[socket.io/blog/socket-io-4-release/](https://socket.io/blog/socket-io-4-release/ "Socket.IO 4.0.0 | Socket.IO")
127+
<p class="jser-tags jser-tag-icon"><span class="jser-tag">WebSocket</span> <span class="jser-tag">node.js</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p>
128+
129+
Socket.IO 4.0.0リリース。
130+
破壊的な変更としてサーバ側の`io.to()`がimmutableに変更、protocolは互換性を維持している。
131+
`pingTimeout`のデフォルト値を5秒から20秒へ変更、Utilityメソッドの追加、`autoUnref`オプションの追加など
132+
133+
- [Migrating from 3.x to 4.0 | Socket.IO](https://socket.io/docs/v3/migrating-from-3-x-to-4-0/ "Migrating from 3.x to 4.0 | Socket.IO")
134+
- [fix: set default protocol version to 3 to allow backward compatibilit… by simonemazzoni · Pull Request #616 · socketio/engine.io](https://github.com/socketio/engine.io/pull/616 "fix: set default protocol version to 3 to allow backward compatibilit… by simonemazzoni · Pull Request #616 · socketio/engine.io")
135+
136+
----
137+
<h1 class="site-genre">アーティクル</h1>
138+
139+
----
140+
141+
## Debugging layout shifts
142+
[web.dev/debugging-layout-shifts/](https://web.dev/debugging-layout-shifts/ "Debugging layout shifts")
143+
<p class="jser-tags jser-tag-icon"><span class="jser-tag">performance</span> <span class="jser-tag">debug</span> <span class="jser-tag">article</span></p>
144+
145+
Layout Instability APIでのCumulative Layout Shift (CLS)の計測とCLSの特定とデバッグ方法について
146+
147+
148+
----
149+
150+
## Digging Into CSS Logical Properties
151+
[ishadeed.com/article/css-logical-properties/](https://ishadeed.com/article/css-logical-properties/ "Digging Into CSS Logical Properties")
152+
<p class="jser-tags jser-tag-icon"><span class="jser-tag">CSS</span> <span class="jser-tag">article</span></p>
153+
154+
RTLに対応したCSSの書き方と`margin-inline-end`について。
155+
156+
157+
----
158+
159+
## レシピサービスのフロントエンドに CSS in JS を採用した話 - クックパッド開発者ブログ
160+
[techlife.cookpad.com/entry/2021/03/15/090000](https://techlife.cookpad.com/entry/2021/03/15/090000 "レシピサービスのフロントエンドに CSS in JS を採用した話 - クックパッド開発者ブログ")
161+
<p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">CSS</span> <span class="jser-tag">article</span></p>
162+
163+
emotionを使ったCSS-in-JSについて。
164+
styled-componentsの記法ではなくString Stylesを採用した理由、stylelintを使ったLint、Jestを使ったスナップショットテストについてなど
165+
166+
167+
----
168+
169+
## JavaScript: What is the meaning of this?
170+
[web.dev/javascript-this/](https://web.dev/javascript-this/ "JavaScript: What is the meaning of this?")
171+
<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">article</span></p>
172+
173+
いろいろなケースの`this`の意味について解説している記事
174+
175+
- [関数とthis · JavaScript Primer #jsprimer](https://jsprimer.net/basic/function-this/ "関数とthis · JavaScript Primer #jsprimer")
176+
177+
----
178+
179+
## Beyond Console.log() – Level up Your Debugging Skills - SitePoint
180+
[www.sitepoint.com/beyond-console-log-level-up-your-debugging-skills/](https://www.sitepoint.com/beyond-console-log-level-up-your-debugging-skills/ "Beyond Console.log() – Level up Your Debugging Skills - SitePoint")
181+
<p class="jser-tags jser-tag-icon"><span class="jser-tag">console</span> <span class="jser-tag">debug</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">article</span> <span class="jser-tag">Chrome</span></p>
182+
183+
Console APIやChrome DevToolsを使ったデバッグについての記事。
184+
ログフォーマット、Console APIの紹介、Dev Tools上で使える関数、Overrides、VScodeとの連携についてなど
185+
186+
187+
----
188+
189+
## The Death of a Node.js Process - Thomas Hunter II
190+
[thomashunter.name/posts/2021-03-08-the-death-of-a-nodejs-process](https://thomashunter.name/posts/2021-03-08-the-death-of-a-nodejs-process "The Death of a Node.js Process - Thomas Hunter II")
191+
<p class="jser-tags jser-tag-icon"><span class="jser-tag">node.js</span> <span class="jser-tag">article</span></p>
192+
193+
Node.jsにおけるプロセス終了とエラーについて。
194+
uncaughtException、unhandledRejectionでのエラーのキャッチと`process.exit`でのプロセス終了方法。
195+
また、Signalとそれをハンドリングできるかどうかについてのまとめ
196+
197+
198+
----
199+
<h1 class="site-genre">サイト、サービス、ドキュメント</h1>
200+
201+
----
202+
203+
## Post-Spectre Web Development
204+
[w3c.github.io/webappsec-post-spectre-webdev/](https://w3c.github.io/webappsec-post-spectre-webdev/ "Post-Spectre Web Development")
205+
<p class="jser-tags jser-tag-icon"><span class="jser-tag">security</span> <span class="jser-tag">document</span></p>
206+
207+
Spectre以後のウェブ開発における脅威モデルと戦略についてのドキュメント。
208+
Isolation、サブリソース、クロスオリジンを意図した操作についてなど
209+
210+
211+
----
212+
213+
## What is SvelteKit? | SK Incognito
214+
[sk-incognito.vercel.app/learn/what-is-sveltekit](https://sk-incognito.vercel.app/learn/what-is-sveltekit "What is SvelteKit? | SK Incognito")
215+
<p class="jser-tags jser-tag-icon"><span class="jser-tag">Svelte</span> <span class="jser-tag">tutorial</span></p>
216+
217+
SvelteKitのチュートリアルサイト
218+
219+
220+
----
221+
<h1 class="site-genre">ソフトウェア、ツール、ライブラリ関係</h1>
222+
223+
----
224+
225+
## Cloud9c/taro: A lightweight 3D game engine for the web.
226+
[github.com/Cloud9c/taro](https://github.com/Cloud9c/taro "Cloud9c/taro: A lightweight 3D game engine for the web.")
227+
<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">3D</span> <span class="jser-tag">game</span> <span class="jser-tag">library</span></p>
228+
229+
three.jsとcannon-esを使った3Dゲームエンジンライブラリ
230+
231+
232+
----
233+
234+
## rsms/estrella: Lightweight and versatile build tool based on the esbuild compiler
235+
[github.com/rsms/estrella](https://github.com/rsms/estrella "rsms/estrella: Lightweight and versatile build tool based on the esbuild compiler")
236+
<p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">Tools</span> <span class="jser-tag">bundler</span></p>
237+
238+
esbuildとtscのラッパーツール。
239+
esbuildでビルドしながら、tscでの型チェックを同時に実行できるビルドツール
240+
241+
- [Through the pipeline: An exploration of front-end bundlers - DEV Community 👩‍💻👨‍💻](https://dev.to/walpolea/through-the-pipeline-an-exploration-of-front-end-bundlers-ea1 "Through the pipeline: An exploration of front-end bundlers - DEV Community 👩‍💻👨‍💻")
242+
243+
----

0 commit comments

Comments
 (0)