Advent Calendar 2023

フロントエンドの​2023年を​振り返る​（後編）

この記事はyamanoku Advent Calendar 2023の24日目の記事になります。

yamanokuがウォッチしてきたフロントエンドにまつわる動向やニュースを振り返ります。今回は7月から12月までの後半を振り返ってみます。

7月

Prettier 3.0リリース

Prettier 3.0: Hello, ECMAScript Modules! · Prettier

Prettierの3.0がリリースされました。すべてのソースコードをESMに対応したこと、ラテン文字と中国語または日本語の文字の間に半角スペースが挿入されなくなったこと、trailingCommaがallでデフォルトになりました。今回のアップデートに伴いNode.jsサポートポリシーも決めたそうです。

Kuma UIのリリース

kuma-ui/kuma-ui: 🐻‍❄️ A Headless, Utility-First, and Zero-Runtime UI Component Library ✨

ヘッドレス、ユーティリティファースト、そしてゼロランタイムなUIコンポーネントライブラリであるKuma UIがリリースされました。

react-tweet

Introducing React Tweet – Vercel

パフォーマンスを犠牲にすることなく、1行のコードでツイートをReactアプリケーションに埋め込むことができるライブラリです。

この頃Twitterが𝕏へと改名するというのもあり、シュールな発表であったのを記憶しています。

Web Environment Integrityの提案

Web-Environment-Integrity/explainer.md at main · explainers-by-googlers/Web-Environment-Integrity

Google従業員により新たなるWeb API「Web Environment Integrity」の提案が行われました。ユーザーがサイトにアクセスする際に、信頼できる第三者にブラウザやプラットフォームのデータを提出して正当なユーザーであることを認証してもらう仕組みで、表面上はbotによる不正利用や詐欺行為や、不正プログラムの実施を防ぐためメリットが感じられます。

しかしこのAPIで認証できないブラウザと判断することが企業側の判断に委ねられていること、それによりブラウザの使用がより狭まり、企業でのブラウザの寡占が進むことが懸念されています。VivaldiやBraveの公式ブログ記事においてこのAPIがいかに危険なものであるかを指摘しています。

8月

RomeからフォークされたBiomeがリリース

Announcing Biome | Biome

Rome Tools, Inc.は資金難に陥り、給与も払えず退職やレイオフが相次ぎました。結果としてRomeの開発は停滞し、関連するリソースも関係者が操作できない状態になっていました。

Romeのコアチームメンバーが開発を継続するためにフォークされて刷新されたBiomeがリリースされました。

Dan Abramov氏がBlueSkyのソフトウェア開発者へ

https://bsky.app/profile/danabra.mov/post/3k5vw7g6cvg2h

Meta社でReact開発やAdvocatorとして尽力していたDan Abramov氏が7月で退職。BlueSkyのソフトウェア開発者となることになりました。

Astro 3.0リリース

Astro 3.0 | Astro

Astro 3.0がリリースされました。主な変更点は以下のとおりです。

9月

Romeリポジトリがアーカイブ

rome/tools: Unified developer tools for JavaScript, TypeScript, and the web

9月1日をもってRomeリポジトリがアーカイブされました。

nitrogql 1.0リリース

nitrogql 1.0 release | nitrogql blog

TypeScriptプロジェクトでGraphQLを使うためのツールチェインであるnitrogql 1.0がリリースされました。具体的な内容については公式ブログ記事を参照してください。

TypeScript JPが解散

TypeScript JP解散のお知らせ | TypeScript JP

TypeScriptに関する国内コミュニティであるTypeScript JPが解散しました。新型コロナウイルスの影響によりTSConf JP 2020の開催が中止となったことは非常に残念なことではありました。これまでの活動、お疲れ様でした。

FirefoxでのVue.jsの高速化改善

Faster Vue.js Execution in Firefox - Mozilla Hacks - the Web developer blog

FirefoxのProxy挙動を改善した結果、Vue3のリアクティビティが高速化されてベンチマークが約40％改善されたそうです。Firefox 118より改善された変更がリリースされるそうです。

TurboリポジトリよりTypeScriptを削除

Remove TypeScript by afcapel · Pull Request #971 · hotwired/turbo

Hotwireの構成要素の1つでもあるTurboの次期バージョン開発においてはTypeScriptは使用しないため削除が行われました。

Bun 1.0リリース

Bun 1.0 | Bun Blog

Node.js、Denoに次ぐ新たなるJavaScriptランタイムであるBunの1.0がリリースされました。

Node.js 16がEOL

doc: mark v16.x as End-of-Life by targos · Pull Request #908 · nodejs/Release

9月12日をもってNode.js 16がEOLとなりました。Node.js 16は2021年4月にリリースされ、LTSは2021年10月からになっていました。

当初2024年4月にLTSが終了する予定でしたが、OpenSSL 1.1.1系列のサポートが2023年9月11日に終了となることと相まって、終了が早まった背景があります。

jsbundling-railsにBunサポートが追加

