Cybozu Frontend Monthly #20

イベント概要

サイボウズフロントエンドマンスリー は、サイボウズ社内で行っているフロントエンド情報共有会「フロントエンドウィークリー」の公開版です。

その月に気になったフロントエンドの情報を、サイボウズのフロントエンドエンジニアのメンバーが共有していきます。

このイベントのハッシュタグは #サイボウズフロントエンドマンスリー です。

開催日

2022年03月01日

イベントページ

https://cybozu.connpass.com/event/239952/

配信URL

https://www.youtube.com/watch?v=am4BF7iKicA

メンバー

---

コンテンツ

👀 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を使わないと HTTP/2 で通信できませんでした。
• fetch は Node.js 本体に実装されているのではなく、 undici というライブラリを介しています。
  • undici fetch のマイルストーンにあるように、まだ実装されていない機能があります。
• 関連リンク
  • fetch() In Node.js Core: Why You Should Care
  • lib: add fetch by targos · Pull Request #41749 · nodejs/node
  • Node v17.5.0 (Current) | Node.js

Report: 1,300 malicious npm packages detected recently @nus3_

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

JavaScript で parseInt / parseFloat を使わない方が良い理由 @mugi_uno

• parseInt(0.0000005) === 5 という parseInt と浮動小数点値を組み合わせた際の挙動についてのツイートが一時期盛り上がりました
• これを受けて、なぜこのような挙動となるのか・実際には何を使うべきかを解説した日本語記事です
• 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 @sajikix

• TypeScript の v4.6 RC がアナウンスされました。
• 利用者として実感しやすそうな便利な改善としては、以下にあげるような Union 型や MappedType の絞り込みにおける型解析能力向上があります。
  • Control Flow Analysis for Destructured Discriminated Unions
    • タグ付き Union 型を絞り込む際に、それぞれのプロパティを分割代入をしても、同時に分割代入された変数の型ををセットで絞り込むようになる
  • Indexed Access Inference Improvements
    • MappedType 内において利用されるインデックスアクセス型が正しく絞り込まれるようになる。
  • Control Flow Analysis for Dependent Parameters
    • enum などを利用して引数同士が型情報として結びついているような場合、片方の引数を絞り込むことで同時にもう片方の引数も絞り込むよう解析されるようになる。
• また 4.6 に入った機能ではないのですが、TypeScript ではtypescript-analyze-traceというツールを最近 publish しています。
  • TypeScript には--generateTraceというフラグがあり、これによって生成された情報を利用することでコンパイル時の挙動やパフォーマンスをチェックすることができます。
    • 具体的には計算コストの高い型演算や型比較を行なっている部分を発見するのに役立ったりします。
  • 一方で-generateTraceフラグによって生成された情報は読みにくいのが現状でした。
  • この typescript-analyze-trace ではこれらの情報をわかりやすく視覚化してくれます。

💬 Languages

• CSS Fingerprint
  • CSS でも Fingerprinting するやり方について
• Here’s what I didn’t know about :where()
  • CSS 擬似クラス :where() の使い所について
• lib: add fetch by targos · Pull Request #41749 · nodejs/node
  • Node.js に fetch()を実装する PR
• [v16.x Backport] Import assertions related PRs
  • Node.js v16 系に Import assertions バックポートされた PR。JSON Modules には Import assertions が必要。
• Node v14.19.0 (LTS)
  • Node.js v14 系でも Corepack(パッケージマネージャー管理ツール)が利用可能になった
• Node.js Trademarks Transferred to OpenJS Foundation
  • Node.js の商標が Joyent inc から OpenJS Foundation に移管された
• Announcing TypeScript 4.6 RC
  • TypeScript 4.6 の RC 紹介記事
• JavaScript の演算子の優先順位と「禁止ルール」の一覧
  • ECMAScript 仕様書をもとに JavaScript の演算子の優先順位について 1 つずつ詳しく紹介されている
• JavaScript で parseInt / parseFloat を使わない方が良い理由
  • グローバルに生えている parseInt()と parseFloat()の動作についての解説記事。また、Math.trunc()のような代替の関数についても紹介されている

⚒️ Libraries / Frameworks

• Automatic Class Sorting with Prettier
  • tailwindcss のクラス名をソートしてくれる Prettier の plugin がリリース
• Monorepo Explained
  • monorepo の解説と比較
• Ubie で利用しているアイコンを npm パッケージとして公開しました！
• Structuring your Storybook
  • Storybook をちゃんと活用してるプロダクトや企業の事例
