はてなブックマーク

過去のテストの実行時間を利用してテストの sharding を効率化する Tenbin というツールを作りました。 この記事では Tenbin が解決する課題と内部実装の詳細について解説します。ツールの使い方などは、リポジトリの README をぜひ読んでもらえればと思います。 Tenbin が解決する課題 テストの実行時間を削減するために、CI などではテストを sharding (分割) して実行することがあると思います。フロントエンドでよく使われる Jest、Vitest、Playwright などのツールでは、実際に sharding の機能を提供しています。 確かに sharding はテストの実行時間を削減できるのですが、分割のアルゴリズムがいまいちで shard 毎の実行時間に大きく差が出てしまった経験はないでしょうか？[1]Tenbin は、この問題を過去のテストの実行時間

Tailwind CSS v4.0 Beta のリリースなど: Cybozu Frontend Weekly (2024-11-26号) こんにちは！ サイボウズ株式会社 フロントエンドエンジニア（内定者バイト）の mehm8128 (@mehm8128) です。 はじめに サイボウズ社内では毎週火曜日に Frontend Weekly と題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2024/11/26 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 Using React Server Components in Expo Router apps Expo Router で React Server Components が使えるようになりました。 Experimental なので、まだ本番環境で

はじめまして！ サイボウズ株式会社 フロントエンドエンジニア（内定者バイト）の mehm8128 (@mehm8128) です。 はじめに サイボウズ社内では毎週火曜日に Frontend Weekly と題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2024/10/22 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 Announcing Deno 2 Deno v2.0 がリリースされました。 v2.0 には次の内容が含まれます。 Node.js および npm との後方互換性 package.jsonとnode_modulesをネイティブでサポート Next.js、Astro、Remix、SvelteKit など多くのフレームワークをサポート deno fmtで HTML、CSS、YAML をフ

5つのECMAScript ProposalがStage4になど: Cybozu Frontend Weekly (2024-10-15号) こんにちは! サイボウズ株式会社フロントエンドエンジニアの Saji (@sajikix) です。 はじめに サイボウズでは毎週火曜日に Frontend Weekly という「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2024/10/15 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 PR TIMES フロントエンドの CI パイプラインを改善して、CI 処理時間と Billable Time を 50%を削減した話 | PR TIMES 開発者ブログ changed-files という github action 使って、変更があった特定のディレクトリのみ

CSS新機能のWorking Draft公開など: Cybozu Frontend Weekly (2024-10-08号) こんにちは！サイボウズ株式会社フロントエンドエンジニアのsaku (@sakupi01)です。 はじめに サイボウズ社内では毎週火曜日にFrontend Weeklyと題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2024/10/8のFrontend Weeklyで取り上げた記事や話題を紹介します。 取り上げた記事・話題 CSS Values and Units Module Level 5 CSS Values and Units Module Level 5のWorking Draftリリースの紹介記事です。 Level 5には多くの機能が追加・拡張されており、Level4との差分仕様としてまとめられています。 attr

こんにちは！サイボウズ株式会社フロントエンドエンジニアのdaiki（@k1tikurisu）です。 はじめに サイボウズ社内では毎週火曜日にFrontend Weeklyと題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2024/10/01のFrontend Weeklyで取り上げた記事や話題を紹介します。 取り上げた記事・話題 WebKit Features in Safari 18.0 Safari 18.0がリリースされました。一部機能を抜粋します。 新機能 Distraction Control ウェブブラウジング中の邪魔な要素を非表示にできる iPhone Mirroring and remote inspection MacからiPhoneをミラーリングし、リモートiOS上のWebサイトのテストやデバッグができる CSS View Tra

Rolldown + oxcによるビルド＆型生成の高速化など: Cybozu Frontend Weekly (2024-09-17号) こんにちは！サイボウズ株式会社フロントエンドエンジニアのsaku (@sakupi01)です。 はじめに サイボウズ社内では毎週火曜日にFrontend Weeklyと題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2024/09/17のFrontend Weeklyで取り上げた記事や話題を紹介します。 取り上げた記事・話題 2024 WebKit Contributors Meeting WebKit Contributors Meeting 2024 の情報が公開されていました。 WebKit Contributor であれば参加できるようです。クパチーノで行われ、オンライン参加も可能とのことです。 Rolld

こんにちは! サイボウズ株式会社フロントエンドエンジニアの Saji (@sajikix) です。 はじめに サイボウズでは毎週火曜日に Frontend Weekly という「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2024/9/10 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 Paragraphs | scottohara.me HTML における「段落（paragraph）」の概念と、その適切な使用について解説した記事です。 HTML の paragraph は、<p> 要素だけでなく他の要素も含む広い概念で、スクリーンリーダーは <p> 要素だけでなく、<span>, <div>,<li> なども段落として認識します。そのため role=paragraph のような ARIA ロールは、

