本企画は、その名の通りサイボウズによる夏のブログの祭典です。 「チームワークあふれる社会を創る」という存在意義のもと、こうした社会の実現に向けて技術的な側面から様々な試みを続ける私たちサイボウズのエンジニアとデザイナーが、日々の業務や自己研鑽のなかで培ってきた知見を技術記事として毎日発信します！ 「夏フェス」になぞらえて設計された本企画は 9つの「Stage」 で構成され、それぞれのStageでは会期の一部または全部の間、Stageのテーマに沿った記事が連日投稿されます。つまり、日によっては同じ日に異なるステージから複数の記事が投稿されることもあります。 意欲的なエンジニアとデザイナーが数多く在籍しているおかげで、初めての試みながら 80名以上 が執筆することになりました！20DAYSの会期中に投稿される記事数は 約100本 にのぼる予定です！ 様々な視点から怒涛のように発信されるサイボウ

数多くの 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年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 で実行する

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

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 演算子は、オブジェクトが特定の名前のプロパティを持っているかどうかを判定するための二項演算子です。 左辺にプロパティの名前、右辺にオブジェクトを受け取ります。 新しい

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(私)のチームでは、フロントエンドエキスパートチームのウェブサイトを作って