Add Bun support by terracatta · Pull Request #167 · rails/jsbundling-rails

RailsでのJavaScriptバンドルツールであるjsbundling-railsにBunのサポートが追加されました。これまでesbuild、Webpack、Rollupのいずれかを選択できましたがそこに新たに追加された形になります。

CSS Subgridがクロスブラウザ対応

CSS Gridの新しい機能であるSubgridがクロスブラウザ対応となりました。これまでグリッド指定は直下のものしかグリッドアイテムとして認識されませんでしたが、Subgridを指定することで親子関でグリッド関係を認識できるようになります。

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

.subgrid {
  grid-column: span 4;
  display: grid;
  /* 子要素の行方向を揃えてくれるようになる */
  grid-template-rows: subgrid;
}

具体的な解説はCSSのSubgridが全ブラウザ対応。Gridの入れ子の基本から応用までを完全理解するを参照ください。

v0 by Vercel Labs

v0 by Vercel

VercelがテキストのプロンプトからUIを生成するサービスをプライベートアルファでリリースしました。作成されるUIにはshadcn/uiが使用されています。

Svelteの新リアクティブシステム「Runes」

Introducing runes

Svelte 5で導入予定の新リアクティブシステムで、$state、$derived、$effectといったマクロを使いリアクティブなステート管理をするRunesについての紹介記事です。既存のAPIと併用できるため、漸進的な導入や移行が可能なようです。

TypeScriptのドキュメンタリー映像が公開

TypeScript Origins: The Documentary - YouTube

TypeScriptの誕生から現在までの関わった関係者たちへのインタビューによるドキュメンタリー映像が公開されました。

State of HTML 2023の公開

State of HTML 2023 now open! • Lea Verou

HTMLに関する初めてのサーベイとしてのState of HTML 2023が公開されました。

10月

PhotoshopをWebブラウザ上で動かすための実装方法

Photoshop is now on the web!. Enabled by WebAssembly, Web Components… | by Addy Osmani | Medium

PhotoshopのデスクトップWebアプリケーションはChromeとAdobeとが共同で開発しており、WebAssembly + Emscripten、Web Components + Lit、Service Workers + Workbox、そして新しいWeb APIを活用による実装についての解説記事です。

今後はCreative Cloud suite全体のアプリケーションもWebブラウザ上で動かせるようにしていくそうです。

Viteの今後の動向について

State of Vite (ViteConf 2023) - Google スライド

ViteConf 2023にてEvan Youより今後のViteに関する発表がありました。以下、要点になります。

Lit 3.0リリース

Lit Launch Day: Lit 3.0, Labs graduations, a compiler and more! – Lit

Lit 3.0がリリースされました。IE11サポートが廃止され、Decoratorsをサポートするようになりました。Lit内でリアクティブな実装ができる@lit-labs/preact-signalsも発表されました。

Rspressのリリース

Rspress, the Rspack-based static site generator · web-infra-dev · Discussion #5

Rspackベースでの静的サイトジェネレーターRspressのv1.0がリリースされました。特徴は以下のとおりです。

The State of WebAssembly 2023の結果

The State of WebAssembly 2023

WebAssemblyにまつわるサーベイであるThe State of WebAssembly 2023の結果が公開されました。

Yarn 4.0リリース

Release: Yarn 4.0 🪄⚗️ | Yarn

パッケージマネージャのYarnの4.0がリリースされました。主な変更点は以下のとおりです。

4.0のリリースに伴いウェブサイトもリニューアルされました。

MSW 2.0リリース

Introducing MSW 2.0 - Mock Service Worker

MSW 2.0がリリースされました。Node.jsとTypeScriptのバージョンが更新され、ReadableStreamのサポートやブラウザ向けのAPIをmsw/browserへ移動やrequest.bodyがReadableStreamを返すようになったなどの破壊的変更、新しいAPIの開発がされました。

多くの変更点を含みますが、2.0へのアップデートに向けたマイグレーションガイドも用意されています。併せてドキュメントサイトの刷新もありました。

URL PatternがLiving Standardに追加

The WHATWG Blog — The URL Pattern Standard

WICGの管轄であったURL Patternが標準化となりLiving Standardに追加されました。

Next.js 14リリース

Next.js 14 | Next.js

Next.js 14がリリースされました。具体的な新規APIはありませんでしたが、以下が変更点になります。

Server ActionsのデモではSQLをクライアントサイド側で書けるコードのインパクトが強かったです。

