こんにちは！サイボウズ株式会社フロントエンドエンジニアのsaku (@sakupi01)です。 はじめにサイボウズ社内では毎週火曜日にFrontend Weeklyと題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。今回は、2024/09/17のFrontend Weeklyで取り上げた記事や話題を紹介します。 取り上げた記事・話題 2024 WebKit Contributors Meetinghttps://webkit.org/meeting/WebKit Contributors Meeting 2024 の情報が公開されていました...

こんにちは! サイボウズ株式会社フロントエンドエンジニアの Saji (@sajikix) です。 はじめにサイボウズでは毎週火曜日に Frontend Weekly という「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。今回は、2024/9/10 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 Paragraphs | scottohara.mehttps://www.scottohara.me/blog/2024/08/29/paragraphs.htmlHTML における「段落（para...

https://developer.chrome.com/blog/chrome-129-beta!本記事で取り上げているCodepenは2024-09-06現在、Chrome 129 Betaでのみ動作します。 Chrome 129 BetaChrome 129 Betaが2024-08-21にリリースされました。position-area の名称変更や Intl.DurationFormat の追加といったアップデートが盛り込まれています。本記事では、アップデートの中でも特に実験的な機能のひとつである interpolate-size と calc-size() につ...

こんにちは！サイボウズ株式会社フロントエンドエンジニアのおぐえもん（@oguemon_com）です。 はじめにサイボウズでは毎週火曜日にFrontend Weeklyという「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。今回は、2024年9月3日のFrontend Weeklyで取り上げた記事や話題を紹介します。 取り上げた記事・話題 Nuxt Bridge を活用して Nuxt 3 へ移行しましたhttps://product.st.inc/entry/2024/08/21/141549STORESがNuxt 3への移行を完了した旨を報告...

こんにちは！サイボウズ株式会社 フロントエンドエキスパートチームの @mugi_uno です。 はじめにサイボウズ社内では毎週火曜日に Frontend Weekly と題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。今回は、2024 年 8 月 27 日 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 Boosting performance: Faire’s transition to NextJShttps://craft.faire.com/boosting-performance-f...

こんにちは！サイボウズ株式会社フロントエンドエンジニアのdaiki（@k1tikurisu）です。 はじめにサイボウズ社内では毎週火曜日にFrontend Weeklyと題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。今回は、2024/08/20のFrontend Weeklyで取り上げた記事や話題を紹介します。 取り上げた記事・話題 feat(next): next.config.ts by devjiwonchoi · Pull Request #63051 · vercel/next.jshttps://github.com/verc...

!この記事は、CYBOZU SUMMER BLOG FES '24 (Frontend Stage) DAY 20 の記事です。 Baseline とはBaseline というものをご存知でしょうか。Google I/O 2023 にで発表された、API のブラウザ間での互換性を明示するための取り組みです。https://web.dev/baseline/overview日々ブラウザで利用可能な API は増えていますが、ブラウザ間によっても実装状況に差異があります。新しい機能の存在を知ったとしても「で、これは結局もう使っていいの？」という判断は別途必要となります。Ba...

!この記事は、CYBOZU SUMMER BLOG FES '24 (Frontend Stage) DAY 19の記事です。こんにちは！サイボウズ様で業務委託でフロントエンドエンジニアをしている Nokogiri です。このたびはCybozu Summer Blog Fes'24にて執筆の機会をいただきましたので、僭越ながら寄稿させていただきます。今回はReact Testing LibraryでのWAI-ARIAロールの活用事例について紹介させていただきます。 前提Reactで書かれたUIをテストする方法の一つとしてTesting Library があります。Tes...

!この記事は、CYBOZU SUMMER BLOG FES '24 (Frontend Stage) DAY 18の記事です。本記事では、Clipboard APIのブラウザ間での仕様の違いと、非同期処理を含む操作をする際の注意点とその対策をまとめました。 Clipboard APIとはClipboard APIは、Webアプリケーションがシステムクリップボードにアクセスするためのインターフェースを提供します。例えば、Clipboard.writeTextを使用すると、クリップボードを特定の文字列で上書きすることができます。// テキストをクリップボードにコピーnavi...

!この記事は、CYBOZU SUMMER BLOG FES '24 (Frontend Stage) DAY 17日目の記事です。 リッチテキストエディタ(RTE)って？リッチテキストエディタ（以下RTE）とは、文字を入力できるだけでなく、文字に装飾を加えたり、段落を設定できたりと複雑な機能を持つエディタのことです。弊社プロダクトであるkintone内にも以下のようなエディタが存在します。また、似たものを指すWYSIWYG(読み方:ウィジウィグ)という用語もありますが、これはWhat You See Is What You Get（見たままが得られる）の略であり、編集時と...

