こんにちは。 派遣業界のSaaS企業でUX/UIデザイナーをしている水田と申します。 この記事では、初期からデザイナー不在でデザイン負債が蓄積したプロダクトに対して、一人目のデザイナーとしてどのようにしてデザインの整理を試み、やがてデザインシステムを構築・運用していくことになったのか、その過程で私が学んだことをまとめてみました。 デザインシステムを作りはじめたいけど、どこから手をつければ良いか悩んでいる方。 今まさにチームでデザインシステムの構築を検討している方。 デザインシステムを運用しているものの、効果を十分に実感できていない方。 このような方々に読んで頂けると、少しお役立ちできるかもしれません。ではいきましょう。 PMF前のプロダクトにデザインシステムは必要ない まず最初にお伝えしたいことは、PMF（プロダクト・マーケット・フィット）に至っていないプロダクトには、強固なデザインシステ
はじめに こんにちは。カナリーでソフトウェアエンジニアをしている @snamiki1212 です。 私たちは 【もっといい「当たり前」をつくる】 をミッションに掲げている不動産テックカンパニーです。弊社では、現在下記のプロダクトを運用しています。 「CANARY」: BtoC のお部屋探しポータル（アプリ/Web） 「CANARY Cloud」: BtoB SaaS（不動産の仲介会社様向けの顧客管理システム） この記事では、 CANARY のアプリで利用している技術スタックについてまとめています。 （この記事は自分含めてアプリの開発をメインで行っていたエンジニア @yoshi-jr / @centerfield77 と共同で執筆しています） この記事を読んでわかること CANARY のアプリについて技術スタックの全体像・概要が理解できる 話すこと CANARY のアプリのアーキテクチャ C
はじめに 社のフロントエンド開発で、品質担保施策の一環としてVRTを実施しています。 単純にコンポーネントをマウントした結果だけではなく、interaction test や msw-storybook-addon を合わせて活用し、pageやmodal単位の振る舞いの変化の結果の担保として、integration test の役割も一部担わせているため、これを安定化させ、オオカミ少年にしないことが重要です。 そのために、ドキュメントされていない点で改善を試行錯誤した部分があるのでまとめておきます。 改善事項 storycapは厳密には play function に対応していないことを意識する storycapは、正式なサポートとして、play関数のPromiseが解消されたことを確認してから撮影しているわけではありません。storybookにこれが導入される前から、撮影の安定化のために
crowdworks.jp のフロントエンド活動を振り返る2023 - クラウドワークス エンジニアブログ
この記事はクラウドワークス Advent Calendar 2023 シリーズ 1の1日目の記事です。 クラウドソーシングサービス「クラウドワークス」（以下 crowdworks.jp ）にてエンジニアをしております、フロントエンドの可能性をしつこく信じ続ける@okuto_oyamaです。 一昨年・去年と引き続き、今年もアドベントカレンダー初日の盛り上げ手としてやっていきます。よろしくお願いします。 フロントエンド活動の振り返りをしてみよう 一昨年・去年もフロントエンド活動の振り返りをしてみましたが、今年もやっていきます。 qiita.com engineer.crowdworks.jp 全体総括編 まずは crowdworks.jp の全体のフロントエンド活動を総括していきます。 erbのVue.js化活動が拡大 昨年から続けているフロントエンドとバックエンドの分離作業についてお話ししま
こんにちは。この記事では、先日公開した軽量なStorybook駆動開発に関する記事の続編として、ネストしたContainer/Presentationコンポーネントに対して軽量なStorybookを構築する方法について紹介します。 軽量なStorybook 軽量なStorybookとは、Container/Presentation(C/P)パターンを活用してネットワークの関心を排除したStorybookのことを指しています。 APIモックツールを使用しないことでStorybookの実装容易性が向上することに加え、Portable Storiesを活用したテストの動作が安定するため、Storybook駆動開発の文化を醸成する手助けとなります。 詳細は前回の記事で紹介していますので、この記事と合わせてご覧ください。 ネストしたContainer/PresentationをStorybookでど
Chromaticを導入しました！
はじめに 半年くらい前にプロジェクトにStorybook及びChromaticを導入したのでその知見を今更まとめたいと思います。 Chromaticは開発者１人だけではなくエンジニアチーム全体、更にはデザイナーやPM/PdMみんなで使っていくことによってその効果が何倍にもなるツールです。Chromaticがどんなツールなのか、どうやって使うことができるのか、について書きたいと思います。 Chromaticとは何か？ ChromaticはStorybookをベースとしたUIテストツールです。Storybookのチームによって開発されており、フリーミアム型のサービスです。 簡単なイメージとしては、ローカルにあるStorybookをCDNにデプロイしたもの、みたいな感じです。 https://www.chromatic.com/docs/ より デプロイすることで同じStorybookをチームみ
この記事は？ フロントエンドの(に限らずですが)技術はよく言われるように移り変わりが早いです。とはいえ個人で全て追い切るのは難しく、また必ずしも新しいものを使い続けていればいいわけではないとも思います。個人的には新しい技術であっても古い技術であっても、きちんと自分の中に技術採用の軸があることが大事だと思っています。 このエントリではmanatenが2023年末現在でフロントエンド(周辺)でアプリケーション開発をするときに、利用することが多い技術を概要や理由付きで挙げていきます。 (なお年の瀬に思い出して書いてるため、抜けがあったり内容いい加減だったりすると思います。) 今後も使っていくもの ライブラリ React 2023年時点である程度以上複雑なフロントエンドをコンポーネント指向+型安全に開発する上でベターな選択肢だと思います。 コンポーネント=JSX≒JSのため、通常のJS開発における
All TypeScriptのMonorepoのlinterをESLintからbiomeにしたらlintが25倍速くなった🚀 - KAKEHASHI Tech Blog
フロントエンド(React.js TypeScript) バックエンド(Node.js TypeScript) インフラ(CDK TypeScript) の Monorepo の linter を ESLint からbiomeに変更したら lint が約50秒かかっていたのが大体2秒になって嬉しかったので共有します。 こんにちは、カケハシでソフトウェアエンジニアをしている加藤です。 本エントリはカケハシ Part 2 Advent Calendar 2023の 21 日目の記事です。 ぜひ Part1 も 2 も見て頂けたらと思います。 同じカケハシ社内の他のチームでは以前 コードフォーマッターを Prettier から dprint にしたら 10 倍以上速くなった話 🚀 で紹介した通り、dprintを導入していますが、今回僕たちのチームは biome を導入してみました。 導入してみ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
成長期のスタートアップにおける、デザインシステムの考え方
2024年｜CANARY アプリの技術スタック
VRT(storycap, reg-suit, Next.js)を安定させるためのTips
fetchに依存しない軽量なStorybookを構築するテクニック
2023年のmanatenのフロントエンド - MANA-DOT