Cybozu Frontend Monthly #17

イベント概要

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

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

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

開催日

2021年11月26日

イベントページ

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

配信URL

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

メンバー

---

コンテンツ

👀 Notable Articles

• Interactive stories (beta)(by @nus3_)
  • コンポーネントが描画された後のユーザー操作を定義でき、Storybbok 上で実際に動作の確認もできるようになる
  • Storybook6.4 から追加で現在は RC(12/1 リリース予定)
  • 複雑な操作を必要とするコンポーネントを GUI 上で確認するときに良さそう
  • Storybook 上ではこんな感じで確認できる
  • コード例
• Optimizing resource loading with Priority Hints (by @sajikix)
  • 画像や CSS、スクリプトといったリソースに対して明示的に優先度を指定してあげることでパフォーマンスを改善していく方法を解説した記事
  • Priority Hints はリソースの優先度を指定する API として提案されている仕様
    • Chrome96 から OriginTiral としてこの機能が使えるようになる
    • リソースに対して importance 属性を付与し、優先度(high,low,auto から選択)を指定する
  • 既存の手法では preload や preconnect を利用して優先度に影響を与えていたが、この方法では細かくリソースの優先度を指定することができなかった。
  • 以下のような例では細かく優先度を指定することでパフォーマンスの向上が図れる
    • 画像の種類によって優先度を上げることで LCP(最大コンテンツ描画時間) が軽減される
    • 非同期な Script 読み込みに対してより適切に優先度を向上させることができる
      • 現在だと<link rel="preload">で script を読み込むハックが一般的
    • ページの後ろで呼ばれる scripts の優先度を下げる
    • 重要でないデータフェッチの優先度を下げる
• Remix - Build Better Websites (by @b4h0_c4t)
  • 2021/11/23 に Remix が正式リリースされた
    • 去年春あたりからスポンサー限定でプレビュー版を配布していた
  • 分散システム的な思想をもとに設計、開発されている
    • SSG を利用せずに高速な Web サイトを構築することを目指している
    • サーバサイドで HTML を形成し並列に読み込むため描画までの待ち時間が少ない
    • Nested routes によってあらゆるデータをプリフェッチできる
  • 総合してクライアントサーバ間のデータ送受信を扱いやすく高効率に行うためのフレームワークなのかなといった印象
• Popular ‘coa’ NPM library hijacked to steal user passwords (by @shisama)
  • 著名 npm パッケージにマルウェアが仕込まれている事件が続いている
  • npm アカウントが乗っ取られ、パスワードを抜き取るマルウェアが仕込まれたパッケージが npm registry へ publish されていたというもの
  • 同時期にrcでも同様の事件が起きた
    • Malware found in coa and rc, two npm packages with 23M weekly downloads - The Record by Recorded Future
      • coaとrcでどのバージョンに問題があるか書かれている
  • 先月もua-parser-jsで同様の事件が起きた
    • Popular NPM library hijacked to install password-stealers, miners
  • ua-parser-js、coa、rcのメンテナーは 2FA を設定していなかった
    • GitHub’s commitment to npm ecosystem security | The GitHub Blog
  • npm アカウントには 2FA を設定しましょう

---

💬 Languages

• Node.js v16 が Active LTS に
• TypeScript 4.5 以降で ESM 対応はどうなるのか？
• Oilpan library · V8
  • Oilpan (v8 の GC 機能) ランタイムからを分離してライブラリとして提供し始めたよという話

---

⚒️ Libraries / Frameworks

• 👀 Interactive stories (beta)
  • @storybook/testing-library を使ってユーザー操作を定義できる機能が storybook 6.4 beta で試せるようになりました。
• Babel: 7.16.0 Released: ESLint 8 and TypeScript 4.5
  • class static initialization blocksがデフォルトで有効になったのと、ESLint8 と TypeScript4.5 がサポートされた
• Next.js 12
  • Next.js ConfでNext.js12がリリースされた

    コンパイラにSWC、Middlewareの追加、React18のサポート、React Server Componentsなど盛りだくさんの機能が追加された
• Shopify/hydrogen
  • Shopify を構築するためのフロントエンドコンポーネントライブラリ
• angus-c/just: A library of dependency-free JavaScript functions that do just do one thing.
  • LodashのようなUtilityライブラリ

    個々の関数ごとに依存に追加可能で、zero-dependency & TypeScript 型定義を含む。 Lodashとの違いは何？という説明もちゃんと用意されてた（https://github.com/angus-c/just/blob/master/TRADEOFFS.md）
• rtk-incubator/rtk-query-codegen
• mints: 5.7kb の TypeScript コンパイラを作った
• React Router v6
• React Location
  • react-query の作者が作った新しい Router
• apollo-rs: spec-compliant GraphQL tools in Rust
• typescript-eslint 5.4.0
  • TS 4.5 の構文をパースできる
• React v18 beta

---

🖥 Browsers

• domenic/cooperatively-sized-iframes
  • iframe の内部コンテンツを参照して iframe 自体のサイズを可変できるようにしたいという提案
