Cybozu Frontend Monthly #12

イベント概要

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

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

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

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

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

開催日

2021年06月29日

イベントページ

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

配信URL

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

タイムテーブル

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

メンバー

ゲスト


紹介記事

レシピサービスのフロントエンドを Next.js と GraphQL のシステムに置き換えている話 - クックパッド開発者ブログ

  • 共有者: @hokaccha

10 年ものの Rails のフロントエンドを Next.js や GraphQL に置き換えているという話。どういう経緯でそういった意思決定に至ったのか、どういう基準で Next.js や GraphQL という技術を選定するに至ったか、リプレイスの結果どうだったのか、といった話ができればと思います。


SpiderMonkey | TC39 meeting, May 25-26 2021

主にすでにある程度成熟したプロポーザルについて議論が行われた。

Stage 4 になりたいプロポーザル

  • RegExp Match Indices

    • Stage 4 到達
  • Top Level Await

    • Stage 4 到達

Stage 3 になりたいプロポーザル

  • Symbols as WeakMap Keys

    • Stage 3 到達ならず
    • Global Symbol Registry や Well-known Symbol の扱いをどうするか
  • ResizableArrayBuffer

    • Stage 3 到達
  • Intl DisplayNames v2

    • Stage 3 到達
  • Object.hasOwn

    • Stage 3 到達
    • 過去最速の Stage 3 か?
  • Realms

    • Stage 3 到達ならず
  • Extend TimeZoneName Option

    • Stage 3 到達

Stage 3 の更新

  • Temporal

Stage 2 になりたいプロポーザル

  • Adopting Unicode behavior for set notation in regular expressions

    • Stage 2 到達

Stage 2 の更新

  • Intl Enumeration API update

レシピサービスのフロントエンドに CSS in JS を採用した話 - クックパッド開発者ブログ

  • 共有者: @hokaccha

上記のリプレイスの記事で詳しく説明しなかった CSS in JS の技術選定について。当初は styled-jsx を導入していて、その後 emotion に移行した経緯などについて書かれている。

その他にも emotion を使った CSS の書き方のルールや stylelint の導入、Jest と併用したテストなど、emotion を用いたプロジェクトの CSS 管理についての知見が紹介されている。


A Thorough Analysis of CSS-in-JS

  • 共有者: mugi

CSS-in-JS 用のライブラリは多く存在するが、それらが一般的に提供する機能や特徴を列挙して解説している記事。

個々のライブラリの Pros/Cons ではなく、あくまでも機能単位で説明されており 「CSS-in-JS って結局何ができるんだっけ?」をざっとおさらいできて良かったので紹介。

記事内で取り上げられている機能は次の通り。

  • Scoped CSS

    • スタイルをコンポーネント単位でスコープ化する
  • SSR (Server Side Rendering)

    • SSR 時のレンダリングに対応する
  • Automatic vendor prefixes

    • ベンダープレフィックスを自動付与する
  • No inline styles

    • インラインスタイルを利用しない
    • インラインスタイルでは疑似クラスなどは利用できない・パフォーマンスが低いなどの問題がある
  • Full CSS support

    • 疑似クラス・疑似要素やメディアクエリ、アニメーションなども含めて CSS プロパティをサポートする
  • React-specific or framework-agnostic?

    • React 特化、あるいは FW を選ばない
  • Styles/Component co-location

    • スタイルをコンポーネントと同一ファイルに記述できる
  • Styles definition syntax

    • スタイルの記述方法を提供する
    • タグ付きテンプレートリテラル or オブジェクト構文
  • Styles applying method

    • スタイルの適用方法を提供する
    • clsss 指定 / スタイル用コンポーネント / 独自のプロパティに指定(Emotion での css props)
  • Styles output

    • ブラウザ上でのスタイルの適用方法を提供する
    • <style> タグの挿入 / .css ファイルに抽出
  • Atomic CSS

また、これらをもとに CSS-in-JS のライブラリ選定基準について、いくつかの指針が整理されている。


GraphQL Code Generator で TypeScript の型を自動生成する - クックパッド開発者ブログ

  • 共有者: @hokaccha

これも上記のリプレイスの件の続き。GraphQL のスキーマから TypeScript の型を自動生成するときに使っているツールである GraphQL Code Generator の紹介と、具体的にクックパッドがどういったプラグインや設定で使っているかを解説している。

型を生成するのはフロントエンド向けとサーバーサイドの向けの 2 つがあってクックパッドでは今どちらに対しても型生成している。フロントエンド向けは型を生成するだけでなくて、GraphQL のクライアントも自動で生成できるのでクエリを書くだけで型付のクライアントが生成できてとても便利。一方サーバーサイドのほうは resolver の型が自動で生成できるのだけど、resolver のバックエンドが REST で、ここに型がないので強制的にキャストする必要があって不整合が起きる可能性があって運用としてはやや微妙になっている。


React v18 のロードマップとアルファリリース

  • 共有者: sakito

React v18 のロードマップとアルファリリースが発表されました。
下記のようなリリース予定らしく、うまくいくと年内には v18 がリリースされるようです。

  • Library Alpha: Available today
  • Public Beta: At least several months
  • Release Candidate (RC): At least several weeks after Beta
  • General Availability: At least several weeks after RC

