Matsuri-tech Frontend Weekly 2023-05-14

Dart 3

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

https://medium.com/dartlang/announcing-dart-3-53f065a10635

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がリリースされました。

https://developer.chrome.com/blog/new-in-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でレスポンスヘッダーを上書きできるようになりました。

https://developer.chrome.com/blog/new-in-devtools-113/

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

CSS update Media Query

https://developer.chrome.com/blog/css-update-media-query/

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

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

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

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

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

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

Next.js 13.4

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

https://nextjs.org/blog/next-13-4

Stable App Router

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

https://nextjs.org/docs

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

https://nextjs.org/docs/app/building-your-application/configuring/draft-mode

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は今後カナリアリリースを行なっていくそうです。

https://react.dev/blog/2023/05/03/react-canaries

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