Cybozu Frontend Monthly #2

イベント概要

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

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

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

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

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

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

開催日

2020年08月25日

イベントページ

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

配信URL

https://www.youtube.com/watch?v=6r_ltoTwg4M

メンバー

コンテンツ

The Just in Case Mindset in CSS

共有者: b4h0_c4t

よくあるデザインコンポーネントで発生しがちなデザイン乱れのシナリオをまとめた記事。この記事では主に、コンポーネント内部に想定外の長さやコンテンツが挿入された場合のシナリオについて触れている。

コンポーネント 1 つにつき CSS1-5 行程度のシンプルな解説ですが、こういう細かいところにも気を使っていきたいという強い気持ちを持って共有します。実際、こういったケースは知らないと対応のしようがないので全人類知っていこう 💪

A Complete Guide to Dark Mode on the Web

共有者： nakajmg

Web サイトをダークモードに対応させるための Tips やアプローチのまとめです。 prefers-color-scheme を使ってシステム設定をもとに対応する方法は広く知られるようになってきましたね。ユーザのシステム設定に合わせてテーマを切り替えること自体は難しくないですが、ユーザがシステム設定をダークモードにしていることが Web サイトをダークモードで見たいことと等価ではないことを考慮したほうがよいと記事内では言及しています。システムの設定を見つつ、Web サイト上でもテーマをトグルできるような実装が親切で、加えて切り替えた内容を保持するようにしておくとよいとのことです。

また、ダークモードはただ色調を反転させただけでは文字や画像のコントラストなどが優しくない・調和が取れていないことがあるので、どういった調整をするとよいかについてもふれています。

You May Finally Use JSHint for Evil

共有者: pirosikick

JSHint のライセンス変更について。以前は一部のファイルが JSON License で提供されておりフリーの OSS とは言えない状況だったが、2.12.0 で完全に MIT ライセンスに変更された。ライセンス変更が完了するまでの話を 4 つのエッセイで説明している。該当ファイルのコントリビューター全員に許諾を取ろうとしたがどうしても連絡がつかない人が居たので、その人達が当てたパッチを完全に書き換えることで対応したらしい（読み違えてたら申し訳ない）。読み応えのある記事で、面白かったです。よくやりきったな〜と思いました。

React v17.0 Release Candidate: No New Features

共有者: sakito

React v17 のリリース。新しい機能は無いが、Concurrent Mode に向けてバージョンアップしておきたい。 v17 からアプリ内の React のバージョンを段階的にアップグレードできるようになったので、 Concurrent Mode が入るであろう v18 の前には対応しておいて、バージョンアップに選択肢を持たせることができる。

イベント周りや useEffect の cleanup で破壊的変更は入っているので、余裕をもって v17 にあげるのがいいと思う。

What’s New In DevTools (Chrome 86)

共有者： @toshi__toma

Chrome 86 の DevTools 情報。結構盛りだくさんだった。

メディアプレーヤーの情報を確認できる「Media」パネルの追加。エミュレート系の機能がいくつか入ってる。(Idle/screen lock, prefers-reduced-data, missing local fonts)

Element パネルから、特定の DOM ノードのスクリーンショットが簡単にできるようになった。アクセシビリティ系は、カラーピッカーでコンストラストに問題のある色はサジェストしてくれる。準拠レベル AA および AAA の色の提案が表示され、クリックすると適用される。あと、Application パネルの Service Workers ペインに他のオリジンの情報も表示されてたけど、それが無くなったの嬉しい。

Enabling Custom Control UI

共有者: zaki___yama

<select> などのフォームコントロールを開発者がより柔軟にカスタマイズできるようにするというプロポーザルです。
Edge の Program Manager のツイートで知りました。

基本的なアプローチは以下のような 2 ステップになっており、

現在のコントロールの概念的なパーツやふるまい、各パーツの名称を仕様として標準化する
- 例: <select> は
  - 1 つの “button” + 1 つの “selected-value” + 1 つの “listbox” + 0~N 個の “option” で構成される
  - 期待するふるまいは
    - “button” がクリックされると “listbox” を表示する
    - “selected-value” は内部テキストを更新し、現在選択中の option の値を表示する
    - 開いているリストの外側をクリックするとリストは折りたたまれる
    - etc.
