Cybozu Frontend Monthly #3

イベント概要

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

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

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

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

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

開催日

2020年09月29日

イベントページ

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

配信URL

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

タイムテーブル

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

メンバー

ゲスト


紹介記事

Introducing the New JSX Transform

  • 共有者: b4h0-c4t

React v17 から JSX 使用時に React の defalult import をしなくても良くなった話。

これまでは、JSX の解釈は React.createElement へ変換することで行われていたが、今回のアップデートで babel 等のパーサーが JSX を変換するためのエントリーポイントが追加された。

これによって JSX のランタイムが React と分離したため、JSX を利用するための(不要な他のインポートに掛かる)負担が減った。やったね。

TypeScript v4.1-bataとかFlow v0.126.0とかbabel v7.9.0が既に対応済み。

eslint-plugin-react を使ってる場合は、 react/jsx-uses-reactreact-in-jsx-scope を外しておこう。


Vue の v3 がリリースされた

  • 共有者: nakajmg

Vue の v3.0.0 がリリースされました 👏

色々変更あり

  • コアの機能がそれぞれモジュール化された

  • TypeScript 対応が向上

    • composition API の追加
    • 型推論がよく効くように
    • vetur(vscode の拡張)が強化
    • tsx サポート
  • パフォーマンス向上

    • バンドルサイズ/初期・更新レンダリング/メモリ使用量
  • Fragments の追加(ルート要素が複数おけるように)
  • Teleport の追加(vue-portal でやってたやつ)。React の Portal 相当
  • experimental な機能追加

    • <script setup>: setup の糖衣構文(きもい
    • <style vars>: js の値を css variables にして使えるようにするやつ
    • <Suspense> コンポーネント

v2 からの移行について

migration guide があります。破壊的な変更について細かく書かれているので要チェック。syntax にも細かい変更が多くあるので目を通しておくとよいかと思います。

  • Vue.config とかがインスタンス経由で使うように
  • templatev-for するときの key を付ける場所が変更
  • Functional コンポーネントが React の Function コンポーネントぽく関数で定義するように
  • lifesycle hook の名前変更あり
  • filter の廃止
  • $on $off $once の廃止

などなど。migration ビルドと、IE11 対応ビルドのリリースは予定が後ろにずれるとのこと。LTS となるv2.7で廃止になった機能の警告とかが入る模様。


MDN Browser Compatibility Report 2020

  • 共有者: pirosikick

2020 年 2 月~3 月に MDN 上で行われたブラウザの互換性に関するサーベイのリポート(2020 年版ということは去年もやってた?)。 全部読むと長いので、Summary や Findings を読むとよいかもです。

  • 開発者が課題に感じていること

    • レイアウト(Flexbox、CSS Grid、ブラウザ間で動的な Viewport 時の一貫したレイアウトの実現など)
    • JavaScript への言及が多かったが、言語のそのものより、Web API の互換性で苦労している人が多い
  • 互換性の課題が最も多かったのは IE と Safari
  • サーベイで発見した一部の課題はベンダーに共有済みで、すでに改善されているものもある

    • Webkit、Chromium における Flexbox, CSS Grid の改善
    • MDN へのブラウザ互換性情報の反映

Working with Media - Designing in the Browser

  • 共有者:sakito

2019 年 10 月から始まった CSS、フォント、デザインシステム、アクセシビリティなどを取り扱ったGoogle Chrome Developers の連載シリーズの一部です。 (毎回犬がでてくるから好き)

約 1 年ほど休止してましたが、再開したようで、今回は連載シリーズの最新動画の内容の共有になります。

今回の動画はaltについての説明です。

altで説明を加えることはスクリーンリーダー、検索エンジンに伝えるためにも重要。

この例では、画像のaltに「犬」という説明ではなく、犬の様子や背景、どこにいるか伝える必要があると説明されている。

少しコンテンツが変わったこの例では、文章の補語的な意味合いでaltを使用しています。 このようにコンテンツによってaltを考えようという説明です。 コンテンツがかなり詳細に記されている場合はaltが不要な場合もあると説明もありました。

figure タグでキャプションの説明を追加するのもコンテンツとして良い。

video には::cueなどの css を使ったりして、よりサイトにあったコンテンツにしましょうとの説明も。

よりアクセシビリティの高いスタイリングの勉強になった


Supporting ESLint's dependencies

  • 共有者: __sosukesuzuki

ESLint が自身が依存するライブラリAjv11ty、そして個人開発者Sindre Sorhusに対して月$100 の寄付を始めた話。


ReadSpecWith.us

  • 共有者: shisama

JavaScript の動作を ECMAScript の仕様を読みながら解説していく動画です。 ECMAScript Dailyに最近掲載されて知ったのですが、7 月に初回があって現在 4 つの動画が投稿されています。 2~3 週間に 1 回ぐらいのペースで投稿されています。

たとえば、次のようなコードの挙動を ES の仕様を基に動作を解説していきます。

let arr = [];
arr[null] = "foo";
arr.length; // lengthの値は?arrの中は??どうやったら'foo'って値を取得できる??
arr[100] = "meow";
arr.length; // lengthの値は?arrの中は??

上記の問題は初回の Exotic Array Objects の動画で解説がされています。
仕様: https://tc39.es/ecma262/#sec-array-objects

他にも次のようなコードについて解説された動画が上がっています。

let arr = [42, 420, 840, 123];
Object.defineProperty(arr, "1", { value: 9, configurable: false });
arr.length = (0)[(1, 2, 3)] // arrの値は?
  .map((v, i, a) => {
    a[10] = 100;
    return v * 2;
  });
// このmap関数の結果は?

[1] in
  ["a"][(1, 2)] in // true or false?
  ["a", "b"]; // true or false?

ECMAScript の仕様読解の慣れにも良さそうと感じました。


DevTools architecture refresh: Migrating to JavaScript modules

  • 共有者: toshi-toma

Chrome DevTools のコードベースを独自のモジュールシステム(module.json)から ES Modules へ移行した話。 現状の問題点や、ESModules へ移行することによるメリット、どのように移行を検討し、どのようにそれを進めたかが具体的に書いてあって面白かったです。

  • いまは ES Modules やそれをサポートするツールがあるけど、DevTools を構築した当時はそんなものはなかった
  • 独自のモジュールシステムを使うということは、ビルドツールやエディタのサポートが無かったり、グローバルオブジェクトを使うアプローチやファイルの読み込み順序などの問題を抱えることになる
  • コスト分析などもした結果、ES Modules へ移行することにした
  • 当初は、2-4 週間の計画だったけど、実際は 7 ヶ月かかった

    • 予期していなかった技術的負債により、想定外の時間がかかったり、事前にリファクタリングが必要だった
  • export フェーズと import フェーズの大きく 2 フェーズに分けて段階的に移行した

    • 各モジュールの進捗はスプレッドシートで管理した
    • 変換はフォルダごとに自動スクリプトを実行するようにした

大規模なコードベースの移行について、問題の洗い出しから、コスト分析、移行のデザインドキュメント作成、事前のリファクタリング、段階的な移行、バグがでないような配慮など、具体的な話が多く学ぶ点が多かった。

標準にのっておくことのメリットや、大規模な移行はなるべく避けたいなと改めて思いました。


Introducing Source Order Viewer in the Microsoft Edge DevTools - Microsoft Edge Blog

  • 共有者: @zaki___yama

Edge の DevTools に実装中の Source Order Viewer という機能の紹介です。

どんな機能?

Web サイトに表示されている要素の「HTML ドキュメント上の順番」を可視化する機能です。

たとえばこういったサイトが

source-order-viewer-before

このように表示されます。

source-order-viewer-after

Demo: https://source-order-viewer-playground.netlify.app/
(記事中の CodePen のデモサイトを Netlify でデプロイし直したもの。タブキーでフォーカス移動すると見た目とは逆順にフォーカスが移動します)

背景・モチベーション

CSS Grid や Flexbox などの登場により、より柔軟に Web サイトのレイアウトをデザインできるようになりました。
結果として HTML ドキュメント上のコンテンツの順序と見た目が乖離したサイトも作れるようになりましたが、コンテンツの順序はスクリーンリーダーでの読み上げなどを考慮したときに重要です。

見た目だけでなくコンテンツの順序としても意味が伝わるようになっているかをチェックするための機能、ということのようです。

いつ利用できるようになるの?

Edge または Chrome の Canary チャンネルで試すことができます。
DevTools の Settings > Experiments > Source order viewer を有効化する必要があります。

使ってみた感想

サイト全体でなく、Elements タブで選択した要素の子要素にしか表示されないので、ピンポイントで気になるところをチェックするような使い方になるんでしょうか。

source-order-viewer-use1

source-order-viewer-use2

余談

このブログが公開された数日後、Firefox にも似たような機能が実装されそうだというツイートが。
https://twitter.com/FirefoxDevTools/status/1306296774903189506?s=20

で、 @EdgeDevTools がリプライで「両者は目的が異なるものだ」という説明をしています。
Firefox のほうはタブフォーカスの順序を可視化する機能で、Edge のはあくまでソース上の順序を可視化する機能である、と。 (デモはたまたまタブ移動の順序とソースコードの順序が一致しててわかりにくかった)


The State of Nuxt

  • 共有者: nakajmg

nuxt3 についてのスライド。vue v3 に対応しつつ色々と変更予定。fetch がコンポーネントレベルで使えるようになったり、 useFetch のような hooks を用意してたり、composition API 対応がされるそうです。


Workers Durable Objects Beta: A New Approach to Stateful Serverless

  • 共有者: teppeis

Cloudflare の CDN エッジで動作するサーバーサイド JavaScript である Cloudflare Workers で、データの永続化と worker 間通信が可能になる仕組みである Durable Objects がベータリリースされた。 同時に Cloudflare Workers で WebSocket もサポート。 これらにより、例えばデータが永続化されるリアルタイムチャットやアトミックカウンターをエッジのみで実装でき、可能性無限大。


今月の JSer.info

毎週のフロントエンドウィークリーでは、各メンバーからの共有以外にもJSer.infoを確認しています。いつもお世話になっています 🙌


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

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