こんにちは、バクラク事業部QAチームのteyamaguです。今回は、私たちが自動テストの整備を進める上で指針として設計した「バクラク事業部のテストピラミッド」について紹介します。このピラミッドは、効果的な自動テストを構築するために、自動テストのガイドラインとして機能しています。 バクラク事業部におけるテストピラミッドの概要 バクラク事業部では、1年前からフロントエンド・バックエンドの統合的な自動テストの整備を進めています。自動テストにおける大きな課題の1つが「どのテストで何を確認すべきか？」です。そこでバクラク事業部では、事業部全体で納得できる形のテストピラミッドを設計し、これを自動テストの指針としています。私たちは、フロントエンドとバックエンドのエンジニアと議論を重ね、フロントエンドには「テスティングトロフィー」、バックエンドには「テストピラミッド」の概念を取り入れた形で、各種テストの目
はじめに コンポーネントライブラリ管理の課題 デザインと実装の乖離 見た目における乖離 プロパティの乖離 コンポーネントやバリエーションの増加による管理の負担 ガイドラインの浸透 さいごに はじめに enechainプロダクトデザインデスクの伊藤です。現在、私は複数プロダクトのデザインを行いながら、デザインシステムの改善にも携わっています。 今回は、デザインシステムにおけるコンポーネントライブラリの管理と、その改善についてご紹介します。 コンポーネントライブラリ管理の課題 enechainのデザインシステムではガイドライン作成やダークモード対応などの改善を進めてきました。プロダクトのユースケースとして必要なコンポーネントも徐々に網羅されつつありますが、新たに3つの課題が浮上しました。 デザインと実装の乖離があった 新規コンポーネントやバリエーションの増加に伴い、管理の負担が増した ガイドラ
こんにちは、絶賛スウェーデンに留学中のきたぴーと申します！今回は Next.js Conf 2024 をリアタイ視聴して内容を大まかにまとめてみたので記事にして共有してみようと思います！ 聞いてみようと思った背景 個人開発でもインターンでもハッカソンでも、自分はいつでも Next.js にお世話になっているので最新機能や、Next.js 開発チームの思想を直接聞くことで視座を少しでも近づけたいと思ったのがきっかけです。タイムテーブルを見ると、「サーバコンポーネントで向上する UX」のような Next.js の機能について扱うものから、Perplexity や PayPal での導入事例のような応用例まで取り上げられていた、かつ Vercel が公式でピックアップしたものなので情報の密度も濃いものだろうと、非常に興味が湧きました。あとは時間の都合も良く、日本だったら深夜の 1:30 スタート
フロントエンドテストはやっぱり大事！人気のテストフレームワークとともに種類別に解説 2024年11月11日 執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。著書に『Bootstrap 5 フロントエンド開発の教科書』、『作って学べるHTML＋JavaScriptの基本』など。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。 主な著
ファインディ株式会社でフロントエンドのリードをしている新福(@puku0x)です。 弊社では Nx を活用してCIを高速化しています。この記事では、最近導入した Nx Agents でフロントエンドのCIをさらに高速化した事例を紹介します。 Nxについては以前の記事で紹介しておりますので、気になる方は是非ご覧ください。 tech.findy.co.jp フロントエンドのCIの課題 Nx Agents Nx Agents導入の結果 Nx Agents利用上の工夫 プロジェクトを細かく分割する Node.jsのバージョンを揃える キャッシュの活用 特定のステップの省略 高度なエージェント割り当て まとめ フロントエンドのCIの課題 これまで「キャッシュの活用」や「並列化」「マシンスペックの向上」といった工夫により、フロントエンドのCIを高速化してきました。 しかし、コードベースの増大により時間
5つのECMAScript ProposalがStage4になど: Cybozu Frontend Weekly (2024-10-15号)
5つのECMAScript ProposalがStage4になど: Cybozu Frontend Weekly (2024-10-15号) こんにちは! サイボウズ株式会社フロントエンドエンジニアの Saji (@sajikix) です。 はじめに サイボウズでは毎週火曜日に Frontend Weekly という「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2024/10/15 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 PR TIMES フロントエンドの CI パイプラインを改善して、CI 処理時間と Billable Time を 50%を削減した話 | PR TIMES 開発者ブログ changed-files という github action 使って、変更があった特定のディレクトリのみ
積読が崩せないので読書記録サービスをつくった
背景と動機 本をよく買います。 気になった技術書や小説、漫画など、社会人になってからは特に買う頻度が増えたように思います。 しかし、読む時間がなかなか取れなかったり、期間が開いてどの本を読んでいたのか忘れてしまったりして、気付いたら積読が積み上がり「あ～やべ…」と感じることが多くなっていました。 「今読んでる本」をシンプルに管理できる何かがあれば、この状況を打破できるのでは…！と思ったので、読書記録サービスをつくってみました。 つくったもの yondako という読書記録サービスをつくりました。 GitHub か Google アカウントで登録できます。 デモ動画はこんな感じです。 「よみたい」「よんでる」「よんだ」の3状態で読書状況を記録できます。 レスポンシブ対応もしていて、スマホからも利用できます。 SNS的な要素や感想の記録などをあえて排除して、読書状況の記録に特化しているのが特徴
ハナユメのフロントエンドにSvelte/SvelteKitを採用しています - Ateam Tech Blog
こんにちは。エイチームライフデザインでハナユメという結婚式場情報サイトの開発を行っている大江です。 ハナユメは長い間、PHP/Symfonyを用いて開発・運用されてきました。しかし、プロダクトの成長と機能の複雑化に伴い、技術的負債が蓄積してきました。そこで、数年前からこの課題を解消するために、フロントエンドをSvelte/SvelteKitで置き換えるプロジェクトを始めました。現在では、検索ページ、式場詳細ページの一部、リングページなどいくつかのページをSvelte/SvelteKitでリリースしています。 今回は、Svelte/SvelteKitを選んだ理由や、実際に導入してみて感じたことについてお伝えします。 Svelte/SvelteKitを選んだ理由と実際に開発して良かったこと コード量が少なく書ける 以下は、ReactとSvelteで入力内容を同期してテキストを表示するコンポーネ
Storybook 8.4
Storybook is the industry standard workshop for building, testing, and documenting UI components. Hundreds of thousands of developers use it every week, including teams at Volvo, Netflix, and Chewy. In Storybook 8.4, we’ve created the best DX for testing, and debugging frontend tests in the browser. It builds on our work in component testing in partnership with Vitest. ▶️ 1-click Component Testing
10ヶ月ぶりの更新です。 突然ではありますが、エンジニアになったばかりの時にNext.jsで構築した技術ブログをRemixでリプレイスしました。 Next.js全盛の今Next.jsを使うのをやめて、Remixにリプレイスした理由ですが、Remixを今後の自分の技術スタックの軸にしたいと考えたからです。 Remixについて Remix is a full stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience. 引用: https://remix.run ReactベースのフルスタックフレームワークGETリクエストはloaderで、GET以外
Fivotに参画してから約半年が経過しました。 参画当初から数ヶ月間、さまざまな課題に取り組み、方針も固まってきたため、 これまでの取り組みを整理し共有します。 背景 参画時点では、Flutter WebからNext.jsへの移行が完了したばかりの段階でした。 もともと別のプロダクトでFlutterアプリを活用していましたが、Flutter Webでの開発はメンテナンスが難しく、Next.js（v13）への移行が決断されました。 エンジニア2人体制で担当しましたが期間が短かったこと、フロントエンドが専門でなかったこともあり、コードの品質は課題が多い状態でした。 参画当初、早期の新規開発も求められていましたが、技術的負債の解消も並行して進めなければいけないと考え、改善活動に取り組みました。 技術的負債解消の取り組み オンボーディング改善 環境構築に必要な情報をREADMEに記載し、ドキュメン
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
バクラク事業部のテストピラミッド設計 - LayerX エンジニアブログ
デザインシステムにおけるコンポーネントライブラリ管理の改善 - enechain Tech Blog
Next.js Conf 2024 全部聞いてみた
フロントエンドテストはやっぱり大事！人気のテストフレームワークとともに種類別に解説 | レバテックラボ（レバテックLAB）
Nx Agentsを導入してフロントエンドのCIを約40%高速化しました - Findy Tech Blog
Next.jsをやめて、Remixで技術ブログを作り替えた話 | カルキチブログ
フロントエンド（Next.js）現場に入って数ヶ月で技術的負債の改善に取り組んだ話