Temporal についておさらい Temporal は新しく JavaScript の仕様として提案されている「日時を操作するための新しいグローバルオブジェクト」です。現在は Stage3 のプロポーザルとして細かい API などの形が協議されています。 Temporal は既存の Date オブジェクトにある次のような課題を解決するべく提案されました。 ユーザーの現地時間と UTC 以外のタイムゾーンはサポートされない パーサーの動作の信頼性が低い 日付オブジェクトが何を指しているのかわかりづらい サマータイム動作が不安定 日時計算の API が扱いにくい 非グレゴリオ暦がサポートされていない Temporal ではこれらの問題に対して以下のような機能を追加することで解決しようとしています。 Wall-Clock Time と Exact Time の明確な分離 タイムゾーンとカレンダ

デジタル庁デザインシステム デジタル庁デザインシステムとは、名前の通りデジタル庁が提供しているデザインシステムです。 行政機関や公共性の高い組織のWebサイト、アプリケーションを構築する際に利用することを念頭に置いて構築されています。 2024/05/30にv2.0.0としてベータ版が公開されました。 デジタル庁デザインシステムの内訳 デジタル庁デザインシステムには以下の成果物が含まれています。 デザインシステム本体 Figmaのデザインデータ v2系 Figmaのデザインデータ v1系 React製のコードスニペット イラストレーション/アイコン素材 以降は内容物をそれぞれ確認しつつ、デジタル庁デザインシステムがどのようなものかを考えていきます。 デザインシステム本体 デジタル庁デザインシステムベータ版のWebサイトのことを指します。 はじめて本ウェブサイトを見る方への業務での活用につい

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

