-
-
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.
2023-10-16のJS: Lit 3、Chrome 118、Zodの作り方 (#1127)
* Update 665 draft * Update 665 draft * Update 665 draft * Update 665 draft * Update 665 draft * Update 665 draft * Update 665 draft * Update 665 draft * Update 665 draft * Update 665 draft * Update 665 draft * Update 665 draft * Update 665 draft * Update 665 draft * Update 665 draft * Update 665 draft * Update 665 draft * Update 665 draft * Update 665 draft * Update _i18n/ja/_posts/2023/2023-10-16-lit-3-chrome-118-zod.md * Delete _i18n/ja/_posts/2023/2023-10-16-665draft.md * Update _i18n/ja/_posts/2023/2023-10-16-lit-3-chrome-118-zod.md --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
- Loading branch information
1 parent
938e9c2
commit 0e07dbb
Showing
1 changed file
with
227 additions
and
0 deletions.
There are no files selected for viewing
227 changes: 227 additions & 0 deletions
227
_i18n/ja/_posts/2023/2023-10-16-lit-3-chrome-118-zod.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,227 @@ | ||
| --- | ||
| title: "2023-10-16のJS: Lit 3、Chrome 118、Zodの作り方" | ||
| author: "azu" | ||
| layout: post | ||
| date : 2023-10-16T12:44:04.356Z | ||
| category: JSer | ||
| tags: | ||
| - Bun | ||
| - npm | ||
| - Chrome | ||
| - UI | ||
| - parcel | ||
|
|
||
| --- | ||
|
|
||
| JSer.info #665 - Web ComponentsライブラリであるLit 3.0がリリースされました。 | ||
|
|
||
| - [Lit Launch Day: Lit 3.0, Labs graduations, a compiler and more! – Lit](https://lit.dev/blog/2023-10-10-lit-3.0/) | ||
| - [Lit 3 upgrade guide – Lit](https://lit.dev/docs/v3/releases/upgrade/) | ||
|
|
||
| Lit 3では、IE11のサポート終了、最小の実行環境をES2021をサポートしてるブラウザへ変更が行われています。 | ||
| Lit 2.0で非推奨となったAPIの削除、Stage 3のDecoratorの対応なども行われています。 | ||
| また、新しいLitテンプレートコンパイラーの公開、Preact Signalsを統合するパッケージも公開されています。 | ||
|
|
||
| --- | ||
|
|
||
| Chrome 118がリリースされました。 | ||
|
|
||
| - [New in Chrome 118 - Chrome for Developers](https://developer.chrome.com/en/blog/new-in-chrome-118/) | ||
|
|
||
| Chrome 118ではCSSの`@scope`ルールのサポートされています。 | ||
|
|
||
| - [Limit the reach of your selectors with the CSS `@scope` at-rule - Chrome for Developers](https://developer.chrome.com/articles/at-scope/) | ||
|
|
||
| また、Media QueryでJavaScriptが有効かを判定する`scripting`の追加、DevToolsの"Sources"パネルの改善、`zstd`のContent-Encodingをサポートなども行われています。 | ||
|
|
||
| ---- | ||
|
|
||
| [Write your own Zod](https://zackoverflow.dev/writing/write-your-own-zod)という記事では、[Zod](https://github.com/colinhacks/zod)のようなスキーマベースのバリデーターをどのように作るかを解説しています。 | ||
|
|
||
| mini Zodと呼ぶ小さなZodのクローンをながら、スキーマオブジェクトから型をInferする方法、バリデーションの実装方法について解説しています。 | ||
|
|
||
| ---- | ||
|
|
||
| {% include inline-support.html %} | ||
|
|
||
| ---- | ||
|
|
||
| <h1 class="site-genre">ヘッドライン</h1> | ||
|
|
||
| ---- | ||
|
|
||
| ## Lit Launch Day: Lit 3.0, Labs graduations, a compiler and more! – Lit | ||
| [lit.dev/blog/2023-10-10-lit-3.0/](https://lit.dev/blog/2023-10-10-lit-3.0/ "Lit Launch Day: Lit 3.0, Labs graduations, a compiler and more! – Lit") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">UI</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p> | ||
|
|
||
| Lit 3.0リリース。 | ||
| IE11のサポート終了、最小の実行環境をES2021をサポートしてるブラウザへ変更。 | ||
| Lit 2.0で非推奨となったAPIの削除、Stage 3のDecoratorの対応など。 | ||
| また、新しいLitテンプレートコンパイラーの公開、Preact Signalsを統合するパッケージも公開されている。 | ||
|
|
||
| - [Lit 3 upgrade guide – Lit](https://lit.dev/docs/v3/releases/upgrade/ "Lit 3 upgrade guide – Lit") | ||
|
|
||
| ---- | ||
|
|
||
| ## Bun v1.0.5 | Bun Blog | ||
| [bun.sh/blog/bun-v1.0.5](https://bun.sh/blog/bun-v1.0.5 "Bun v1.0.5 | Bun Blog") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">Bun</span> <span class="jser-tag">ReleaseNote</span></p> | ||
|
|
||
| Bun v1.0.5リリース。 | ||
| Fetchのメモリリークを修正、`bun run --if-present`をサポート、`package-lock.json`を`bun.lockb`へ変換できる`bun pm migrate`コマンドを追加。 | ||
| `peerDependencies`を自動でインストールするように変更など | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Release v2.10.0 · parcel-bundler/parcel | ||
| [github.com/parcel-bundler/parcel/releases/tag/v2.10.0](https://github.com/parcel-bundler/parcel/releases/tag/v2.10.0 "Release v2.10.0 · parcel-bundler/parcel") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">parcel</span> <span class="jser-tag">ReleaseNote</span></p> | ||
|
|
||
| Parcel v2.10.0リリース。 | ||
| 遅延コンパイルする対象を指定できる`--lazy [glob]`と`--lazy-excludes`を追加。 | ||
| Rustモジュールを一つのパッケージにマージすることで重複Cratesを削除してサイズの削減、また並列処理の効率化によるパフォーマンス改善など。 | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Fresh 1.5: Partials, client side navigation and more | ||
| [deno.com/blog/fresh-1.5](https://deno.com/blog/fresh-1.5 "Fresh 1.5: Partials, client side navigation and more") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">deno</span> <span class="jser-tag">ReleaseNote</span> <span class="jser-tag">library</span></p> | ||
|
|
||
| Fresh 1.5リリース。 | ||
| ページ遷移に該当領域のフラグメントだけを取得更新できる`<Partial>`の追加。 | ||
| 現在のパスと一致する`<a>`要素に`data-current`を追加、カスタムビルドターゲットを指定できる`build.target`オプションを追加。 | ||
| esbuildを使ったbundleファイルの分析をするメタファイルの生成をサポート、エラーオーバーレイのサポートなど | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Bun v1.0.6 | Bun Blog | ||
| [bun.sh/blog/bun-v1.0.6](https://bun.sh/blog/bun-v1.0.6 "Bun v1.0.6 | Bun Blog") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">Bun</span> <span class="jser-tag">yarn</span> <span class="jser-tag">npm</span> <span class="jser-tag">ReleaseNote</span></p> | ||
|
|
||
| Bun v1.0.6リリース。 | ||
| npmの`overrides`フィールド、yarnの`resolutions`フィールドをサポート。 | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Electron 27.0.0 | Electron | ||
| [www.electronjs.org/blog/electron-27-0](https://www.electronjs.org/blog/electron-27-0 "Electron 27.0.0 | Electron") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">Electron</span> <span class="jser-tag">ReleaseNote</span></p> | ||
|
|
||
| Electron 27.0.0リリース。 | ||
| macOS 10.13/10.14のサポート終了、`ipcRenderer.sendTo()` APIを非推奨化など | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Astro 3.3: Picture component | Astro | ||
| [astro.build/blog/astro-330/](https://astro.build/blog/astro-330/ "Astro 3.3: Picture component | Astro") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">astro</span> <span class="jser-tag">ReleaseNote</span></p> | ||
|
|
||
| Astro 3.3リリース。 | ||
| `<picture />`コンポーネントの追加、シンタックスハイライトに使うライブラリを`shiki`から`shikiji`に変更など | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Vite (Unstable) (dev branch) | Remix | ||
| [remix.run/docs/en/dev/future/vite](https://remix.run/docs/en/dev/future/vite "Vite (Unstable) (dev branch) | Remix") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">Remix</span> <span class="jser-tag">vite</span> <span class="jser-tag">document</span></p> | ||
|
|
||
| RemixのViteサポート。 | ||
| ViteのプラグインとしてRemixが動作するようになる。 | ||
|
|
||
| - [Just use vite! · remix-run/remix · Discussion #7632](https://github.com/remix-run/remix/discussions/7632 "Just use vite! · remix-run/remix · Discussion #7632") | ||
|
|
||
| ---- | ||
|
|
||
| ## Release v4.1.0 · rollup/rollup | ||
| [github.com/rollup/rollup/releases/tag/v4.1.0](https://github.com/rollup/rollup/releases/tag/v4.1.0 "Release v4.1.0 · rollup/rollup") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">rollup</span> <span class="jser-tag">ReleaseNote</span></p> | ||
|
|
||
| Rollup v4.1.0リリース。 | ||
| オブジェクトが持つオプションをビットフラグで管理しメモリ消費量を削減する改善が含まれる。 | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## New in Chrome 118 - Chrome for Developers | ||
| [developer.chrome.com/en/blog/new-in-chrome-118/](https://developer.chrome.com/en/blog/new-in-chrome-118/ "New in Chrome 118 - Chrome for Developers") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">Chrome</span> <span class="jser-tag">ReleaseNote</span></p> | ||
|
|
||
| Chrome 118の変更点について。 | ||
| CSSの`@scope`ルールのサポート、Media QueryでJavaScriptが有効かを判定する`scripting`の追加。 | ||
| DevToolsの"Sources"パネルの改善、`zstd`のContent-Encodingをサポートなど。 | ||
|
|
||
|
|
||
| ---- | ||
| <h1 class="site-genre">アーティクル</h1> | ||
|
|
||
| ---- | ||
|
|
||
| ## Limit the reach of your selectors with the CSS \`@scope\` at-rule - Chrome for Developers | ||
| [developer.chrome.com/articles/at-scope/](https://developer.chrome.com/articles/at-scope/ "Limit the reach of your selectors with the CSS \`@scope\` at-rule - Chrome for Developers") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">CSS</span> <span class="jser-tag">article</span></p> | ||
|
|
||
| CSS `@scope`についての記事。 | ||
| `@scope`によってセレクタの範囲を制限できるようになり、スコープは特異性には影響を与えない。 | ||
| また、`@scope { }`とルートを指定せずに指定することscoped styleを扱うprelude-less `@scope`についてなど | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## What's New in DevTools (Chrome 118) - Chrome for Developers | ||
| [developer.chrome.com/blog/new-in-devtools-118/](https://developer.chrome.com/blog/new-in-devtools-118/ "What's New in DevTools (Chrome 118) - Chrome for Developers") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">Chrome</span> <span class="jser-tag">debug</span> <span class="jser-tag">article</span></p> | ||
|
|
||
| Chrome 118の開発者ツールの変更点について。 | ||
| local overridesの改善、コード検索の改善、Sourcesパネルの改善、Lighthouse 11へのアップデートなど | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Write your own Zod | ||
| [zackoverflow.dev/writing/write-your-own-zod](https://zackoverflow.dev/writing/write-your-own-zod "Write your own Zod") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">TypeScript</span> <span class="jser-tag">article</span></p> | ||
|
|
||
| Zodのようなスキーマバリデーターを作る方法について。 | ||
| Zodのようなスキーマオブジェクトから型をInferする方法、バリデーションの実装などについて。 | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Flat config rollout plans - ESLint - Pluggable JavaScript Linter | ||
| [eslint.org/blog/2023/10/flat-config-rollout-plans/](https://eslint.org/blog/2023/10/flat-config-rollout-plans/ "Flat config rollout plans - ESLint - Pluggable JavaScript Linter") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">ESLint</span> <span class="jser-tag">article</span></p> | ||
|
|
||
| ESLintのConfigファイルの今後について。 | ||
| ESLintでは、ESLint 9で`eslint.config.js`のFlat Configがデフォルトとなり、`.eslintrc.*`の形式は非推奨となる。 | ||
| `.eslinrc.*`のサポートはESLint 10で削除される予定となっている。 | ||
|
|
||
|
|
||
| ---- | ||
| <h1 class="site-genre">ソフトウェア、ツール、ライブラリ関係</h1> | ||
|
|
||
| ---- | ||
|
|
||
| ## react-hookz/web: React hooks done right, for browser and SSR. | ||
| [github.com/react-hookz/web](https://github.com/react-hookz/web "react-hookz/web: React hooks done right, for browser and SSR.") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">library</span></p> | ||
|
|
||
| サーバサイドレンダリング時も動作するReact Hooksのコレクションライブラリ。 | ||
| `react-use`の後継的なライブラリとなることを意識して作られている | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## elbywan/zap: Another \[insert blazing fast synonyms\] JavaScript package manager | ||
| [github.com/elbywan/zap](https://github.com/elbywan/zap "elbywan/zap: Another \[insert blazing fast synonyms\] JavaScript package manager") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">npm</span> <span class="jser-tag">package</span> <span class="jser-tag">console</span> <span class="jser-tag">Tools</span></p> | ||
|
|
||
| Crystal言語で書かれたnpmパッケージマネージャー。 | ||
|
|
||
|
|
||
| ---- |