CSS新機能のWorking Draft公開など: Cybozu Frontend Weekly (2024-10-08号)
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
Cloudflareの大幅アップデートなど: Cybozu Frontend Weekly (2024-10-01号)
こんにちは！サイボウズ株式会社フロントエンドエンジニアの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
Chrome 129 Betaで追加されたCSSプロパティinterpolate-sizeとcalc-size()とは？
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 といったキーワード値がこれに該当しており、それぞれ要素内コンテンツの折り返し可能なサイズを基準
新たなWebブラウザ「Verso」など: Cybozu Frontend Weekly (2024-08-20号)
こんにちは！サイボウズ株式会社フロントエンドエンジニアの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
リッチテキストエディター（RTE）のJSライブラリ色々試してみた
リッチテキストエディタ(RTE)って？ リッチテキストエディタ（以下RTE）とは、文字を入力できるだけでなく、文字に装飾を加えたり、段落を設定できたりと複雑な機能を持つエディタのことです。 弊社プロダクトであるkintone内にも以下のようなエディタが存在します。 また、似たものを指すWYSIWYG(読み方:ウィジウィグ)という用語もありますが、これはWhat You See Is What You Get（見たままが得られる）の略であり、編集時と出力時の見た目が同じエディタのことを指します。 Zennやesaのように、Markdown記法で編集したものが変換されて表示されるようなエディタは含みません。 このようにWYSIWYGはRTEより狭義の意味になっています。 WYSIWYGエディタ(Google Docs) WYSIWYGではないエディタ（esa） 独自データモデル VS DOMツ
ノーコードプロダクトのReact化の工夫
はじめに こんにちは！サイボウズ株式会社でkintone開発を行っている かげ です。 弊社が開発しているkintoneは、プログラミングの知識がなくても、ノーコードで業務のシステム化や効率化を実現するアプリがつくれるクラウドサービスです。 kintoneは初回リリースから10年以上経ちましたが、そのフロントエンドに使用されるClosure Libraryが今月(2024/08)EOLを迎えます。EOLを迎えたフレームワークを使用し続けることは、リスクにもつながりますし、今後より良くに、お客様への安定的なサービスの提供を維持するため、Reactへの刷新活動を行っています。 現在開発段階ではありますが、そこで工夫した点をご紹介したいと思います。この記事では、kintoneをご利用されるお客様がよく使用されるレコード一覧、レコード詳細画面を取り上げていきます。他にも画面はありますが、今回はご紹
Declarative Shadow DOMを利用したWeb ComponentsをSSR・CSRで実現する
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
process.getBuiltinModule(id) は TypeScript を ESM 化させるか？
こんにちは 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 化しようと試みました。しかしながら、今回の主題である条件付
3rd Party Cookie 廃止の方針変更など : Cybozu Frontend Weekly (2024-07-23号)
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 が開発者向けの無料プランを提供開始
拡張性に優れた React Aria のコンポーネント設計
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
:user-valid & :user-invalid擬似クラスが来た！ - What's new in Browsers!
What's new in Browsers!は、サイボウズのフロントエンドエンジニアがブラウザの最新情報から気になるトピックを紹介するシリーズです。 今回はChrome 119の更新内容から気になるトピックとして、:user-valid擬似クラスと:user-invalid擬似クラスを紹介します。 ユーザーの操作後に検証が行えるようになった :user-validと:user-invalidはどちらもフォームなどの入力要素の検証の状態に対してスタイルの指定などが行える疑似クラスになります。 検証の状態とは、例えば<input type="email" required />な要素では入力されていない場合やemailとして許容されない文字列が入力がされている場合はinvalidな状態になり、emailとして許容される文字列が入力されている場合にはvalidな状態となります。 :validと
PlaywrightのVSCode拡張を使って効率的にテストを書く
この記事では、Playwright の VSCode 拡張を使って GUI 操作のみでテストの記録や実行する方法について紹介します。 Playwright の VSCode 拡張とは？ Playwright の VSCode 拡張は、Playwright の作成元である Microsoft が公式に提供している拡張機能で、VSCode 内で直接ブラウザテストの記録や実行を支援するための便利なツールです。 GUI 操作を中心に、テストの記録や実行を手軽に行うことが可能となります。 VSCode 拡張のインストールは、以下のリンクから行うことができます。 VSCode 拡張を活用してテストを書く 本記事では、シンプルな ToDo アプリを例にテストの作成方法を説明します。Playwright のインストール方法は、公式ドキュメントをご参照ください。その後、VSCode に Playwright
誰でも簡単⁉️👀 絵文字ができるまで😃👍
こんにちは！サイボウズ株式会社フロントエンドエンジニアの おぐえもん（@oguemon_com） です。 先日開催された社内イベントCybozu Frontend Day 2023にて私が発表した絵文字の仕様策定に関する紹介を、当時の時間的制約から泣く泣く割愛した内容を加えた上で文章の形にまとめました。 また、情報は全て2023年8月1日現在のものです。 はじめに 今や「ぴえん🥺」や「おじさん構文」などの様々な形で老若男女を問わず私たちの生活・文化に深く根ざしている絵文字。ところで、そんな絵文字たちにも生みの親がいることを意識したことがありますか？ 例えばこちらの絵文字にも生みの親がいます。 🥱は、Jay Petersさんが2017年9月に提案しました。 Jay Petersさんの職業はニュース編集者。決してデザイン事務所やGAFAなどのエンジニア・デザイナーではありません。 このよう
typescript-eslint v6 アップデートガイド
typescript-eslint v6 リリース！ 2023/07/10 に typescript-eslint の v6 がリリースされました。 メジャーバージョンアップということで多くの BreakingChange があるのですが、その中でもReworked Configuration Namesと呼ばれる変更は利用者に大きな影響を与えそうです。 Reworked Configuration Namesはざっくり言うと「config に書くrecommendedのようなルールセットの名前や枠組みが変わるよ」という変更です。 ルールセットの名前だけでなく、含まれるルールや分類自体に変更があるので、設定ファイルを v5 のままアップデートしてしまうと意図したルールセットと異なる設定になってしまいます。 ここでは上記の記事にある変更点を紹介しつつ、なるべく既存の設定のままアップデートする
Webアプリのパフォーマンス改善にも使える！Deopt Explorer について解説
Deopt Explorer とは Deopt Explorer は、V8 JavaScript エンジンのトレースログをもとに、インラインキャッシングに適していないプログラムを発見・可視化してくれる VSCode 拡張です。 本記事では Deopt Explorer 及びその周辺知識、Web アプリケーションのパフォーマンス改善への活用の仕方を解説します。 前提知識のインプットが不要な方は Deopt Explorer で Node.js の計測をしてみる の項目までスキップしてください。 Hidden Class とインラインキャッシング インラインキャッシングに適していないプログラムを発見・可視化してくれる はじめにこのような説明をしたと思いますが、日常の Web アプリケーションの開発でインラインキャッシングなんて言葉はあまり耳にする機会はあまりないと思います。 インラインキャッシ
Origin Private File Systemを使ってブラウザ上でファイルを高速に操作しよう
3 行まとめ Origin Private File System という名の通り、Origin に紐づくプライベートなファイルシステムが扱える API Firefox 111 で実装されたことで、主要ブラウザでほとんどの機能が使える[1] Origin Private File System は FileSystem Access API よりもファイル操作のパフォーマンスが良い Origin Private File System とは Origin と紐づき、ユーザには非公開なブラウザ上で扱えるファイルシステムです。 なぜ Origin Private File System を使うのか Origin Private File System を使わずとも Blob と URL.createObjectURL() を組み合わせて a 要素をクリックすることでファイルをダウンロードしたり
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2022年にWebブラウザに実装された気になる機能を実装例とともに紹介