!この記事は、CYBOZU SUMMER BLOG FES '24 (Frontend Stage) DAY 16の記事です。タッチデバイスではホバー状態が存在しないため、iOS などではタップ時にホバースタイルが適用されて、タップ後もスタイルが維持されることがあります。このような予期しない挙動は、ユーザー体験に悪影響を与える可能性があります。この記事ではホバーが有効なデバイスを判定し、スタイルを適用する方法を紹介します。 メディアクエリを使用するホバーが有効なデバイスかどうかを判定するために、hover や any-hover メディアクエリを使用できます。@med...

!この記事は、CYBOZU SUMMER BLOG FES '24 (kintone Stage) DAY 3の記事です。 はじめにこんにちは！サイボウズ株式会社でkintone開発を行っている かげ です。弊社が開発しているkintoneは、プログラミングの知識がなくても、ノーコードで業務のシステム化や効率化を実現するアプリがつくれるクラウドサービスです。https://kintone.cybozu.co.jpkintoneは初回リリースから10年以上経ちましたが、そのフロントエンドに使用されるClosure Libraryが今月(2024/08)EOLを迎えます。EO...

!この記事は Cybozu Summer Blog Fes'24 (Frontend Stage) DAY 12の記事です。本記事では2024-08-06にリリースされた Firefox 129をもって主要なブラウザすべてで利用可能になったアットルール @start-style について紹介します。https://developer.mozilla.org/ja/docs/Web/CSS/@starting-style トランジション開始時のスタイルを指定できる @starting-style@starting-style はトランジションされる要素に対して、CSS プロ...

!この記事は、CYBOZU SUMMER BLOG FES '24 (Frontend Stage) DAY 10 の記事です。 自信を持って「FlatConfig 対応完了した！」って言いたい以前、自分が書いた記事では FlatConfig 自体についてや FlatConfig 移行という言葉の多層性、実際に移行するときに役立つ Tips などを紹介しました。https://zenn.dev/cybozu_frontend/articles/about-eslint-flat-configただ、この記事では FlatConfig 移行における大事な最後のピースである「移行...

!この記事は、CYBOZU SUMMER BLOG FES '24 (Frontend Stage) DAY 9の記事です。Interop 2024のFocus Areasの1つに、Web Componentsがあります。このWeb Componentsに関連する機能として、Declarative Shadow DOMやsetHTMLUnsafe、parseHTMLUnsafeが2024年に入って新たにBaselineに追加されました。これらの機能・Web APIは、サーバーサイドでの宣言的なShadow DOMの構築によるJavaScriptが無効な環境でも動作するWeb Co...

!この記事は、CYBOZU SUMMER BLOG FES '24 (Frontend Stage) DAY 8の記事です。こんにちは！サイボウズ株式会社フロントエンドエンジニアの protein_mochi です！夏といえば、サマータイム！今回は、「夏」と言えば手放せない存在の1つ「サマータイム(DST)」を紹介しつつ、Web上でサマータイムを考慮して時差の計算をする際のややこしい部分をピックアップして、それぞれの問題点と考えられる対応策をお届けします。 サマータイム？あ、あの美味しいやつねサマータイムとは、アメリカではDaylight Savings Time(DST...

!この記事は、CYBOZU SUMMER BLOG FES '24 (Frontend Stage) DAY 7 の記事です。こんにちは teppeis です。普段は開発本部長をやってますが、ブログフェスに駆り出されました！本日は Node v22.3.0 に続いて v20.16.0 にもバックポートされた process.getBuiltinModule(id) について解説します。 問題: 同期的な条件付き require を ESM 化できないNode v22 にて、フラグ付きで CJS (CommonJS Modules) から ESM を require できるよ...

!この記事は、CYBOZU SUMMER BLOG FES '24 (Frontend Stage) DAY 6 の記事です。こんにちは。ぶっちーです。普段は kintone というプロダクトの新機能開発を行っており、最近は、フロントエンドの技術刷新に取り組んでいます。この技術刷新では、Closure Tools から React への置き換えを行っています。詳しくは、以下の記事をご覧ください。https://blog.cybozu.io/entry/2021/07/20/170000刷新をする中で、React を書いていくうちに React の設計、特に React Ho...

!この記事は、CYBOZU SUMMER BLOG FES '24 (Frontend Stage) DAY 5 の記事です。最近、SQL アンチパターンという本を読んでいたら、MySQL、 PostgreSQL、SQLite などのデータベースでも拡張機能を利用することで全文検索を実装できることを知りました。[1]SQLite で構築されている Cloudflare D1 についても調べてみたところ、制限はあるものの全文検索の拡張機能が使えるということがわかりました。Export is not supported for virtual tables, including ...

!この記事は、CYBOZU SUMMER BLOG FES '24 (Frontend Stage) DAY 3 の記事です。 重い腰を上げて FlatConfig 対応をしたESLint が新しい設定形式として FlatConfig を導入してから随分と経ち、最新バージョンの v9 では FlatConfig がデフォルトになりました。一方で利用者の多い plugin でもなかなか対応が進まず、周りでは思ったよりも FlatConfig への移行が進んでいない印象を受けます。とはいえ次のバージョンである v10 では FlatConfig しかサポートしないことが予定されて...