Cybozu Frontend Monthly #12

タイトル画像

イベント概要

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

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

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

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

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

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

開催日

2021年06月29日

イベントページ

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

配信URL

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

メンバー

@koba04@koba04
@pirosikick@pirosikick
@__sakito__@__sakito__
@shisama_@shisama_
@nakajmg@nakajmg
@b4h0_c4t@b4h0_c4t
@__sosukesuzuki@__sosukesuzuki
@mugi_uno@mugi_uno

ゲスト

@hokaccha@hokaccha

コンテンツ

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

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

SpiderMonkey | TC39 meeting, May 25-26 2021

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

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

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

Stage 3 の更新

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

Stage 2 の更新

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

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

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

A Thorough Analysis of CSS-in-JS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 になった

ESModules を使った読み込み

その他追加機能

参考

Demystifying styled-components

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

What Windows 11 Means for Developers

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

MS Store について

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

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

Fluent デザインシステムと WinUI

ゲーム開発者向け新機能

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

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