Cybozu Frontend Monthly #3

タイトル画像

イベント概要

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

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

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

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

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

zennのpublicationにてウィークリーのまとめも投稿していますので、ぜひこちらもご覧ください。 https://zenn.dev/p/cybozu_frontend

開催日

2020年09月29日

イベントページ

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

配信URL

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

メンバー

@koba04@koba04
@pirosikick@pirosikick
@toshi__toma@toshi__toma
@zaki___yama@zaki___yama
@__sakito__@__sakito__
@shisama_@shisama_
@nakajmg@nakajmg
@b4h0_c4t@b4h0_c4t
@__sosukesuzuki@__sosukesuzuki

ゲスト

@teppeis@teppeis

コンテンツ

Introducing the New JSX Transform

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-react と react-in-jsx-scope を外しておこう。

Vue の v3 がリリースされた

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

色々変更あり

v2 からの移行について

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

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

MDN Browser Compatibility Report 2020

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

Working with Media - Designing in the Browser

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

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

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

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

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

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

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

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

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

Supporting ESLint’s dependencies

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

ReadSpecWith.us

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

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

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

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

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

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

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

Workers Durable Objects Beta: A New Approach to Stateful Serverless

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

今月の JSer.info

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

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

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