function Bookmark({ slug }) {
  return (
    <button
      formAction={async () => {
      "use server";
        await sql INSERT INTO Bookmarks (slug) VALUES (${slug});`;
      }}
    >
      <BookmarkIcon />
    </button>
  );
}

その他、Turbopackの進捗についての発表と、App Router・認証・データベースといったものを学習できるサイト（next.js.org/learn）も公開されました。

ESLintでのフォーマットルールは非推奨に

Deprecation of formatting rules - ESLint - Pluggable JavaScript Linter

ESLint v8.53.0からフォーマットルールを非推奨とすることが公式ブログより発表されました。代わりにPrettierやdprintといった別のフォーマッターツールを使うことを推奨しています。

Stylelintでもv15よりフォーマットにまつわるルールは非推奨となっています。

RemixでのViteサポート

Remix ❤️ Vite | Remix

これまでコンパイラとしてesbuildを使っていたRemixで、ViteのプラグインとしてRemix使えるようになりました。その結果、10倍速いHMRと5倍速のHDR（Hot Data Revalidation）が実現できるようになり、Viteのプラグイン利用もできるようになりました。ただしUnstalbeなサポートのため今後の仕様変更には注意です。

11月

State of React 2023

State of React 2023

React開発者向けサーベイであるState of React 2023が公開されました。

Prettierによる新しい三項演算子のフォーマットの提案

【翻訳】Prettier の新しい三項演算子のフォーマットを試してみてください

Prettierのv3.1.0より--experimental-ternariesオプションを付けることで三項演算子にフォーマットを試せるようになっています。

以下のような三項演算子があった場合に、

const animalName = pet.canBark() ? pet.isScary() ? 'wolf' : 'dog' : pet.canMeow() ? 'cat' : 'probably a bunny';

以下のようにフォーマットされるようになります。

const animalName =
  pet.canBark() ?
    pet.isScary() ?
      "wolf"
    : "dog"
  : pet.canMeow() ? "cat"
  : "probably a bunny";

このフォーマットについてGoogle Formからのフィードバックも受け付けているようです。

Vite 5.0リリース

Vite 5.0 is out! | Vite

Viteの5.0がリリースされました。主な変更点は以下のとおりです。

TC39でソースマップの標準化にまつわるタスクグループが発足

Ecma TC39 “ECMAScript®” initiates a new task group to standardize source maps - Ecma International

ソースマップの定義と標準化に向けたEcma TC39タスクグループが発足しました。この取り組みにはBloomberg、Google、JetBrains、Meta、Microsoft、Mozilla、Replay.io、Sentryが参加しています。

ちなみにGoogleとMozillaによるRFCはおよそ8年前に提案されていました。

The Prettier Challengeが開催

Rustを使ってPrettierの95%以上のテストケースをパスした場合、$10,000の賞金が提供されるチャレンジが開催されました。VercelのCEOであるGuillermo Rauchも賛同して賞金は$20,000となり、最終的にBiomeプロジェクトがこのチャレンジで優勝して賞金を獲得しました。

State of JavaScript 2023の公開

State of JavaScript 2023

毎年恒例のJavaScriptのサーベイが開始されました。

12月

Vitest v1.0リリース

Release v1.0.0 · vitest-dev/vitest

Vitestのメジャーバージョンがリリースされました。

Astro 4.0リリース

Astro 4.0 | Astro

Astro 4.0がリリースされました。年内で2.0から4.0までアップデートが進みました。主な変更点は以下のとおりです。

Starlightテンプレートでのドキュメント全面見直しもあったようです。

CSSテキストモジュールレベル4の機能がChromeに導入

CSS に 4 つの新しい国際化機能を導入  |  Blog  |  Chrome for Developers

word-break: auto-phrase、text-autospace、text-spacing-trimがサポートされるようになりました。一部言語での10px以下のフォントサイズの切り上げがあったものが廃止されて、ブラウザの互換性向上のための変更もありました。

OxcLintリリース

Oxlint General Availability | The JavaScript Oxidation Compiler

Rust製のJavaScript・TypeScriptのパーサー、Linter、フォーマッターといったツール郡のOxcに、LintツールのOxcLintがリリースされました。現時点ではESLintの代替置き換えになるものではなく、速度面で補佐できるようにしていくみたいです。

StorybookでのReact Server Componentsサポート

Storybook for React Server Components

experimentalNextRSCを有効にすることでReact Server Componentsを使用したStorybook開発ができるようになりました。

SvelteKit 2リリース

Announcing SvelteKit 2

SvelteKit 2がリリースされました。Vite 5への対応、モーダルやポップアップビューに活用できるShallow routing機能の追加が挙げられます。

:has()がクロスブラウザ対応

引数に渡されるクラスセレクターを含んでいるセレクタを指定する擬似クラスの:has()がクロスブラウザ対応しました。以下のような使い方ができます。

a:has(img) {
  /* img要素があるa要素にのみ適応するスタイル */
}

/* ダイアログが開いたときに画面を固定するようにする */
html:has(dialog[open]) {
  overflow: hidden;
}

React Aria Components 1.0リリース

December 20, 2023 Release – React Spectrum Releases

Adobeが開発するReact AriaベースのヘッドレスコンポーネントライブラリであるReact Aria Componentsの1.0がリリースされました。

2023年下期発売したフロントエンド関連の書籍

2023年下期のフロントエンド関連のイベント

参考情報源

この記事に関する修正依頼
トップへ戻る