サイボウズ フロントエンドエキスパートチームの活動 2022年上期 | サイボウズ フロントエンドエキスパートチーム
サイボウズ フロントエンドエキスパートチームの 2022 年上期（１月〜6 月）の取り組みを紹介します。 プロダクトへの支援 プロダクト支援としておもに次の 2 つを行いました。 kintone のフロントエンドリアーキテクチャ サイボウズ製品の販売管理システムのフロントエンドリアーキテクチャ これらの支援活動は現在（2022 年 7 月〜）も継続中です。 kintone のフロントエンドリアーキテクチャ kintone のフロントエンドリアーキテクチャプロジェクト、通称フロリアへの支援を昨年から引き続いて行っています。メンバーはプロジェクトのチームに所属する形で支援活動をしています。 フロリアの詳細については次の記事を参照ください。 また、直接的な支援ではありませんが、フロリアプロジェクトでの社外アウトプット（社の技術ブログへの執筆）を支援する活動も行っています。 サイボウズ製品の販売管
Safari 15.4 リリースノートまとめ | dialog Element や lazy-loading, CSS Cascade Layers サポートなど | サイボウズ フロントエンドエキスパートチーム
🔗 https://webkit.org/blog/12445/new-webkit-features-in-safari-15-4/ Safari 15.4 がリリースされました 🎉 これまで Technology Preview として公開されていた様々な変更が含まれています。 HTML 遅延読み込みのための lazy-loading のサポート https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading <dialog> Element のサポート https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element ::backdrop 疑似要素のサポート https://developer.mozil
主要ブラウザで使える！CSS Cascade Layers で新しいCSS設計の手法を考える | サイボウズ フロントエンドエキスパートチーム
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 に公開することでアプリケーションとパッケージを非同期に開発
CSS color-scheme サポート追加等 Firefox 96.0 リリースノートまとめ | サイボウズ フロントエンドエキスパートチーム
https://www.mozilla.org/en-US/firefox/96.0/releasenotes/ https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/96 Firefox 96 がリリースされました！ 全体的に性能面での改善が多くを占めるアップデートでした。 本リリースでは Cookie Policy がデフォルトで SameSite=laxを指定するようになりました。 また、color-schemeプロパティが追加され、IE 以外の主要なブラウザで利用可能になりました。 New ノイズ抑制やオートゲインコントロールの大きな改善とエコーキャンセレーションの若干の改善がされました メインスレッドの負荷が大きく軽減されました Cookie Policy をデフォルトで SameSite=lax に強
workspaceを使ったコマンドを最適化して実行するTurborepoについて | サイボウズ フロントエンドエキスパートチーム
今年からフロントエンドエキスパートチームでは活動内容の一つである探求の一環として、メンバーが気になった技術に対して、気軽に触ってみる会をしています。次の画像は筆者が Slack で、気軽に触ってみる会の開催を宣言してる時のものです。 今回は去年の 12 月に Vercel に買収されたニュースがあった Turborepo を気軽に触ってみました。 個人的には 1 人で調べるときよりも複数人でわいわい調べた方が、その技術や関連する周辺知識の話を色んな人の観点で深掘ってできて、とても有意義な時間でした。 概要 Turborepo はモノレポのためのビルドシステムで次のような特徴があります。 Yarn, npm, pnpm の workspaces に対応してるリポジトリに対して簡単に導入できる workspace 内のコマンドの依存関係をシンプルに設定してくれる Turborepo で実行する
長期運用プロダクトを抱える組織で横断的なフロントエンド支援チームが1年で行なったこと | サイボウズ フロントエンドエキスパートチーム
この記事はCybozu Advent Calendar 2021の 18 日目の記事です（業務なので前日に出してます 🍀）。 サイボウズには 10 年以上運用が続いているプロダクトがいくつかあります。フロントエンドエキスパートチームは、そんなプロダクトや開発メンバーへの支援を横断的に行うチームです。 フロントエンドエキスパートチームの今年の取り組みを紹介します。 フロントエンドエキスパートチームの立ち位置とミッション フロントエンドエキスパートチームは特定のプロダクトなどに属さない、独立した横断的な支援チームです。活動内容についてはすべてチームに裁量があり、何をどうしていくかは自律的に決めて動く必要があります。 フロントエンドエキスパートチームでは「サイボウズのフロントエンドを最高にする」というミッションを掲げています。このミッションを達成するための活動を日々考えながら活動しています。
Frontend Weekly5周年&Cybozu Frontend Monthly1周年🎉 〜続けてみてのアレコレ〜 | サイボウズ フロントエンドエキスパートチーム
Frontend Weekly5周年&Cybozu Frontend Monthly1周年🎉 〜続けてみてのアレコレ〜 この記事は、Cybozu Advent Calendar 2021の9日目の記事です。 フロントエンドエキスパートチームでは、社内向けフロントエンド勉強会の「Frontend Weekly」と、社外向けフロントエンド情報発信イベントの「Cybozu Frontend Monthly」を運営しています。 この度、Frontend Weeklyが5周年、Cybozu Frontend Monthlyが1周年を迎えました🎉 今回はそれぞれの各勉強会の内容と継続して開催してきた所感について紹介します。 Frontend Weeklyとは？ Frontend Weeklyは社内の有志が週ごとにフロントエンドの情報を持ち寄り、共有し合う会です。 次のように社内のkintone上で
なぜ ES2022 で文字列リテラルを使った import/export ができるようになるのか | サイボウズ フロントエンドエキスパートチーム
11 月 11 日に、以前から一部で注目されていたある Pull Request が tc39/ecma262 にマージされました。 この Pull Request がマージされたことで、識別子ではなく文字列リテラルを使った import/export が可能になりました。 この仕様変更はプロポーザルという形で扱われてはいませんが、構文上の影響があるので、JavaScript ユーザーとして知っておくに越したことはないものになります。 概要 まず具体例を示します。 今回の変更によって、次のように import/export する際の名前として文字列リテラルを使えるようになります。 基本的にはこれだけです。 詳解 ここからは仕様上の用語を使って解説をします。 この変更が入る前の ECMAScript では ImportSpecifier で as を使う場合 as の左側は Identifi
Interactive storiesを使ってStorybook上でユーザー操作の状態を確認する | サイボウズ フロントエンドエキスパートチーム
Storybook の 6.4.0 がリリースされ、Interactive storiesが新機能として追加されました。詳細はStorybook のブログでも記載されています。 概要 Interactive stories の Addon を追加すると、testing-library で定義した操作を Storybook 上で確認することができるようになります。 次の gif のようにユーザー操作に対するコンポーネントの状態を UI(Addon)からステップごとに確認できます。 導入手順 パッケージを追加する Storybook のmain.jsに設定を追加する Interactive stories 用の story をstories.tsxに追加する 1. パッケージを追加する Interactive addon を利用するには次のパッケージが必要です。 (今回は React のコンポ
Safari 15 の新機能とかまとめ | サイボウズ フロントエンドエキスパートチーム
先日 Safari 15 がリリースされました。 https://webkit.org/blog/11989/new-webkit-features-in-safari-15/ 影響の大きそうな箇所や、知っておいたほうが良さそうな箇所を中心に紹介します。 HTML theme-color meta タグ上での theme-color のサポートが追加されました。 指定することで、ブラウザのメニューバーやタブバーといった領域のカラーを変更することができます。 prefers-color-scheme と併用することで、ダークモード/ライトモードに応じた色の指定もできます。 Design for Safari 15 CSS aspect-ratio プロパティのサポート aspect-ratio - CSS: Cascading Style Sheets | MDN lab() lch() h
Introduction to Kubernetes
この資料は「Kubernetes という名前ぐらいは知っているけど、実際には使ったことがない、何ができるのかよく知らない」という人を対象に、Kubernetes の基本的な使い方を説明しています。 この資料を読めば、Kubernetes 上に単純な Web アプリケーションをデプロイできるようになるはずです。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
