Cybozu Frontend Monthly #30

タイトル画像

イベント概要

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

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

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

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

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

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

開催日

2022年12月23日

イベントページ

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

メンバー

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

ゲスト

@shisama_@shisama_
@koba04@koba04

コンテンツ

上期 (2022/01-2022/06)

リリース

ブラウザ関連

イベント

OSS 関連

その他

下期 (2022/07-2022/12)

リリースなど

ブラウザ関連

イベント

OSS 関連

その他

印象に残っている記事など

IE11 とさよならしたら全力で使える HTML/CSS まとめ【40 個以上】 : @b4h0-c4t

IE 卒業おめでとうございます！ 今年は IE 卒業元年(要出典)だったこともあり、多くの企業や団体で IE の利用が終了したと思います。 6/22 には弊社オフィスを利用して IE 卒業式なんかが開催されたりしましたね。

この記事は IE を卒業した人たちが利用できるブラウザ API や CSS プロパティなどがまとめられています。 去年まで IE 対応に泣かされていた人もそうでない人も一度閲覧して今年の始めとの違いを振り返ってみるのも良いと思います。

Bun — fast all-in-one JavaScript runtime: @sosukesuzuki

2022 年 7 月に Bun が公開されました(それ以前もクローズドで開発中であることは公開されていた)。

Bun は、Node.js や Deno のような JavaScript ランタイムです。 起動時間の速さや、高いパフォーマンス、バンドラーやトランスパイラーなどを含むオールインワンなツールであるなどの特徴があります。

Node.js や Deno とは違い、JavaScript エンジンとして V8 ではなく JavaScriptCore を採用しています(スタートアップが速いらしい)。

Node.js は C++、Deno は Rust で記述されていますが Bun は Zig で書かれています。Zig は Rust のように所有権やライフタイムによって型システムのレベルでメモリの安全性を高めようとするのではなく、C や C++ のようにプログラマーが手動でメモリ管理を行う必要があります。しかし、C++ や D、Rust などのプログラミング言語と比べてシンプルであることが意識されているようです。Zig のウェブサイトに Why Zig When There is Already C++, D, and Rust? というページがあるので興味がある人は読んで見ることをおすすめします。

また、トランスパイラやバンドラ、npm クライアント、sqlite クライアント、HTTP クライアントなど、ほとんどのコンポーネントがスクラッチで記述されているようです。

