Cybozu Frontend Monthly #1

イベント概要

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

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

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

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

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

開催日

2020年07月28日

イベントページ

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

タイムテーブル

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

メンバー


紹介記事

CSS Painting Order

  • 共有者: b4h0_c4t

DOM の描画順がどのように決定されるのかについて解説 記述順・z-index・Stacking Context が作用することについて言及した後、Overflow: scroll;スタイルを持った DOM が Stacking Context を形成しないことについて恣意的だと話している。 また、preserve-3d と transform を使用して Stacking Context の描画順を破壊する方法についても触れている。(FireFox では再現しない)


Storage for the web

  • 共有者: nakajmg

ブラウザのストレージの話。各ブラウザの保存容量制限値、制限値を超える場合の挙動やエラーハンドリングとデバッグについての解説。LocalStorage や Cookie ではなく IndexedDB や Cache Storage を使いましょうとのこと。web.dev/liveでこの記事を元にしたプレゼンがありました。

StorageManager を使うと使用率などが調べられる。

const estimate = await navigator.storage.estimate();
// 使用率
console.log((estimate.usage / estimate.quota) * 100);
// あどどれくらい使えるか
console.log(estimate.quota - estimate.usage);

参考


React Spectrum

  • 共有者: pirosikick

Adobe 製のデザインシステム、React Spectrum がいい感じなので紹介。 日本語の記事は以下がざっくり概要が書いておりわかりやすいです。

Adobe 製デザインシステム「React Spectrum」がすごいので紹介したい - Qiita

開発者が React Europe2020 で解説していた動画が以下。React Spectrum が何を考えて開発されたか話されています。 モバイルのスクリーンリーダー対応に苦労した話など、個人的には React Europe2020 のトークの中で一番おもしろかったです(全部観たわけじゃないないけど!)

Design system and accessibility - Devon Govett aka @devongovett at @ReactEurope 2020

a11y の実装が別パッケージになっており見た目の実装と分離されているのが特徴で、a11y 部分の react-aria が便利そうです。

モーダルの実装のサンプルコード

モーダルの実装のサンプルコードを見てみましたが、以下のようなパーツで構成されています。

  • FocusScope: focus の管理。子要素に focus し、unmount 後に focus を元の状態に戻す
  • usePreventScroll: スクロールの防止
  • useModal: モーダルの裏側にあるコンテンツをスクリーンリーダーから隠す
  • useOverlay: モーダルを閉じる動作の制御(ESC キー、モーダル外のクリック)
  • DismissButto: 視覚的に表示されないがスクリーンリーダーから見える閉じるボタン

    • 内部で VisuallyHidden コンポーネントが使われている
  • etc

パーツが多く個々の意味を理解しないと使いこなすのがやや難しそうですが、focus の管理などは自前で実装すると大変なのでありがたい!


Redux Essentials, Part 1: Redux Overview and Concepts

  • 共有者: sakito

Redux についての入門ページが追加された。 追加された理由についての Issue。 https://github.com/reduxjs/redux/issues/3674

Redux について何も知識がなくても、Redux について理解ができるように、既存のチュートリアルよりも前の段階で行うチュートリアル。

ちなみに Redux は現在ドキュメントページ全体の改善に取り組んでおり、今回のドキュメントの更新はその作業の1つになります。 https://github.com/reduxjs/redux/issues/3592

以下はちょっとした説明。

  • Part1 Redux の用語、周辺ライブラリ、Redux のデータフローなど Redux について必要な知識の説明。
  • Part2 Redux Toolkit、Redux hooks を使用し、Redux devtool、Immer、Redux-thunk を説明しつつカウンターアプリを作成する。
  • Part3 Part2 で使用した基本的な知識の応用として、フィードアプリを作成する。
  • Part4 Part3 の続き。Redux のデータのやりとりを学ぶような実装を加える。
  • Part5 Part4 の続き。Redux Toolkit の createAsyncThunk を使用して非同期処理を加える
  • Part6 Part5 の続き。React DevTools Profiler と createSelector を使用し、レンダリングの改善を行う。 Redux Toolkit の createEntityAdapter を使用し、データの最適化を行う。

Streaming requests with the fetch API

  • 共有者: shisama_

