はてなブックマーク

2022/7/13に、フロントエンドツールである Vite のバージョン 3.0 がリリースされました 🎉 Vite 3.0 is out! | Vite CHANGELOG Migration from v2 | Vite このエントリーでは、リリース時に公開されたアナウンス(Release v3.0.0 · vitejs/vite)の内容をベースに、変更点を改めて１つずつ掘り下げて確認してみます。 New Documentation 公式ドキュメント(vitejs.dev)が VitePress のデフォルトテーマを利用した形で刷新されました。ダークテーマ表示などが可能になっています。 また、あわせて次のサブドメインでもドキュメントを閲覧できるようになっています。 v2.vitejs.dev - Vite 2.x 系のドキュメント main.vitejs.dev - Vite のメイ

数多くの Node.js ライブラリの作者として知られる Sindre Sorhus 氏が次のようなツイートをしていた。 Why is `import.meta.url` a string and not a `URL` instance? — Sindre Sorhus 💙💛 (@sindresorhus) July 24, 2022 これを見て私も理由が気になったので調査してみた。 先にまとめ URL の仕様にそうすべきと書いてあるから。 普通に考えると？ まず最初に思いつくであろうものが「import.meta.urlはECMAScriptの仕様だが、URLオブジェクトはHTMLの仕様に含まれるため、仕様間のそういった参照はできない」という理由である。 実際 Twitter 上ではそのように考えている人もいた。 しかし、それは誤りである。 ECMAScriptのimport.me

サイボウズ フロントエンドエキスパートチームの 2022 年上期（１月〜6 月）の取り組みを紹介します。 プロダクトへの支援 プロダクト支援としておもに次の 2 つを行いました。 kintone のフロントエンドリアーキテクチャ サイボウズ製品の販売管理システムのフロントエンドリアーキテクチャ これらの支援活動は現在（2022 年 7 月〜）も継続中です。 kintone のフロントエンドリアーキテクチャ kintone のフロントエンドリアーキテクチャプロジェクト、通称フロリアへの支援を昨年から引き続いて行っています。メンバーはプロジェクトのチームに所属する形で支援活動をしています。 フロリアの詳細については次の記事を参照ください。 また、直接的な支援ではありませんが、フロリアプロジェクトでの社外アウトプット（社の技術ブログへの執筆）を支援する活動も行っています。 サイボウズ製品の販売管

この記事では2022年06月06日~09日に開催された TC39 meeting 90th で議題に上がったプロポーザルを紹介します。 For Stage 4 findLast / findLastIndex Stage 4 に到達しました findLast と findLastIndex は、Array.prototype.find と Array.prototype.findIndex の逆から走査するバージョンです。 const arr = [ { prop1: 1, prop2: "foo" }, { prop1: 1, props2: "bar" }, ]; const obj1 = arr.find((element) => element.prop1 === 1); console.log(obj1.prop2); // "foo" const obj2 = arr.find

この記事では2022年03月28日~31日に開催された TC39 meeting 89th で議題に上がったプロポーザルを紹介します。 For Stage 4 For Stage 4 の提案はありませんでした。 For Stage 3 RegExp set notation + Unicode properties of strings Stage 3 に到達しました このプロポーザルは正規表現に新しくvフラグを導入し、その中で set notation と Unicode properties of strings を使えるようにします。 (翻訳するとしたら set notation は「集合の表記」、properties of strings は「文字列プロパティ」でしょうか。定訳がわからないのでこの記事ではこれらの用語を英語のまま表記します。) まず、set notation とは次

Chrome99に新機能として CSS Cascade Layers が実装され、Firefox、Edge、Safari といった主要ブラウザで CSS Cascade Layers が使えるようになりました。 CSS Cascade Layers とは CSS の仕様において、要素にどのスタイルを適用するかはざっくりと次のような優先順位で決定されていました。(カスケード順を省いて簡略的に記述しています) !important インラインスタイル セレクターの詳細度 同じ詳細度であれば最後に宣言されたもの ここに CSS Cascade Layers が導入されると次のように変わります。 !important インラインスタイル Cascade Layers セレクターの詳細度 同じ詳細度であれば最後に宣言されたもの 従来の CSS が抱える複雑な詳細度の管理 どのスタイルを適用するか判断

それっぽいタイトルを付けましたが特に意味はないです。 workspace を使ったコマンドを最適化して実行する Turborepo についてのお話で Turborepo を軽く触ってみた際にnpx create-turbo@latestで作られる構成がとてもわかりやすく、プロダクトの初期段階からモノレポを採用するのは選択肢の 1 つとしていいのでは、と思い続編を書きました。 前回と同じくサンプルのリポジトリはこちらになります。 https://github.com/nus3/p-turborepo/tree/main/yarn 概要 モノレポを採用することで、同一リポジトリ内で自作した汎用的なライブラリやコンポーネントを複数のアプリケーションで使いまわせる モノレポの規模が大きくなってきた場合には、モノレポ内のパッケージを npm に公開することでアプリケーションとパッケージを非同期に開発