Chrome 129 Beta Chrome 129 Betaが2024-08-21にリリースされました。 position-area の名称変更や Intl.DurationFormat の追加といったアップデートが盛り込まれています。 本記事では、アップデートの中でも特に実験的な機能のひとつである interpolate-size と calc-size() について紹介します。 前提知識: intrinsic-size(内在サイズ) intrinsic-sizeはピクセルや一般的なパーセンテージ指定のような外部レイアウトに依存したサイジングではなく、要素に含まれるコンテンツの大きさを基準に要素のサイズを変更する仕組みです。 現在、auto や min-content、max-content といったキーワード値がこれに該当しており、それぞれ要素内コンテンツの折り返し可能なサイズを基準

こんにちは！サイボウズ株式会社フロントエンドエンジニアのおぐえもん（@oguemon_com）です。 はじめに サイボウズでは毎週火曜日にFrontend Weeklyという「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2024年9月3日のFrontend Weeklyで取り上げた記事や話題を紹介します。 取り上げた記事・話題 Nuxt Bridge を活用して Nuxt 3 へ移行しました STORESがNuxt 3への移行を完了した旨を報告する記事です。2022年12月の報告の続編になります。 刷新における工夫点や、移行により得られた恩恵などが紹介されています。 Announcing TypeScript 5.6 RC TypeScript 5.6でリリース予定の新機能が紹介されています。 例えば、if文の条件文が常にtrue/falseのときに

こんにちは！サイボウズ株式会社 フロントエンドエキスパートチームの @mugi_uno です。 はじめに サイボウズ社内では毎週火曜日に Frontend Weekly と題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2024 年 8 月 27 日 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 Boosting performance: Faire’s transition to NextJS https://www.faire.com/ が React Router から Next.js App Router へ移行した際の解説記事です。Remix や Fresh/Deno なども検討した結果、スピードやフレームワークの成熟度、移行作業のボリュームや開発者経験などから Next.js の採用に至っ

こんにちは！サイボウズ株式会社フロントエンドエンジニアのdaiki（@k1tikurisu）です。 はじめに サイボウズ社内では毎週火曜日にFrontend Weeklyと題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2024/08/20のFrontend Weeklyで取り上げた記事や話題を紹介します。 取り上げた記事・話題 feat(next): next.config.ts by devjiwonchoi · Pull Request #63051 · vercel/next.js Next.jsの設定ファイルをTypeScriptで書けるようになりました。next.config.tsに設定ファイルを記述することができます。 Using pnpm on Heroku HerokuのNode.js buildpackが、パッケージマネージャの1

こんにちは！サイボウズ様で業務委託でフロントエンドエンジニアをしている Nokogiri です。 このたびはCybozu Summer Blog Fes'24にて執筆の機会をいただきましたので、僭越ながら寄稿させていただきます。 今回はReact Testing LibraryでのWAI-ARIAロールの活用事例について紹介させていただきます。 前提 Reactで書かれたUIをテストする方法の一つとしてTesting Library があります。 Testing Libraryでは要素取得にWAI-ARIA ロールを利用することを推奨しています。（ロールは視覚/マウス ユーザーだけでなく、支援技術を使用するユーザーのエクスペリエンスを反映するため） 実はWAI-ARIA ロールには66個のロールがありますが、実際によくWeb開発で使われるUIにどのようなロールが付与されているのかを知りたく

本記事では、Clipboard APIのブラウザ間での仕様の違いと、非同期処理を含む操作をする際の注意点とその対策をまとめました。 Clipboard APIとは Clipboard APIは、Webアプリケーションがシステムクリップボードにアクセスするためのインターフェースを提供します。 例えば、Clipboard.writeTextを使用すると、クリップボードを特定の文字列で上書きすることができます。 // テキストをクリップボードにコピー navigator.clipboard.writeText("コピーしたいテキスト").then(() => { console.log("コピー成功"); }).catch(err => { console.error("コピー失敗:", err); }); Clipboard APIは、現在W3CのWorking Draftとして公開されていま

リッチテキストエディタ(RTE)って？ リッチテキストエディタ（以下RTE）とは、文字を入力できるだけでなく、文字に装飾を加えたり、段落を設定できたりと複雑な機能を持つエディタのことです。 弊社プロダクトであるkintone内にも以下のようなエディタが存在します。 また、似たものを指すWYSIWYG(読み方:ウィジウィグ)という用語もありますが、これはWhat You See Is What You Get（見たままが得られる）の略であり、編集時と出力時の見た目が同じエディタのことを指します。 Zennやesaのように、Markdown記法で編集したものが変換されて表示されるようなエディタは含みません。 このようにWYSIWYGはRTEより狭義の意味になっています。 WYSIWYGエディタ(Google Docs) WYSIWYGではないエディタ（esa） 独自データモデル VS DOMツ

