Cybozu Frontend Monthly #33

イベント概要

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

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

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

開催日

2023年03月28日

イベントページ

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

配信URL

https://www.youtube.com/watch?v=4nxPYSJHjuE

メンバー

---

コンテンツ

👀 Notable Articles

Announcing typescript-eslint v6 Beta

• 共有者: sajikix

typescript-eslint v6 Beta が公開されました。特に Configuration Names の変更などはユーザーにとっても大きな変更となりそうです。

ユーザーとして Breaking Changes は以下

• Configuration Names (recommended みたいなやつ)を再編した
  • 具体的にはルールを特性から大きく以下の二つに分け、それぞれ型チェックの有無や厳しさで分けている
    • Functional rule configurations : ベストプラクティスやコードの正しさのためのルール
    • Stylistic rule configurations : 一貫性のある構文使用のためのルール
• プリセットでどのルールが有効になっているか、どのオプションが有効になっているかが変更される
  • Changes to configurations for 6.0.0 を参照のこと
• deprecated になってたいくつかのルールが廃止になる。
• 関連ツールのサポートをドロップする
  • node v12 / TS 4.2.4 / ESLint v6

開発者としてのアップデート

• typescript-eslint のパースした AST から型情報を取得するのが容易になるような wrapper を作った。
• AST における破壊的変更
• AST にパースする際に無効な AST となる場合はエラーを投げるようにした(今まではかなり寛容に無効な AST に parse していた)

また今回の記事と直接の関係はありませんが、 sosuke 氏が「TypeScript-ESLint から $500 いただきました」という記事で、typescript-eslint についてとコミュティへの寄付を呼びかけています。 TypeScript で書かれているプロダクトは大抵お世話になっているでしょうし、メンテナーの方々も非常に献身的にレビューや issue のトリアージをしているプロダクトですのでぜひ寄付を検討してみましょう。

---

Experiments with the JavaScript Garbage Collector

• 共有者: b4h0-c4t

JavaScript ランタイムの GC がどのようなケースで働き、あるいは働かないのかを FinalizationRegistry クラスを利用して調査した記事。 記事内では 5 つのコードを例として GC の挙動について解説しています。

結果として、場合によっては安全に値を回収できるにもかかわらず GC がメモリを回収しないケースが発生することが示唆されています。 GC には標準化された規定が存在しないため、事前に挙動を理解した上で開発を進めることは難しいです。 一方、GC の挙動自体は各ブラウザで共通している点も多く、こういった知識を貯めておくことで後の開発に役立つのではないかと思います。

---

GPT-4 との新たな開発体験: AI とペアプロを極める

• 共有者: nakajmg

GPT-4 を使った開発体験の紹介記事です。GPT-4 を使ったペアプロのような開発体験を紹介しつつ、AI との接し方や、今後エンジニアとして重要になっていくであろうスキルついて述べています。

この記事自体も GPT-4 を活用して書かれており、いろいろな可能性が感じられます。記事中で「AI との共同作業」と表現しているのが印象的で、「AI は恐れる対象ではなく、私たちが創意工夫して生産性を高めるためのツールと捉えることが大切」という一文はこれからのエンジニアとしての立ち振る舞いを考えさせられました。

---

🗓 Monthly Articles

📖 Framework, Library

• Bun has docs now
  • Bun のドキュメントサイトが公開された
• Buf | Connect for Node.js is now available
  • Connect for Node.js がベータ版としてリリースされました。このリリースにより、Connect-Web と合わせてクライアントサイド・サーバーサイドの両方で TypeScript での実装が可能になりました。
• Deno 1.31: package.json support
  • Deno 1.31 のリリース
  • package.json を検知し、依存関係を解決してくれるように
  • deno bundle が deprecate に。Deno が npm や Node.js の組み込みモジュールをサポートするため、既存の優れたバンドラーが使えることが削除の理由とのこと。
• Next.js 13.2
  • Next.js 13.2 がリリースされました。app ディレクトリ内で静的、動的な metadata を定義できる新しい API や、 コンポーネントのリンクの型付け、Next.js Cache のベータ版が追加されています。
• SvelteKit v1.0 以降に追加された新機能の紹介
  • SvelteKit v1.0 の新機能の紹介記事です。新機能として次のような機能が紹介されていました。
    • load function で、重要ではないデータの読み込み完了を待たずにページの描画が開始できるようになった
    • フォームの入力値の復元ができるようになった
    • Vercel 上で ISR(incremental static regeneration)ができるようになった
• Turborepo が Go から Rust へ移行している話
• TypeScript 向けの Signals ライブラリ。React でも使える
  • シンプルな Signals のライブラリです。開発元は作図ツールで知られる tldraw。Signia を React で使えるようにする signia-react も公開されています。
• Rust 製のバンドラー Rspack が公開された
  • 開発元は TikTok で有名な ByteDance。webpack 互換のバンドラーで、よく使われているような loader との互換性があるようです。
• Introducing Connect-Query: Integrate Protobuf with TanStack Query more effectively
  • 先日 Node.js 対応が追加されたConnect ですが、TanStack Query をサポートしていることが社内で話題になりました。useQuery や useQueryClient といった、TanStack Query の利用者であれば馴染みのある hooks で Connect を利用できます。

---

🖥 Browsers

• Getting Started with Style Queries
  • コンテナ要素のスタイルに合わせて、子要素のスタイルを指定できる Style Queries が Chrome 111 から試せるようになりました。
• New RFC ✨ - Override HTTP response headers
  • Chrome 111 から、フラグをオンにすることでローカルでレスポンスヘッダーを上書きできるようになりました。ローカルで CORS の動作を確認するなど、何かしら便利に使えそうです。
• View Transition API が Chrome 111 で実装された
  • 画面遷移時などに接続型アニメーションを実現できる API が追加されました。ネイティブアプリのような画面遷移が、JavaScript と CSS で実現できるようになりました。現時点では単一 HTML の SPA の挙動として利用できます。

---

🦆 Others

• I’ve joined @rometools :rocket: I will contribute to support the new TS syntax mainly.
  • 弊社所属の @nissy_dev が Rome のメンテナになりました 🎉👏
• Signals の歴史
• Learn Privacy
  • web.dev に Learn Privacy が追加された
  • 同時期にLearn HTMLも全ページが公開されました
• Moving From Vue 1 To Vue 2 To Vue 3: A Case Study Of Migrating A Headless CMS System — Smashing Magazine
  • Headless CMS の storyblok が実施した Vue1→Vue2→Vue3 のマイグレーションの話です。Vue1 から Vue2 と Vue2 から Vue3 では全く違うアプローチをとっており、Vue1→Vue2 の移行では UI も含めフルリニューアルし、Vue2→Vue3 の移行では UI の変更なしに行われたそうです。それぞれのアプローチでよかったことや全体を通して大事だったことが紹介されています。
• アクセシビリティに対応したサイトのギャラリー
  • アクセシビリティ対応がされているサイトのギャラリー。サイトコンテンツのタイプやカテゴリで絞り込みできるのでアクセシビリティ対応の参考になりそうです。サイトごとのアクセシビリティポリシーページが参照しやすいです。

---

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

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