今年からフロントエンドエキスパートチームでは活動内容の一つである探求の一環として、メンバーが気になった技術に対して、気軽に触ってみる会をしています。次の画像は筆者が Slack で、気軽に触ってみる会の開催を宣言してる時のものです。 今回は去年の 12 月に Vercel に買収されたニュースがあった Turborepo を気軽に触ってみました。 個人的には 1 人で調べるときよりも複数人でわいわい調べた方が、その技術や関連する周辺知識の話を色んな人の観点で深掘ってできて、とても有意義な時間でした。 概要 Turborepo はモノレポのためのビルドシステムで次のような特徴があります。 Yarn, npm, pnpm の workspaces に対応してるリポジトリに対して簡単に導入できる workspace 内のコマンドの依存関係をシンプルに設定してくれる Turborepo で実行する

この記事はCybozu Advent Calendar 2021の 18 日目の記事です（業務なので前日に出してます 🍀）。 サイボウズには 10 年以上運用が続いているプロダクトがいくつかあります。フロントエンドエキスパートチームは、そんなプロダクトや開発メンバーへの支援を横断的に行うチームです。 フロントエンドエキスパートチームの今年の取り組みを紹介します。 フロントエンドエキスパートチームの立ち位置とミッション フロントエンドエキスパートチームは特定のプロダクトなどに属さない、独立した横断的な支援チームです。活動内容についてはすべてチームに裁量があり、何をどうしていくかは自律的に決めて動く必要があります。 フロントエンドエキスパートチームでは「サイボウズのフロントエンドを最高にする」というミッションを掲げています。このミッションを達成するための活動を日々考えながら活動しています。

11 月 11 日に、以前から一部で注目されていたある Pull Request が tc39/ecma262 にマージされました。 この Pull Request がマージされたことで、識別子ではなく文字列リテラルを使った import/export が可能になりました。 この仕様変更はプロポーザルという形で扱われてはいませんが、構文上の影響があるので、JavaScript ユーザーとして知っておくに越したことはないものになります。 概要 まず具体例を示します。 今回の変更によって、次のように import/export する際の名前として文字列リテラルを使えるようになります。 基本的にはこれだけです。 詳解 ここからは仕様上の用語を使って解説をします。 この変更が入る前の ECMAScript では ImportSpecifier で as を使う場合 as の左側は Identifi

先日 Safari 15 がリリースされました。 https://webkit.org/blog/11989/new-webkit-features-in-safari-15/ 影響の大きそうな箇所や、知っておいたほうが良さそうな箇所を中心に紹介します。 HTML theme-color meta タグ上での theme-color のサポートが追加されました。 指定することで、ブラウザのメニューバーやタブバーといった領域のカラーを変更することができます。 prefers-color-scheme と併用することで、ダークモード/ライトモードに応じた色の指定もできます。 Design for Safari 15 CSS aspect-ratio プロパティのサポート aspect-ratio - CSS: Cascading Style Sheets | MDN lab() lch() h

2021年7月に行われた TC39 ミーティングで Ergonomic brand checks for Private Fields というプロポーザルが Stage 4 になりました。 このプロポーザルは、ES2022 に含まれる予定です。また、TypeScript 4.5 にも含まれる予定です。 この記事では、Ergonomic brand checks for Private Fields について解説します。 概要 Ergonomic brand checks for Private Fields は、in 演算子を使ったプライベートフィールドの有無の判定を可能にするプロポーザルです。 現在の in 演算子 in 演算子は、オブジェクトが特定の名前のプロパティを持っているかどうかを判定するための二項演算子です。 左辺にプロパティの名前、右辺にオブジェクトを受け取ります。 新しい

TC39 の 86 回目のミーティングが 10/25 ~ 10/28 に開催されました。 このミーティングで議題に上がった提案と、そのステージの移動について紹介します。 agendas/10.md at master · tc39/agendas Oct 2021 · Issue #77 · babel/proposals for Stage 4 Error Cause Stage 4 になりました。ECMAScript 2022 に入ります Error Cause は、Error コンストラクタの第 2 引数に cause という値で原因となったエラーを渡すことができるようにする提案です。 キャッチする側では、error.cause で、そのエラーを取得できます。 例を示します。 doUploadJob 関数は fetch を実行して失敗したときに新しいエラーをスローします。そのエラーの

Chrome 95 がリリースされ、新機能として EyeDropper API が追加されました。(Edge 95 にも追加されました) EyeDropper API とは EyeDropper API は画面上から色情報を取得するスポイトツールをブラウザ上で実現する API です。スポイトツールはデザインツールなどに搭載されていることが多いかと思います。 Chrome の DevTools にも色選択をするときにスポイトアイコンをクリックするとスポイトツールが使えますが、この機能が単体の Web API として実装された形になります。 使い方 EyeDropper API の使い方は次のようになります。 const eyeDropper = new EyeDropper(); const result = await eyeDropper.open(); console.log(resu

こんにちは、サイボウズフロントエンドエキスパートチームの@__sosukesuzukiです。 サイボウズにはCybozu Inside Outという技術ブログがあります。 それとは別に、この度フロントエンドエキスパートチームとしてウェブサイトを開設することにしました。 この記事では、このウェブサイトを開設することになった経緯と目的、使用した技術について説明します。 経緯 フロントエンドエキスパートチームでは、チームでのコミュニケーションの促進を主な目的としてハッカソンを開催することがあります。 (チームでのハッカソンについてはCybozu Inside Out に投稿されている記事をご覧ください) そのようなハッカソンで、フリーテーマの回がありました。 そこで、SakitoさんとBaHoさんとsosukesuzuki(私)のチームでは、フロントエンドエキスパートチームのウェブサイトを作って