はじめに こんにちは！サイボウズ株式会社でkintone開発を行っている かげ です。 弊社が開発しているkintoneは、プログラミングの知識がなくても、ノーコードで業務のシステム化や効率化を実現するアプリがつくれるクラウドサービスです。 kintoneは初回リリースから10年以上経ちましたが、そのフロントエンドに使用されるClosure Libraryが今月(2024/08)EOLを迎えます。EOLを迎えたフレームワークを使用し続けることは、リスクにもつながりますし、今後より良くに、お客様への安定的なサービスの提供を維持するため、Reactへの刷新活動を行っています。 現在開発段階ではありますが、そこで工夫した点をご紹介したいと思います。この記事では、kintoneをご利用されるお客様がよく使用されるレコード一覧、レコード詳細画面を取り上げていきます。他にも画面はありますが、今回はご紹

本記事では2024-08-06にリリースされた Firefox 129をもって主要なブラウザすべてで利用可能になったアットルール @start-style について紹介します。 トランジション開始時のスタイルを指定できる @starting-style @starting-style はトランジションされる要素に対して、CSS プロパティの開始値を定義するためのプロパティです。 従来の CSS 記法では display: none; が指定されている要素にトランジションを使用した場合、トランジションが発生しませんでした。 そこで、@starting-style ルールを用いてトランジション開始時のスタイルをしているすることで元の要素に display: none; が指定されていたとしても正しくトランジションを発火させることができるようになります。 .open-content { disp

自信を持って「FlatConfig 対応完了した！」って言いたい 以前、自分が書いた記事では FlatConfig 自体についてや FlatConfig 移行という言葉の多層性、実際に移行するときに役立つ Tips などを紹介しました。 ただ、この記事では FlatConfig 移行における大事な最後のピースである「移行ができたことをチェックする」という点について言及しませんでした。Config を FlatConfig の形に変更できたからといって、動かないのはもっての他、動いているように見えて以前と同じチェックができていないようでは「移行できた」とは言えないでしょう。 この記事では、既存の旧 Config から FlatConfig に移行している人に向けて、何を持って移行できたと判断するか、そのためのツールを作った話をします。 何を満たしたら安全に移行できたとするか 前提 ここでは旧

Interop 2024のFocus Areasの1つに、Web Componentsがあります。このWeb Componentsに関連する機能として、Declarative Shadow DOMやsetHTMLUnsafe、parseHTMLUnsafeが2024年に入って新たにBaselineに追加されました。 これらの機能・Web APIは、サーバーサイドでの宣言的なShadow DOMの構築によるJavaScriptが無効な環境でも動作するWeb Componentsの実現や、クライアントサイドでの動的なDeclarative Shadow DOMの追加によるWeb Componentsの利用範囲の拡大に寄与してくれています。 今回は、このような盛り上がりを見せるWeb Componentsが、Declarative Shadow DOMやsetHTMLUnsafe・parseHT

こんにちは teppeis です。普段は開発本部長をやってますが、ブログフェスに駆り出されました！ 本日は Node v22.3.0 に続いて v20.16.0 にもバックポートされた process.getBuiltinModule(id) について解説します。 問題: 同期的な条件付き require を ESM 化できない Node v22 にて、フラグ付きで CJS (CommonJS Modules) から ESM を require できるようになりました。いわゆる require(esm) です。これにより、今までは互換性の懸念で ESM 化を足踏みしていた著名ライブラリも ESM 化を試みる動きが出てきました。 TypeScript もその一つで、TypeScript チームは TypeScript 自体を ESM 化しようと試みました。しかしながら、今回の主題である条件付

こんにちは。ぶっちーです。 普段は kintone というプロダクトの新機能開発を行っており、最近は、フロントエンドの技術刷新に取り組んでいます。 この技術刷新では、Closure Tools から React への置き換えを行っています。詳しくは、以下の記事をご覧ください。 刷新をする中で、React を書いていくうちに React の設計、特に React Hooks に対する考え方が難しいと感じました。 そこで、React Hooks について学習し、気付いた点があったのでこの記事にまとめます。 命令的 UI と宣言的 UI 技術刷新前の Closure Tools は、class 構文を使用したオブジェクト指向をベースとして、命令的 UI を構築しています。 刷新をする中で、最終的にどのような UI を構築するのかを把握する必要があります。このときに、コードベースから理解をしようと

最近、SQL アンチパターンという本を読んでいたら、MySQL、 PostgreSQL、SQLite などのデータベースでも拡張機能を利用することで全文検索を実装できることを知りました。[1] SQLite で構築されている Cloudflare D1 についても調べてみたところ、制限はあるものの全文検索の拡張機能が使えるということがわかりました。 Export is not supported for virtual tables, including databases with virtual tables. D1 supports virtual tables for full-text search using SQLite’s FTS5 module. 今回は個人ブログの全文検索 API を D1 を利用して実装してみたので、その方法について書きたいと思います。 作成した AP

重い腰を上げて FlatConfig 対応をした ESLint が新しい設定形式として FlatConfig を導入してから随分と経ち、最新バージョンの v9 では FlatConfig がデフォルトになりました。一方で利用者の多い plugin でもなかなか対応が進まず、周りでは思ったよりも FlatConfig への移行が進んでいない印象を受けます。 とはいえ次のバージョンである v10 では FlatConfig しかサポートしないことが予定されており、今まで移行を見送ってきた方も「さすがにそろそろ移行するか...」と思っているのではないでしょうか。自身の所属チームで管理している ESLint の rule セット : @cybozu/eslint-config でも遅ればせながら FlatConfig 対応を進めています。（現在はアルファ版で提供中です） そんな @cybozu/e

本記事では、ブラウザ拡張機能開発を加速させる、個人的に注目な3つの拡張機能開発フレームワーク・ツール（WXT、Plasmo、Extension.js）を紹介します。 サンプル拡張機能の実装を通して、それぞれの特徴、セットアップ方法、実際の開発フローを見ていきます。お好みの拡張機能開発ツールが見つかれば嬉しいです。 各フレームワーク・ツールの紹介 WXT WXTは、Viteベースのブラウザ拡張フレームワークです。次のような特徴を持っています（トップページから抜粋）。 クロスブラウザ対応 Chrome、Firefox、Edge、Safari、その他Chromiumベースのブラウザ Manifest V2、V3の両方に対応 開発モードでのHMRと、開発用ブラウザの自動起動 内部的にChrome Launcher等を使用 ファイルベースのエントリーポイントでマニフェストを自動生成 Nuxt風の自動

こんにちは！サイボウズ株式会社フロントエンドエンジニアの おぐえもん（@oguemon_com） です。 サイボウズの技術ブログの夏フェス・CYBOZU SUMMER BLOG FES '24が始まりました！企画の一環として、フロントエンドの記事が今日から20日連続投稿されますので、みなさんお楽しみに！ 今回は、コーディングに手放せない存在の1つ「配列」をテーマに、JavaScriptの配列操作の中でも普段使いしやすいものをピックアップして、細かいテクニックや比較的新しい話を交えながらお届けします。 身近ながらも今まで見落としていたポイントを拾ってもらえたらと思います！ // 凡例 const arr = ["a", "b", "c"] arr // console.logした出力結果 ← 出力結果に対するコメント

3rd Party Cookie 廃止の方針変更など : Cybozu Frontend Weekly (2024-07-23号) こんにちは！サイボウズ株式会社 フロントエンドエキスパートチームの @mugi_uno です。 はじめに サイボウズ社内では毎週火曜日に Frontend Weekly と題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2024 年 7 月 23 日 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 Temporal を取り巻く仕様を整理する ECMAScript Stage 3 の Temporal に関する発表資料です。仕様そのものの整理や、タイムゾーン・カレンダーのサポート、Intl との関係性について解説されています。 Fastly が開発者向けの無料プランを提供開始

こんにちは！サイボウズ株式会社フロントエンドエンジニアのsaku (@sakupi01)です。 はじめに サイボウズ社内では毎週火曜日にFrontend Weeklyと題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2024/07/16のFrontend Weeklyで取り上げた記事や話題を紹介します。 取り上げた記事・話題 MySQLデータベースエンジンでJSをサポート データベースエンジン側にあらかじめまとまったクエリの処理などを登録しておき、必要に応じて呼び出すことでその処理を実行できるストアドプロシージャやストアドファンクションという機能の処理をJavaScriptで記述可能になります。 MySQLのデータベースエンジン側でJavaScriptを実行する機能を提供しているのはGraalVM上で実装されているGraalJSです。 以下のように、

こんにちは！サイボウズ株式会社フロントエンドエンジニアのdaiki（@k1tikurisu）です。 はじめに サイボウズ社内では毎週火曜日にFrontend Weeklyと題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2024/07/09のFrontend Weeklyで取り上げた記事や話題を紹介します。 取り上げた記事・話題 React & Codemod Announcement React 19への移行を支援するツール（codemod）が公開されました。例えば、次の移行作業を自動化してくれます。 Context.ProviderをContextに置き換え forwardRefの削除 useContextをuseに置き換え next-cache-toolbar Next.jsのData Cacheの中身を視覚的に見れるツールです。 Diving