現在は https://github.com/reactwg/react-18 のレポジトリ内にある Discussions でライブラリ作成者など、 React に関わる OSS を作成している人からのフィードバックを集めいてる状態です。

この Discussions 内にある、Announcement カテゴリを読むと React v18 の全体概要や機能について知ることができるので、v18 に興味ある人はまずこのカテゴリを見るといいと思います。

現在はまだアルファリリースなのでConcurrent Modeと呼ぶことははなくなったなど、基本的な用語の変化などを知っておくと情報のキャッチアップがしやすくなるかもしれません。

日本語でも記事を詳しく書いている人がいます。


Vue 3 の migration ビルドがリリースされた

  • 共有者: @nakajmg

Vue の v3.1.0 がリリースされました。このバージョンは Vue v2 との migration ビルドで、v2 で作られたアプリケーションを v3 で動かせるようになっています。ただし、v2 のアプリの依存をそのまま v3 にできるわけではなく、Vue を compatibility モードで起動する設定が必要になります。

copmatibility モードでアプリケーションを動かすと v3 では廃止となる機能などに対して warning が出るようになるので、warning を解消することで v3 への移行が進められるようになっています。

v2 のアプリケーションとの互換性があるのは公開 API に限定されていますので、プラグインが内部 API を利用してる場合には正しく動かないことがあるようです。

copmatibility モードの設定などについては公式のドキュメント(日本語訳)が参考になります。

ほか、v3 のリリース当初のプランでは IE11 の互換ビルドが出る予定でしたが、v3 は IE11 をサポートしないことになりました(Proposal for dropping ie11 support in Vue 3)。そのため IE11 をサポートするアプリケーションの場合、v3 の機能を一部 v2 へと移植してリリースされる予定の v2.7 を使うことになります。


Storybook 6.3

  • 共有者: shisama

Storybook 6.3 がリリースされたのでざっくりまとめです。

個人的には webpack 5 のサポートが stable になって嬉しいのですが、その他にも便利そうな機能や Storybook7.0 に関する言及もありました。

レイアウトに関する情報を確認することができる

ストーリーをテストで再利用できる

import React from "react";
import { render, screen } from "@testing-library/react";
import { composeStories } from "@storybook/testing-react";

// import Button stories file as a module
import * as stories from "./Button.stories";

// Every component that is returned maps 1:1 with the stories, but they already contain all decorators from story level, meta level and global level!
const { Default, Disabled } = composeStories(stories);

test("renders button with custom children", () => {
  render(<Default />);
  expect(screen.getByText(/Hello world/i)).not.toBeNull(); // Hello world is already defined in the story args!
});

webpack 5 サポートが stable になった

  • 6.2 では experimental だった
  • webpack 5 はまだ Opt-in 形式

    • デフォルトは webpack 4
    • @storybook/manager-webpack5 が必要
    • Storybook 7.0 からは webpack 5 がデフォルトになる
  • webpack 4 へのアップグレートに関する参考: https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324

ESModules を使った読み込み

  • --modernというオプションを付けて実行すると ESM が使われる
  • パフォーマンス
  • Storybook 7.0 から development mode は ESM がデフォルトになる予定

    • Storybook を IE から見る人いなければ影響はなさそう
    • 読み込み順序に依存している場合は壊れそう

その他追加機能

  • Angular 12 と Lit 2 がサポートされた
  • ビルドツールに Vite が使えるようになった

参考

  • 6.2 -> 6.3 のマイグレーションについてはMIGRATION.mdに記載されている
  • Storybook 7.0 については この issue にサマリーがある

Demystifying styled-components

  • 共有者: pirosikick

styled-components が内部でどのような処理を行っているかを分かりやすく解説している記事。 どのようにスタイルを挿入しているのか、継承はどのように実現しているのか、などを styled-components を簡略化したコードで説明していてよい。 本物のコードはおそらくもっと複雑だろうけど、これを見てなんとなくアテを付けた状態で読むとスムーズに理解できそう。 また、なんとなくどういう動作なのか分かっていると、うまくいかなかったときの解決がスムーズになりそう。


What Windows 11 Means for Developers

  • 共有者: @b4h0_c4t

Windows 11 が発表されました。 この記事では、Windows 11 で実現するいくつかの開発者向け改善について解説しています。

MS Store について

  • Win32 や.NET、PWA 等多くのアプリ形式への対応
  • Android アプリ対応(Amazon Appstore)
  • EC プラットフォームをパブリッシャーが設定できるように

E2E で行なわれる Web、ネイティブ開発の改善

Windows 11 上のアプリケーションだけで快適に開発ができるように

  • PWA Builder 3.0
  • WebView2 ランタイム
  • Windows Terminal
  • Microsoft Edge DevTools
  • Windows App SDK 1.0
  • ARM64 Emulation Compatible ABI

Fluent デザインシステムと WinUI

  • 生産性が高まるように UI を一新
  • スナップレイアウトが目玉
  • Reunion Windowing を用いて一般的な捜査の簡略化や light-dismiss の動作、PiP モード、タイトルバーのカスタマイズを容易に実現できる

ゲーム開発者向け新機能

  • Microsoft GDK の無料公開
  • DirectStorage を含めたコンソール機向けのゲームプレイ技術が Windows 11 で利用可能

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

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