-
-
Notifications
You must be signed in to change notification settings - Fork 71
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
2021-11-30のJS: Lighthouse 9.1.0、Storybook 6.4.0、DenoのNode.js互換モード (#935)
* Update 568 draft * Update 568 draft * Update 568 draft * Update 568 draft * Update 568 draft * Update 568 draft * Update 568 draft * Update 568 draft * Update 568 draft * Update 568 draft * Update 568 draft * Update 568 draft * Update 568 draft * Update 568 draft * Update 568 draft * Update 568 draft * Update _i18n/ja/_posts/2021/2021-11-30-lighthouse-9.1.0-storybook-6.4.0-denonode.js.md * Delete _i18n/ja/_posts/2021/2021-11-30-568draft.md * Update _i18n/ja/_posts/2021/2021-11-30-lighthouse-9.1.0-storybook-6.4.0-denonode.js.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
- Loading branch information
1 parent
2b6c2ef
commit faf0acc
Showing
1 changed file
with
203 additions
and
0 deletions.
There are no files selected for viewing
203 changes: 203 additions & 0 deletions
203
_i18n/ja/_posts/2021/2021-11-30-lighthouse-9.1.0-storybook-6.4.0-denonode.js.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,203 @@ | ||
| --- | ||
| title: "2021-11-30のJS: Lighthouse 9.1.0、Storybook 6.4.0、DenoのNode.js互換モード" | ||
| author: "azu" | ||
| layout: post | ||
| date : 2021-11-30T03:18:08.366Z | ||
| category: JSer | ||
| tags: | ||
| - Tools | ||
| - node.js | ||
| - CSS | ||
| - Chrome | ||
| - performance | ||
|
|
||
| --- | ||
|
|
||
| JSer.info #568 - Lighthouse 9.1.0がリリースされました。 | ||
|
|
||
| - [Release v9.1.0 · GoogleChrome/lighthouse](https://github.com/GoogleChrome/lighthouse/releases/tag/v9.1.0) | ||
|
|
||
| Next.js向けのStack Packが追加されたため、Next.jsのアプリに対するAuditが追加されています。 | ||
|
|
||
| - [feat: Add Stack Pack for Next.js by kyliau · Pull Request #66 · GoogleChrome/lighthouse-stack-packs](https://github.com/GoogleChrome/lighthouse-stack-packs/pull/66) | ||
|
|
||
| ---- | ||
|
|
||
| Storybook 6.4.0がリリースされました。 | ||
|
|
||
| - [Release v6.4.0 · storybookjs/storybook](https://github.com/storybookjs/storybook/releases/tag/v6.4.0) | ||
|
|
||
| [Storybook Addon Interactions](https://github.com/storybookjs/storybook/tree/next/addons/interactions)でInteractionsタブが追加され、インタラクション操作のシミュレートとデバッグができるようになっています。 | ||
| また、Storybook向けのESLintプラグインである[storybookjs/eslint-plugin-storybook](https://github.com/storybookjs/eslint-plugin-storybook)が公開されています。 | ||
|
|
||
| ---- | ||
|
|
||
| Denoでは、現在[Node.js compability mode](https://deno.land/manual@v1.16.3/npm_nodejs/compatibility_mode)が開発されており、今後この互換性を上げていく方針となっています。 | ||
|
|
||
| - [Improve Node Compat Mode · Issue #12577 · denoland/deno](https://github.com/denoland/deno/issues/12577) | ||
|
|
||
| [Deno のこれまでとこれから JSConf JP 2021](https://kt3k.github.io/talk_jsconfjp2021/#1)という発表では、このNode.js互換モードの開発がなぜ進められているのかについて話されています。 | ||
|
|
||
| <iframe width="560" height="315" src="https://www.youtube.com/embed/fC4oZJmvfI0?start=9735" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| <h1 class="site-genre">ヘッドライン</h1> | ||
|
|
||
| ---- | ||
|
|
||
| ## Release 3.0.0 · emscripten-core/emscripten | ||
| [github.com/emscripten-core/emscripten/releases/tag/3.0.0](https://github.com/emscripten-core/emscripten/releases/tag/3.0.0 "Release 3.0.0 · emscripten-core/emscripten") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">WebAssembly</span> <span class="jser-tag">ReleaseNote</span> <span class="jser-tag">LLVM</span></p> | ||
|
|
||
| Emscripten 3.0.0リリース | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Prettier 2.5: TypeScript 4.5 and MDX v2 comment syntax! · Prettier | ||
| [prettier.io/blog/2021/11/25/2.5.0.html](https://prettier.io/blog/2021/11/25/2.5.0.html "Prettier 2.5: TypeScript 4.5 and MDX v2 comment syntax! · Prettier") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">Tools</span> <span class="jser-tag">ReleaseNote</span></p> | ||
|
|
||
| Prettier 2.5リリース。 | ||
| TypeScript 4.5のサポート、MDX v2のコメント構文をサポート、HTMLの`class`属性を複数行に整形していたのを1行に戻す変更など | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Release 8.4 “President Camio” · postcss/postcss | ||
| [github.com/postcss/postcss/releases/tag/8.4.0](https://github.com/postcss/postcss/releases/tag/8.4.0 "Release 8.4 “President Camio” · postcss/postcss") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">CSS</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">Tools</span> <span class="jser-tag">ReleaseNote</span></p> | ||
|
|
||
| PostCSS 8.4リリース。 | ||
| WarningとErrorにRangeを指定できるように、プラグインが指定されていない場合にパース処理を実際にアクセスするまで遅延させるように。 | ||
| パッケージサイズの削減など | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Release v9.1.0 · GoogleChrome/lighthouse | ||
| [github.com/GoogleChrome/lighthouse/releases/tag/v9.1.0](https://github.com/GoogleChrome/lighthouse/releases/tag/v9.1.0 "Release v9.1.0 · GoogleChrome/lighthouse") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">Chrome</span> <span class="jser-tag">performance</span> <span class="jser-tag">Tools</span> <span class="jser-tag">ReleaseNote</span></p> | ||
|
|
||
| Lighthouse v9.1.0リリース。 | ||
| Next.js向けのauditを追加など | ||
|
|
||
| - [feat: Add Stack Pack for Next.js by kyliau · Pull Request #66 · GoogleChrome/lighthouse-stack-packs](https://github.com/GoogleChrome/lighthouse-stack-packs/pull/66 "feat: Add Stack Pack for Next.js by kyliau · Pull Request #66 · GoogleChrome/lighthouse-stack-packs") | ||
|
|
||
| ---- | ||
|
|
||
| ## Release 12.0.0 · puppeteer/puppeteer | ||
| [github.com/puppeteer/puppeteer/releases/tag/v12.0.0](https://github.com/puppeteer/puppeteer/releases/tag/v12.0.0 "Release 12.0.0 · puppeteer/puppeteer") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">Chrome</span> <span class="jser-tag">Firefox</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p> | ||
|
|
||
| Puppeteer 12.0.0リリース。 | ||
| Chromium 97.0.4692.0へアップデート、Firefoxで`userDataDir`の指定をサポートなど | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Release v6.4.0 · storybookjs/storybook | ||
| [github.com/storybookjs/storybook/releases/tag/v6.4.0](https://github.com/storybookjs/storybook/releases/tag/v6.4.0 "Release v6.4.0 · storybookjs/storybook") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">debug</span> <span class="jser-tag">Tools</span> <span class="jser-tag">ReleaseNote</span></p> | ||
|
|
||
| Storybook 6.4.0リリース。 | ||
| Interactions stories、ESLintプラグインの追加など | ||
|
|
||
| - [storybook/addons/interactions at next · storybookjs/storybook](https://github.com/storybookjs/storybook/tree/next/addons/interactions "storybook/addons/interactions at next · storybookjs/storybook") | ||
| - [storybookjs/eslint-plugin-storybook: Official ESLint plugin for Storybook](https://github.com/storybookjs/eslint-plugin-storybook "storybookjs/eslint-plugin-storybook: Official ESLint plugin for Storybook") | ||
|
|
||
| ---- | ||
|
|
||
| ## Release v5.0.0 · chalk/chalk | ||
| [github.com/chalk/chalk/releases/tag/v5.0.0](https://github.com/chalk/chalk/releases/tag/v5.0.0 "Release v5.0.0 · chalk/chalk") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">node.js</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p> | ||
|
|
||
| Chalk 5.0.0リリース。 | ||
| pure ESMに変更、default exportからnamed exportへ変更。 | ||
| また、`keyword()`/`hsl()`/`hsv()`/`hwb()`/`ansi()`を削除、Template Literalを`chalk-template`パッケージに移行など | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## berstend/node-safe: 🤠 Make using Node.js safe again with Deno-like permissions | ||
| [github.com/berstend/node-safe](https://github.com/berstend/node-safe "berstend/node-safe: 🤠 Make using Node.js safe again with Deno-like permissions") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">node.js</span> <span class="jser-tag">macOS</span> <span class="jser-tag">security</span> <span class="jser-tag">deno</span> <span class="jser-tag">library</span> <span class="jser-tag">Tools</span></p> | ||
|
|
||
| macOSのsandbox機能を利用してDenoライクなSandboxの仕組みを実装したNodeの実行ツール。 | ||
| `--allow-read`、`--allow-net`など許可リストを指定してスクリプト実行やnpm/yarn/npxにも対応している。 | ||
|
|
||
|
|
||
| ---- | ||
| <h1 class="site-genre">アーティクル</h1> | ||
|
|
||
| ---- | ||
|
|
||
| ## CI 環境でのユニットテストの実行時間を2倍速くした話 (Jest + Mongo DB + Circle CI) - ミツモア Tech blog | ||
| [engineering.meetsmore.com/entry/2021/01/21/134930](https://engineering.meetsmore.com/entry/2021/01/21/134930 "CI 環境でのユニットテストの実行時間を2倍速くした話 (Jest + Mongo DB + Circle CI) - ミツモア Tech blog") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">node.js</span> <span class="jser-tag">jest</span> <span class="jser-tag">testing</span> <span class="jser-tag">article</span></p> | ||
|
|
||
| Jestでのユニットテストの実行時間の削減についての記事。 | ||
| テストの並列化、変更したファイルのみをテスト、Worker単位でのDBの初期化、CIでキャッシュについて | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Publish ESM and CJS in a single package | ||
| [antfu.me/posts/publish-esm-and-cjs](https://antfu.me/posts/publish-esm-and-cjs "Publish ESM and CJS in a single package") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">node.js</span> <span class="jser-tag">CommonJS</span> <span class="jser-tag">ECMAScript</span> <span class="jser-tag">module</span> <span class="jser-tag">article</span></p> | ||
|
|
||
| CommonJSとESMのデュアルフォーマットでのパッケージ公開について。 | ||
| `package.json`の`exports`フィールドでの使い分け、tsupとunbuildのビルドについて。 | ||
| ESMでは利用できないCommonJSの`__dirname`などの補完方法について | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## New – Real-User Monitoring for Amazon CloudWatch | AWS News Blog | ||
| [aws.amazon.com/jp/blogs/aws/cloudwatch-rum/](https://aws.amazon.com/jp/blogs/aws/cloudwatch-rum/ "New – Real-User Monitoring for Amazon CloudWatch | AWS News Blog") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">aws</span> <span class="jser-tag">webservice</span> <span class="jser-tag">performance</span> <span class="jser-tag">article</span></p> | ||
|
|
||
| CloudWatchでRUMを取得できるサービスがリリースされた。 | ||
| JavaScriptのタグを埋め込むことで、Web Vitalsなどのメトリクスデータなどを取得できる。 | ||
|
|
||
| - [aws-observability/aws-rum-web: Amazon CloudWatch RUM Web Client](https://github.com/aws-observability/aws-rum-web "aws-observability/aws-rum-web: Amazon CloudWatch RUM Web Client") | ||
|
|
||
| ---- | ||
| <h1 class="site-genre">スライド、動画関係</h1> | ||
|
|
||
| ---- | ||
|
|
||
| ## Deno のこれまでとこれから JSConf JP 2021 | ||
| [kt3k.github.io/talk\_jsconfjp2021/#1](https://kt3k.github.io/talk_jsconfjp2021/#1 "Deno のこれまでとこれから JSConf JP 2021") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">deno</span> <span class="jser-tag">node.js</span> <span class="jser-tag">slide</span></p> | ||
|
|
||
| Denoの設計や採用事例についてのスライド。 | ||
| また現在進めているNode.js互換モードについて。 | ||
|
|
||
| - [Improve Node Compat Mode · Issue #12577 · denoland/deno](https://github.com/denoland/deno/issues/12577 "Improve Node Compat Mode · Issue #12577 · denoland/deno") | ||
|
|
||
| ---- | ||
| <h1 class="site-genre">ソフトウェア、ツール、ライブラリ関係</h1> | ||
|
|
||
| ---- | ||
|
|
||
| ## postcss-rs/postcss-rs: 🚀 Fast and 100% API compatible postcss replacer, built in Rust | ||
| [github.com/postcss-rs/postcss-rs](https://github.com/postcss-rs/postcss-rs "postcss-rs/postcss-rs: 🚀 Fast and 100% API compatible postcss replacer, built in Rust") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">PostCSS</span> <span class="jser-tag">Rust</span></p> | ||
|
|
||
| PostCSSのRust実装 | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Tamagui — React Native + Web UI kit | ||
| [tamagui.dev/](https://tamagui.dev/ "Tamagui — React Native + Web UI kit") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">CSS</span> <span class="jser-tag">Design</span> <span class="jser-tag">Tools</span> <span class="jser-tag">library</span></p> | ||
|
|
||
| React NativeとWebに対応したスタイリングライブラリ。 | ||
| Propsでスタイルを渡し、コンパイル時にはAtomic CSSが生成されて、コンポーネントにはクラス名が指定される。 | ||
|
|
||
|
|
||
| ---- |