TypeScript 5.5で、@graphemeclusterさんによって正規表現リテラルの構文チェックが導入されました🎉 この構文チェックによって、正規表現に間違いがあった場合、事前にTypeScriptがエラーを出力してくれます。 この機能について、次のことが気になったので調べてみました。 どんな構文がエラーになるか なぜ導入されたか どうやってチェックしているか JavaScriptで実行できるがTypeScriptでエラーになる構文はあるか ESLintとのカバー範囲の違い 本記事に関して、誤り等があれば指摘いただけると嬉しいです。 どんな構文がエラーになるか TypeScript 5.5では、正規表現に関するエラーメッセージが40個程度追加されています。 例えば、下記のような構文は、5.5でエラーになります。 // 存在しないフラグ var re = /a/b; // エラー

社内の人から、自分が以前書いた次の記事が「便利で助かった！書いた時から何かアップデートある？」ってメッセージがきた。 そんな便利だなんてどうもありがとうございますウフフ、と思いながら書いた日を見てみると 2022-08-09 だった。もうすぐ 2 年経とうとしてる。時の流れが早くて怖い。 この記事に書かれた実装例はリポジトリにまとめていたんだけど、当然、何かメンテをしていたわけもなく、2022 年当時の状態がそのまま残っていた。 せっかく便利に思ってくれる人がいたので、内容をアップデートする。 アップデートまとめ メジャーバージョンのリリースやビルドツールの統一の観点で Jest から Vitest に移行 useFakeTimers({ shouldAdvanceTime: true }) @testing-library/reactを v15 にバージョンアップ MSW を v2 にバ

!important はすべてを上書きできるのか？ CSS において話題に出すといろいろな意味で盛り上がるキーワードが!importantです。 CSS でのスタイル宣言時に!importantを付与すると、細かな詳細度の差異などを無視して強制的にスタイルを適用できます。濫用するとあっという間に無秩序になるため、一般的には慎重な利用が推奨されることが多いです。 さて、ではこの!importantですが、何もかもを上書きできるのでしょうか？ 実際のところそうではありません。今回は、CSS 仕様をいろいろと調べているうちに、!important で上書きできないスタイルの存在を知ったため、その情報をまとめてみました。 CSS における Cascade Sorting Order CSS は Cascading Style Sheets という名前の通り、カスケードと呼ばれる仕組みでスタイルの適

「Reactのさまざまなデータフェッチ方法を比較して理解して正しく使用する」シリーズの3記事目、最終記事です🌟 今回は「 Next.js Pages Router(SSR)でのデータフェッチとApp Routerでのデータフェッチ」について理解を深めていきます。 また、最後の全体の結果で「Reactのさまざまなデータフェッチ」シリーズの総括をしていきます。 イントロ+useEffectを用いたデータフェッチ SWR・TanStack Queryを用いたデータフェッチ Pages Router(SSR)でのデータフェッチ+App Routerでのデータフェッチ+まとめ ← 👀この記事 Repository 以下は今シリーズで用いたリポジトリです。 🔽クライアントサイドフェッチの調査に用いたリポジトリ：React+Vite（useEffect, SWR・TanStack Query）

先日 Vercel の@leeerob氏が次のようなツイートをしていました。 I'm working on updated testing docs for the @nextjs App Router. next@canary supports Jest for server & client components, metadata, server-only, and more なんと next@canary で、Server Components の Jest でのテスト実行がサポートされているとのことです！これは試さないと！ next@13.4.19 時点での Server Components テストの課題 Next.js App Router で開発するときの大きな課題の一つがテストで、現状では Server Components と testing-library を組み合わ

State of CSS 2023 の結果公開など : Cybozu Frontend Weekly (2023-08-29号) こんにちは！サイボウズ株式会社 フロントエンドエキスパートチームの @mugi_uno です。 はじめに サイボウズ社内では毎週火曜日に Frontend Weekly と題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2023/08/29 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 <search> が Chrome118 で実装予定 検索や絞り込み要素に関するコンテナ要素である <search> が Chrome 118 で実装予定とのことです。Firefox や Safari にはすでに実装済みのため、メジャーブラウザの多くで利用可能になります。 Fresh 1.4

最近、Boshen さんが開発している Oxc に注目しています。 社内で Oxc の近況を slack に投稿していたところ、「Oxc は Rome で話題になっていますか？」や「Oxc はうまくいくと思いますか？」と聞かれたことで Rome の現状を整理するいいきっかけになったので、記事に残しておこうかなと思います。 Rome と Oxc の違い Rome と Oxc はどちらも linter、formatter、transpiler などを提供するつもりではあるので、ユーザーからみた違いは分かりにくいかなとは思います。現時点での大きな違いは、次の２点だと思っています。 プロジェクトのスコープ Rome: JS/TS に限らず Web 開発に関連する言語全般にツールを提供することを試みている Oxc: JS/TS に関するツールにフォーカスしている 提供するツールの拡張性に対する考え方

Next.js Server Actions Next.js 13.4 で、新機能として Server Actions[1] が追加され、バックエンド側のコードをあたかもクライアントから直接呼び出せるかのようにコードを書くことができるようになりました。 リリースブログに掲載されていた Server Actions のコードを見てみましょう。 // app/post/[id]/page.tsx (Server Component) import kv from "./kv"; export default function Page({ params }) { async function increment() { "use server"; await kv.incr(`post:id:${params.id}`); } return ( <form action={increment}

ちょっと時間が経ってしまったのですが Rome の core contributor になったので、なるまでの振り返りと現在の Rome の状況について少し書きたいと思います。 Rome とは Rome は、増え続けている JavaScript の開発に必要なツールチェーンを統一し、開発者体験を改善しようということで始まった OSS です。現在は、JS (JSX)・TS・JSON に対する formatter と linter を提供しています。 Babel の生みの親である Sebastian McKenzie さんが 2017 年頃からプライベートで開発を始め、2020 年頃からは OSS として開発が進められています。2021 年の 7 月ごろまでは、3rd party の npm パッケージを極力利用せずに TypeScript で実装されていました。[1] 2021 年の 7 月