🏄
Matsuri-tech Frontend Weekly 2023-05-14

hrdtbs

hrdtbs

2023年5月14日
MFW

社内向けに、フロントエンド関連のニュースや業務で発生したQ&A、利用しているライブラリなどの情報を定期的に書いています。

この記事は、社内の開発部メンバーに向けて直近でリリースされたライブラリなどの情報を不定期でまとめたものです。内容は実務や趣味で使えそうなものを中心に扱っており、網羅的ではなく偏りがあります。

# Matsuri-tech Frontend Weekly 2023-05-14

# Q&A

普段の業務において、質問を受けた際の回答などで有益そうなものをピックアップしています。

# Q. フォームでサブミットボタンを押下すると上の方になぜかスクロールされる

状況

ルートにscroll-behavior: smooth;が指定されたページで、サブミットボタンを押すと、なぜか上にスクロールされる場合があるという質問を受けました。コードを見ると、form要素のsubmitイベント時にevent.preventDefault()などを適切に実行しており、特に問題はなさそうでした。

原因

サブミットボタンが押された際、実はバリデーションエラーが発生していました。バリデーションエラーが発生して場合、通常ブラウザはエラーが発生したinput要素などにフォーカスし、エラーメッセージを表示しますが、このエラーメッセージが何らかの理由で消失していたため、なぜか上にスクロールするという挙動になっていました。

なぜエラーメッセージが消えたかというと、エラーメッセージにフォーカスが行われる際にscroll-behavior: smooth;が指定されていると、スクロールアニメーションが発生し、これに伴いエラーメッセージが消えるという挙動をしていたからです。これはFirefoxなどでは発生せず、Chromiumで発生しています。恐らくバグですが、どこにも報告は見当たりませんでした。

# Dart 3

2023年5月10日にGoogle I/O 2023で、Dart 3の正式リリースが発表されました。

DartはFlutterでしか使う機会はなくmatsuri社では全く使っていませんが、個人的な認識としてFlutterほどAndroid、iOSそれぞれに依存した機能にまで対応したクロスプラットフォームフレームワークは存在せず、利便性は現状一強であると思っているので、リリースを少し取り上げます。

# 100% sound null safety

Dartは約4年をかけて、完全にNull safetyになりました。これによりNull Pointer Exceptionsなどのランタイムエラーの回避や、コンパイル時にNullがないことを前提として最適化が可能になります。

Dartでは2系からNull safetyのモードを切り替えられるようにするなど段階的な移行を行なっており、既に人気な上位1000位までのパッケージの99%はNull safatyに対応をしています。

# パターンマッチング

Rustなどのパターンマッチと一緒です。次のように記述します。

// seald修飾子によって、これは閉じた型族のルートになり網羅チェックが有効になる
sealed class Shape {}

class Square implements Shape {
  final double length;
  Square(this.length);
}

class Circle implements Shape {
  final double radius;
  Circle(this.radius);
}

// switchが式で利用できるようになった。
double calculateArea(Shape shape) => switch (shape) {
  Square(length: var l) => l * l,
  Circle(radius: var r) => math.pi * r * r
};

# Chrome 113

2023年5月3日にChrome 113がリリースされました。

# WebGPU API

WebGLにはいくつか問題がありました。

  • WebGLの登場以降、新たなネイティブGPU APIが登場しましたが、OpenGL(WebGL)に更新は予定されていないため、新機能が利用できない
  • WebGLはグラフィックをキャンバスにレンダリングするというケースを前提にしていたため、GPGPUなどは不得意

WebGPUはこれらの問題に対応したWebGLの後継として作られ、最新 GPU APIとの互換性向上、GPGPUのサポート、より高度なGPU機能へのアクセスを提供します。

またAPIはPromiseが使える他、関数名などもまともなため、WebGLと比べるとかなり使いやすくなっています。とはいえ、実際利用する際は何らかのライブラリを使うことが多いと思います。既に有名なWebGLライブラリはWebGPUサポートに取り込んでおり、特にBabylon.jsは完全なサポートを既に提供しています。

https://doc.babylonjs.com/setup/support/webGPU

# レスポンスヘッダーの上書き

DevToolsでレスポンスヘッダーを上書きできるようになりました。

興味があれば、操作手順は動画を取ったので、このページで実践して見てください。

# CSS update Media Query

あまり使う機会はないと思いますが、デバイスのリフレッシュレート（デバイスのアニメーションや更新の頻度）によってスタイルを分けることが出来ます。

@media (update: slow) {
   // ....
}

リフレッシュレートは以下の3つから選びます。

fast：通常のコンピュータやスマホなど

slow：電子書籍リーダーなど

none：紙に印刷されるドキュメントなど

# Next.js 13.4

2023年5月5日にNext.js 13.4がリリースされました。

# Stable App Router

App Routerが安定版になり、公式ドキュメントもデフォルトはApp Routerになりました。Using App Routerから切り替えられます。

App Routerに抵抗感を持っていたり、RSCも含めてPHPの再来と呼んで嘲笑している方々もいますが、普通に便利なので使っていきましょう。個人的にはApp Router（RSC）に触れて理解を進めていけば、必然的に良いコードが書けるようになると思うので、その点でもぜひ使ってください。

# Server Actions (alpha)

フォームの状態についてReactは最近意見を持っているらしく、例えば（元々どちらかといえば制御コンポーネントを推奨していた気がしますが）現在は非制御コンポーネントを推奨していたり、ミューテーションに対するファーストパーティソリューションの開発に取り組んでいるそうです。

Server Actionsは、中間層を作ることなく直接サーバーの関数を呼び出して、サーバーのデータ更新を可能になる実験的な機能です。次のような記述をします。

import db from './db';
import { redirect } from 'next/navigation';

async function create(formData: FormData) {
  'use server';
  const post = await db.post.insert({
    title: formData.get('title'),
    content: formData.get('content'),
  });
  redirect(`/blog/${post.slug}`);
}

export default function Page() {
  return (
    <form action={create}>
      <input type="text" name="title" />
      <textarea name="content" />
      <button type="submit">Submit</button>
    </form>
  );
}

# React Canaries

Reactは今後カナリアリリースを行なっていくそうです。

Experimentalチャネルとは異なり、採用の準備が整っていると合理的に判断される機能のみが含まれるとのことです。