Daiki Urata

Fusicフロントエンド座談会 from 雅 2024/04/18

#frontend #javascript #team-miyabi

2024/04/23

Table of Contents

はじめに
前回の記事
議事録

はじめに

みなさんこんにちは、フロントエンドチーム「雅」の浦田です。「Fusicフロントエンド座談会」は、Fusicのフロントエンドチーム「雅」が、チーム内で気になった記事や技術情報を共有し、ちょっとだけ深ぼりしていく会です。

この座談会を始めてなんと1年が経ちました！流れの速いフロントエンド業界ですが、これのおかげでチームみんながキャッチアップできたと思いますのでこれからも続けていきます。

前回の記事

Fusicフロントエンド座談会 from 雅 2024/03/25

こんにちは、フロントエンドチーム「雅」の夛田です。「Fusicフロントエンド座談会」は、Fusicのフロントエンドチーム「雅」が、チーム内で気になった記事や技術情報を共有し、ちょっとだけ深ぼりしていく会です。今回で十四回目です。よろしくお願いします。

tech.fusic.co.jp

議事録

translate、rotate、scaleの独立プロパティ

えっ！？まだtransformプロパティを使ってるの！？ – TAKLOG

transformは与えられた要素に移動(transform)、拡大縮小(scale)、回転(rotate)、傾斜(skew)などの変形を適応させるCSSプロパティですが、傾斜以外は現在では独立したプロパティで指定することができます。

www.tak-dcxi.com

/* これが */
.sample {
  transform: translateX(12px);
  transform: rotate(45deg);
  transform: scale(1.2);
}

/* こうなる */
.sample {
  translate: 12px;
  rotate: 45deg;
  scale: 1.2;
}

translate、rotate、scaleの独立したプロパティの使い分けについて解説
独立したプロパティを使う利点はアニメーションの管理が容易になり、記述が簡潔になる
transformプロパティと併用も可能
主要ブラウザ全てでサポートされている

iPadOS 17.4でQRコードがスキャンできない

If your iPad is unable to scan QR codes after updating to iPadOS 17.4 - Apple Support

After updating to iPadOS 17.4, the iPad models listed below may be unable to scan QR codes using the Camera app or 3rd party apps that use the camera.

support.apple.com

17.4以降、iPadでQRが読めない可能性あり
サードパーティー製のアプリも対象
対象デバイス
- iPad (7th Generation)
- iPad (6th Generation)
- iPad Pro 12.9-inch (2nd Generation)
- iPad Pro 10.5-inch

TypeScriptにArray.filterでType Guardが効くようになるPRがマージされた

x.com

Infer type predicates from function bodies using control flow analysis by danvk · Pull Request #57465 · microsoft/TypeScript

Fixes #16069 Fixes #38390 Fixes #10734 Fixes #50734 Fixes #12798 This PR uses the TypeScript's existing control flow analysis to infer type predicates for boolean-returning functions where appr...

github.com

Infer type predicates from function bodies using control flow analysis by danvk · Pull Request #57465 · microsoft/TypeScript

神アプデ
これで無駄な as をしなくて良くなる！

WinterJS v1.0

https://wasmer.io/posts/winterjs-v1

wasmer.io

Rustで書かれた非常に高速なJavaScriptランタイム
WebAssemblyにコンパイルできるため、Wasmer Edgeで実行可能
WinterCG仕様と互換性がある
Cloudflare APIに対応
Webフレームワーク対応: Next.js(Reactサーバーコンポーネント対応)、Hono、Astro、SvelteKitなど
React Server Componentsに対応

チェックボックスの indeterminate 状態は将来多分なくなる

チェックボックスの indeterminate 状態は将来多分なくなる - feb19

blog

feb19.jp

チェックボックスの indeterminate 状態は将来多分なくなる - feb19

たしかにCheckboxはtrue/falseが自然（中間の状態が本来は不自然）
子チェックボックスが選択されている場合は、別の手段で伝える手段（UI）が良いのでは？

Storyshots migration guide

Storyshots migration guide | Storybook docs

Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It's open source and free.

storybook.js.org

Storyshots migration guide | Storybook docs

StoryshotsはStorybookを書いたらsnapshotを生成してくれるものだった
なくなったので、今まで通りjestなどのテストランナーでsnapshotをとるコードを書く必要が生まれた
Storybook 8.0以降では@storybook/test-runnerを使ってDOM/image snapshotを書くのが推奨

Arcブラウザの簡易ノート機能がなくなった

https://resources.arc.net/hc/en-us/articles/19233788518039-Phasing-Out-Arc-Notes

resources.arc.net

代替策として設定からNotion/Word/Confluenceあたりをノートとして開けるようにできる

Arc Max

Arc Max – Browse the web with AI

Ask AI on any page, smart tab & download renaming, ChatGPT integration, and more. Power up your browsing with Arc Max, a suite of AI features that saves you time.

arc.net

Arcに搭載されたAI機能
有料レベルの神機能
記事をすぐに要約してくれる
ただ、ファイル名を勝手に変えてくれる機能は煩わしかったのでオフにしてる

「Reactは悪い意味でも現在のjQueryだし、それを受け止めないと前に進めないということ」

Reactは悪い意味でも現在のjQueryだし、それを受け止めないと前に進めないということ

zenn.dev

Reactは悪い意味でも現在のjQueryだし、それを受け止めないと前に進めないということ

【Arc Maxによる要約】具体的には、Reactのバンドルサイズが大きく、読み込みが遅いこと、仮想DOMによるオーバーヘッドが大きいこと、対抗フレームワークの登場によりこれらの問題が明らかになったことなどを例に挙げています。またjQuery時代の批判と同様の視点からReactを見直す必要がある、と主張しています。