TypeScript 5.6の更新点など: Cybozu Frontend Weekly (2024-09-03号)
こんにちは！サイボウズ株式会社フロントエンドエンジニアのおぐえもん（@oguemon_com）です。 はじめに サイボウズでは毎週火曜日にFrontend Weeklyという「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2024年9月3日のFrontend Weeklyで取り上げた記事や話題を紹介します。 取り上げた記事・話題 Nuxt Bridge を活用して Nuxt 3 へ移行しました STORESがNuxt 3への移行を完了した旨を報告する記事です。2022年12月の報告の続編になります。 刷新における工夫点や、移行により得られた恩恵などが紹介されています。 Announcing TypeScript 5.6 RC TypeScript 5.6でリリース予定の新機能が紹介されています。 例えば、if文の条件文が常にtrue/falseのときに
フロントエンドにおいてAtomic DesignにおけるComponent作成やfeatures作成を行う方は多いと思います。例えばComponent作成であればただ単一のjsxやtsxのみ存在することはあまりないと思います。storybookやtestやcssファイル、hooksのファイルを置く場合もあるでしょう。そうなった際に一つのComponentを作成する為に複数のファイルをその都度作るのは億劫になりますし、めんどくさいですよね。 例えば以下のようなComponentがあったとします。 └── organisms └── HogeHeader ├── HogeHeader.stories.tsx ├── HogeHeader.test.tsx ├── PresentationHogeHeader.tsx ├── HogeHeader.tsx └── index.tsx この Hog
Storybook の play function や test-runner が登場し、Storybook をコンポーネントカタログの用途だけでなく、テストに活用するプロジェクトは増えていると思います。 今回は play function を使って next/navigation および next/router のテストをする方法を紹介します。 結論 .storybook/preview.tsx を以下のようにしてください。 import { action } from '@storybook/addon-actions' import { fn } from '@storybook/test'; const defaultNavigationContext = { push: fn((...args: any[]) => { action('nextNavigation.push')(
この記事は 2023 年 11 月 6 日に行われた ZOZO Tech Meetup - Web フロントエンドで発表した資料を記事にリライトしたものです。 資料だけでは伝わらない部分や、もっと詳細に触れたい部分もあったので記事にしました。 当時の発表資料は以下です。多くの部分では同様のことが記載されていますが、細部や扱う内容を若干変えています。 はじめに 3 年前にコンポーネントではなく Hook 自体をテストしたいというモチベーションから「React Hooks でテストをゴリゴリ書きたい」という記事を書きました。 この記事を書いた当時は Hook やコンポーネントで使われる関数がそれぞれ正しく動いていることが確認できれば、それらを組み合わせて作るコンポーネントもある程度正しいことが担保されるではないかと考えていました。 また、コンポーネントは JSX が書かれていて DOM 構造と
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
Storybook 7.5
Storybook is the gold standard UI workshop environment. It’s used across the industry by teams at Monday.com, The Guardian, Intuit, and many more for developing, documenting, and testing UIs. Today, we're thrilled to introduce Storybook's latest version: Storybook 7.5! It brings a range of new features that enhance the Storybook experience. Let's dive in! ⚡️ Vite 5 and Lit 3.0 support💨 2.2x faste
Rspack
# > August 28, 2024 -------------------------------------------------------------------------------- We are excited to introduce Rspack 1.0! Rspack is a next-generation JavaScript bundler written in Rust, compatible with the webpack API and ecosystem, and is 10 times faster than webpack. Eighteen months ago, we open-sourced Rspack 0.1 and received substantial feedback and contributions from the co
Storybook 7.6
概要 本記事は、SmartHR Advent Calendar 2023 シリーズ2 の7日目です。 本記事では、Storybook を React プロジェクトで使用した場合に内部的に使用される react-docgen について紹介し、その仕組みを深ぼることで Storybook の理解を深めようという記事です。 バージョン情報 Storybook v7.6.3 (monorepo) react-docgen v7.0.1 Storybook v7.6.0 のリリース 先日、Storybook v7.6.0 がリリースされ、変更内容をまとめたブログが公開されました。 v7.6.0 は、各種パフォーマンスとUXの改善に加え、次のメジャーバージョンに向けたレガシー機能の非推奨化が中心となっており、きたる v8 にむけた v7 最後のマイナーバージョンになります。 本記事では、上記ブログ内で
Storybookの「ColorPalette」を使って、デザイントークンを埋め込んだカラーパレットを型安全に作る方法
こんにちは。トビ（@0b1tk）です。初めてZennに投稿します！ サイボウズの自社製品「kintone」のデザインシステムを開発・運用するチームで、デザインテクノロジストとしてお仕事をしています。 私たちのチームでは、デザイントークンを「Tokens Studio for Figma」というFigmaプラグインで管理しています。また、デザイントークンやコンポーネントなどをStorybookでドキュメント化しており、カラーにまつわるデザイントークンをまとめたページを社内向けに公開しています。 今回は、StorybookのDoc blocksの「ColorPalette」を使って、デザイントークンを型安全に埋め込んだカラーパレットを作る方法をご紹介します！ カラーパレットの完成形 完成したカラーパレットは、HEX 値を直接入力するのではなく、Tokens Studioで管理しているデザイント
はじめに この記事はSTORES Advent Calendar 2023 19日目の記事です。 こんにちは、 STORES 予約 でエンジニアをしている@tontokoです。 STORES 予約 の開発チームでは月に1回、コードクリーニングタイムと呼ばれる日を設けています。 これは普段なかなか手を付けるタイミングが無かった技術負債や、重要ながら後回しにされているタスクなどを片付けることを目的にしています。 当日は緊急度の高いものを除き普段のプロダクト開発の手を休め、内部品質の向上に集中します。 自分は前回のコードクリーニングタイムに、ビジュアルリグレッションテスト(VRT)をフロントエンドリポジトリに導入しました。 導入の経緯 STORES 予約 ではバックエンドのテストに比べると、フロントエンドはまだまだテストの数が少ないです。 ライブラリのアップデートなどの全体に影響する変更の際に、
Apollo Client 3.8 から useFragment という React hook が導入されました。 今回はこの useFragment を利用している Component を対象としたテストや Storybook の書き方についての覚書です。 先日に別のエンジニアから、Storybook の記述に際して相談を受けた際のやり取りを元ネタとしています。 なお、途中のコードが長くなりそうなため、先に記事で取り扱いたいトピックを挙げておきます。 useFragment を利用している Component の Storybook が記述できるようになることStorybook で扱う Fragment のスタブデータの構築に一定の柔軟性を持たせること各トピックに対応する解として、この記事では以下の方式について解説します。 Apollo Cache を用意し、Story 描画前に所望の状
@storybook/cli - Storybook
私はAndroidでエミュレーター無しでスクショテストができる Roborazzi というライブラリを作っていて、もう少し周辺について詳しくなっておこうと思いまして、周辺技術のベストプラクティスを薄く広く軽く調べて見ます。 Jestを使ったスナップショットテスト: テストの流れが以下のように書いてあります。 実行して、画面を描画する Captureする 保存する もう一度実行する 比較する 画像をアップデートする 比較のところではdiffや比較の画像を出したりする。 以下のtoMatchSnapshot()で、なければ保存したり、あれば比較したりする。 test(‘should match snapshot’, () => { const data = {name: ‘John’,age: 30,email: ‘john@example.com‘}; expect(data).toMatc
はじめにこんにちは。Technology Innovation Group所属の太田寛明です。 新人研修で触れた程度のVue.js経験者の私が、Vueのバージョンアップを行って得た、所感や躓いたポイントを共有します。 経緯Vue2は2023年12月31日にEnd of Life（EOL）を迎えることになりました。 EOL期日までにVue2をVue3にバージョンアップする必要があります。 今回の対応では、対応内容で紹介する「1. Vue3での動作に必要な変更」をまず最優先で対応し、その後により良いプロダクトとするための取り組みとして「2. Vue3からの新規推奨事項の適用」の対応を行いました。 対応内容まず最初に今回のVue2から3へのバージョンアップで行った変更の全貌を紹介します。 Vue3での動作に必要な変更 Vue本体の更新 周辺パッケージの更新 Vue3からの新規推奨事項の適用 ビル
2023 JSConf JP 資料まとめ
はじめに JSConf JPに参加してきました。 後で見返せるように資料をまとめておきます。 Youtube Track A: https://www.youtube.com/watch?v=yxMJaXke9Hc Track B: https://www.youtube.com/watch?v=N1lhkH33fwY Track C: https://www.youtube.com/watch?v=pdgB0Y5ZQGk- Track D: https://www.youtube.com/watch?v=rDfPXDEot_A 資料リンク There and Back Again: A Proposal's Tale Web Internals: Mastering the JavaScript Engine Deep dive into Biome LLM全盛時代の開発プラクティス M
GitHub Pagesでフロントエンド開発のステージング環境を手軽に構築する（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: Super GitHub Pages: budget frontend staging, with Storybook and more—Martian Chronicles, Evil Martians’ team blog 原文公開日: 2023/08/04 原著者: Ekaterina Shibakova（フロントエンドエンジニア）、Travis Turner（技術編集者） サイト: Evil Martians -- ニューヨークやロシアを中心に拠点を構えるRuby on Rails開発会社です。良質のブログ記事を多数公開し、多くのgemのスポンサーでもあります。 日本語ブログ: 合同会社イービルマーシャンズ - Qiita 日本語タイトルは内容に即したものにしました。 はじめに ステージング（staging）環境のセット
JSer.info #707 - Biome v1.9がリリースされました。 Biome v1.9 Anniversary Release | Biome CSSのFormatter/LinterがStableに、GraphQLのFormatter/Linterを追加されています。 GritQLを使ったbiome searchコマンドを追加、.editorconfigをサポートなども追加されています。 ESLint v8.xのサポートが2024年10月5日に終了することが発表されました。 Version support policy and ESLint v8.x end of life - ESLint - Pluggable JavaScript Linter ESLintの現在の最新バージョンはv9.xです。 マイグレーションガイドは次のページに公開されています。 Configura
Summary: Storybook 8 integrates Vue’s official language tools to improve how Storybook generates controls and documentation in Vue Vite projects. Get started by upgrade your Vue Storybook docgen configuration today! Thanks to the great work of our Vue maintainers (Chakir, Lars, and Kasper), Storybook 8 significantly improves how we generate controls and documentation in Vue projects. We're using a
import type { Meta, StoryObj } from '@storybook/react'; import Button from './Button'; const meta: Meta<typeof Button> = { component: Button, }; export default meta; ... 変換したい箇所と内容をまとめると以下の通りです。 @storybook/react の import 文に Meta を追加する export default のオブジェクトを meta 変数に変更し、型注釈を設定する 相対パスで import しているコンポーネントの型を指定する export default を meta オブジェクトに変更する コンポーネントの型が動的に変わりますが、変更内容は共通しているため、AST を使って一気に変換できそうです。
はじめに メディカルフォースではバックエンドにおいては多くの機能にテストが書かれているものの、フロントエンドやアプリケーション全体のテストは手動でのテストに頼っている状態です。 その問題を解決するために現在E2Eテストの実装に力を入れようとしています。 まだ取り組みを始めて日が浅いため手探りなところはありますが、E2Eテストの実装にあたって工夫していることなどを紹介したいと思います。 なぜE2Eテストを書くか いきなり本筋とは少しズレますが、フロントエンドに閉じたテストよりE2Eテストに力を入れようとしているかについてこれまでの取り組みを踏まえつつ書いていきます。 これまでのフロントエンドテストの取り組み これまでの取り組みとして、Jest/Storybook/React Testing Libraryを用いたコンポーネントの単体テストや、Storybook/storycap/reg-su
以前、マネーフォワード クラウドの製品にマイクロフロントエンドを実装した記事を書きました。 現在このマイクロフロントエンドは実際に本番で稼働しており、開発も継続的に行ってます。ただ、Storybookのバージョンは当初の v6 のままだったので、Storybook 7の便利な機能が使えないストレスを抱えていました。また、開発が進むにつれコンポーネントやストーリーの数も増えてきて、ビルド時間も次第に長くなってきていました。 ちょうど先月Storybook 8がリリースされたので、この機会にStorybook 6からStorybook 8への移行を行いました。この記事は、私が実際に行ったStorybook 6からStorybook 8へ移行作業をした時に、社内向けに記録し共有した文書を公開用に少しアレンジしたものです。 環境 Storybook "6.5.16" TypeScript "5.4
はじめに LITALICO プロダクトエンジニアリング（PE）部の片桐英人（かたぎり えいと）です。 最近、仕事ナビのフロントエンドのテストや Storybook で使用している Mock Service Worker（msw）を 1.x から 2.0 に更新しました。仕事ナビのメンバーにそのことを伝えるために書いています。 この記事を記載している時点で、最新は、2.0.11 になっていますね… Mock Service Worker (msw) とは？ Mock Service Worker（msw）1 は、Service Worker 2 を使って、HTTP リクエストとそのレスポンスをモックするための JavaScript のライブラリ（npm パッケージ）です。 MSW 2.0 MSW 2.0 は、2023年10月末にリリースされました 3。このリリースで、モックの定義方法など多く
JSer.info #696 - Storybook 8.1がリリースされました。 Storybook 8.1 Storyファイルを作成するUIの追加、Subpath importsを使ったモックの対応、Playwright Component Testの対応しています。 pacakge.jsonのimportsフィールドで特定のモジュールを条件分岐して読み分けるための仕組みであるSubpath importsについては、次の記事でも解説されています。 Type-safe module mocking in Storybook Mocking modules • Storybook docs その他には、React 19/Angular 18のサポートなども含まれています。 Turborepo 2.0がリリースされました。 Turborepo 2.0 Turborepoはmonorepo向
2023年9月、ファインディ株式会社は「フロントエンドの開発生産性」と題したオンラインカンファレンスを開催。第一線で活躍しているエンジニアを招いて、フロントエンド領域における開発生産性を向上するための組織づくりや戦略について語っていただきました。 本稿では、合同会社DMM.comのフロントエンドグループにてマネージャーを務めている小西一平さんのセッション「組織状況の変化の中で運用するフロントエンドエコシステム」の内容をご紹介します。 同社は、フロントエンドの開発生産性とUI/UXの一貫性の向上を目的として、2021年にフロントエンドグループを立ち上げました。エコシステムを整備することで当初の目的は達成しつつあったものの、しばらくしてから別の課題が発生してしまったのだそう。新たな課題とはどんなものだったのか、その対処法とは？ ■プロフィール 小西 一平（こにし いっぺい） 合同会社DMM.c
こんにちはkubotakです。 弊社M&Aクラウドでは先日、Nuxt(v2系)のアプリケーションをSvelteKitへ移行を完了しました。 ※一部ページは諸事情によりNuxtのままですが9割以上が移行済み。 本記事ではSveltekitへの移行した理由や移行方法について紹介したいと思います。 Vue2系がEOLを迎える Vue.jsは現在3系となり、Vueをベースとして作られているWebフレームワークであるNuxtも現在3系が最新となります。 また、Vue.jsの2系は2023年12月31日*1に、Nuxtについても2系は2024年6月30日*2にサポート対象外になることが発表されています。 それに伴い弊社でもNuxtの2系の対応について検討がされました。 NuxtからSveltekitへ まずはNuxt2から3への以降に際してどのようなマイグレーションが必要なのかを調査しました。 弊社の
こんにちは。ヤフーメディア統括本部 企画デザイン本部 デザイナーの芦田です。3年前にヤフートップページのデザインシステム導入を担当した経験を活かし、現在担当しているサービスにおけるデザインシステムの改善を進めてきました。 改善の中でも、デザイナーとエンジニアが密接に連携して進めたコンポーネントの整理は、特に大変だったものの、多くの学びがありました。今回は、そのコンポーネントの整理をどのように進めたかを共有します。 デザインシステムとはデザインシステムは、デジタルプロダクトにおいて開発とデザインの一貫性を保つためのルールなどをまとめたものです。これには、色やタイポグラフィを定めたスタイルガイドや、そのガイドに基づいて作られたコンポーネントライブラリなどを含みます。 デザインシステムが導入されると、効率的に開発することができ、価値提供のスピードが上がります。また、ユーザーにとっては、プロダクト
はじめに 〜DRY or WET〜 怠惰であることが美徳とされるエンジニアは、一度つくった機能は二度と作らないようにしたいものだ。 だから共通部分を見つけ出し、それを切り出してライブラリとして使い回すということが行われている。 コピペはするな。 DRY(Don't Repeat Yourself) ところがある程度の経験を積むと、 むしろコピペしろ。 WET(Write Everything Twice) といった状況もあることに気づく。 この両極の価値観は、少なくとも「何事も共通化すればいい、というわけではない」ことを教えてくれる。 問題はその使い分けだ。 これに関しては実に多様な意見がある。 本記事ではそれらを類型立てて紹介することはせず、かわりに私の経験に基づく考えを記すことにする。 私は9年間、同一の組織で開発を牽引する立場におり、共通化と個別化の判断を繰り返し、またその結末も見て
これは勤務先の Advent Calendar なのだけど、何を書こうか考えてみたところ、今年は私的なふりかえりにしようと思ったので個人ブログに書いている。 何故そうしたかと言うと、一年を振り返ってみて、今年は —— 正確に言うとこの二年ぐらいなのだが —— 自分の中で大きな思考転換があったから。年始から Japan Marketing Week・日本 CTO 協会のイベント・開発生産性カンファレンス などいくつかのイベントに登壇し、一貫して「プロダクト開発組織のあり方」や「CTO の役割」について話してきたが、どれも自分自身の失敗談と、そこからの思考転換や取り組みについて話してきた。このポエムでは、そんな失敗談の裏側 —— 個人的な気持ちの変化について、筆の進むままに徒然なく書いてみようと思う。 エンジニアの仕事は、コードを書くだけではない新卒で入ったのは金融のトレーディングシステムをつ
Storybook 8.2
Storybook is the component workshop behind the world’s top design systems (Carbon, Polaris, Fluent, Lightning, etc.). Accordingly, it is often associated with building and documenting atomic components for reuse. But UI components come in many sizes and shapes. For teams at Faire, Yoobic, and Monday.com, Storybook is the tool of choice for “product UI” such as shopping carts, dashboards, chat widg
Storybook8.1からSubpath importsを使ったモジュールのモックができるように
- import { type GetExamplesResponse, getExamples } from "../../api/example"; + import { type GetExamplesResponse, getExamples } from "#src/api/example"; Node.js が提供する Subpath imports は Vite と Webpack、また TypeScript5.4 でサポートされている。実際に次の環境で試すと、型の補完も効くし、モジュールがモックされた。tsconfig も Vite の config もいじってないのに。 Storybook: 8.1.6 Vite: 5.2.8 TypeScript: 5.4.5 @storybook/testのfnと Story のbeforeEachを使うことで、Jest や Vite
As a result, Storyhots is now officially deprecated, is no longer being maintained, and will be removed in the next major release of Storybook. We recommend following the migration guide we've prepared to help you during this transition period. とあるように Storyshots が非推奨になりました。 移行手順と Storyshots と出力が変わらないように migration guide の内容を改造します。 はじめに この記事では、Storyshots から Storybook の新しいテストランナーへの移行プロセスに焦点を当てています。特に
サービス開始後7年経過するプロダクト（TACT SEO）にデザインシステムを導入した取り組み - WILLGATE TECH BLOG
ウィルゲートでTACT SEOを開発している水口です。 TACT SEOはサービス開始から7年が経過するプロダクトです。 今回は、TACT SEOの新しいUIを実現するため、サービス開始当初からほとんど更新されてなかった、フロントエンド開発の仕組みを見直し、デザインシステムの導入する取り組みについてご紹介いたします。 デザインシステム導入前に抱えていた課題 今回の取り組み前後の状況 取り組み前 取り組み後 デザインシステムとは デザインシステムの定義 デザインシステムの構成要素 今回の取り組み内容 新UI・基本概念の理解とドキュメントの作成 スタイルガイドの取説の作成 クラス設計＆Sass導入 Storybook導入 ライブラリのパッケージ管理、アップデート 取り組み前の課題に対する効果 その他の効果 最後に デザインシステム導入前に抱えていた課題 1. デザインに統一感がない TACT
http://localhost:6006/?path=/story/components-ui-button--default
前書き zennの本(無料)でもご覧いただけます。 本内容は主観を含めています。 誤った情報、誤記などありましたら、ご連絡いただけると幸いです。 1. 背景 最近はAI技術の急速な発展により、LLM（Large Language Model）を活用したアプリケーションが注目を集めています。しかし、多くのLLMアプリケーションはクラウド環境での利用を強いられることが多く、データプライバシーやセキュリティ、費用面の都合で導入にハードルを高く感じることもあると思います。 ここは開発においても似た感じで、Github Copilotはエンジニアの生産性を大幅にあげてくれるとよく言われていますが、上記の都合などでAIの活用に滞っていることもあると思います。 しかし、最近はプライベートナLocal環境でも簡単にLLMを駆動し活用することを試せる時代になりつつあります。LLMの最適化の発展、オープンソー
私たちは、アイデアからコードまでの製品開発をよりスムーズに進行させるために、開発モード(Dev Mode)を開発しました。そして本日、この開発モードがついにベータ版から正式版へと移行したことをお知らせします。私たちの製品哲学や、開発者やデザイナーの体験をどのように改善しているか、そしてこれから何が起こるのかについて詳しくご紹介します。 Figmaは、決してデザインだけを目的としたツールとして設計されたわけではありません。なぜなら、デザインは単に役割だけではなく、素晴らしい製品を創り出すことそのものだからです。そのため、私たちはFigmaをウェブ上で構築しました。一つのリンクだけで、チーム全体が進行中の作業に協力し、ファイル内で初期段階の探索を共有することができます。このマルチプレイヤー的なアプローチは、チームが一緒になって共有スペースで問題を解決することを促進し、デザインにすべての人がアク
はじめに Next.js の SSG で簡単な線グラフを表示する必要に迫られ、その界隈で使われているライブラリの現状をちょっと調べてみました。以前に同じ界隈のグラフ表示のライブラリを使ったのは 2018 年頃なので、最近の状況を把握する目的もあります。 チャートライブラリは特定の目的のものから汎用的なもの、チャートを簡単に表示するものから部品のラッパー的なものまで多種多様ですが、既に開発が終了/停滞しているプロジェクトも多く、調査にはそれなりに時間がかかってしまいました。 ライブラリ調査/選定について 英語版の Wikipedia に結構まとまっているので、まずはそこから列挙したあとに絞り込んでいきました。今回の利用目的から、非プロプライエタリ、かつ、比較的更新がされており、PC 上の Web ブラウザ上での表示がメインで Reace(Next.js/SSG) で利用でき、オフライン表示も
Designship 2024ではタイミーのデザインチームがブース出展します！この記事のデザインデータも見れるようになっているので、ご興味のある方はぜひお越しください！ こんにちは、タイミーのプロダクトデザイナーの横田です。 私たちは900万人以上のワーカー様が利用するスキマバイトプラットフォームを運営していますが、プロダクトデザイナーはかなりの少数精鋭です。 今回は、タイミーのプロダクトデザインにおける仕組み化についてご紹介します。 DesignDataOpsに取り組むデザインをめぐるオペレーションの整備については、近年はDesignOpsという活動の一部として捉えられています。しかし、DesignOpsの意義は拡大し、組織運営などのソフトな側面も含むようになっています。 この記事では、デザインデータのガバナンスや完全性を確保する取り組みにフォーカスし、DesignDataOpsと呼ぶこ
学園祭実行委員会で物品管理システムを作った話 - puripuri2100が進捗の報告をするようです
はじめに こんにちは 筑波大学学園祭実行委員会に今年度所属していたpuripuri2100です。 学園祭実行委員会の中でも「内部向けシステムやサイトの運営、映像の作成や生中継」などの情報系を主な職務とする「情報メディアシステム局」という部門で作業をしていました。 学園祭実行委員会は通常学類11年生と2年生が所属するのですが、自分は1年生時には所属せず2年生になった今年度のみ所属するというかなり珍しいことをしていました。これには理由があり、既に情報メディアシステム局に所属して作業をしていた同学年の友人が昨年度末ごろに「今作ろうとしている物品管理システムの進捗が芳しくない」とこぼしていたのを聞き、それをヘルプで入ったためです。既に高校生の時に文化祭の準備委員会で使う物品に一意のIDを振ったうえで貸し出しを管理するシステムとソフトウェア2を作っていたことや、困っている友人を助けたいという気持ち、
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
turbo/gen で対話式雛形コード生成
@storybook/test を使って next/navigation をテストする
React でテストを書く時に考えていること/大切にしていること
Storybook と react-docgen の仕組みを追う
Visual regression testingを導入してみた - STORES Product Blog
Storybook で Apollo Client の useFragment を扱う
スクリーンショットテストのプラクティスについて調べるメモ - Qiita
Vue.jsを2から3へバージョンアップした話 | フューチャー技術ブログ
2024-09-16のJS: Biome v1.9、ESLint 8.xのEOL、TypeScript 5.6、ES5の現状
First-class Vue support with Volar and Storybook 8
大量のコードを TypeScript の AST で一気に置き換えよう
メディカルフォースにおけるE2Eテスト自動化の取り組みと工夫
Storybook 6をStorybook 8ヘ移行した時にやったこと
MSW 2.0 に更新した話 - Qiita
2024-06-13のJS: Storybook 8.1、Turborepo 2.0、Node v22.3.0(Snapshot Testing)
Type-safe module mocking in Storybook
組織状況の変化の中で運用するフロントエンドエコシステム - Findy Engineer Lab
NuxtからSvelteKitへ移行しました - M&Aクラウド開発者ブログ
デザインシステム改善:デザイナーとエンジニアで一緒に進めるコンポーネント整理｜LINEヤフーDesign 公式note
9年開発を牽引して見えてきた、共通化すべきものと個別でつくるもの - Qiita
あるエンジニアの、ささやかな成長｜monzou
Storyshots 非推奨になったので Storyshots 相当を自作する
Storybook での開発体験爆上げ VS Code 拡張機能を作った話 - ygkn note
Local LLM AIを簡単に構築し開発への活用を試す - Qiita
開発モードについて知っておくべきすべてのこと | Figma Blog
令和6年にJavaScriptなチャートライブラリをReact念頭に置いて総ざらい - Qiita
タイミーでは先鋭的なDesignDataOpsを構築した｜Yasuhiro Yokota