標準化されたパーツの名称と part という擬似要素・属性を使い、各パーツにスタイルを適用したり、開発者が作成したコンポーネントに置き換える
プロポーザル中では、カスタマイズの自由度に応じて 3 つの選択肢が紹介されている。
1. ::part(button) のように擬似クラスを使ってスタイルを適用する 2. 名前付き slot で任意のパーツを開発者が作成したコンポーネントと置き換える 3. attachShadow() でコントロールをまるっと開発者が作成したコンポーネントと置き換える

選択肢 ii の例として、

<style>
  .custom-button {
    /*...*/
  }

  option {
    /*...*/
  }

  .option-text {
    /*...*/
  }
</style>
<select>
  <div slot="button" part="button" class="custom-button">Choose a pet</div>
  <div slot="listbox" part="listbox" class="custom-listbox">
    <option>
      <img src="./cat-icon.jpg" />
      <div class="option-text">Cat</div>
    </option>
    <option>
      <img src="./dog-icon.jpg" />
      <div class="option-text">Dog</div>
    </option>
  </div>
</select>

のようなコードで、こういうカスタムドロップダウンが作れるようになります。

標準化された part 名を使っていれば、ふるまいやアクセシビリティに関してはプラットフォーム側がよしなに管理してくれるので
開発者は見た目のカスタマイズに専念することができる、ということのようです。

その他のメモはこちらに：https://dackdive.hateblo.jp/entry/2020/08/19/080000

Prettier 2.1: new —embedded-language-formatting option and new JavaScript/TypeScript features!

共有者: sosukesuzuki

コードフォーマッター Prettier の 2.1 のリリース。重要なメンテナの一人が急にいなくなってしまい、ブログの準備とリリースを自分がやることになってしまったバージョン。リグレッションを見つけた方は GitHub の Issue もしくは自分のツイッター(@__sosukesuzuki)に連絡をください。

`--embedded-language-formatting` オプションの追加。

Prettier は Tagged Template Literal を使った次のようなコードをフォーマットしますが、その挙動を制御することができるようになります。 Playground Link

// Input
html`
  <p>foo</p>
  <div>foo</div>
`;
// Output (--embedded-language-formatting=auto)
html`
  <p>foo</p>
  <div>foo</div>
`;
// Output (--embedded-language-formatting=off)
html`
  <p>foo</p>
  <div>foo</div>
`;

現在は auto と off の２つのオプションしかありませんが、Boolean で表現されていないことからわかるように、将来的には増える可能性があります。

TypeScript 4.0 のサポート。

TypeScript 4.0 から入った次の構文のフォーマットをサポートします。

Labeled Tuple Elements
Short-Circuiting Assignment Operators
Type annotations on catch clauses

Vue の SFC のカスタムブロックのフォーマットのサポート。

Vue の SFC 内の lang 属性付きのカスタムブロックのフォーマットをサポートします。一部の ESLint ルール(eslint-plugin-gridsome の format-query-block など)が不要になるかもしれません。 Playground Link

<!-- Input -->
<i18n lang="json"> { "hello": 'prettier', } </i18n>
<!-- Output -->
<i18n lang="json"> { "hello": "prettier" } </i18n>

Grids Part 1: To grid or not to grid

共有者: b4h0_c4t

Grid を使うか Table を使うかという話雑にまとめると、扱うデータがセル単位でインタラクティブな場合は Grid、全データで 1 つの意味になるような静的データを扱う場合は Table が良いという話だった。

定番のスクリーンリーダーから見たアクセシビリティの話やコンテキストによってこうあるべきみたいな話があって実用的に感じたので共有しました。

Microsoft 365 apps say farewell to Internet Explorer 11 and Windows 10 sunsets Microsoft Edge Legacy

共有者： nakajmg

Microsoft のサービスが IE11 のサポートを切るお話。 Microsoft Teams が 11/30 に、Microsoft 365 アプリが 2021/08/17 に IE のサポートを終了するとのこと。合わせて旧 Edge から新 Edge への移行も勧めている。