• WebAssembly Dynamic Tiering ready to try in Chrome 96
  • V8のWASM最適化コンパイラであるTurboFanのコンパイルを複数回実行された関数のみに限定する機能

    V8のWASMのコンパイラにはLiftoffというベースコンパイラと、TurboFanという最適化コンパイラの2種類がある。今までのコンパイルでは「Liftoffでベースコンパイル」 → 「モジュール全体をTurboFanによってバックグラウンドですぐに再度コンパイル」という流れだったが、後者の最適化コンパイルを使用頻度の高いものに限定し、パフォーマンスの向上を図るというもの。
• Chrome 95 で追加された画面上の色を取得する EyeDropper API について
  • 画面上から色情報を取得するスポイトツールをブラウザ上で実現する API が追加
• Record, replay and measure user flows
  • ユーザーの動作を記録し、再現できる機能が Chrome に追加された。
  • Puppeteer のコードとして export もできる。
• Release Notes for Safari Technology Preview 135
  • CSS、待ち遠しいものがいっぱいある。lazy image loading も。
• Release Notes for Safari Technology Preview 134
  • Dialog Element が使えるようになった
• Firefox 94
  • Firefox 94 がリリース。複雑なオブジェクトをコピーするためのstructuredCloneメソッドが実装された

---

📏 Web Standard

• draft-ietf-httpbis-safe-method-w-body-02
  • GETメソッドとは別にQUERYメソッドを追加する

    サーバーサイドへ任意のクエリを送信して情報を取得するためのHTTPメソッドが提案されている。具体的には、`selct surname, givenname, email limit 10`のようなクエリをcontentsに入れて送信できる。このメソッドを使うことで複雑なクエリを表現しつつ安全で冪等なリクエストが可能になる。
• Making Content Usable for People with Cognitive and Learning Disabilities
  • 認知や学習にハンディキャップのある人にも使いやすいコンテンツを作成するためのガイダンス

---

🎨 Design

• Respecting Users’ Motion Preferences
  • prefers-reduced-motion メディアクエリを利用して Web ページの視差効果を制御しようという話

---

👮‍♀️ Security

• 👀 Popular ‘coa’ NPM library hijacked to steal user passwords

---

📅 Events

• Speakers | React Conf 2021
  • React Conf 2021 の発表者が公開されました。
• Everything announced at Chrome Dev Summit 2021
  • Chrome Dev Summit のサマリー
• State of CSS 2021, TPAC breakout session
  • CSS に関するアンケート結果まとめ。ここの回答内容はブラウザベンダにも共有されるので、みなさん来年も回答しましょう。

---

🦆 Others

• Bundle Scanner - Identify NPM libraries included in Javascript files
  • ページ内のJSやライブラリの情報を可視化するサービス

    指定したWebページ内で読み込まれているJavaScriptファイルやライブラリのファイルサイズや読み込み元ホスト名を一覧表示できるサイト
• Layout patterns
  • CSSレイアウトパターンの一覧が掲載されたサイト

    Chrome Dev Summitの動画 (https://youtu.be/dhrX_biPH8c) の中で紹介されてたやつ。gridやflexboxを使って、少ない記述量で画面のレイアウトやカードコンポーネントのような実装パターンを紹介してる。Super centeredってパターンが必殺技っぽくてかっこいい。
• swc の Playground がキレイ
  • playground でコンパイル後のコードだけじゃなく AST も見れる
• web.dev Learn
  • CDS のタイミングで PWA、Forms、responsive design などの追加
• What’s new in Lighthouse 9.0 - Chrome Developers
  • user-flow API の追加やレポートのレイアウトが刷新
• Micro-Frontends Course - Beginner to Expert
  • 陽気なおっちゃんがライブコーディングでMicro-Frontendsのことを教えてくれる

    ボイラープレートのcliが用意されているので、webpackのModule Federationを簡単に試せるようになっててヨキでした
• How I made Google’s data grid scroll 10x faster with one line of CSS
  • DOM のレンダリングを調整できる CSS Contain を使って爆速にしたぞ！って話
• Type or Treat Challenges
  • Trick or Treat になぞらえて Microsoft が出題する TypeScript の型パズル
• How I help you build better websites
  • React Tesing library の作者でもある Kent C. Dodds が Remix の共同創業者に
  • 先日、Remix がリリース!
• Get started developing Progressive Web Apps
  • Meta Quest(Oculus Quest)が PWA に対応。PWA 化したものを Oculus 内で動かせるようになる
• Vercel welcomes Rich Harris, creator of Svelte – Vercel
  • Rich Harris が vercel に加入
• CDN のエッジで実行する系が面白い
  • CDNのエッジで実行する系の特徴や各サービスのユースケースをわかりやすくまとめられている記事

    Edge FunctionsやCloudflare Workers、Fastly Compute@Edgeなどを使ったコードのサンプルも含めて説明されている
• Rust Is The Future of JavaScript Infrastructure – Lee Robinson
  • swc や Deno、Rome の例からも将来的には JS のエコシステムには Rust が使われるんでは的な記事

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

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