新しい擬似クラス:has()、:is()、:where()を使いこなそう ［CSS Modern Features no.1］ | gihyo.jp

2024/10/09 21 users where フロントエ サイボウズ Has gihyo.jp

乗りこなせ！ モダンフロントエンド 新しい擬似クラス:has()⁠⁠、:is()⁠⁠、:where()を使いこなそう ［CSS Modern Features no.1］ 本連載について はじめまして！ サイボウズ フロントエンドエキスパートチームの麦島です。 本連載では、Webフロントエンドに関してもう一歩踏み込んだ知識について、サイボウズ フロントエ... 続きを読む

社内で使う npm パッケージの作成に Deno を採用した話 - Cybozu Inside Out | サイボウズエンジニアのブログ

2023/10/11 11 users npm deno サイボウズエンジニア CJS ESM

こんにちわ。フロントエンドエキスパートチームの@nus3_です。 最近、社内用の npm パッケージを作る必要があり、そのパッケージは依存が少なく、実装もシンプルだったので、npm パッケージの作成には Deno と dnt を採用しました。 dnt とは dnt は Deno で実装したモジュールを CJS、ESM に対応した npm パッケージに... 続きを読む

State of CSS 2023 の結果公開など : Cybozu Frontend Weekly (2023-08-29号)

2023/08/30 5 users Cybozu Frontend Weekly 結果公開

State of CSS 2023 の結果公開など : Cybozu Frontend Weekly (2023-08-29号) こんにちは！サイボウズ株式会社 フロントエンドエキスパートチームの @mugi_uno です。 はじめに サイボウズ社内では毎週火曜日に Frontend Weekly と題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回... 続きを読む

フロントエンドのテストコードを書くときに大切にしていること - Cybozu Inside Out | サイボウズエンジニアのブログ

2022/11/14 196 users サイボウズエンジニア Cybozu Inside Out

こんにちは、フロントエンドエキスパートチームの @mugi_unoです！ kintone では フロントエンドの刷新プロジェクト（通称フロリア）が進行中です。 blog.cybozu.io kintone の開発では E2E 主体の自動テストを整備していましたが、 フロントエンドの刷新に合わせて、新たにフロントエンド側でのテストコードを積極的に... 続きを読む

【脱ランタイムCSS in JS】styled-componentsを別のCSS in JSに自動置換するCLIツールの開発

2022/11/01 12 users styled-components サイボウズ インターン

1.はじめに 本記事はサイボウズの夏インターン(2022年)で取り組んだ内容の紹介を行います。インターンでは、サイボウズのフロントエンド領域における横断的組織であるフロントエンドエキスパートチームに配属されました。5日間のインターン期間でstyled-componentsを別のCSS in JSに自動置換するCLIツール・extract-styl... 続きを読む

実装例から見る React のテストの書き方 - Cybozu Inside Out | サイボウズエンジニアのブログ

2022/08/29 209 users kintone React フロリア デス フロントエンド

こんにちは！フロントエンドエキスパートチームの@nus3_です。 kintone のフロントエンド刷新プロジェクト（フロリア）では、品質を保ったまま開発を加速させるためにフロントエンドのテストを積極的に行っています。 今回はそんなフロントエンドのテストの実装例をいくつか紹介します。この記事がフロントエンドのテス... 続きを読む

なぜ import.meta.url は URL オブジェクトではなく文字列なのか | サイボウズ フロントエンドエキスパートチーム

2022/07/26 14 users サイボウズ instance sindresorhus 作者

数多くの Node.js ライブラリの作者として知られる Sindre Sorhus 氏が次のようなツイートをしていた。 Why is `import.meta.url` a string and not a `URL` instance? — Sindre Sorhus 💙💛 (@sindresorhus) July 24, 2022 これを見て私も理由が気になったので調査してみた。 先にまとめ URL の仕様にそうすべきと書い... 続きを読む

主要ブラウザで使える！CSS Cascade Layers で新しいCSS設計の手法を考える | サイボウズ フロントエンドエキスパートチーム

2022/03/22 14 users Edge Safari Firefox CSS サイボウズ