Microsoft がこういった方針を発表してくれたことで、ほかのサービス提供者も IE11 を切る方向に舵取りしやすくなるかも。ただし日本と国外で IE11 の利用率に差がありそうなのでそう簡単な話でもなさそうなところがアレですねぇ 👻

Generating UUIDs at scale on the Web

共有者: pirosikick

先月の記事だけど、面白かったので。前半は UUID のバージョンの違いと、クライアントサイドで UUID v4 を発行する方法。 URL.createObjectURL(new Blob())で UUID を得る方法は知らなかった。記事では、Crypto.getRandomValues（fallback としてMath.random） + Web Worker で実装。実装を A/B テストでテストしたところ、想定よりも生成した UUID が衝突するという結果に。調査すると、衝突の約 9 割は Googlebot（Google Mobile 41.0 で Mountain View の IP）、残りは PS Vita のブラウザなど。最初は UUID 生成する記事かと思ったけど、衝突の原因について突っ込んで調べていて面白かったです。

Storybook v6 リリース

共有者: sakito

Storybook のメジャーバージョンが更新されました。

この更新により、Storybook の TypeScript の設定が内部で持たれるので、TypeScript の設定が不要になりました。内部では fork-ts-checker-webpack-plugin を使用するようになり、fork-ts-checker-webpack-plugin の otion を拡張することができます。

// .storybook/main.js

module.exports = {
  typescript: {
    check: false,
    checkOptions: {},
    reactDocgen: "react-docgen-typescript",
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) =>
        prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
    },
  },
};

詳しくはこちらのドキュメントを見るのが良いです。 https://storybook.js.org/docs/react/configure/typescript

そのほかに addon のベストプラクティス的な@storybook/addon-essentialsが追加されたので、これを組み込むと storybook を便利にする addon が利用できます。

他にも多くの更新があるので、MIGRATION.mdを見るとよいです。

v6 とは関係ありませんが、v7 で config.js などの古い設定方法が廃止される予定です。 main.jsを使用する形に今から準備しておくといいと思います。

npm v7 Series - Beta Release! And: SemVer-Major Changes in npm v7

共有者： @toshi__toma

npm v7 の Beta。大きな変更点は、peerDependencies の自動インストール。依存が競合すると、エラーになるので、ユーザーは競合を修正するべき。ただそれを解除して従来どおりにインストールするのは、—logacy-peer-depsフラグを使う。数年間、正確性に欠けた状態に依存するようになったので、大変なパッケージとかもあるかも。

あとは内部的な変更(@npmcli/arborist, pacote)、Lifecycle Scripts の環境変数の大幅な変更、npx の代替となる、新しい npm exec コマンドの追加。

「Silence successful npm pre/post/install scripts」npm install とかやってる時にスクリプトが実行されてログが大量に出る系は、エラーで終了しない限りはサイレントになるの結構嬉しい。

他は、packge.json から _ prefix のメタデータが消える、yarn.lock ファイルのサポート、workspaes フォールドのサポートなどもある。互換性のある依存パッケージのバージョンを指定して、重複排除を可能にする acceptDependencies というのが新しく追加された。

共有者: zaki___yama

徳丸先生の Web セキュリティに関する動画です。
JS から Cookie にアクセスできなくする HttpOnly 属性ですが、XSS に対してはどれくらい有効なのかという解説です。

XSS で fetch や XMLHttpRequest が実行された場合、そのリクエストには Cookie が付与される
秘密情報を HTML 内に埋め込んでいる場合は、XSS で innerHTML を取得することで読み取れる

といった例を紹介し、XSS の緩和策ではあるものの完全な防御ではないことが示されていました

今月の JSer.info

毎週のフロントエンドウィークリーでは、各メンバーからの共有以外にもJser.infoを確認しています。いつもお世話になっています 🙌 今月で 500 回目の更新とのことです。おめでとうございます 🎉 JSer.info 500 回目の更新 - Slack ワークスペース作成、コラボレータ募集、10 年に向けて

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

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