Chrome 85 から Origin Trial が開始したfetch()の Upload Streaming Requests の解説記事。 fetch API のリクエストボディに Stream を渡すことができるようになる。 一度のリクエストで chunk でデータを送ることができるようになって Stream が閉じられるまではレスポンスは返ってこない。 例えば、映像や音声など大きなデータを送りたいときに一気に送らずに少しずつ送ることができたり、リアルタイムなチャットを作ったり、 これまで WebSocket でできたことが、HTTP でできるようになる。


Svelte <3 TypeScript

  • 共有者: @toshi__toma

Svelteが TypeScript を公式にサポート。 Svelte での TS サポートについてや、新規プロジェクトや既存のプロジェクトのセットアップ方法など。

svelte-ts-sample.svelte

<script lang="ts">
	let count: number = 0;
	const increment = () => {
		count += 1;
	}
</script>

<style>
	h1 {
		color: purple;
		font-family: 'Comic Sans MS', cursive;
		font-size: 2em;
	}
</style>

<h1>Count: {count}!</h1>
<button on:click={increment}> + </button>

新規でプロジェクトを作る際は、公式のテンプレートに setup スクリプトが用意されている。

これまでも、有志が開発したツールとして svelte-preprocessVSCode Extensionがあったので、TypeScript で開発は可能だった。 今回、それらのツール郡が公式の Org 配下に入って、公式に TypeScript をサポートした。

  • svelte-preprocess

    • Svelte のプリプロセッサ
    • TypeScript 以外にも SCSS, CoffeeScript などもサポートしてる
  • svelte-language-server

    • Svelte の LSP
  • svelte-vscode

    • VSCode 拡張(Svelte for VS Code)
    • 補完や型エラーの表示など快適に開発できる
    • テンプレート部分でも補完や型チェックなどが効くよ
  • svelte-check

    • CLI のチェックツール
    • 利用されてない CSS や a11y、TS の型チェック
  • svelte2tsx

    • Svelte コンポーネントを TSX に変換する
    • テンプレートの attribute やコンポーネントの props の型チェック(svelte-jsx.d.ts, svelte-shims.d.ts)を実現するために使ってるっぽい
  • @tsconfig/svelte

    • Svelte プロジェクト用の tsconfig

手元のプロジェクトで試した感じ簡単にセットアップできるし、快適に開発できそう。パフォーマンスと DX が両立されてる感じ。


Building better in the world of build tools!

  • 共有者: zaki___yama

web.dev LIVE のセッション。 webpack, Parcel, Rollup などのビルドツールの特徴や長所・短所の話。

印象に残ったエピソードとしては 7:00 あたりの

  • Q. Parcel はメインスレッド用と Worker 用のバンドルに重複したモジュールがあるとき、うまく解釈して共通のチャンクに切り出してるみたいだけど、なんか理由あるの?
  • Squoosh.app という Web アプリを作ってたとき、webpack だと Worker と Main 用のバンドルに重複したコードが存在することがわかった

    • 本当は共通の chunk に切り出してほしい
  • webpack に長文の issue を立てて、どう変更してほしいか説明した

  • webpack 側は解決してないけど、issue 立てた直後、Parcel のメンテナーが「これ Parcel だとうまくできるかも」と言って issue を立ててた
  • 数ヶ月後に close されてて、Parcel ではサポートされている

という話。

また、最後に紹介されていた Tooling.Report というサイトが便利そう。 webpack や Rollup などのビルドツールの機能差異がまとまっている。 各機能(tree shaking とか)をサポートしてるかどうかテストが書かれてて、それらをリファレンス実装として参考にすることもできる


HTMHell special: close buttons

  • 共有者: b4h0_c4t

a11y から見た、「閉じるボタン」の実装でやりがちなバッドプラクティス 11 選。

  1. div and background image
  2. div and icon
  3. Font Awesome icons
  4. A close link
  5. A close link with text
  6. A close link without the href attribute
  7. Placeholder link and img
  8. Radio button
  9. Button with icon
  10. Button with svg
  11. The good ol' X