こんにちは! サイボウズ株式会社フロントエンドエンジニアの Saji (@sajikix) です。 はじめに サイボウズでは毎週火曜日に Frontend Weekly という「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2024/6/18 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 feat: Add support for TypeScript config files ESLint の設定ファイルを TS でかけるようにする RFC がマージされました。 TS で設定ファイルを書く場合は読み込む際にトランスパイルする必要があり、これには UnJS のパッケージの１つである jiti が利用される予定のようです。(2024/06/18 現在は draft PR なので今後変更される可能性がありま

Server-Sent Events (SSE) 目新しい技術というわけではありませんが、最近 Server-Sent Events (SSE) について言及する記事をよく見かけます。 何番煎じかはわかりませんが、個人的に興味があることと、正直触ってみたことがなかったので、コードを書きつつ調べてみました。 ※本記事で登場するサンプルコードは次のリポジトリで公開しています。 SSE とは SSE 自体を解説する記事は無数に存在するため詳細な説明は割愛しますが、簡単に言うと、サーバーからクライアントへ一方向の Push 通信を行うための仕組みです。 MDN にもページが存在するため、参考になります。 独自プロトコルを必要とせず、HTTP/1.1 でも動作するのも特徴です。 SSE の歴史 wikipedia に SSE に関するページが存在し、次のような記述があります。 SSE メカニズムは、

- import { type GetExamplesResponse, getExamples } from "../../api/example"; + import { type GetExamplesResponse, getExamples } from "#src/api/example"; Node.js が提供する Subpath imports は Vite と Webpack、また TypeScript5.4 でサポートされている。実際に次の環境で試すと、型の補完も効くし、モジュールがモックされた。tsconfig も Vite の config もいじってないのに。 Storybook: 8.1.6 Vite: 5.2.8 TypeScript: 5.4.5 @storybook/testのfnと Story のbeforeEachを使うことで、Jest や Vite

この記事で扱うコードは全てTypeScript Playgroundにまとめていますので、 もし実際にコードを確認したい場合はそちらでご確認ください。 26以上のメンバーを持つMappedTypeで型の絞り込みができない 表題の通りですが、実際にコードを見てもらうのがわかりやすいでしょう。 const maxMap = { one: {a: 1}, two: {b: 2}, three: {c: 3}, four: {d: 4}, ... twentyThree: {w:23}, twentyFour: {x:24}, twentyFive: {y:25}, twentySix: {z:26}, } type MapKey = keyof MaxMap type MapValue<T extends MapKey> = MaxMap[T] interface ObjectImpl<Key,

Google I/O 2024で発表された10の最新情報など: Cybozu Frontend Weekly (2024-05-28号) こんにちは！サイボウズ株式会社フロントエンドエンジニアのおぐえもん（@oguemon_com）です。 はじめに サイボウズでは毎週火曜日にFrontend Weeklyという「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2024年5月28日のFrontend Weeklyで取り上げた記事や話題を紹介します。 取り上げた記事・話題 RFC: Initial CSS Level Categorization CSSの進化に伴い、CSS3という用語が混乱を招いているため、CSS4やCSS5といった新たな分類を導入しようとする提案です。 Ship: Third-party Cookie Grace Period Opt-O

近年、TypeScript を取り巻くエコシステムでは、ユーザーに明示的な型注釈を求めることで、推論や型生成のコストを下げるというアプローチが注目されています。TypeScript 5.5 beta で　発表された --isolatedDeclarations オプションはその代表的な機能ですし、Deno の提供する新しいパッケージレジストリ JSR が提唱している slow types という考え方も同様のアプローチを求めるものです。 この記事では、上記のようなアプローチが提案された経緯や解決したい課題について、TypeScript を利用するエコシステムの状況も踏まえて整理します。 TypeScript を取り巻くツールチェインと型情報を利用する上でのパフォーマンス 皆さんがご存知の通り、TypeScript の型推論は非常に賢く、その機能は日々アップデートされています。特に以下のよう

React Compiler React 19 Beta から React Compiler が導入され利用可能となりました。 ※単体での検証としては次の記事が参考になります。 Next.js での利用 React Compiler のドキュメント内には、各種バンドラやフレームワークで利用する方法も記載されています。 というわけで、Next.js で実際に試してみよう、というのがこの記事の主旨です。 事前準備 / セットアップ 基本的にドキュメントに従って進めます。注意点としては、執筆時点での Next.js の Stable バージョン 14.2 ではまだ React 19 が利用できないため、canary バージョンの利用が必要です。 適当なディレクトリを作成し、その中で create-next-app を実行します。 実験用のためオプションは適当に選択しますが、せっかくなので Tur

こんにちは！サイボウズ株式会社 フロントエンドエキスパートチームの @mugi_uno です。 はじめに サイボウズ社内では毎週火曜日に Frontend Weekly と題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2024 年 5 月 21 日 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 HTML attributes vs DOM properties HTML attributes と DOM properties の動作の違いについて解説している記事です。 Validation、値のチェック、デフォルト値、フレームワークに応じた挙動などについてまとめられています。 Deep Dive into React Stream/Serialize React の Stream/Serialize

フロントエンド開発者/技術者ハンドブック2024など: Cybozu Frontend Weekly (2024-05-14号) こんにちは！サイボウズ株式会社フロントエンドエンジニアのおぐえもん（@oguemon_com）です。 はじめに サイボウズでは毎週火曜日にFrontend Weeklyという「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2024年5月14日のFrontend Weeklyで取り上げた記事や話題を紹介します。 取り上げた記事・話題 The Front End Developer/Engineer Handbook 2024 2024年のフロントエンド周辺の領域に関する解説を網羅的に扱ったドキュメントです。 Libraries with issues #25 Reactを取り巻く一部の周辺ライブラリで起票したReact19対応

React Aria Components は Adobe によって提供されている Headless UI コンポーネントライブラリです。振る舞いや国際化に, アクセシビリティに関する機能を備えており、Button や Input, TextField, Label などのシンプルな要素から、DatePicker や ComboBox などの様々なコンポーネントが提供されています。 今回は React Aria Components の設計について紹介します。 React Aria Components のコンポーネントの設計 React Aria Components の API はコンポジションを中心に設計されています。これにより、パターン間で共通のコンポーネントを共有することも、個別に使用することも可能です。なお、コンポジションについては React Component Compos

2024/5/11日に初開催された、TSKaigiに参加してきました。 私が聴講したセッションのタイムライン順に、軽いまとめ＆感想と、TSKaigi全体を通しての感想のまとめです。 備忘録がてらの事後記録のため、詳細は書いていません💦 (あと、LTセッションに関しても自分が聞いたものは残していますが、感想は含めていません。あしからずです🙇🏻‍♀️) 👏🏻 KeyNote 「ただセッションを聞くだけでなく、TypeScript仲間と交流することでTSコミュニティを盛り上げてほしい」といったオープニングのもと、TSKaigi2024がスタートされました👏🏻 👏🏻 KeyNote: What's New in TypeScript MicrosoftのPrincipal Product Manager である @drosenwasserさんによる基調講演でした。 Announc

こんにちは！サイボウズ株式会社 フロントエンドエキスパートチームの @mugi_uno です。 はじめに サイボウズ社内では毎週火曜日に Frontend Weekly と題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2024 年 5 月 7 日 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 React の fetch() 拡張が削除 React に標準で含まれていた fetch() に対するパッチが削除されました。 一方で、Next.js では同様の対応を別のパッチとして取りこむことで従来通りの挙動を維持するようです。 Google、サードパーティ cookie 廃止を 3 度目の延期 年内で完了予定だった Chrome での Third Party Cookie 廃止について、延期が発表されまし

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

こんにちは！サイボウズ株式会社フロントエンドエンジニアのおぐえもん（@oguemon_com）です。 はじめに サイボウズでは毎週火曜日にFrontend Weeklyという「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2024年4月16日のFrontend Weeklyで取り上げた記事や話題を紹介します。 取り上げた記事・話題 tailwindcss-mixins Tailwind CSSで、複数の要素に同時に適用するユーティリティのグループを定義できるプラグインです。mixin:などの記法を利用できます。 How we built JSR The JavaScript Registryで採用されている技術構成を紹介している記事です。例えばAPIサーバーではhyperというRust製のHTTPライブラリが利用されています。 Release Note

こんにちは! サイボウズ株式会社フロントエンドエンジニアの Saji (@sajikix) です。 はじめに サイボウズでは毎週火曜日に Frontend Weekly という「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2024/4/9 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 tailwindcss-signals : Signals for Tailwind CSS Tailwind で style queries(container queries 経由) を利用したカスタマイズを可能にするプラグイン「tailwindcss-signals」が公開されました。 [&>div] のような祖先セレクタを使う代わりに、:signal という記法を Tailwind に導入することで親要素の状態に

SPA モードの Remix を GitHub Pages にデプロイする方法が Remix のアカウントでポストされていたので、ふとそのリポジトリを見てみると、GitHub Actions を使った GitHub Pages へのデプロイが簡単に行えるようになっていて驚いた。 このポストを見ると GitHub Actions から提供されている Action など知らなかったものがいくつかあったので、Remix SPA モードのデプロイ方法など含め、内容を紹介したい。 動作確認した環境 関連がありそうな依存を記す。 "dependencies": { "@remix-run/node": "^2.8.1", "@remix-run/react": "^2.8.1", "@remix-run/serve": "^2.8.1", "react": "^18.2.0", "react-dom"

はじめに こんにちは！サイボウズ株式会社フロントエンドエキスパートチームの BaHo です。 サイボウズでは毎週火曜日にFrontend Weeklyという「1週間の間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2024/04/02のFrontend Weeklyで取り上げた記事や話題を紹介します。 取り上げた記事・話題 Making state easy with D1 GA, Hyperdrive, Queues and Workers Analytics Engine updates CloudflareのD1とHyperdriveがGAになりました。 同時に正式な料金も発表されており、D1は無料枠があるとのことです。 また、この無料博は今後削除する予定がないと強調されていました。 HyperdriveはWorkerd Paid Plan ($5/m