Cybozu Frontend Monthly #31

タイトル画像

イベント概要

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

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

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

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

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

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

開催日

2023年01月31日

イベントページ

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

メンバー

@nakajmg@nakajmg
@b4h0_c4t@b4h0_c4t
@sajikix@sajikix

コンテンツ

👀 Notable Articles

Astro 2.0 がリリース 🎉

Astro の v2 がリリースされました。v1 のリリースが去年の８月と、まだまだ記憶に新しいですが、勢いと存在感を増してきています。

v2 の主なアップデート内容は次の４つです。

特に注目なのは Content Collection API です。

リリースブログにおいて、「Astro 2.0 はモダン web 開発で見過ごされている Markdown・MDX を扱うことの困難さに立ち向かう（意訳）」と述べています。Content Collection API はこの問題に対する解決策の一つです。

当 Frontend monthly のサイトや、Frontend Expert のサイトも Markdown から静的コンテンツとして web サイトを構築していますが、メタ情報を記載している frontmatter 部分に関しては any な状態で扱っています。記述にミスがあっても any なのでビルドは通りますが、サイト全体が壊れる可能性もあります。

Astro v2 では frontmatter 部分の Schema を src/content/config.ts に記述することで、frontmatter 部分への型チェックを行ってくれます。次のコードは当 Frontend monthly のサイトの frontmatter の Schema です。

import { z, defineCollection } from "astro:content"

const postsCollection = defineCollection({
  schema: z.object({
    title: z.string(),
    date: z.string(),
    connpass: z.string(),
    streamUrl: z.string().nullable().optional(),
    hashTag: z.string().nullable().optional(),
    no: z.number(),
    members: z
      .object({
        name: z.string(),
        link: z.string().nullable().optional(),
      })
      .array(),
    guest: z
      .object({
        name: z.string(),
        link: z.string().nullable().optional(),
      })
      .array()
      .nullable()
      .optional(),
  }),
})

export const collections = {
  posts: postsCollection,
}

Schema を記述した上で、ビルドや dev サーバーでのプレビューを行うと、frontmatter 部分に型エラーがある場合には CLI やブラウザ上でエラーを表示してくれます。

型エラーの表示

とても細かそうな部分ではありますが、Markdown でのコンテンツ構築の体験を向上させる機能だと感じます。この機能によって、Markdown でコンテンツを構築する際の第一候補として Astro が挙がるようになっていくのではと思いました。

Announcing TypeScript 5.0 Beta

TypeScript 5.0 の beta がリリースされ、ドキュメントも発表されました。

// const をつける
declare function betterStringType<const T extends readonly string[]>(args: T): void;

// T が string[] じゃなくて ["a", "b", "c"] として扱われる!
betterStringType(["a", "b" ,"c"]);

Introducing the WebAssembly JavaScript Promise Integration API

V8 に追加された JavaScript Promise Integration(JSPI)の解説記事。 JSPI は Wasm が JS をインポートする際、JS 側の非同期処理に対して Wasm 側が一時停止・再開できる仕組みを API として提供するものです。

既存の Wasm モジュール呼び出しでは、Wasm と JS の非同期 API との繋ぎ込みをするために JS 側か Wasm 側のどちらかで Promise を解決する必要があります。 これは I/O を非同期で作成することを求めている現状のエコシステムとの間にミスマッチが発生しやすく、レガシーアプリケーションにとってこの移植コストは顕著になりやすいです。

V8 では、この課題を Wasm モジュールの import・export をインターセプトし、渡された非同期 API に対して Wasm の実行を Suspend する機能を追加しました。 これによって非同期 API と Wasm モジュールの繋ぎ込みが簡略化され前述の課題が解決されるようです。 また、この機能追加において JS 及び Wasm のどちらにも特別な仕様の追加・変更が起きていないのもポイントですね。

🗓 Monthly Articles

📖 Framework, Library

🖥 Browsers

🎨 Accessibility

🦆 Others

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

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