Chrome99に新機能として CSS Cascade Layers が実装され、Firefox、Edge、Safari といった主要ブラウザで CSS Cascade Layers が使えるようになりました。 CSS Cascade Layers とは CSS の仕様において、要素にどのスタイルを適用するかはざっくりと次のような優先順位で決定されていました。(カスケード順を省いて簡略... 続きを読む

フロントエンドのモノレポ構成はスケーリングの夢を見るか | サイボウズ フロントエンドエキスパートチーム

2022/01/31 21 users サイボウズ スケーリング フロントエンド レポ構成

それっぽいタイトルを付けましたが特に意味はないです。 workspace を使ったコマンドを最適化して実行する Turborepo についてのお話で Turborepo を軽く触ってみた際にnpx create-turbo@latestで作られる構成がとてもわかりやすく、プロダクトの初期段階からモノレポを採用するのは選択肢の 1 つとしていいのでは、と思... 続きを読む

なぜ ES2022 で文字列リテラルを使った import/export ができるようになるのか | サイボウズ フロントエンドエキスパートチーム

2021/12/06 21 users import export サイボウズ JavaS TC39

11 月 11 日に、以前から一部で注目されていたある Pull Request が tc39/ecma262 にマージされました。 この Pull Request がマージされたことで、識別子ではなく文字列リテラルを使った import/export が可能になりました。 この仕様変更はプロポーザルという形で扱われてはいませんが、構文上の影響があるので、JavaS... 続きを読む

kintoneマイクロサービス化検証プロジェクトのWebフロントエンドにおける技術選定 - Cybozu Inside Out | サイボウズエンジニアのブログ

2021/11/30 90 users サイボウズエンジニア Cybozu Inside Out

こんにちは、フロントエンドエキスパートチームのsakitoです。 本記事ではkintoneをマイクロサービス化するためのPoCプロジェクトにおけるWebフロントエンドの技術選定について紹介します。 プロジェクト背景 本記事で扱うプロジェクトは「kintoneマイクロサービス化Proof of concept(PoC)プロジェクト」です。 現在サイ... 続きを読む

JavaScript エコシステムを維持する OSS の努力と課題

2021/11/27 21 users OSS GitHub TypeSc Prettier 努力

Transcript JavaScript エコシステムを維持 する OSS の努力と課題 2021/11/27 JSConf JP 2021 自己紹介 名前: Sosuke Suzuki 学校: 筑波大学 情報学群 情報科学類 仕事: サイボウズ フロントエンドエキスパートチーム OSS: Prettier, Babel Twitter: @__sosukesuzuki GitHub: @sosukesuzuki 話すこと JavaScript/TypeSc... 続きを読む

ES2022 と TypeScript 4.5 に入るプライベートフィールドのための in 演算子について | サイボウズ フロントエンドエキスパートチーム

2021/11/11 10 users サイボウズ プロポーザル プライベートフィールド

2021年7月に行われた TC39 ミーティングで Ergonomic brand checks for Private Fields というプロポーザルが Stage 4 になりました。 このプロポーザルは、ES2022 に含まれる予定です。また、TypeScript 4.5 にも含まれる予定です。 この記事では、Ergonomic brand checks for Private Fields について解説します。 概... 続きを読む

Chrome95で追加された画面上の色を取得するEyeDropper APIについて | サイボウズ フロントエンドエキスパートチーム

2021/11/02 14 users API Chrome スポイドツール サイボウズ ブラウザ上

Chrome 95 がリリースされ、新機能として EyeDropper API が追加されました。(Edge 95 にも追加されました) EyeDropper API とは EyeDropper API は画面上から色情報を取得するスポイトツールをブラウザ上で実現する API です。スポイトツールはデザインツールなどに搭載されていることが多いかと思います。 Chrome の D... 続きを読む

サイボウズフロントエンドエキスパートチームのウェブサイトを作りました | サイボウズ フロントエンドエキスパートチーム

2021/10/14 6 users サイボウズ Cybozu Inside Out 経緯 目的

こんにちは、サイボウズフロントエンドエキスパートチームの@__sosukesuzukiです。 サイボウズにはCybozu Inside Outという技術ブログがあります。 それとは別に、この度フロントエンドエキスパートチームとしてウェブサイトを開設することにしました。 この記事では、このウェブサイトを開設することになった経緯と目的... 続きを読む

フロントエンド刷新のために DevTools を作って開発を捗らせる - Cybozu Inside Out | サイボウズエンジニアのブログ

2021/09/12 83 users DevTools サイボウズエンジニア フロントエンド刷新

こんにちは、フロントエンドエキスパートチームの麦島(@mugi_uno)です！ 2021年5月に新しくメンバーとして加わり、富山からフルリモートで働いています。 最近はチームメンバーに誕生日を祝ってもらって嬉しかったです? さて、以前に "kintoneのフロントエンド刷新に向けた取り組み"*1 というエントリでもご紹介しまし... 続きを読む

Angular+Storybookで画像回帰テストを小さくはじめる - Classi開発者ブログ

2021/09/09 5 users classi angular StorYBook パク 見た目

Classiのフロントエンドエキスパートチームのlacolacoです。最近AngularのプロジェクトでStorybookをベースにしたUIコンポーネントの画像回帰テストをはじめたので、この記事ではそのなかで学んだことを共有します。 画像回帰テスト 画像回帰テスト（visual regression testing）は、UIの見た目のバグを防ぐためのテスト... 続きを読む

開運研修 2021 Chrome Developer Toolsの使い方 / Chrome Developer Tools - Speaker Deck

2021/07/20 10 users Speaker Deck Transcript 使い方 講義

Transcript 開運研修 2021 Chrome Developer Toolsの使い⽅ フロントエンドエキスパートチーム sakito 2 • 【概要】 • Webの開発に関わっていくうえで無くてはならない「Developer Tools」につ いての講義、Chromeをベースに紹介する • 全体の使い方や今後の開発に役立つ機能を紹介する • 知っている/知ってないで大きく... 続きを読む

Sentryを活用するためにやっていること - Classi開発者ブログ

2021/03/26 13 users Sentry アプリケーシ classi lacolaco

フロントエンドエキスパートチームのlacolacoです。 この記事ではアプリケーション監視プラットフォームのSentryをClassiの中でどのように活用しているかを少し紹介します。Sentryの運用に悩んでいる方の参考になれば幸いです。 Sentryの用途 Classiでは大きく2つの目的でSentryを利用しています。ひとつはアプリケーシ... 続きを読む

Classiにフロントエンドエキスパートチームを作った話 - Classi開発者ブログ

2021/01/18 19 users classi lacolaco 真っ先 フロントエンド界隈

こんにちは、Classiに入社して1年になるGoogle Developers Expert for Angularのlacolacoです。 今日はClassiに新しく フロントエンドエキスパートチーム を作った話を紹介します。 フロントエンドエキスパートチームとは？ 日本のフロントエンド界隈（？）の方なら、フロントエンドエキスパートチームと聞いて真っ先に... 続きを読む

Node.js Dual Packages (CommonJS/ES Modules) に対応した npm パッケージの開発 - Cybozu Inside Out | サイボウズエンジニアのブログ

2020/10/06 10 users npm CommonJS shisama 平野 node.js

こんにちは。フロントエンドエキスパートの平野（@shisama_）です。 フロントエンドエキスパートチームでは業務時間の 30 % の時間で技術探究を行っています。 今回は探究した技術の中から Node.js の ES Modules（以下 ESM）についてと Dual Package (CommonJS/ES Modules) に対応した npm パッケージの開発について紹... 続きを読む

フロントエンドエキスパートチームが選ぶ web.dev Live2020 オススメセッション - Cybozu Inside Out | サイボウズエンジニアのブログ

2020/08/18 27 users サイボウズエンジニア Cybozu Inside Out

こんにちは、フロントエンドエキスパートチームです。 フロントエンドエキスパートチームでは、フロントエンドに関する情報共有会を社内向けに行っています。 2017年から2020年までに10回開催しており、「Web ページのパフォーマンス」、「React の今とこれから」、「Google I/O セッションまとめ」などフロントエンドに... 続きを読む

styled-componentsの採用と既存資産を捨てた理由 - Cybozu Inside Out | サイボウズエンジニアのブログ

2020/06/25 29 users styled-components SCSS React

こんにちは。フロントエンドエキスパートチームの@nakajmgです。 私が所属しているフロントエンドエキスパートチームでは、現在 kintone の脱レガシーの一環として React + TypeScript 化に取り組んでいます。この取組の中で Scss で定義されている既存のスタイルを styled-components で書き直していくという決定をしま... 続きを読む

LernaとYarn WorkspacesでMonorepo管理 - Cybozu Inside Out | サイボウズエンジニアのブログ

2020/04/21 5 users npm Lerna monorepo リポジトリ モジュール

こんにちは、フロントエンドエキスパートチームの小林（@koba04）です。 本記事では、Lerna と Yarn Workspaces を使った Monorepo 管理について解説します。 Monorepoとは 本記事では、単一のリポジトリで複数のモジュールやパッケージ（今回の場合は npm パッケージ）を管理する手法を Monorepo と呼んでいます。 有名... 続きを読む

チームで行うリモートワークに対する7つの工夫 - Cybozu Inside Out | サイボウズエンジニアのブログ

2020/04/13 9 users リモートワーク テレワーク 言い回し サイボウズエンジニア

こんにちは、フロントエンドエキスパートチームの@sakitoです。 今回はフロントエンドエキスパートチームがリモートワークで工夫している内容や、解決してきた課題を共有したいと思います。 最近リモートワークをはじめた会社やチームにとって参考になれば幸いです！ ※ テレワークやリモートワークという言い回しがあり... 続きを読む