Cybozu Frontend Monthly #1

タイトル画像

イベント概要

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

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

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

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

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

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

開催日

2020年07月28日

イベントページ

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

メンバー

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

コンテンツ

CSS Painting Order

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

Storage for the web

ブラウザのストレージの話。各ブラウザの保存容量制限値、制限値を超える場合の挙動やエラーハンドリングとデバッグについての解説。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

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 が便利そうです。

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

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

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

Redux Essentials, Part 1: Redux Overview and Concepts

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

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

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

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

Streaming requests with the fetch API

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

Svelte <3 TypeScript

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-preprocessやVSCode Extensionがあったので、TypeScript で開発は可能だった。 今回、それらのツール郡が公式の Org 配下に入って、公式に TypeScript をサポートした。

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

Building better in the world of build tools!

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

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

という話。

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

HTMHell special: close buttons

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

要約すると

名言

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!

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

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

SFC Improvements

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

うーん！

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

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

Grunt 1.2.0 released

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

Node v14.6.0 (Current) | Node.js

今月の 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

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

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

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

Rust for JavaScript Developers - Tooling Ecosystem Overview

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

Creating a Design System in React

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

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

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

今月の JSer.info

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

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

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