# Frontend Monthly #20

---

title: Cybozu Frontend Monthly
date: "2022-03-01T17:00:00+09:00"
slug: "2022-02"
connpass: ""
stream: ""
no: 20
members:

- name: "@shisama_"
link: https://twitter.com/shisama_
- name: "@mugi_uno"
link: https://twitter.com/mugi_uno
- name: "@sajikix"
link: https://twitter.com/sajikix
- name: "@nus3_"
link: https://twitter.com/nus3_
guest:

---

## 👀 Notable

### Node.js に `fetch()` が実装されました @shisama_

- Node.js 本体に `fetch()` が実装されました。まだ実験的な機能で `--experimental-fetch` フラグが必要です。
- Node.js v17.5 から利用できます。
- `AbortController` はすでに Node.js v15 で実装されているので、Fetch の中断も可能です。
- インターフェースや使い方は Web の仕様に合わせています。
- Axios などブラウザとNode.jsの両方をサポートしているHTTPクライアントのライブラリを利用しなくてもよくなるケースもあるかもしれません。
- インターフェースや使い方はブラウザの `fetch()` と同じで、グローバルに `fetch()` が生えているのでブラウザと Node.js でコードを共有することも可能です。
- `if (window === undefined)` とかでブラウザで実行されるか Node.js で実行されるか考えなくても良い。
- Node.js のときは`node-fetch`などの npm パッケージを使うみたいな分岐も不要になるかもしれません。
- ユーザーが HTTP/2 や HTTP/3 で通信しているかどうかを意識しなくても良くなっていきます。
- これまでは[http2](https://nodejs.org/api/http2.html#client-side-example)を使わないとHTTP/2で通信できませんでした。
- fetch は Node.js 本体に実装されているのではなく、 [undici](https://github.com/nodejs/undici) というライブラリを介しています。
- undici fetch の[マイルストーン](https://github.com/nodejs/undici/milestone/5)にあるように、まだ実装されていない機能があります。
- 関連リンク
- [fetch() In Node.js Core: Why You Should Care](https://fusebit.io/blog/node-fetch/)
- [lib: add fetch by targos · Pull Request #41749 · nodejs/node](https://github.com/nodejs/node/pull/41749)
- [Node v17.5.0 (Current) | Node.js](https://nodejs.org/en/blog/release/v17.5.0/)

### [Report: 1,300 malicious npm packages detected recently](https://sdtimes.com/security/report-1300-malicious-npm-packages-detected-recently/) @nus3_

- WhiteSource が行った調査で、1300 もの悪意ある npm パッケージが検出されました。
- 検出されたマルウェアでは、クレデンシャルの盗用やボットネットの実行に利用されていました。
- 悪意あるパッケージの作者は金・土・日曜日にリリースする傾向があるそうです。
- もし、使用している npm パッケージの脆弱性をチェックするような運用フローがない場合は何かしらの対策を検討してみてもいいかもしれません。
- ちなみに WhiteSource が出してる GitHub App があり、試しに使ってみましたが Renovate を導入するような感じでリポジトリで使用している npm パッケージの脆弱性のチェックをしてくれてよさそうでした
- 関連リンク
- [WhiteSource Bolt for GitHub](https://github.com/marketplace/whitesource-bolt)
- プルリクやリポジトリを対象に使用している npm パッケージ(OSS)の脆弱性をチェックしてくれる
- 脆弱性があった場合は Issue の作成やプルリク内のステータスで通知してくれる

### [JavaScript で parseInt / parseFloat を使わない方が良い理由](http://nmi.jp/2022-02-03-dont-use-parseInt) @mugi_uno

- `parseInt(0.0000005) === 5` という parseInt と浮動小数点値を組み合わせた際の挙動についての[ツイート](https://twitter.com/jedisct1/status/1488472046489190411)が一時期盛り上がりました
- これを受けて、なぜこのような挙動となるのか・実際には何を使うべきかを解説した日本語記事です
- parseInt は引数を文字列化するため、浮動小数点値が指数表記を利用した値となり、指数の `e` の左まで変換される
- 整数化を期待するのであれば Math.trunc を利用するのが望ましい
- 同様に parseFloat も一部のtrimといった挙動を含むため、厳密に変換するのであれば Number() のほうが望ましい
- ちなみに記事内で説明を省略されていた `isFinite` `isNaN` は次のような挙動差異があったりします
- `isFinite('0') // true`
- `Number.isFinite('0') // false`
- `isNaN('foo') // true`
- `Number.isNaN('foo') // false`
- `isFinite`, `isNaN` の場合は 内部的にECMAScript仕様上の `StringToNumber` がコールされ一旦数値への変換を試みるためこのような挙動になります
- ライブラリのAPI利用時はドキュメントないしはソースコードを事前確認するかと思いますが、根底にあるECMAScriptが標準で備えているAPIこそきっちりと理解しておく必要があるな...改めて感じた記事でした

### [Announcing TypeScript 4.6 RC](https://devblogs.microsoft.com/typescript/announcing-typescript-4-6-rc/) @sajikix
- TypeScriptのv4.6 RCがアナウンスされました。
- 利用者として実感しやすそうな便利な改善としては、以下にあげるようなUnion型やMappedTypeの絞り込みにおける型解析能力向上があります。
- [Control Flow Analysis for Destructured Discriminated Unions](https://devblogs.microsoft.com/typescript/announcing-typescript-4-6-rc/#cfa-destructured-discriminated-unions)
- タグ付きUnion型を絞り込む際に、それぞれのプロパティを分割代入をしても、同時に分割代入された変数の型ををセットで絞り込むようになる
- [Indexed Access Inference Improvements](https://devblogs.microsoft.com/typescript/announcing-typescript-4-6-rc/#indexed-access-inference-improvements)
- MappedType内において利用されるインデックスアクセス型が正しく絞り込まれるようになる。
- [Control Flow Analysis for Dependent Parameters](https://devblogs.microsoft.com/typescript/announcing-typescript-4-6-rc/#dependent-parameters-cfa)
- 判別可能なTupleのUnion型を展開して関数の引数とするような場合に引数同士が同時に絞り込まれるようになる。。
- また4.6に入った機能ではないのですが、TypeScriptでは[typescript-analyze-trace](https://github.com/microsoft/typescript-analyze-trace)というツールを最近publishしています。
- TypeScriptには`--generateTrace`というフラグがあり、これによって生成された情報を利用することでコンパイル時の挙動やパフォーマンスをチェックすることができます。
- 具体的には計算コストの高い型演算や型比較を行なっている部分を発見するのに役立ったりします。
- 一方で`-generateTrace`フラグによって生成された情報は読みにくいのが現状でした。
- このtypescript-analyze-traceではこれらの情報をわかりやすく視覚化してくれます。

## 💬 Languages

<!-- hirano -->

- [CSS Fingerprint](https://csstracking.dev/)
- CSSでもFingerprintingするやり方について
- [Here’s what I didn’t know about :where()](https://www.matuzo.at/blog/2022/heres-what-i-didnt-know-about-where/)
- CSS擬似クラス `:where()` の使い所について
- [lib: add fetch by targos · Pull Request #41749 · nodejs/node](https://github.com/nodejs/node/pull/41749)
- Node.jsにfetch()を実装するPR
- [[v16.x Backport] Import assertions related PRs](https://github.com/nodejs/node/pull/41776)
- Node.js v16系にImport assertionsバックポートされたPR。JSON ModulesにはImport assertionsが必要。
- [Node v14.19.0 (LTS)](https://nodejs.org/en/blog/release/v14.19.0/)
- Node.js v14系でもCorepack(パッケージマネージャー管理ツール)が利用可能になった
- [Node.js Trademarks Transferred to OpenJS Foundation](https://openjsf.org/blog/2022/02/14/node-js-trademarks-transferred-to-openjs-foundation/)
- Node.jsの商標がJoyent incからOpenJS Foundationに移管された
- [Announcing TypeScript 4.6 RC](https://devblogs.microsoft.com/typescript/announcing-typescript-4-6-rc/)
- TypeScript 4.6のRC紹介記事
- [JavaScript の演算子の優先順位と「禁止ルール」の一覧](https://zenn.dev/qnighy/articles/0e3d1d2f88d922)
- [ECMAScript仕様書](https://tc39.es/ecma262/multipage/grammar-summary.html)をもとにJavaScriptの演算子の優先順位について1つずつ詳しく紹介されている
- [JavaScript で parseInt / parseFloat を使わない方が良い理由](http://nmi.jp/2022-02-03-dont-use-parseInt)
- グローバルに生えているparseInt()とparseFloat()の動作についての解説記事。また、Math.trunc()のような代替の関数についても紹介されている

## ⚒️ Libraries / Frameworks

- [Automatic Class Sorting with Prettier](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier)
- tailwindcss のクラス名をソートしてくれる Prettier の plugin がリリース
- [Monorepo Explained](https://monorepo.tools/)
- monorepo の解説と比較
- [Ubie で利用しているアイコンを npm パッケージとして公開しました！](https://zenn.dev/ubie/articles/44d0eab3458cc0)
- [Structuring your Storybook](https://storybook.js.org/blog/structuring-your-storybook/)
- Storybook をちゃんと活用してるプロダクトや企業の事例
- [ESLint v8.9.0 released](https://eslint.org/blog/2022/02/eslint-v8.9.0-released)
- es2022 の追加など
- [griffel](https://github.com/microsoft/griffel)
- Microsoft の css-in-js ライブラリ
- [Rome Formatter and Rust Update](https://rome.tools/blog/2022/02/08/rome-formatter-and-rust-update)
- Rust でできた高速にフォーマットしてくれる Rome Formatter の VS Code 拡張が近々リリースされる予定
- [Explore components and libraries](https://storybook.js.org/showcase)
- Storybook を使用している事例一覧
- [StackBlitz welcomes Patak, core maintainer of Vite](https://blog.stackblitz.com/posts/stackblitz-welcomes-patak/)
- Vite のコアメンバーが StackBlitz にジョイン。フルタイムで Vite の開発に取り組む
- [Revalidating options of SWR](https://koba04.medium.com/revalidating-options-of-swr-4d9f08bee813)
- SWR で間違いがちなオプションについて

## 🖥 Browsers

<!-- saji -->

- [Release Notes for Safari Technology Preview 139 で直された、inline block の box-sizing: border-box、min-width に border が含まれない Safari 15 系のバグ](https://trac.webkit.org/changeset/287779/webkit/)
- Safariにあったinline block の box-sizing: border-box、min-width に border が含まれないというバグが治される。
- [Push Notifications, WebXR, and better PWA support coming to iOS](https://firt.dev/ios-15.4b#web-push-notification-on-ios)
- iOSのアップデートで、待望されていた`Push Notifications`をはじめとするPWA向け機能が追加されそうな形跡があるというお話。
- [Introducing the Dialog Element | WebKit](https://webkit.org/blog/12209/introducing-the-dialog-element/)
- Safariも`<dialog>`要素に対応したので、モダンブラウザには`<dialog>`全部実装されたことに
- [Welcome to Wolvic](https://wolvic.com/)
- Igaliaからmozilla reality をフォークした VRフォーカスブラウザ「Wolvic」が発表
- [Inspect and Debug CSS Flexbox Layouts - Chrome Developers](https://developer.chrome.com/docs/devtools/css/flexbox/)
- Chromeのdevtoolでflexboxを視覚的に操作できるように
- [Intent to Ship: Omnibox Prerendering (google.com)](https://groups.google.com/a/chromium.org/g/blink-dev/c/ogegRwcRlcs)
- ChromeがOmniboxにおいてユーザーがアクセスする可能性が高いオートコンプリート候補先コンテンツを事前レンダリングする機能を発表。

## 📏 Web Standard

<!-- saji -->

- [THE BIG Web Almanac](https://big-web-almanac-game.web.app/)
- Web Almanacの内容からランダムにクイズ出される。皆さんもどれだけ解けるか試してみては？
- [The Focus-Indicated Pseudo-class :focus-visible](https://webkit.org/blog/12179/the-focus-indicated-pseudo-class-focus-visible/)
- `:focus-visible`の解説とwebkitの現状についてのまとめ。
## 👮‍♀️ Security

<!-- saji -->

- [GitHub 傘下の npm、上位 100 のパッケージメンテナは 2FA 必須に - ITmedia NEWS](https://www.itmedia.co.jp/news/articles/2202/03/news127.html)
- GitHub 傘下の npm、上位100のパッケージメンテナは 2FA 必須に。今後利用者や依存数の多いパッケージを対象に段階的に拡大していく方針。
- [Report: 1,300 malicious npm packages detected recently](https://sdtimes.com/security/report-1300-malicious-npm-packages-detected-recently/)
- WhiteSource が行った調査で、1300 もの悪意ある npm パッケージが検出された

## 🦆 Others

<!-- mugi -->

- [CSS Speedrun](https://css-speedrun.netlify.app/)
- CSSセレクタクイズ。時間も計測されるのでチームでやると盛り上がりそう
- [Web フォントを使って contenteditable から脱出する - LINE ENGINEERING](https://engineering.linecorp.com/ja/blog/uit-ridding-of-contenteditable/)
- contenteditableを利用せずにエディタ上に装飾を埋め込むため、textarea overlayと空白文字のWebフォントを使うアプローチについての解説記事
- [100 万行の大規模な JavaScript 製システムを TypeScript に移行するためにやったこと](https://developers.cyberagent.co.jp/blog/archives/34364/)
- 限られた工数・リソースの中で大規模アプリケーションのTypeScript移行をどう進めたか。対応の優先度付けや型定義のディレクトリ管理、移行途中段階から見ての所感など
- [2022 年 4 月 6 日 (水)より Yahoo! JAPAN は欧州経済領域（EEA）およびイギリスからご利用いただけなくなります](https://privacy.yahoo.co.jp/notice/globalaccess.html)
- Yahoo! JAPANが一部サービスを除き、欧州経済領域（EEA）およびイギリスから利用不可となる公式アナウンスを出した
- [How Prime Video updates its app for more than 8,000 device types](https://www.amazon.science/blog/how-prime-video-updates-its-app-for-more-than-8-000-device-types)
- Amazon Prime Video で低レイヤー部分を JavaScript から WebAssembly に書き直してパフォーマンスを改善した話
- [Building UI Components With SVG and CSS](https://ishadeed.com/article/building-components-svg-css/)
- CSSの代わりにSVGを利用してUIを構築する具体例と、そのメリットについて
- [テスト未経験から中上級者へのガイドライン！「Jest ではじめるテスト入門」出版プロジェクト！](https://peaks.cc/testing_with_jest)
- Jestを例に、テストの概念や種類・書き方・開発フローへの組み込みなどを学ぶ書籍執筆のクラウドファンディング
- 目標に達して執筆が決定したようです
- [atomic design and storybook](https://bradfrost.com/blog/post/atomic-design-and-storybook/)
- [design system versioning: single library or individual components?](https://bradfrost.com/blog/post/design-system-versioning-single-library-or-individual-components/)
- デザインシステムにおいて、コンポーネント単位orライブラリ全体でバージョン管理を行った場合のPros・Consを解説した記事
- [The data model behind Notion's flexibility](https://www.notion.so/blog/data-model-behind-notion)
- Notionの文書を構成するデータモデルについての解説記事
- [The Perfect Storm: How Redux DevTools broke Jira for 14 hours](https://nathanbierema.com/redux-devtools-jira/)
- Redux DevToolsの更新の影響でJiraが表示不可に陥った原因の解説記事。Lodashのimport方法が変わったことで`window._` が定義されたことでUnderscoreと誤検知した。
- [Yes, I can connect to a DB in CSS](https://www.leemeichin.com/posts/yes-i-can-connect-to-a-db-in-css.html)
- CSS HoudiniやCSS paint workletを利用し、CSSからデータベースに接続する方法
- [Frontend Developer Roadmap](https://roadmap.sh/frontend)
- フロントエンドエンジニアが必要とされるスキルロードマップ
- [テスト・パフォーマンス・アクセシビリティ・セキュリティの 4 大品質に取り組むメルペイのフロントエンドチーム](https://engineering.mercari.com/blog/entry/20220209-7dbffabb5e/)
- メルペイで設定されているフロントエンドでの品質基準設定・施策・課題に加え、技術スタック、今後の展望など
- [Wordle 作者の人の話(Podcast)](https://syntax.fm/show/430/creator-of-wordle-josh-wardle)
- 世界的に話題になったWordle作者が出演するPodCast。技術スタックやWordleクローン、サービス売却についてなど
- [Vite の話](https://changelog.com/jsparty/212)
- Vite作者Evan you出演のPodCast。Viteの実装・プラグイン・エコシステム・Rustへの考えなど
- [Knowledge Map | Learn JavaScript](https://learnjavascript.online/knowledge-map.html)
- https://learnjavascript.online/ 提供の、モダンフロントエンドで必要となるナレッジマップ