Storybook × MSW × Chromaticを使ったUIの影響範囲を自動検知するための取り組み - ZOZO TECH BLOG
こんにちは、FAANS部の田中です。普段は、WebのフロントエンドエンジニアとしてFAANSの開発を行なっています。 FAANSの由来は「Fashion Advisors are Neighbors」で、「ショップスタッフの効率的な販売をサポートするショップスタッフ専用ツール」です。現在正式リリースに向けて、WEARと連携したコーディネート投稿機能やその成果を確認できる機能など開発中です。プラットフォームとしてはWeb、iOS、Androidが存在し、今回取り上げるWebはショップ店長をはじめとした管理者向けツールという立ち位置です。 本記事では、FAANSのWebにおけるStorybook × MSW × Chromaticを使ったUIの影響範囲を自動検知するための取り組みを紹介します。 はじめに FAANSのWebはReact、TypeScriptで構成されています。設計に関しては、ロ
技術のトレンドと開発テクニックの知見を、無料で公開します！
技術のトレンドと開発テクニックの知見を、無料で公開します！ いかに無駄な努力をせず、効果的にトレンドに沿ったアプリ開発ができるかを研究してきました。 この記事は、定期的にトレンドに沿って更新していこうと思います。 twitterもやってます！ 今後も情報発信しようと思うので、フォローお願いします！ 自分が一番知見のある、フロントエンドの分野中心に見解を述べたいと思います。 結論から言うと、 React, Next.js, Typescript, Tailwind, react-query, prettier, Stylelint, auth0, tRPC, Prisma, playwright, vscode, github actions, PostgreSQL, Terraform, Flutter これらの技術スタックが今後ますます流行り、開発体験の良いものになると思います。 最初に
こんにちは！Magic Momentのフロントエンドエンジニアの石田です！ Magic MomentのフロントエンドではReactを採用しており、 コンポーネント設計にはAtomicDesignを採用しています。 みなさんはコンポーネントを使い回せていますか？ 今回は僕がMagic Momentで実施しているコンポーネントを使い回すための開発手法をご紹介します。 コンポーネント駆動開発 コンポーネント駆動開発とは、画面を作る際に小さなコンポーネントから作成していき、小さなコンポーネントを組み合わせて画面を作る「ボトムアップ」の開発プロセスになります。 この手法を使用すると、小さなコンポーネントとして再利用できる部品を設計できます。そのため、コードの重複を減らし、保守性を向上させることができます。また、コンポーネントを組み合わせて画面を作成するため、開発の効率性も向上します。 Magic M
こんにちは、株式会社スタメンで FANTS のフロントエンド開発を担当している @0906koki です。 今回の記事では、本日リリースした FANTS ダッシュボードのフロントエンド開発で選定したフレームワークやライブラリ、ディレクトリ構成について解説します。 目次 目次 FANTS ダッシュボードとは？ 技術スタック Next.js SWR Styled-Components Storybook ディレクトリ構成 components apis 最後に FANTS ダッシュボードとは？ FANTS ダッシュボードの説明をする前に、FANTS というプロダクトについて紹介させてください。 FANTS とはサブスク型のオンラインファンサロンプラットフォームで、オンラインファンサロンを始めたいオーナー様に、サロン開設に必要なシステム・企画等をワンストップで提供します。現状 100 サロン以上
こんにちは。ひらやまです。 今回は、これまでフロントエンド環境を作ったり、運用したり、設計のアドバイスをしたりしてきた私がひとまずたどり着いた、このくらいの塩梅の設計が良いのではないかと考えている一つの案をみなさんに共有しようと思います。 フロントエンド設計の必要性 フロントエンドは JSON 色づけ係と言われることもありますが、ただ JSON をきれいにしてユーザに見せる以上の難しさを感じることもあるのではないでしょうか。 実装を完遂するために必要となるスキルが広いため、様々なバックグラウンドを持つ人がコードを書くことになりやすいです。フロントエンドエンジニアと呼ばれる人も、私みたいにマークアップエンジニアからフロントエンド領域に手を伸ばした人もいれば、デザイナーやバックエンドエンジニアなどの領域からこの環境に挑戦される方もいらっしゃいます。 このような様々な背景を持つ人たちが一つのコー
概要 1 年半前の自分にむけて Nuxt + TypeScript で開発する時に伝えたかった 10 のこと (Nuxt + TypeScript の開発を 1 年半やった振り返りと反省) 社内 LT 用に作ったスライドはコチラ 注意事項 記載したコードはvue-property-decoratorを使用した記法になっています その 1 props と $emit だと props で完結させた方がシンプルでいいぞ props で関数を渡せるので関数渡したほうがシンプルでいいよねってお話(補完も効くようになるし) atomic design でコンポーネント分けてたりすると、親 → 子 → 孫 → 孫孫みたいにコンポーネントのリレーが長くなった際に、props で完結させておくと props で渡した挙動だけしかしないので親で定義した部分を見るだけでいい。 それに対し、emit の場合、e
React(Next)/Go/GraphQL/Fargateで個人開発したサービス「読み方アンケート」をリリースするまで - Qiita
※[追記]読み方アンケートは閉鎖しましたm(__)m多くの反応を頂いているので記事は残しておきます。ありがとうございました。 個人開発である程度しっかりしたものを作ってリリースまでするってなかなか大変だと思います。 そこには技術的な壁がある人もいれば、なかなか本業が忙しくて時間がとれない人、途中まで開発して「こんなん誰が使うねん...」モードになってしまい頓挫する人。 そんないくつかの壁をなんとか乗り越え、 この度晴れて個人開発サービスである読み方アンケートをリリースできたのでまとめたいと思います。 個人開発サービスリリース🎉 恥ずかしい読み間違いをこの世から無くすための投票型読み方情報集約サイトです! React(Next)/Go/AWS(Fargate)/GraphQLで作成 「◯◯ 読み方」で検索上位に出るサイトになります💪 SNS等アカウントの宣伝できるので是非🚀#読み方アン
食べログでのAtomic Design 〜どう分類しているか編〜｜食べログ フロントエンドエンジニアブログ
食べログFE（フロントエンド）チームの金野と申します。 以前の記事で、jQuery+Backbone.jsからReact/TypeScriptへのリプレースを進めていることをご紹介しました。 リプレースした部分では、Atomic Designを採用しています。 今回の記事では、採用した理由や食べログでの分類方針についてご紹介します。 Atomic Designを導入した目的Atomic Designを導入したねらいは以下になります。 ・コンポーネントの責務がより明確になる ・見た目の粒度だけでなく、ロジックの責務も明確にできる ・「ドメインが入るか／入らないか」。「抽象的か／そうでないか」の区別が明確になる ・世間的にも浸透している概念のため、デザイナー・エンジニア間の共通言語を作れる 食べログではもともとUIコンポーネントをFLOCSSの考え方に従ってレイヤー分けしていましたが、以下の課
こんにちはかみむらです。 プロダクト開発で、デザイナーとフロントエンドエンジニアの円滑なコミュニケーションは必要不可欠です。 しかし、実際に開発を進める上で、円滑化する仕組み作りは悩ましい問題です。 そこでStorybookの紹介です。 これはコンポーネントをカタログ化して、管理できるツールです。カタログ化することで、双方の行き違いを限りなく少なくできます。 そして、FigmaやAdobe XDと連携できるなど、開発者とデザイナーの両方に嬉しい拡張機能もあります。 今回はReactにStorybookの導入と、基本的な使い方から便利なアドオン(拡張)を紹介していきます。 Storybookの公式サイト https://storybook.js.org/ 前提create-react-appで作成したプロジェクトを想定しています。あらかじめプロジェクトを準備してください。 npx creat
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは！ トップページ デザイナーの芦田です。 9月にスマホWeb版トップページのデザインシステム導入を行いました！ …と言っても見た目の変化が少ないので、気づいていない方も多いのではないでしょうか？ 見た目ではわかりづらいのですが、UIデザインとして大きな改修をしたので紹介します。 スマホWeb版トップページのデザインシステム導入 去年の10月にPC版トップページのリニューアルが無事完了したことを受けて、スマホWeb版も技術刷新を行うことになりました。 技術刷新ではエンジニアはモダンな開発環境に移行し、既存のUIのコードを書き直していきます。それと並行してデザイナーは既存のUIの仕様を確認、整理する必要があります。 この機会
How to create a super-ellipse CSS button based on Lamé curve
I’ve always been a CSS fiend. Ever since I started creating web content I have been looking for the “perfect” button. The one button that users want to click over and over again. We’ve seen the rise of flat, material, skeuomorphism and atomic design over the years, but I haven’t seen any CSS frameworks make use of the Lamé curve on buttons yet. So today, I’m going to teach you how to create your v
受注管理機能を支える技術 〜 VueCompositionAPIとGraphQLとAtomicDesignとScopedStyle〜 - 弥生開発者ブログ
こんにちは、 @mugi_uno です。 少し前に背骨の手術を受けたら身長が伸びました。 🎉 受注管理機能をリリースしました 2020/12/10に、Misocaに新しく「受注管理機能」をリリースしました。 www.misoca.jp いままでは、請求書・見積書・納品書といった単位でのステータス管理が主でしたが、新たに追加された受注管理機能を使うことで、案件単位でステータスを管理しつつ、各文書への変換も簡単に行えるようになりました。 そして、同時にこの受注管理機能は、開発面においても様々な新しい技術面でのトライもありました。 Vue.js & Vue Composition API GraphQL Apollo Client & Vue Apollo Atomic Design Scoped Style 今回は、これらについてどういった対応をしたのかと、リリース後にふりかえってみてそれぞ
Next.jsで作成する管理画面作成チュートリアル
Next.jsで管理画面のボイラーテンプレートを作成してみました。 本書では、利用した技術などを紹介していきます。 1. はじめに 2. プロジェクトセットアップ 3. 自動デプロイ（CI/CD） 4. バックエンドの準備 5. コンポーネント作成（Atomic Design） 6. 共通処理 7. 入力フォーム 8. 状態管理 9. 非同期処理（react-query） 10. レンダリングオプション（CSR/SSG/SSR/ISR） 11. 単体テスト
【2021年版】サーバーサイドエンジニアがVue.jsでモダンフロントエンド開発を始めるまで - Qiita
2020年12月からのプロジェクトで、Vue.js(2系)によるモダンフロントエンドの開発の一端を担うことになりました。そこで、プライベートで2ヶ月ほどフロントエンド開発の学習をし、なんとかフロントエンドの業務をこなせるようになってきましたので、やったことをご紹介します。 意外とやるべきことが多かったため、体系的にまとまっていると今後復習する際に役立つかと考え、この記事を執筆することにしました。 これまで Web系の受託開発会社に入社し、1年ほどサーバーサイド開発をメイン行ってきました。 この1年間はRuby, Ruby on Rails, RSpec にどっぷり浸かっている一方、フロントエンド開発はほぼゼロの状態からのスタートでした。 やったこと JavaScript JavaScript Primer を読む & ハンズオン 所要時間: 20時間 まずは JavaScript の言語仕
ファイル構成 – React
お勧めの React プロジェクトの構成は？ React はファイルをどのようにフォルダ分けするかについての意見を持っていません。とはいえ、あなたが検討したいかもしれないエコシステム内でよく用いられる共通の方法があります。 機能ないしルート別にグループ化する プロジェクトを構成する一般的な方法の 1 つは、CSS や JS やテストをまとめて、機能別ないしルート別のフォルダにグループ化するというものです。 common/ Avatar.js Avatar.css APIUtils.js APIUtils.test.js feed/ index.js Feed.js Feed.css FeedStory.js FeedStory.test.js FeedAPI.js profile/ index.js Profile.js ProfileHeader.js ProfileHeader.css
はじめにこんにちは、Anewsのエンジニアリングマネージャーの山崎です。 この記事はストックマークアドベントカレンダーの22日目の記事です。 普段は、エンジニアリングマネージャーとして開発体制や中長期のエンジニア戦略を考えています。 またエンジニアリングマネージャーとは別にエンジニアとしてAnewsのFlutterアプリの開発を行なっています。 Anewsの開発組織では全員がフルスタックエンジニアとして働くことを推奨しており、 開発体制やプロセスについてもフロントエンド、バックエンドなどの領域を意識せず顧客への価値提供を最大化するためエンジニアが必要な開発を行うようにしています。 その中で、モバイルアプリだけは固定されたメンバーで開発を行うような体制になっています。 理由としては、 ・ モバイルアプリの開発経験が少ない ・ モバイルアプリのコードが複雑になっており、学習コストが高くなってい
freee Developers Advent Calendar 2019 の17日目です。 デザインシステムチームの @toofu__ です。夜はニートゥーチェストをしており、1988年生まれ4268人中3位です（12月16日現在）。腹筋が喜んでいます。 freee のデザインシステムの現状 freee にはデザインシステムチームが存在し、下記の運用を行っています。 UIコンポーネントライブラリ Vibes デザインガイドライン Groove アクセシビリティガイドライン Groove と Vibes が生まれた経緯とかについてはチームメンバーの @ymrl が1日目に色々書いてくれているので、よろしければご覧ください。 developers.freee.co.jp この記事では、Groove と Vibes に関するもうちょっと細かいブツの雑多な話を書きます。 Vibes の詳細 Vi
FlutterアプリにおけるUI Component Architecture #LayerXテックアドカレ - LayerX エンジニアブログ
こんにちは。バクラク申請・経費精算 ネイティブアプリエンジニアのyoheiです。 最近はこたけ正義感の逆転裁判プレイ動画を見ながら法律の勉強してます。好きなラジオは真空ジェシカのラジオ父ちゃんです。M-1も応援してます！ この記事はLayerXテックアドカレ2023の26日目の記事です。前回は 赤羽さん が「Go言語のORMであるGORMをv1からv2へのマイグレーションした話」を書いてくれました。27日目の記事 id:itkq さんより「勤怠をいい感じにする社内Slackアプリ #LayerXテックアドカレ - LayerX エンジニアブログ」ポストされました。一緒にご覧いただけたらと！ バクラク申請・経費申請では現在のモバイルアプリをFlutterでのリプレースを進めています。そのうえでチームとしてUIコンポーネント(Widget)をどの用に作っていくか設計(UI Component
marmelab.com A frontend Framework for building data-driven applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design. Previously named admin-on-rest. Open sourced and maintained by marmelab. React Admin 管理画面を作るのに最適化された React アプリケーションフレームワーク France のMarmelab社によってメンテナンスされている OSS がコア Enterprise Edition もある OSS として公開していない便利な private modules が使えたり、開発サポートが受けられ
ゼロから始めるデザインシステム - チーム開発を加速させるデザインアプローチ！ #全文公開｜原田 佳樹 Harada Yoshiki
9/22(日)の技術書典7に@scrpgilと共著で「ゼロから始めるデザインシステム - チーム開発を加速させるデザインアプローチ！」という本を出展します。 それに合わせて、事前に本書の本文を公開することにしました。技術書典というイベントは年々盛り上がっていますが、デザイン畑の人にはまだまだ認知が高くないと思うので、より多くの人に届けられるようにnoteで公開することにしました。 「ゼロから始めるデザインシステム」ということで、まさにこれから新しくデザインシステムについてしっかり腰を添えて学んでいこうという人向けの本になります。言葉は聞いたことあるけど、実際に使ったことはない、もしくはこれから導入し始めようと考えている、また、いざ導入したものの、そこまでうまく機能していない、そんな人たちに向けた本になります。 本書は6章から構成されています。第1〜5章は理論編、第6章は実践編です。はじめに
Qiita開発チームがReactの開発で default export を使わなくなった理由 - Qiita
はじめに こんにちは、Qiita開発チームの@ohakutsuです。 現在、QiitaのフロントエンドはReact + Atomic Designで実装されています。 Atomic Designの特徴として、再利用可能な単位で分割されたコンポーネントをつくる必要があります。 しかし、分割されたコンポーネントの数は日々大きくなっていってしまい、コンポーネントの管理が難しくなってしまいます。 そこで、Qiita開発チームでは、default exportを使い実装をしていたのをやめ、named exportを使い実装を行うようになりました。 今回は、Qiita開発チームがなぜdefault exportを使わなくなったのかについてお話します。 なぜ default export を使わなくなったのか Qiita開発チームがdefault exportを使わなくなった理由は、default ex
自分にとって未知の技術、なんだか怖い。 いずれ身に付けなければならないとは思いつつも、とても難しいものに思えてなかなか踏み出せなかったです。しかし考え方を変えてみたらあっさりとその壁を乗り越えて次の段階へと自分をステップアップさせることができました。 考え方の面から誰かの助けになればと思い、初投稿します。 この記事について JavaScriptについてjQuery全盛期に学習した後、技術的に停滞していた自分がついにReactに触れて個人アプリを作るようにまでなったので、その体験を簡潔に書きます。同じような境遇の人にとって新しい一歩を踏み出せる助けになると嬉しいです。 想定している読者は「ある技術を過去に習得したがレガシーになりつつある人」や「新しい技術を学んだ人が羨ましいが尻込みしてしまっている人」など、新しいことに焦燥感を抱えている人です。 jQuery時代に取り残された焦燥感 私は社会
フロントエンドエンジニアのキャリア戦略
この記事は？ フロントエンド領域が複雑性を増してきており、経営効率化の戦略として部門としてフロント、バック、インフラで完全分業の体制を取る会社が増えてきました。それに伴い、完全未経験からフロントエンドエンジニアになる人たちも増えてきましたが、単にフロントの現場で開発をしているだけではエンジニアリング全般を含む広範な基礎は身につきにくく、能動的に全領域を勉強していく必要があります。その上で、フロントエンドに強みを持つエンジニアとしてバリューを発揮していくには、具体的にどのようなキャリア戦略があるのか？この記事では考えていきます。 著者は？ AWS環境でのフロントエンド開発中心に、エンジニア3年目。新卒2年間は自社サービス系の大企業でフロントエンドを担当。教育ではなく「崖に落とされて自力で登る」。裁量を得るには、先輩方を技術力で倒してロールをもぎ得る、といった競争主義が根付く徹底したハードボイ
かれこれ４、５年くらいAtomic designに触れてきて、こんなに使いづらいのになんで使ってるんんだっけ？ってなったので、脳死と妥協のAtomic designを辞めたいというモチベを高め、重い腰を上げて考えてみました。 前提 今回の趣旨はあくまでも共通コンポーネントにフォーカスしています。なのでpages(人によってはscreens,containersと命名しているかも)は考慮しません。 また、atomic designのデザインサイドの思想そのものについては言及しません。あくまでもディレクトリ構成の運用上の課題にフォーカスします。 ディレクトリを分ける意味とは そもそも、components/配下をフラットに並べずにグルーピングする目的は何でしょうか。 使いたいものが明確な場合はディレクトリ構成はあまり寄与しません。「あのButtonコンポーネントを使いたい」であれば、ディレクト
デザインツール「Figma」を5名のデザインチームに導入して半年経った振り返りとビジネスメリットについて｜Marino yokoi
はじめまして＆こんにちは！株式会社スペースマーケットデザイン部マネージャーの横井 @rinoside です。 2019年4月にSketchからFigmaへの移行を行い、運用をはじめて約半年が経ちました。会社組織で移行を検討している方に少しでも参考になればと思い、移行した経緯やそのメリット・デメリットなどの振り返りをまとめてみました。 主に金銭面などのビジネス的なメリットや移行時・運用時の振り返りをメインとしているため、基本的な使い方などの解説は省いています。 ある程度Figmaの知識がある方で、組織導入を検討している方・どうやって導入・説得するか悩んでる方に参考にしていただければ幸いです。 ※この記事はスペースマーケットアカウントのマガジンにまとめられます Figmaの前に使っていたツールFigmaの前はSketchを使っていました。といってもSketchも実はその年にPhotoshopか
2020年4月に、意匠権に関わる法律「意匠法」が改正されます。 今回の意匠法改正では、UIに関わる部分が大きく変更されます。いろいろ学ぶ機会がありインプットしていく中で、特にWebやスマホアプリに関わるデザイナーに意匠法を知る、または調べるキッカケになればと思ったのと少しの願いを込めて書きました。 何が変わるのか詳しくは特許庁のサイトで自ら確認して頂きたいが、UIに関わる点では、「画像」が保護対象に加わっています。画像という単語には違和感がありますが、この「画像」は、ソフトウェアやアプリ上のネットワークを通じて利用の都度提供される画像や物品以外の場所にに投影される画像が対象となります。WebやスマホアプリのUIからプロジェクターなどで投影されるUIも対象になったことになります。 また、「画像」には、操作画像と表示画像の2つが対象となります。操作画像は「操作の用に供される画像」で、検索や登録
こんにちは、CTOの鈴木です！前回のブログ執筆から気がつけばなんと2年経過！今回はスペースマーケットのメインであるWebサービスとアプリ部分の技術スタックについてまとめてみようと思います。 技術スタックについては定期的にまとめており、変遷については以下の記事に書いています。 2016年 スペースマーケットを支える開発環境とアーキテクチャ – 2016年秋編 2017年 スペースマーケットの技術スタック【2017年末版】 前回2017年からの差分としてわかりやすいように、新規追加は太字、撤退したものに関しては取り消し線をつけてみてます。それでは見ていきましょうー。 Web Frontend 言語 Javascript Typescript GraphQL 言語としては、Universal Javascriptを引き続き推奨し、プロダクト施策などに絡めてTypeScriptへの移行を進めていま
異業種からWeb開発者としての生き延び
現在、会社の技術横断組織のメンバー（主にフロントエンド担当）として技術支援（壁打ち的やレビュー）やエンジニアの評価制度・採用、組織を横断したエンジニアのコーチング・メンタリングなどエンジニア組織を良くするための課題解決にそこそこの裁量をもたせてもらって事業に携わらせてもらっています。 そんなことをしている私ですが、そもそも製薬業界（学位も薬学修士を修めています）から業界転職をしており、気がつけば6年ほど経っていたのと、最近は自分のキャリアについて聴かれることも増えたので一度、開発者目線で「どんなことを？どういうモチベーションで？こんなことになったんだっけ？」を少し振り返ってみようと思います。 ※1. 今の自分の視点から振り返りつつ、またカッコでたびたびツッコミを入れながら書いていきますので、文体の時系列に違和感があるかもしれませんがなるべく書いている時の自然な気持ちを大事にしたいのでご了承
この記事は第二のドワンゴ Advent Calendar 2019の10日目の記事です。 この記事の概要 Webフロント開発をしている際に、npmライブラリのマイグレーションって結構コストかかるので自動化したいよねって動機の元、そのためのツールとしてDependabotとかRenovateとかあるけど、どっち使うのが良さそうかなという検討をしました。 ただし、あくまでもnpmライブラリの更新という側面からの記事のため、他の言語やパッケージ管理システムからの側面についての検討はされていないことをご留意ください。 また、時間に追われて書きなぐった内容になっていて後で書き直すかもしれませんがご了承いただければと思います。 結論 先に結論だけ書いてしまうと、Github EnterpriseやArtifactoryなどのprivate npm registryを使っている自分たちの環境ではReno
こんにちはかみむらです。 プロダクト開発で、デザイナーとフロントエンドエンジニアの円滑なコミュニケーションは必要不可欠です。 しかし、実際に開発を進める上で、円滑化する仕組み作りは悩ましい問題です。 そこでStorybookの紹介です。 これはコンポーネントをカタログ化して、管理できるツールです。カタログ化することで、双方の行き違いを限りなく少なくできます。 そして、FigmaやAdobe XDと連携できるなど、開発者とデザイナーの両方に嬉しい拡張機能もあります。 今回はReactにStorybookの導入と、基本的な使い方から便利なアドオン(拡張)を紹介していきます。 Storybookの公式サイト https://storybook.js.org/ 前提create-react-appで作成したプロジェクトを想定しています。あらかじめプロジェクトを準備してください。 npx creat
2022年7月25日紙版発売 2022年7月22日電子版発売 手島拓也，吉田健人，高林佳稀 著 B5変形判／448ページ 定価3,498円（本体3,180円＋税10%） ISBN 978-4-297-12916-3 Gihyo Direct Amazon 楽天ブックス ヨドバシ.com 電子版 Gihyo Digital Publishing Amazon Kindle ブックライブ 楽天kobo honto 本書のサポートページサンプルファイルのダウンロードや正誤表など この本の概要 新しいフロントエンドの入門書決定版！ 本書はReact/Next.jsとTypeScriptを用いてWebアプリケーションを開発する入門書です。 WebアプリケーションフレームワークNext.jsはReactをベースに開発されています。高速さに裏付けされた高いUXと，開発しやすさを両立しているのが特徴です。
Structuring your Storybook
The more information you have, the harder it is to find what you're looking for. At first, your Storybook has a handful of components, so it's easy to keep track of things. But as the number of components grows, so does the organizational complexity. You end up with questions like “Where did we put that component again?” and “Is there a story for this state?” That leads to confusion, or worse, dup
プロダクトマネージャーの鈴木（ @kechol ）です。PMと言いつつフロントエンドを書いたりもしています。 前回の記事でバックエンドとフロントエンドの構成についてご紹介しましたが、選定の理由等まで深堀りできなかったため、今回はフロントエンドの構成についてもう少し詳しく、これまでの技術選定の振り返りも兼ねてご紹介したいと思います。 「Assured」の開発が始まったのは2020年8月頃なので、その頃からの変化を感じながらお読みいただければ幸いです。 前提 新規事業として過去の負債がないまっさらな状態から開発をスタートしている 開発するアプリケーションは Single Page Application の構成である 言語 / フレームワーク 言語は TypeScript、フレームワークは React を利用しています。 現代のフロントエンド開発において、型の恩恵を受けつつより安全に開発が可能
コンポーネント指向のススメ - Qiita
今回は複数人で構築する際にとても便利なコンポーネントについてお話できれば、と思います。 コンポーネントの概念を把握しておくとReactやvue.jsと通じるところもあるので、 知っていて損はない概念と思います！ コンポーネント指向とは まず、コンポーネント指向で大切な概念として、Atomic Designがあります。 ざっくりAtomic Designのお話をすると… 以下の添付画像のように PAGES（フロントのページ）は最小単位のATOMSから構成されている、ということです。 複数のATOMSから 一つの機能（例えばボタンアイコンなど）が構成されて、（MOLECULES） MOLECULESから、 いわゆるヘッダー、コンテンツ、フッター（ORGANISMS）が構成されて、 各ページを作り上げている、というイメージです。 そしてコンポーネント指向というのは、ATOMSやMOLECULES
はじめに 初めまして、レバレジーズ株式会社FEエンジニアの森山です。 今回は、React開発におけるコンポーネントの定義方法の１つの解をご紹介します。 結論 結論を簡潔に記載すると以下です。 ロジックをUIロジックと業務ロジックに切り分ける。 UIとUIロジックは密結合させて再利用性を高める。 UIと業務ロジックは疎結合にして再利用性を高める。 背景や具体的な例は後述します。 なぜこの記事を書いたのか 私が調べた限りではReactにおけるコンポーネントの定義方法におけるベストプラクティスが存在しないからです。 Reactの公式ドキュメントにおいてもコンポーネントの定義方法の方針は記載が無いかと思います。これはReactの思想として開発者がプロジェクトの規模や特性を考慮してある程度の自由度を持って開発できることを尊重したのではないかと考えています。 自由度が高いと開発方法の手段が増えます。手
Vue3のCompositionAPIがOptionsAPIよりも優れている理由をVue3エンジニアが解説！ | Ragate ブログ
import { defineComponent, ref } from 'vue' export default defineComponent({ setup() { // data const name = ref('John'); // methods const doIt = () => console.log(`Hello ${name.value}`); // mounted onMounted(() => { doIt(); }); return { name }; } }); 実装上での大きな変更点はこちらでも挙げられている通り、以下になります。 data, computed, method 等の Vue 機能は全て setup 関数に定義ライフサイクルのフックは setup 関数に定義リアクティブ(変更検知)したい値は全て ref で指定必須暗黙的に動作していた部分を全
PLAIDでエンジニアをしている @kei-tamiya です。 本記事は PLAID Advent Calendar 2019 の 20日目になります。 社外で個人的に開発しているプロジェクトでAtomic Designを採用しており、ある程度知見が溜まったので、1つの運用例としてご紹介したいと思います。 前提 どんなプロジェクト？ もともとVue.jsを用いて動いているアプリケーションを1からリファクタするプロジェクト 別リポジトリに、Nuxt.js, Typescript, Vue Apolloを使用して開発 フロントエンドエンジニア3〜4人、デザイナー1人 全員リモートで、週1で30〜60minぐらいミーティングできる GraphQLのAPIサーバーはおよそある状態 主に大きなページごと（Userに関するページなど）をエンジニア1人が担当して開発する もともと課題に感じていたこと・
こんにちは、Spinnersの元山@kudakurageです。 iOSには実はかなり多くのアクセシビリティ機能が用意されているのですがご存知でしょうか？ アプリの開発をしているエンジニアやデザイナならなんとなくは知っているという方もいるかと思います。 ですが基本的にはサービスやアプリなど事業・ビジネスの成功があってこそですから、アクセシビリティ対応というのは後回しになりがち（というかほぼやらないのでは？）ということが多いと思います。 今回はDynamic Typeによる文字サイズのアクセシビリティ対応についてデザイナー目線でどう考えていくのが良いかを書いてみようと思います。 ちなみに、技術的な部分についてはヴァンサン@vincentisambartの記事が参考になるのでご紹介しておきます。 Dynamic Type - クックパッド開発者ブログ INDEXDynamic Typeとは？文字
React でのデータの取り扱いを振り返ると Next.js の App Router は意外としっくりくるかもしれない
Next.js の App router が 13.4 から stable になりました。 GW 中の発表だったので休みにも関わらずついつい情報を追ってしまった方も多かったのではないでしょうか。僕も GW 中の発表後は App Router の情報収集に勤しんでおり、あれこれ考えていましたが、ドキュメントを読むにつれてなんとなくイメージがついてきました。 あれから2ヶ月ほど経ち、特に今までのデータ周りの取り扱い方を考えることで、割と App Router への進化は自然だったのではないかと考えるようになりました。 ここではあくまで僕の印象ベースではありますがデータ（fetch）の取り扱いについて振り返り、なぜ App Router への進化が自然に感じたのかをメモしておきます。 長いので端的にいうと 元々は上位コンポーネントでデータを取得し、下位コンポーネントに流す形だった SWRなどの登
学生エンジニアのためのチャットサービスをNext.js + TypeScript + AtomicDesign + Firebase9 + Dockerで作った（β） - Qiita
学生エンジニアのためのチャットサービスをNext.js + TypeScript + AtomicDesign + Firebase9 + Dockerで作った（β）DockerFirebaseOSSNext.jsAtomicDesign はじめに ※今回の開発は、株式会社OwN様からいただいた技術課題の一環で行ったものになります。 自己紹介 会社員やりつつ、趣味で個人開発を行っております。 フロントエンジニアのふぁると申します。 【Twitterリンク】 itamaster サービスについて サービス名 hacker-class-roomを略して、「はかくら」です！ リポジトリURL こちらになります。 https://github.com/FAL-coffee/hacker-class-room サービスの概要 「プログラミングの授業が始まるが、ついていけるのか不安......」 「情
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AtomicDesignを活用する「コンポーネント駆動開発」のススメ
FANTS ダッシュボードを支えるフロントエンド技術 - stmn tech blog
いい塩梅を目指したデザインエンジニアによるフロントエンド設計 - estie inside blog
Nuxt(vue) + TypeScriptをはじめるときに知っておきたかった10のこと
Storybookを使ってReactの開発をX倍早くしよう！！便利なアドオンの使い方を紹介
長年のデザイン課題を解決！スマホWeb版トップページ デザインシステム導入
開発速度向上のためのAnewsモバイルアプリのアーキテクチャ改善
デザインシステム運用の雑多な細かいはなし - freee Developers Hub
React Adminの感想 - valid,invalid
新技術は怖くない、jQuery時代からReact時代へ勇気を出して踏み出した - Qiita
Atomic designを辞めて利用目的別のディレクトリ構成に移行する
意匠法改正でデザイナーは何に気をつけたらいいのか｜たけてつ
スペースマーケットの技術スタック【2019年末版】 | スペースマーケットブログ
DependabotとRenovateってどっちがいいの？ - Qiita
Storybookを使ってReactの開発をX倍早くしよう！！便利なアドオンの使い方を紹介
TypeScriptとReact/Next.jsでつくる 実践Webアプリケーション開発
フロントエンドの技術選定の振り返り（2022年版） - Assured Tech Blog
Reactにおける責務（UI/ロジック）の切り分け - Leverages Tech Blog
課題解決手法としてのAtomic Designの解釈と実装 - Qiita
iOSのDynamic Typeによる文字サイズのアクセシビリティ対応 | Spinners Inc.