• ESLint v8.9.0 released
  • es2022 の追加など
• griffel
  • Microsoft の css-in-js ライブラリ
• Rome Formatter and Rust Update
  • Rust でできた高速にフォーマットしてくれる Rome Formatter の VS Code 拡張が近々リリースされる予定
• Explore components and libraries
  • Storybook を使用している事例一覧
• StackBlitz welcomes Patak, core maintainer of Vite
  • Vite のコアメンバーが StackBlitz にジョイン。フルタイムで Vite の開発に取り組む
• Revalidating options of SWR
  • SWR で間違いがちなオプションについて

🖥 Browsers

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

📏 Web Standard

• THE BIG Web Almanac
  • Web Almanac の内容からランダムにクイズ出される。皆さんもどれだけ解けるか試してみては？
• The Focus-Indicated Pseudo-class :focus-visible
  • :focus-visibleの解説と webkit の現状についてのまとめ。

👮‍♀️ Security

• GitHub 傘下の npm、上位 100 のパッケージメンテナは 2FA 必須に - ITmedia NEWS
  • GitHub 傘下の npm、上位 100 のパッケージメンテナは 2FA 必須に。今後利用者や依存数の多いパッケージを対象に段階的に拡大していく方針。
• Report: 1,300 malicious npm packages detected recently
  • WhiteSource が行った調査で、1300 もの悪意ある npm パッケージが検出された

🦆 Others

• CSS Speedrun
  • CSS セレクタクイズ。時間も計測されるのでチームでやると盛り上がりそう
• Web フォントを使って contenteditable から脱出する - LINE ENGINEERING
  • contenteditable を利用せずにエディタ上に装飾を埋め込むため、textarea overlay と空白文字の Web フォントを使うアプローチについての解説記事
• 100 万行の大規模な JavaScript 製システムを TypeScript に移行するためにやったこと
  • 限られた工数・リソースの中で大規模アプリケーションの TypeScript 移行をどう進めたか。対応の優先度付けや型定義のディレクトリ管理、移行途中段階から見ての所感など
• 2022 年 4 月 6 日 (水)より Yahoo! JAPAN は欧州経済領域（EEA）およびイギリスからご利用いただけなくなります
  • Yahoo! JAPAN が一部サービスを除き、欧州経済領域（EEA）およびイギリスから利用不可となる公式アナウンスを出した
• 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
  • CSS の代わりに SVG を利用して UI を構築する具体例と、そのメリットについて
• テスト未経験から中上級者へのガイドライン！「Jest ではじめるテスト入門」出版プロジェクト！
  • Jest を例に、テストの概念や種類・書き方・開発フローへの組み込みなどを学ぶ書籍執筆のクラウドファンディング
  • 目標に達して執筆が決定したようです
• atomic design and storybook
  • Storybook を Atomic Design を例に開発する場合のプロセスやメリットについて解説
• design system versioning: single library or individual components?
  • デザインシステムにおいて、コンポーネント単位 or ライブラリ全体でバージョン管理を行った場合の Pros・Cons を解説した記事
• The data model behind Notion’s flexibility
  • Notion の文書を構成するデータモデルについての解説記事
• The Perfect Storm: How Redux DevTools broke Jira for 14 hours
  • Redux DevTools の更新の影響で Jira が表示不可に陥った原因の解説記事。Lodash の import 方法が変わったことでwindow._ が定義されたことで Underscore と誤検知した。
• Yes, I can connect to a DB in CSS
  • CSS Houdini や CSS paint worklet を利用し、CSS からデータベースに接続する方法
• Frontend Developer Roadmap
  • フロントエンドエンジニアが必要とされるスキルロードマップ
• テスト・パフォーマンス・アクセシビリティ・セキュリティの 4 大品質に取り組むメルペイのフロントエンドチーム
  • メルペイで設定されているフロントエンドでの品質基準設定・施策・課題に加え、技術スタック、今後の展望など
• Wordle 作者の人の話(Podcast)
  • 世界的に話題になった Wordle 作者が出演する PodCast。技術スタックや Wordle クローン、サービス売却についてなど
• Vite の話
  • Vite 作者 Evan you 出演の PodCast。Vite の実装・プラグイン・エコシステム・Rust への考えなど
• Knowledge Map | Learn JavaScript
  • https://learnjavascript.online/ 提供の、モダンフロントエンドで必要となるナレッジマップ

フロントエンドエキスパートチームについて

https://speakerdeck.com/cybozuinsideout/frontendexpert-team