2024/06/25: モノレポは、令和のソフトウェア開発における銀の弾丸か? https://hack-at-delta.connpass.com/event/319792/ フロントエンドの Monorepo をやめてリポジトリ分割したワケ 坂井 学 ソフトウェアエンジニア
こんにちは! サイボウズ株式会社フロントエンドエンジニアの Saji (@sajikix) です。 はじめに サイボウズでは毎週火曜日に Frontend Weekly という「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2024/6/18 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 feat: Add support for TypeScript config files ESLint の設定ファイルを TS でかけるようにする RFC がマージされました。 TS で設定ファイルを書く場合は読み込む際にトランスパイルする必要があり、これには UnJS のパッケージの1つである jiti が利用される予定のようです。(2024/06/18 現在は draft PR なので今後変更される可能性がありま
こんにちは!サイボウズ株式会社 フロントエンドエキスパートチームの @mugi_uno です。 はじめに サイボウズ社内では毎週火曜日に Frontend Weekly と題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2024 年 5 月 21 日 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 HTML attributes vs DOM properties HTML attributes と DOM properties の動作の違いについて解説している記事です。 Validation、値のチェック、デフォルト値、フレームワークに応じた挙動などについてまとめられています。 Deep Dive into React Stream/Serialize React の Stream/Serialize
こんにちは!サイボウズ株式会社 フロントエンドエキスパートチームの @mugi_uno です。 はじめに サイボウズ社内では毎週火曜日に Frontend Weekly と題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2024 年 5 月 7 日 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 React の fetch() 拡張が削除 React に標準で含まれていた fetch() に対するパッチが削除されました。 一方で、Next.js では同様の対応を別のパッチとして取りこむことで従来通りの挙動を維持するようです。 Google、サードパーティ cookie 廃止を 3 度目の延期 年内で完了予定だった Chrome での Third Party Cookie 廃止について、延期が発表されまし
Using the Popover API for HTML Tooltips May 6, 2024 We looked at the Popover API and how it’s made it’s way across all browsers already just last week. One of the things I should have done is looked at the accessibility considerations more closely. Thanks to Melanie Sumner there is a great explainer with demos. I tried to adhere to the points made in there the best I could while making a classic t
Web page load times and responsiveness to user action in web apps is a primary driver of user satisfaction–and both are often dominated by network latency. Latency itself is a function of the user's connection to the internet (Wifi, LTE, 5G), how far away the server is that the user is connecting to, and the quality of the network in between. While the latency numbers may seem low by themselves, t
みなさんお久しぶりです! 株式会社ナレッジワークのソフトウェアエンジニアのはぎはらです! 本記事では2024年3月28日に開催した勉強会 Encraft #12 Frontend Quiz Night の開催レポートをお届けいたします。 Encraftとは? Encraft(エンクラフト)は株式会社ナレッジワークが提供する、 "Enablement" と "Craftsmanship" をテーマにした勉強会です。技術にこだわりを持つ人々が集まって互いに知見を交換し、できることを増やしていく場を作りたいと思っています。 過去のイベントの開催レポートは以下からご覧ください。 Encraft #1「フロントエンド × 設計」開催レポート Encraft #2「サーバーとクラインアントを結ぶ技術」開催レポート Encraft #3「エンジニアイネーブルメント - 共有・育成・評価・効率化 -」開催
JSR の Public Beta 公開など : Cybozu Frontend Weekly (2024-03-05号) こんにちは!サイボウズ株式会社 フロントエンドエキスパートチームの @mugi_uno です。 はじめに サイボウズ社内では毎週火曜日に Frontend Weekly と題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2023 年 3 月 5 日 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 Tempo 新しく登場した Date 操作用のライブラリである Tempo が公開されました。Intl を利用しつつ、Intl 自体の使いづらさを内部で吸収してるのが特徴です。 フォーマット用 Token が Unicode 準拠ではなく day.js に沿った仕様なのが注意点になりそう、
こんにちは。フィナンシャル開発センターの鈴木です。LINE証券のフロントエンドを担当しています。この記事は【LINE証券 FrontEnd】シリーズの4番目の記事です。 最近のWeb Vitalsの隆盛を受けて、LINE証券のフロントエンドでもパフォーマンスの改善に取り組み始めました。およそ2週間ほど改善に取り組んだ結果として、開発環境での計測ではLighthouseのperformanceスコアが従来より30点ほど上昇しました。 パフォーマンス改善のためにさまざまな施策を行いましたが、この記事ではその中でも興味深かったものとして、requestIdleCallbackを活用してLazy Loadingされるコンポーネントの読み込みを遅延し、その結果初期レンダリングにかかる時間を約14%削減できた事例をご紹介します。 環境 以前の記事でご紹介したとおり、LINE証券のフロントエンドはTyp
import * as fuzzySearch from './path/to/fuzzy-search.module.js'; const searcher = fuzzySearch.SearcherFactory.createDefaultSearcher(); const persons = [ { id: 23501, firstName: 'Alice', lastName: 'King' }, { id: 99234, firstName: 'Bob', lastName: 'Bishop' }, { id: 5823, firstName: 'Carol', lastName: 'Queen' }, { id: 11923, firstName: 'Charlie', lastName: 'Rook' } ]; const indexingMeta = searcher.i
Interop 2024の取り組みスタートなど : Cybozu Frontend Weekly (2024-02-06号) こんにちは! サイボウズ株式会社フロントエンドエンジニアの Saji (@sajikix) です。 はじめに サイボウズでは毎週火曜日に Frontend Weekly という「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2024/02/06 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 テストの学習へようこそ! | web.dev web.dev が公開している学習コンテンツのシリーズにテストのコンテンツが追加されました。 web アプリケーションのテストに不慣れな初学者が一通り学ぶ際などに適していそうです。一部のコンテンツは近日提供予定になっており今後の更新も楽しみな内容と
Delicious Donut Components An interactive guide to component composition with React Server Components Do you know how many calories are in a donut? I don’t either—the only thing I know about donuts is that they’re delicious. Oh, and that they’re a great way to build composable UIs. If you’ve been building with React Server Components, you might be familiar with a composition pattern that allows yo
introduction HonoにはRPCの機能があり、routerで定義している情報(引数とか型とか)を他のファイルで簡単に利用することができます。 この記事では、そのRPCの機能とNextを組み合わせて、HonoをNextのBFFとして使用する組み合わせについて紹介していきたいと思います。 まず、今回作成した2つのサンプルのリポジトリを紹介します。 以下の2つのリポジトリのコードを用いて説明するので、もし興味があればクローンして色々試してみて下さい。 next-hono-webはshadcn/uiのコンポーネントをお借りして作成したサンプルのダッシュボードに対して、一部の値を動的に設定するよう変更を加えたものです。 next-hono-backendはとてもシンプルで、next-hono-webで使用するサンプルデータを返すよう定義されています。 next-hono-backend側
こんにちは。メルペイのフロントエンドエンジニアの@tokuda109です。 この記事は、Merpay Advent Calendar 2023 の15日目の記事です。 Merpay Advent Calendar 2020 の「Merpay Frontend のこれまでとこれから」という記事で、メルペイのフロントエンドチームが2020年までに取り組んできたチーム組成やプロダクトの品質改善の話が紹介されました。(以下、前回の記事) 早いもので前回の記事が公開されてから3年が経ち、当時からチームの状況は大きく変わり、チームメンバーの人数が半数以下になるという危機的状況も経験しました。 この記事は、前回の記事の続編として、2020年以降にフロントエンドチームが取り組んできたことを紹介すると共に、危機的状況を乗り越えた経験から長期的に安定したチーム運営を行う上で重要だと感じたことを説明します。 M
こんにちは!サイボウズ株式会社 フロントエンドエキスパートチームの @mugi_uno です。 はじめに サイボウズ社内では毎週火曜日に Frontend Weekly と題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2023 年 11 月 14 日 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 Building towards a new default rendering model for web applications 先日の Next.conf でも発表された、Next.js 14 で Experimental 機能として利用可能な PPR (Partial Prerendering) に関する Vercel による解説記事です。 <Suspence> を境界に静的シェルのプリレンダリン
こんにちは!サイボウズ株式会社フロントエンドエンジニアのおぐえもん(@oguemon_com)です。 はじめに サイボウズでは毎週火曜日にFrontend Weeklyという「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2023/11/07のFrontend Weeklyで取り上げた記事や話題を紹介します。 取り上げた記事・話題 Deprecation of formatting rules 2023/11/03リリースのeslint v8.53.0からスタイルフォーマット系のルールがdeprecatedになりました。メンテナンスの負荷軽減が主な理由です。 本バージョンではarray-bracket-newlineをはじめとする67のルールがdeprecatedの対象になっています。 Jest v30.0.0-alpha.1 Jestの次世代バージョ
はじめに こんにちは!サイボウズ株式会社フロントエンドエキスパートチームの BaHo です。 サイボウズでは毎週火曜日に Frontend Weekly という「1 週間の間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2023/11/31 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 Rspress, the Rspack-based static site generator Rspack ベースの Static Site Generator である Rspress の v1 がリリースされました。 i18n 対応やコンポーネントのプレビューなど、様々な機能が盛り込まれているようです。 Faster TypeScript builds with --isolatedDeclarations TypeScr
MSW 2.0やYarn 4.0のリリースなど : Cybozu Frontend Weekly (2023-10-24号) はじめに こんにちは!サイボウズ株式会社フロントエンドエキスパートチームの@nakajmg です。 サイボウズでは毎週火曜日にFrontend Weeklyという「一週間の間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は2023年10月24日のFrontend Weeklyで取り上げた記事や話題を紹介します。 Introduction to web sustainability | MDN Blog webの持続可能性についての概要。フォントの最適化や画像サイズの縮小、JavaScriptの使用量を減らすことなどが挙げられています。 ガイドラインの作成も進められています。 How we optimized package imports
TypeScript5.3 betaのリリースなど : Cybozu Frontend Weekly (2023-10-10号) こんにちは! サイボウズ株式会社フロントエンドエンジニアの Saji (@sajikix) です。 はじめに サイボウズでは毎週火曜日に Frontend Weekly という「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2023/10/10 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 Announcing TypeScript 5.3 Beta - TypeScript TypeScript 5.3 Beta がアナウンスされました。 現在 Stage3 のプロポーザルである Import Attributes のサポートや switch(true) 内の各 case
In CppCon 2022, Herb Sutter gave a talk titled Can C++ be 10x Simpler & Safer? where he described an alterntive syntax that compiles to C++ (which he calls CppFront or Cpp2) that could remove much of the existing issues with C++ - reduce complexity, increase safety, and more. If you haven't seen it yet, it's worth a watch! With recent events and discussions in the Haskell community, my mind went b
Announcing Deno Queues など : Cybozu Frontend Weekly (2023-10-03号) こんにちは!サイボウズ株式会社 フロントエンドエキスパートチームの @mugi_uno です。 はじめに サイボウズ社内では毎週火曜日に Frontend Weekly と題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2023/10/03 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 vite-plugin-ssr が Vike にリネームされた vite-plugin-ssr が Vike にリネームされました。機能的な変化は特になく、名前が変更されただけのようです。公式ドキュメント上にも Functionally, nothing changes: it's just
TypeScript のドキュメンタリーの公開など : Cybozu Frontend Weekly (2023/09/26号) こんにちは! サイボウズ株式会社フロントエンドエンジニアの nissy です。 はじめに サイボウズでは毎週火曜日に Frontend Weekly という「1 週間の間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2023/09/26 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 Node v20.6.0 (Current) | Node.js Node.js v20.6.0 のリリースブログです。.env ファイルのビルトインサポートや import.meta.resolve がフラグなしで利用可能になる等の更新が行われています。 Chakra, Panda and Ark -
こんにちは! サイボウズ株式会社フロントエンドエンジニアの Saji (@sajikix) です。 はじめに サイボウズでは毎週火曜日に Frontend Weekly という「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2023/09/05 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 Astro 3.0 | Astro Astro 3.0 がリリースされました、主なアップデートは以下の通りです。 v2.9 では experimental だった View Transitions が v3.0 で正式に追加 サーバーサイドレンダリング時にも View Transitions API が適用されるように レンダリング速度向上 一般的な Component であれば 30%高速化したとのこと 画像最適化
BFFとは 名前の通り、フロントエンドのためのバックエンド(サーバ)です。フロントエンドのためにAPIをコールしたり、HTMLを生成したりするサーバ 2000年代前半のWebアプリは、HTMLが主体で動きがシンプルだった。しかしWebアプリが技術進化で複雑化するにつれて フロントエンド側にクライアントごとの要求に応えるためのサーバを配置してバックエンドのAPIサーバとの橋渡し役とするアーキテクチャが開発されるようになりました。 BFFの役割 BFFはフロントとバックエンドの姿勢・方針が乖離している場合に仲介役となることができる [メリ] バックエンドアプリの仕様が完全に固まっていて変更が難しい場合や、バックエンドとフロントが完全に別チームで開発される場合には「バックエンド側での対応が難しいから、フロント側の開発者がBFFを設け、そこで対応する」ことができる [デメ/思ったこと] フロントと
State of CSS 2023 の結果公開など : Cybozu Frontend Weekly (2023-08-29号) こんにちは!サイボウズ株式会社 フロントエンドエキスパートチームの @mugi_uno です。 はじめに サイボウズ社内では毎週火曜日に Frontend Weekly と題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2023/08/29 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 <search> が Chrome118 で実装予定 検索や絞り込み要素に関するコンテナ要素である <search> が Chrome 118 で実装予定とのことです。Firefox や Safari にはすでに実装済みのため、メジャーブラウザの多くで利用可能になります。 Fresh 1.4
RedwoodJS Build Competitionなど: Cybozu Frontend Weekly (2023-08-22号) はじめに こんにちは!サイボウズ株式会社フロントエンドエキスパートチームの BaHo です。 サイボウズでは毎週火曜日に Frontend Weekly という「1 週間の間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2023/08/22 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 認可のアーキテクチャに関する考察(Authorization Academy II を読んで) 認可設計に関する資料 Authorization Academy の考察記事です。 認可の関心分離方について整理されています。 An update on Chrome Security update
Next.jsのCacheを網羅したドキュメントの公開など : Cybozu Frontend Weekly (2023-08-01号) こんにちは!サイボウズ株式会社フロントエンドエキスパートチームの @nus3_ です。 はじめに サイボウズでは毎週火曜日に Frontend Weekly という「1 週間の間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2023/08/01 の Frontend Weekly で取り上げた記事や話題を紹介します。 How React 18 Improves Application Performance – Vercel React18で新しく導入されたTransitions、Suspense、React Server Componentsなどをパフォーマンスの観点から解説しています。React17以前とReact18
主催のkoba04による写真 こんにちは、フロントエンドエンジニアの@shisama_です。 6月30日にサイボウズ東京オフィスで開催された「Cybozu Frontend Day 2023」の資料と開催レポートを公開します。 「Cybozu Frontend Day 2023」は、サイボウズのフロントエンドエンジニアが集まりフロントエンドに関する知見を共有する社内イベントです。 発表資料 発表資料は以下の通りです。発表者が公開している一部の資料については、発表者の許可を得て掲載しています。 Pages RouterとApp Routerでのi18n対応の違い 発表者: @nissy_dev zenn.dev 誰でも簡単⁉️👀 絵文字ができるまで😃👍 発表者: @oguemon_com speakerdeck.com Node Streamでメモリ性能改善、そしてWeb Stream
styled-components v6 リリースなど: Cybozu Frontend Weekly (2023-07-04号) はじめに こんにちは!サイボウズ株式会社フロントエンドエキスパートチームの BaHo です。 サイボウズでは毎週火曜日に Frontend Weekly という「1 週間の間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2023/07/04 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 Boshen/oxc Linter Roadmap oxc の linter 実装についてのロードマップです。 bike-shedding になりがちな style や convention 以外のルールにフォーカスして、この2ヶ月で実装していくそうです。 プラグインは GraphQL のような
Next.js の App Router の最新状況など : Cybozu Frontend Weekly (2023/06/27号) こんにちは! サイボウズ株式会社フロントエンドエンジニアの nissy です。 はじめに サイボウズでは毎週火曜日に Frontend Weekly という「1 週間の間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2023/06/27 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 Next.js App Router Update App Router の最新状況について共有している記事になっています。現在は、パフォーマンスの改善、安定性の向上、開発者向けの概念や利用方法の解説の 3 つにフォーカスしているようです。 An Introduction to Streaming
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く