100% sound null safety#

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

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

パターンマッチング#

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

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

4
class Square implements Shape {
5
  final double length;
6
  Square(this.length);
7
}
8

9
class Circle implements Shape {
10
  final double radius;
11
  Circle(this.radius);
12
}
13

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

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/

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

1
@media (update: slow) {
2
   // ....
3
}

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

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

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

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

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

1
import db from "./db";
2
import { redirect } from "next/navigation";
3

4
async function create(formData: FormData) {
5
  "use server";
6
  const post = await db.post.insert({
7
    title: formData.get("title"),
8
    content: formData.get("content"),
9
  });
10
  redirect(`/blog/${post.slug}`);
11
}
12

13
export default function Page() {
14
  return (
15
    <form action={create}>
16
      <input type="text" name="title" />
17
      <textarea name="content" />
18
      <button type="submit">Submit</button>
19
    </form>
20
  );
21
}