Bun は、作者である Jerrad Summer が立ち上げた会社 Oven によって開発されています。Oven 社のウェブサイト ( https://oven.sh ) によると、$7m を調達しフルタイムの開発者の採用を行っているようです。GitHub の Contributors を見ると今のところまだ Jerrad Summer が主な開発をしているようですが、最近では他の Oven 社のメンバーのコミットも見られるようになってきています。

The story behind colors.js and faker.js | Revenera Blog : @mugi_uno

年始に、広く利用されている faker.js・color.js の作者自身が、意図的にコード内に無限ループの処理を含め Publish するという出来事がありました。 善意によって成り立っていることもある OSS を日々利用させて貰っている中、とてもインパクトの大きい事件で、行動の是非も含めて多く話題にあがっていた印象です。

別件にはなりますが pnpmのリポジトリトップの README に、ウクライナ・ロシア情勢に絡む文章が追記されたのも今年で、 最近では Meta 社のレイオフの兼ね合いで React チームの今後を心配する声があがったりもしていました。

OSS の存続とその向こうにいるメンテナの皆様について考えるきっかけの多い一年だったかなと思います。

New patterns : @nus3_

2022 年は、web.dev の Patterns(Web アプリケーションを最適化するためのコードスニペット集)に Clipboard や Animation、Theme など新しいパターンが追加されました。

新しく追加されたパターンの一つに Component patternsというクロスブラウザでの UI コンポーネントのコードスニペット集があります。

パンくずリストやボタン、ダイアログなどの UI コンポーネントのコードスニペットが提供されているだけでなく、各々のコンポーネント実装時のポイントをマークアップ・アクセシビリティ・スタイル・アニメーション・JavaScript の観点でまとめた記事が、それぞれ用意されています。

実際にいくつかのコンポーネントの記事を見てみると、たとえば、ボタンのキーボード操作からのクリックを視覚的にわかりやすくするスタイル方法など、参考になる情報がまとまっていました。

来年も新しい Patterns は増えていくと思うので楽しみですね！

Announcing 3.0 · Nuxt : @nakajmg

Vue 3 のリリースから 2 年の時を経て 2022 年 11 月に満を持して Nuxt 3.0 が正式リリースされました！👏

Composition API への対応や、TypeScript サポートの充実などが大きなポイントです。Nuxt ユーザーが首を長くして待っていた正式リリースで、これから 2 系から 3 系への以降の話などが多く出てきそうです。

すでに「Nuxt 3 への移行に向けて頑張ってます - STORES Product Blog」や「Nuxt2からNuxt3に移行してサービスをリリースするまでの1年9ヶ月の道程」といった記事も見られるようになってきました。

めでたいリリースの一方で、Vue 3 がリリースされてからの 2 年でフロントエンドフレームワーク界隈では変化がありました。Next.js の大きなアップデートや、Remix・Astro・Qwik などのフレームワークのリリースによって、選択肢が増えてきています。フロントエンドフレームワークはユースケースによって使い分けるものだと思いますが、Nuxt 3 がどういったユースケースにマッチするのか、ほかフレームワークとポジション争いをするのか、また既存の Nuxt ユーザーが満足できる体験が得られるのか、2023 年の Nuxt 3 の動向が楽しみです！

Next.js 13 : @koba04

Next.js Conf で Next.js 13 が発表されました。React Core Team のメンバーがこれが本当の React 18 のリリースだと言っていた通り、Beta ではありますが、app/ ディレクトリは React Server Components を含む　 React の新しい機能をフルに活用したようなリリースになっています。

React がフレームワークとしてのユースケースを満たすのではなく、プリミティブを提供しておいて各種フレームワークがそれぞれのユースケースを満たすためにそれらを活用するという形であることを再確認したリリースでした。その点においては、Next.js は React におけるフラッグシップなフレームワークだと感じます。

技術的な内容については、Edge と言うユーザーにも近くスケール可能な環境を前提としたサーバーファーストなアプローチに変化していると感じました。実現方法は異なりますが方向性としては別のフレームワークにも通じるものがあると思います。

2023 年以降、どこまでコミュニティが app/ に移行できるのかはこれからの React にとっても重要になりそうです。

A Community Group for Web-interoperable JavaScript runtimes : @shisama_

日本語版: https://blog.cloudflare.com/ja-jp/introducing-the-wintercg-ja-jp/

Web ブラウザ以外の JS ラインタイムが Web 互換を保ってそれぞれの互換性を高めていきましょうという活動をする Web-interoperable Runtimes Community Group (通称 WinterCG)というコミュニティが設立されました。

WinterCG には以下の企業・OSS のメンバーがいます。

今年は Deno が npm 互換を実装したり、Bun が登場したりと、JS ランタイム関連の話題が目立ったと感じました。また、Cloudflare Workers や Vercel の Edge Runtime などのエッジもあり、JS を動かす環境が増えていってます。

その中で、Web との互換やそれぞれの互換性を高めていく活動は重要だと思います。
Node.js 以外の JS ランタイムをサポートすることを意識したQwikやHonoのようなフレームワークも出てきたり、すでにメジャーな npm package が Deno 上でも動くようになってきていたり、JS を動かす環境として Node.js 以外も選択肢として入ってくるのはそう遠くない未来かもしれないと考えています。

この記事を書いた James M Snell (@jasnell)は Cloudflare で働きながらにして長年 Node.js の TSC（技術的な仕様を決めたりする委員会）にも所属しています。
James は今年の JSConf.jp でもキーノートとしてこの WinterCG や Web 互換の話をしてくれているので、興味がある方は動画も観てみてください。

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

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