Cybozu Frontend Monthly #17

イベント概要

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

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

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

※フロントエンドウィークリーとは

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

開催日

2021年11月26日

イベントページ

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

配信URL

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

タイムテーブル

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

メンバー


紹介記事

👀 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)


💬 Languages


⚒️ Libraries / Frameworks


🖥 Browsers


📏 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


👮‍♀️ Security


📅 Events


🦆 Others

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

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