# Frontend Monthly #1

## イベント概要

イベントページ: https://cybozu.connpass.com/event/180861/

| 時間 | タイトル |
| --- | --------|
| 18:50 - 19:00 | 配信開始 |
| 19:00 - 19:05 | オープニング |
| 19:05 - 19:55 | 本編(記事紹介) |
| 19:55 - 20:00 | クロージング |

ハッシュタグは、**[#サイボウズフロントエンドマンスリー](https://twitter.com/search?q=%23%E3%82%B5%E3%82%A4%E3%83%9C%E3%82%A6%E3%82%BA%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%83%9E%E3%83%B3%E3%82%B9%E3%83%AA%E3%83%BC)**

## チーム紹介


[@koba04](https://twitter.com/koba04) / [@pirosikick](https://twitter.com/pirosikick) / [@toshi__toma](https://twitter.com/toshi__toma) / [@zaki___yama](https://twitter.com/zaki___yama) / [@\_\_sakito\_\_](https://twitter.com/__sakito__) / [@shisama_](https://twitter.com/shisama_) / [@nakajmg](https://twitter.com/nakajmg) / [@b4h0_c4t](https://twitter.com/b4h0_c4t)

## フロントエンドウィークリー

毎週火曜の 17:00 〜 18:00 で社内向けに行っているフロントエンドの気になる記事を紹介する会です。2016年3月15日から行われています。

ハッシュタグは、**[#サイボウズフロントエンドウィークリー](https://twitter.com/search?q=%23%E3%82%B5%E3%82%A4%E3%83%9C%E3%82%A6%E3%82%BA%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E3%82%A6%E3%82%A3%E3%83%BC%E3%82%AF%E3%83%AA%E3%83%BC)**

-----
## [CSS Painting Order](https://abandonedwig.info/blog/2020/07/03/css-painting-order.html)
- 共有者: b4h0_c4t

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

-----
## [Storage for the web](https://web.dev/storage-for-the-web/)
- 共有者： nakajmg

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

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

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

参考
- [web.dev/live - Storage for the web](https://youtu.be/NNuTV-gjlZQ)
- [データの永続化](https://web.dev/persistent-storage/)
- [StorageManager - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/StorageManager)
- [Full Third-Party Cookie Blocking and More](https://webkit.org/blog/10218/full-third-party-cookie-blocking-and-more/)

-----

## [React Spectrum](https://github.com/adobe/react-spectrum)
- 共有者: pirosikick

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

[Adobe製デザインシステム「React Spectrum」がすごいので紹介したい - Qiita](https://qiita.com/so99ynoodles/items/bc924b7ee8c265b09723)

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

[Design system and accessibility - Devon Govett aka @devongovett at @ReactEurope 2020](https://www.youtube.com/watch?v=dxDcBB7Xoxs)

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

[モーダルの実装のサンプルコード](https://react-spectrum.adobe.com/react-aria/useDialog.html)

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

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

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

-----

## [Redux Essentials, Part 1: Redux Overview and Concepts](https://redux.js.org/tutorials/essentials/part-1-overview-concepts)
- 共有者: sakito

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

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

ちなみにReduxは現在ドキュメントページ全体の改善に取り組んでおり、今回のドキュメントの更新はその作業の１つになります。
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](https://web.dev/fetch-upload-streaming/)

- 共有者: shisama_

Chrome 85 からOrigin Trialが開始した`fetch()`の Upload Streaming Requests の解説記事。
fetch API のリクエストボディにStreamを渡すことができるようになる。
一度のリクエストでchunkでデータを送ることができるようになってStreamが閉じられるまではレスポンスは返ってこない。
例えば、映像や音声など大きなデータを送りたいときに一気に送らずに少しずつ送ることができたり、リアルタイムなチャットを作ったり、
これまでWebSocketでできたことが、HTTP でできるようになる。
- [fetch() upload streaming は WebSocket の代替になるのか。Fetch を使ってカメラから取得した映像をストリーミングで送信する - 別にしんどくないブログ](https://shisama.hatenablog.com/entry/2020/07/28/090000)

---

## [Svelte <3 TypeScript](https://svelte.dev/blog/svelte-and-typescript)
- 共有者： @toshi__toma

[Svelte](https://github.com/sveltejs/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をサポートした。

- [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess)
- Svelteのプリプロセッサ
- TypeScript以外にもSCSS, CoffeeScriptなどもサポートしてる
- [svelte-language-server](https://github.com/sveltejs/language-tools/tree/master/packages/language-server)
- SvelteのLSP
- [svelte-vscode](https://github.com/sveltejs/language-tools/tree/master/packages/svelte-vscode)
- VSCode拡張(Svelte for VS Code)
- 補完や型エラーの表示など快適に開発できる
- テンプレート部分でも補完や型チェックなどが効くよ
- [svelte-check](https://github.com/sveltejs/language-tools/tree/master/packages/svelte-check)
- CLIのチェックツール
- 利用されてないCSSやa11y、TSの型チェック
- [svelte2tsx](https://github.com/sveltejs/language-tools/tree/master/packages/svelte2tsx)
- SvelteコンポーネントをTSXに変換する
- テンプレートのattributeやコンポーネントのpropsの型チェック(svelte-jsx.d.ts, svelte-shims.d.ts)を実現するために使ってるっぽい
- [@tsconfig/svelte](https://github.com/tsconfig/bases/blob/master/bases/svelte.json)
- Svelteプロジェクト用のtsconfig

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

---

## [Building better in the world of build tools!](https://youtu.be/vsMJiNtQWvw)

- 共有者: zaki___yama

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

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

- Q. Parcel はメインスレッド用とWorker用のバンドルに重複したモジュールがあるとき、うまく解釈して共通のチャンクに切り出してるみたいだけど、なんか理由あるの？
- [Squoosh.app](https://squoosh.app/) というWebアプリを作ってたとき、webpackだとWorkerとMain用のバンドルに重複したコードが存在することがわかった
- 本当は共通のchunkに切り出してほしい
- webpackに長文のissueを立てて、どう変更してほしいか説明した
- おそらくこれ: [The case for Workers · Issue #6472 · webpack/webpack](https://github.com/webpack/webpack/issues/6472)
- webpack側は解決してないけど、issue立てた直後、Parcelのメンテナーが「これParcelだとうまくできるかも」と言ってissueを立ててた
- 数ヶ月後にcloseされてて、Parcelではサポートされている

という話。

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

---

## [HTMHell special: close buttons](https://www.htmhell.dev/20-close-buttons/)
- 共有者: b4h0_c4t

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

1. div and background image
1. div and icon
1. Font Awesome icons
1. A close link
1. A close link with text
1. A close link without the href attribute
1. Placeholder link and img
1. Radio button
1. Button with icon
1. Button with svg
1. 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!](https://github.com/vuejs/rfcs/issues/189)
- 共有者： nakajmg

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

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

#### [SFC Improvements](https://github.com/vuejs/rfcs/pull/182)

experimentalな機能として次の機能がrc版に入りました。
- `<script setup>`
- `<Suspence>`
- `<style vars>`

うーん！

---

## [JavaScriptの生みの親ブレンダン・アイクがJavaScriptの呼び方について言及した話](https://twitter.com/BrendanEich/status/1278803332287483904)
- 共有者： @pirosikick

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

- [ことの発端のTweet](https://twitter.com/runhappylife/status/1278360272231641088)
- 「もしJavaScriptをrenameする機会があったら、何にする？」
- 途中でブレンダン・アイクにメンションが飛ぶ（"You Don't Know JS"の人）
- ブレンダン・アイク登場

---

## [Grunt 1.2.0 released](https://gruntjs.com/blog/2020-07-03-grunt-1.2.0-released)
- 共有者: sakito

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

---

## [Node v14.6.0 (Current) | Node.js](https://nodejs.org/en/blog/release/v14.6.0/)
- 共有者： @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](https://gomakethings.com/how-to-delete-all-node_modules-directories-from-your-computer/)
- 共有者： @toshi__toma

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

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

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

---

## [Rust for JavaScript Developers - Tooling Ecosystem Overview](http://www.sheshbabu.com/posts/rust-for-javascript-developers-tooling-ecosystem-overview/)

- 共有者: zaki___yama

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

---

## [Creating a Design System in React](https://medium.com/javascript-in-plain-english/creating-a-design-system-in-react-5c4d811d0ccc)
- 共有者： @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://jser.info/)を確認しています。いつもお世話になっています🙌

- [2020-07-06のJS: Firefox 78、Vue 3 Statusとリリーススケジュール](https://jser.info/2020/07/06/firefox-78-vue-3-status/)
- [2020-07-14のJS: fastify 3.0.0、The future of hapi、Malina.js、Solid.js](https://jser.info/2020/07/14/fastify-3.0.0-the-future-of-hapi-malina.js-solid.js/)
- [2020-07-21のJS: Chrome 84(SameSite Cookie)、Vue 3 RC、React Spectrum](https://jser.info/2020/07/21/chrome-84samesite-cookie-vue-3-rc-react-spectrum/)
- [2020-07-28のJS: SvelteのTypeScriptサポート、Chrome 85 beta、Web Speed Hackathon Online](https://jser.info/2020/07/28/sveltetypescript-chrome-85-beta-web-speed-hackathon-online/)

## 宣伝
[チーム紹介資料](https://speakerdeck.com/cybozuinsideout/hurontoendoekisupatotimunituite)