Cybozu Frontend Monthly #20

イベント概要

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

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

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

※フロントエンドウィークリーとは
毎週火曜の 17:00 〜 18:00 で社内向けに行っているフロントエンドの気になる記事を紹介する会です。2016年3月15日から行われています。
ハッシュタグ #サイボウズフロントエンドウィークリー で実況しています。

開催日

2022年03月01日

イベントページ

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

タイムテーブル

07:50 - 08:00配信開始
08:00 - 08:05オープニング
08:05 - 08:55本編
08:55 - 09:00クロージング

メンバー

@shisama_@shisama_
@sajikix@sajikix
@nus3_@nus3_
@mugi_uno@mugi_uno

紹介記事

👀 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 のマイルストーンにあるように、まだ実装されていない機能があります。

  • 関連リンク

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 の絞り込みにおける型解析能力向上があります。

  • また 4.6 に入った機能ではないのですが、TypeScript ではtypescript-analyze-traceというツールを最近 publish しています。

    • TypeScript には--generateTraceというフラグがあり、これによって生成された情報を利用することでコンパイル時の挙動やパフォーマンスをチェックすることができます。
    • 具体的には計算コストの高い型演算や型比較を行なっている部分を発見するのに役立ったりします。
    • 一方で-generateTraceフラグによって生成された情報は読みにくいのが現状でした。
    • この typescript-analyze-trace ではこれらの情報をわかりやすく視覚化してくれます。

💬 Languages

⚒️ Libraries / Frameworks

🖥 Browsers

📏 Web Standard

👮‍♀️ Security

🦆 Others

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

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