要約すると

  • <button>を使う

    • <div>はボタンではない
    • <a>は button ではない
    • <input type="radio">はボタンではない
  • 適切なコンテンツを埋め込む

    • FontAwesome のアイコンは読み上げられない
    • ×xは閉じるという意味ではない
    • svg は代替テキストを持たない
  • FontAwesome や'x'をどうしても使いたい場合

    • x や FontAwesome にaria-hidden=trueを付ける
    • 代替文字列を入れる
    • 文字を併記する場合: <span>で読み上げテキストを表現
    • 文字を見せたくない場合: <button>aria-labelを追加

名言

Using "x" for your close buttons is like using salt in your coffee cause it looks the same as sugar.


Vue 3 is now in RC!

  • 共有者: nakajmg

Vue3 が RC になりました。8 月中旬くらいにリリース予定! Vue は公式のツール郡が魅力の 1 つですが、それらツールの Vue3 対応が必要で正式リリースまで時間がかかっているとのこと。

IE11compatbuild とか migration のガイドが準備中で、Vue2 から Vue3 にアップグレードするのはこれが出てからにするとよさそう。Vue 3: Mid 2020 Status Update にある Decision Tree を見ればどのタイミングで Vue3 を使い始めるのがいいかの判断材料に。

SFC Improvements

experimental な機能として次の機能が rc 版に入りました。

  • <script setup>
  • <Suspence>
  • <style vars>

うーん!


JavaScript の生みの親ブレンダン・アイクが JavaScript の呼び方について言及した話

  • 共有者: @pirosikick

小ネタ。JavaScript の生みの親ブレンダン・アイクは、「Java」と混同しない、かつ、より短い呼び方の「JS」がよいと思っている。

  • ことの発端の Tweet

    • 「もし JavaScript を rename する機会があったら、何にする?」
    • 途中でブレンダン・アイクにメンションが飛ぶ("You Don't Know JS"の人)
    • ブレンダン・アイク登場

Grunt 1.2.0 released

  • 共有者: sakito

Grunt 一時期止まっていたけど、2020 年 3 月あたりから生き返ってたんですね。


Node v14.6.0 (Current) | Node.js

  • 共有者: @shisama_

今月の Node.js のアップデート情報です。 package.json に "imports" フィールドが追加されました。これはモジュールに対して alias を貼ることができる機能です。 また、"exports" フィールドのように実行環境ごとに読み込むファイルを変えることもできます。 以下の例だと #dep という alias に対して Node.js だと "node_modules/dep-node-native" を読み込み、それ以外は "./local-polyfill.js" を読み込みます。

  "imports": {
    "#dep": {
      "node": "dep-node-native",
      "default": "./local-polyfill.js"
    }
  },

How to delete all node_modules directories from your computer

  • 共有者: @toshi__toma

小ネタ。PC ローカルのnode_modulesを全部消す方法!!

確かに、PC に大量のnode_modulesあるなぁと思った。 PC のどっかに同じパッケージを既にインストールしてるなら、そっち参照してくれたらエコだなーとか雑に思う。 ghq でリポジトリ管理してるひとは、ディレクトリ指定して、簡単に自分の PC の node_modules のサイズ確認/削除できる。

予想以上に結構多かったw


Rust for JavaScript Developers - Tooling Ecosystem Overview

  • 共有者: zaki___yama

JS 開発者向けの Rust の話。 個人ブログにシリーズものとして連載してて、今 4 回め。 リンクしたのは第 1 回目のツールの対比、Rust 勉強し始めたときに知りたかった。 2 回目以降はデータ型や関数などが JS と Rust でどう違うかなどの話っぽい。


Creating a Design System in React

  • 共有者: @pirosikick

Bit というデザインシステムを構築・配布するようにサービスを使って、デザインシステムを構築する話。 https://bit.dev/

デザインシステムで各コンポーネントを個別で開発・publish・利用・更新するのを楽にしてくれる CLI ツール(bit-bin)と、 bit.dev 上でドキュメントの公開や動作検証ができるようです。 自分で monorepo を構築して管理するのは結構大変ですが、

  • bit add src/components/*
  • bit export 名前 でコンポーネント毎に publish できるのはさくっとできてよさそう。(記事中の Gif がわかりやすい) Bit に依存しすぎると後々辛くなりそうですが、個人&public であれば無料で使えるみたいなのでちょっと使ってみるにはよさそうでした。

余談:↑ の Medium、JavaScript in plain english というブログで、シンプルな英語で読みやすい記事が多そうでした。


今月の JSer.info

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

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

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