Cybozu Frontend Monthly #29

タイトル画像

イベント概要

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

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

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

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

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

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

開催日

2022年11月26日

イベントページ

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

メンバー

@nakajmg@nakajmg
@b4h0_c4t@b4h0_c4t
@sajikix@sajikix
@mugi_uno@mugi_uno
@nus3_@nus3_

コンテンツ

今回は JSConf JP 2022 向けの特別版でお送りします
https://jsconf.jp/2022/

2022 年のフロントエンドトピックから、フロントエンドエキスパートチームのメンバーが特に気になったものを簡単にふりかえります。

Nuxt 3.0 stable が満を持してリリース！

2020 年 9 月の Vue 3 のリリースから 2 年、ついに Nuxt 3.0 がリリースされました。

Composition API への対応や、Vite と Nitro による開発者体験の向上と TypeScript サポートの充実などが含まれています。

この Vue 3 のリリースから Nuxt 3.0 のリリースまでに、ほかフロントエンドフレームワークのリリースがいくつかありました。

後発のフレームワークは、ほかフレームワークで開発者から支持を得た思想や設計、ベストプラクティスなどをうまく取り込んでより洗練されていく印象があります。

現在のフロントエンドフレームワークはどれか一強というわけではなく、ユースケースによって使い分けるものだと考えています。Nuxt 3 がマッチするユースケースがあるのか、ほかフレームワークのポジションと競合していくのか、今後の動向が楽しみです。

Deno 2022 アップデートまとめ

Deno は 2022 年 1 月から 11 月までの間に v1.18 から v1.28 までの 10 バージョンがリリースされました 今回は 2022 年に公開された Deno Release Note の中でも個人的に気になったいくつかの要素について紹介していきます。

No type-checking by default (v1.22, v1.23)

実行時に型チェックを実施しない挙動がデフォルトになりました。 告知から導入までが結構早かった記憶がありますがどうだったでしょうか。

File watcher watches dynamic imports (v1.23)

ビルトインされているファイルウォッチャーが動的にインポートされたファイルも監視するようになりました。

Type checking and emitting performance improvements (v1.24)

--check オプションが指定された際に TypeScript コンパイラを利用していたのをやめ、全てのエミットで swc が利用されるようになりました。 また、過去に型チェックを通過したコードに対して再度チェックをかけないようにするなどパフォーマンス面でのリファクタリングがいくつか実施されたようです。

Developer experience improvements (v1.26, v1.27)

開発環境上でのツールの使いやすさは非常に重要です。 Deno v1.26, v1.27 では、Language Server や IDE に関わる幾つかの機能追加が実施されました。

deno.land でのドキュメント検索機能が一新されて多くの情報にアクセスしやすくなりました。 対応エディタでのインレイヒントが追加され、これまでよりもエディタ上でコードの可動性が向上しました。 また、レジストリ補完がサポートされているエディタでの deno のサードパーティーモジュールの検索性が向上したようです。

npm 互換機能追加 (v1.25~v1.28)

v1.25 の Experimental npm support からいくつかのリリースを経て v1.28 で正式に npm との互換機能がリリースされました。

この辺りの詳細については 14 時ごろに行われたCurrent state of Npm support in Denoセッションを見るとより深い理解が得られると思います。

2022 年 TypeScript ふりかえり

2022 年、TypeScript は 4 つのメジャーバージョン(4.6 ~ 4.9)がリリースされました。 内容も新しい記法の追加、型の推論の向上、パフォーマンス改善、エディタサポートなど多岐にわたります。 ここでは個人的に大きかった・面白いなと思うアップデートを振り返ります。

Control Flow Analysis for Destructured Discriminated Unions (4.6)

type Action =
    | { kind: "Age, payload: number }
    | { kind: "Name", payload: string };

function processAction(action: Action) {
    const { kind, payload } = action; // 絞り込む前に分割代入してる
    if (kind === "Age") {
        // ちゃんとnumberと解釈される
        let num = payload * 2
        // ...
    }
    else if (kind === "Name") {
        // ちゃんとstringと解釈される
        const str = payload.trim();
        // ...
    }
}

ECMAScript Module Support(4.7)

Improved Intersection Reduction, Union Compatibility, and Narrowing(4.8)

The satisfies Operator(4.9)

紹介しきれなかったけど面白かった、便利だなとおもったもの

Cloudflare 2022 トピック ふりかえり

2022 年内、Cloudflare からの新サービス発表や JS ランタイム標準化などで多く動きがありました。 フロントエンドにおけるアーキテクチャ設計・開発に大きく影響を与える可能性があるものもあり、 代表的なものをいくつかピックアップしてふりかえります。

A Community Group for Web-interoperable JavaScript runtimes

https://blog.cloudflare.com/introducing-the-wintercg/

Vercel・Shopify・Node.js・Deno と連携し、JS ランタイムの API 標準化のためのコミュニティグループ（WinterCG）が設立されました。昨今の Edge Runtime 環境の増加により、各種環境間で JS API の互換性が保てなくなってきています。（記事内では、 fetch() の差異について言及されています。） 最終的には、コードを書き直すことなく別の環境へ移植可能となる状態を目指しているようです。

A New Hope for Object Storage: R2 enters open beta

https://blog.cloudflare.com/r2-open-beta/ https://blog.cloudflare.com/r2-ga/

AWS S3 互換のストレージサービス。2022/5 に β 版が公開され、2022/9 に一般提供が開始されました。 @aws-sdk/client-s3 を利用し、そのままアクセスすることができます。帯域ではなく、利用ストレージと操作回数が課金対象になります。

Announcing D1: our first SQL database

https://blog.cloudflare.com/introducing-d1/

CDN Edge で動作する SQL データベース。実体は SQLite。 Cloudflare が持つネットワークを利用し、SQLite のリードレプリカを CDN Edge 上に配布する。 Worker から直接アクセス可能。また、上述の R2 上のバックアップや、DB のスナップショットの import/export が行える。 R2 と同様、帯域に課金されず、こちらもストレージと操作に対して料金が発生する。

現在はオープン α として誰でも利用可能な状態です。自分も実際触ってみましたが、GUI or CLI から簡単に DB を作成できました。業務利用もそうですが、個人開発時には DB に困ることも多いため、大きな選択肢になるかもしれません。

And here’s another one: the Next.js Edge Runtime becomes the fourth full-stack framework supported by Cloudflare Pages

https://blog.cloudflare.com/next-on-pages/

Edge ランタイムを利用する Next.js アプリケーションを Cloudflare Pages Functions にデプロイできるようになりました。 元々 Vercel の Edge Functions を対象にデプロイできていましたが、これが Cloudflare でも可能になった形です。1 年間ほどは Cloudflare Pages Functions は β 版の扱いとのことです。上述の D1 や R2 との組み合わせが可能になると、Cloudflare の Edge 上だけで構築可能なアプリケーションの範囲が広がりそうです。

2022 年に主要な Web ブラウザに実装された気になる機能をピックアップ！

主要ブラウザ全てで実装されたもの

<dialog>

https://webkit.org/blog/12209/introducing-the-dialog-element/

:focus-visible
@layer

https://cybozu.github.io/frontend-expert/posts/css-cascade-layers

backdrop-filter

もう少しで主要ブラウザ全てで実装されそうなもの

@container

https://developer.chrome.com/blog/has-with-cq-m105/

:has()

https://developer.chrome.com/blog/has-with-cq-m105/

個人的に今後注目しているもの

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

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