タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
Atomic Designをやめてディレクトリ構造を見直した話｜食べログ フロントエンドエンジニアブログ
こんにちは。フロントエンドチームの金野と申します。 食べログでは現在、React+TypeScriptでフロントエンドのリプレースを進めています。 以前の記事で、食べログではAtomic Designをどのように取り入れているかの紹介をしました。 しかし、最近のリプレース作業では、Atomic Designとは異なるディレクトリ構造を採用しています。 今回の記事では、「なぜAtomic Designをやめたのか」という理由と、「どのようなディレクトリ構造にしたのか」を紹介します。 Atomic Designを導入したねらいと導入した結果 上記の記事で言及した通り、当初Atomic Designを導入したねらいは以下になります。 1. コンポーネントの責務がより明確になる 2. 見た目の粒度だけでなく、ロジックの責務も明確にできる 3. 「ドメインが入るか／入らないか」。「抽象的か／そうでな
【Atomic Designに懐疑的なあなたへ】改めて考えたい React / Next.js のデザインパターン
フロントエンド開発は一般的に複雑性との戦いです。放ったらかしにしておくとますます複雑になり、変更するのが難しくなります。これまでにも、このような複雑さをどうにかして制御しようとして、Atomic Designをはじめとした様々な設計手法（デザインパターン）が考えられてきました。 しかし、React / Next.js を使ってチーム開発を行う際に、現状のデザインパターンでの運用では「どうもうまくいかないな」と思う場面に多々遭遇しました。そのような経験を踏まえて、「コンポーネントをどのように設計するか」「どのようにディレクトリを分けるか」を徹底的に考え、新しいデザインパターン「Tree Design」にまとめました。 Tree Design はまだまだ仮説段階です。今後弊社チームで運用していく中でブラッシュアップする予定です。しかし、他のフロントエンド開発チームがデザインパターンを再考する際
はじめに この記事は、業務でフロントエンドのディレクトリ設計思想を変更した際の作業をまとめた記事です📕 それなりの規模のプロジェクトでの移行作業のため、通期のリリースサイクルに影響が出にくいようにリファクタリングを進めてきました。そこでの進め方や感想も含めてお伝えできればと思います。 前提 6年ほど運用しているReact Nativeのプロジェクトでの移行作業のお話です。 従来のディレクトリ設計思想はAtomic Designを採用していました。しかし、organismsのコンポーネントが300個近くにも及び、プロジェクトの規模が大きくなるにつれて様々な課題が浮き彫りになりました。これを機に設計思想の移行を決めました。 Layer型のAtomic DesignからFeature型のディレクトリ構造に移行していこうと思います😌 参考: ソフトウェアアーキテクチャの基礎 なぜ移行したか な
Atomic Design、どうですか？ フロントエンドをやってる系の人たちはぶっちゃけしっくりきてないとおもいます。 僕を含めて、当初より「これ微妙やね（まぁ流行ってるし適当ではあるから使っておくか）」という見解の人はチラホラみかけました。 それもそのはずです。 朧げな記憶ではありますが、Atomic Designはそもそもプログラマーのために作られたメソッド……ではありません。 デザイナーの方が考案した、デザインシステム構築のためのフレームワークです（そうだよね？）。 Sketchでデザインコンポーネントを作成する際に（たしかSketchだったはず。懐かしいですね）、Sketch上のコンポーネントの再利用性を高めて使いやすくするためのものだったのです（だったはずです）。 それが「増えまくったReactコンポーネントをいい感じにフォルダわけしてえなあ」という需要と噛み合って流行ったと認識
Atomic Designの分類を見直す。3階層から始める、UI変更に強いコンポーネント設計 | レバテックラボ（レバテックLAB）
Atomic Designの分類を見直す。3階層から始める、UI変更に強いコンポーネント設計 2025年7月10日 執筆 中川 幸哉 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。新潟県上越市出身。会津大学コンピュータ理工学部卒業後、現在は新潟市に在住。ReactやAndroidを軸に、モバイルアプリ開発やWebサイト制作、Webメディア編集部の業務改善や、プログラミング技術記事の執筆等に携わっている。著書に「たった1日で基本が身に付く! Androidアプリ開発超入門」（技術評論社）、「基礎から学ぶ React Native入門」（翔泳社）他。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MV
2022.07.20 開発×テスト LT会 - vol.3 #devtestlt
かれこれ４、５年くらいAtomic designに触れてきて、こんなに使いづらいのになんで使ってるんんだっけ？ってなったので、脳死と妥協のAtomic designを辞めたいというモチベを高め、重い腰を上げて考えてみました。 前提 今回の趣旨はあくまでも共通コンポーネントにフォーカスしています。なのでpages(人によってはscreens,containersと命名しているかも)は考慮しません。 また、atomic designのデザインサイドの思想そのものについては言及しません。あくまでもディレクトリ構成の運用上の課題にフォーカスします。 ディレクトリを分ける意味とは そもそも、components/配下をフラットに並べずにグルーピングする目的は何でしょうか。 使いたいものが明確な場合はディレクトリ構成はあまり寄与しません。「あのButtonコンポーネントを使いたい」であれば、ディレクト
タイトルは記事の内容を読み込ませ、chatGPTに作成してもらいました。 強いタイトルですが、Reactの初学者向けにAtomic Designとは何なのか、それに則ってコンポーネントを分割するにはどのようにするのかを解説しています。 後半では実際にAtomic DesignでTodoアプリを作成していますので試してみてください。 （有識者はアドバイスなどがありましたらどうぞよろしくお願いします） Atomic Designを理解する React開発者にとってのAtomic Design Atomic Designとは Atomic Designの5つのレベル Atomic Designのメリットとデメリット React/TypeScriptで作るTodoアプリ React開発者にとってのAtomic Design Reactの開発者がAtomic Designを使う理由は、コンポーネント
Web サイトを構築するにあたって、よく参照されるコンポーネントの分類手法として、Atomic Design と Presetational and Container Components があります。 Atomic Design … UI の粒度と具体性によって 5 レベルに分類するPresentational and Container Components … 「表示」と「振る舞い」の役割で分類するここでは、それぞれに関して概要をざっと眺めた上で、Next.js プロジェクトにどんな形で適用していけばいいかを考えてみます。 Atomic Design とはWeb デザインにおける UI コンポーネントの分割粒度の考え方として、Brad Frost 氏の Atomic Design があります。 Atomic Design - Brad Frost 氏のブログ記事Atomic Des
がんばらない
フロントエンドのテックリードのみゅーとん(@_mew_ton)です。 弊社では新しいプロジェクトを立ち上げの際に、Nuxt3を採用することにしました。 また、従来までのプロジェクトの反省点として、 Atomic Design を考慮して実装することにしました。 ただ、Atomic Design について調査していくと、Atomic Design の考え方をそのままディレクトリに落とし込んでいくのはどうやら悪手のようで、Google サジェストからも、いくつか失敗のケースが散見されました。 そこで、Nuxt3 のディレクトリ構成にマッチするような Atomic Design の構成を考えてみたので紹介します。 Atomic Design とは Atomic Design とは、パーツ単位でUIデザインを設計する手法です。 Atomic Design 自体は 5年以上前から提唱されている設計方
Atomic Designの概念
Atomic Design(アトミックデザイン)とは アトミックデザインとは、フロントエンドライブラリーであるAngular、Vue、Reactでコンポーネント単位で開発する際に、最も小さい単位からコンポーネントを設定し、コードの再利用を最大化する方法論です。 Atomic Designは原子（Atoms）、分子（Molecules）、有機体（Organisms）、テンプレート（Templates）、ページ（Pages）に分けられ、効果的なインターフェースシステムを作ります。 📎Atoms(原子) 最も小さいコンポーネントです。 様々なstate、つまり状態、色、フォント、アニメーションなどの抽象的な要素を含むことができます。 代表的なコンポーネントには、ボタン（Button）、テキスト（Text）、アイコン（Icon）などがあります。 📎Molecules(分子) 2つ以上の原子（A
Brad Frostが提唱したAtomic Designはすでに多くの場面で採用されていますが、もともとがUIデザイン手法であるため、フロントエンドアプリケーション開発におけるコンポーネントの分類に直接的に適用できないものも出てきます。 そこで、最近採用している"Applicational Atomic Design"について具体的なコードとともに紹介していきます。 Reactを前提として説明していきますが、VueにはもちろんAngularを用いたプロジェクトに対しても、同様の手法を適用することができるでしょう。 紹介する方法論をnext.jsに適用したアプリケーションのソースコードは、GitHubに公開しています。 "Applicational Atomic Design"とは? Atomic Designに基づきつつ、アプリケーションの振る舞いやドメインモデルとの関わりを視点に加え、フ
#デザインシステム の類も作ったことがある（今もやっている）のだが、なぜ Atomic Design に良さを感じないのかを思いつき次第まとめていく。 （余談だが自分の務めている会社はデザイナにも Atomic Design を好む人がいないのでこの辺で揉めたことがない。むしろ「やっぱ無理でしょ」「だよねー」ぐらいに意見があっていると思っている）
はじめにDROBE では React のコンポーネント設計に Atomic Design を取り入れていますが、特にデザインにおける設計と React における実装という目的の違いから、実装していると微妙に概念が取り入れ辛く、しばしば方針に迷う事があります この記事では現在 DROBE でどのように Atomic Design と実装の整合性に折り合いをつけているのかを解説します Atomic Design (アトミックデザイン) とはAtomic Design はアメリカの Web デザイナーである Brad Frost 氏が提唱したデザインシステムの設計方法です Atomic Design by Brad FrostWe're tasked with making interfaces for more users in more contexts using more browser
Atomic Design × Typescript × React × Muiの実践的なフロントエンド開発
こんにちは！BrunchMadeの@はせがわです。 この度、株式会社BrunchMadeに創業メンバーとしてジョインしました🙌 今回はそのBrunchMadeのホームページ制作にあたって、学んできたことを共有していきます。 設計：Atomic Design 言語：Typescript フレームワーク：Next.js UIライブラリ：Mui（Material-UI） はじめに フロントエンド開発している方はほとんど聞いたことあるであろう「Atomic Design」。 そもそもAtomic Designはデザインシステムを作成するための方法論ということもあり、UI設計の答えではありません。そのため、実際のフロントエンド開発に取り入れようとすると意外と手こずることが多いのではないのでしょうか？ また、記事・サイトなどを検索しても説明は載っているが、具体的なコードが少ない。Organismsの
①デザインの効率が格段に上がる Atomic Design では画面要素を細かくコンポーネント化しています。ですので、一度作成したコンポーネントを配置するだけで、画面に表示することができました。特に効率が格段に上がった場面として、画面開発中にUIが追加された際に、すでに作成済みのコンポーネントを再利用することで、新たなパーツをすぐに作成※することができたという場面がありました。 ※すでに作成済のボタンコンポーネントとテキストコンポーネントを組み合わせて、ボタンテキストコンポーネントをデザインできたこと ②ページデザインに統一感が生まれる 今回複数人で複数の画面開発を行いました。全員が同じ画面を実装したわけではないため、画面によって必要なコンポーネントは異なります。しかし、画面の実装方法が定まっていたため、誰が実装しても画面の統一感を保つことができました。実際に、手順に沿って開発するだけで初
Atomic Design for a UI/UX design and programming workflow (アトミックデザインによるUI/UXデザインとプログラミングのワークフロー)｜F Lab｜Fixel株式会社
デザイナーはアプリケーション全体をデザインしてから細かい部分を調整して行きます。先ずは生命体を作り、それを原子までに分割して調整しているような作業です。一方、プログラマーはデザインされた画面から再利用できる部品を作り、それらを組み合わせることで動くアプリケーションを構築して行きます。原子を組み合わせて、生命体を作っていくような作業です。全体から細かい部分に精度を上げながら設計して行き、また細かい部分から作り始め、徐々に全体に組み合わせて行く、一連の流れのようなプロセスと捉えることができます。 本記事では上記のプロセスの例として、デザイナーがワイヤーフレームを作り、画面の各要素を分割します。次にプログラマーは各要素を部品として作り始めるます。見た目を左右するビジュアルデザインに対してはスタイルを簡単に変更できるようにして、デザインの変更を適用しやすくなります。このようなプロセスを実現するには
こんにちは！ クレイのasachunです。 ここ1年ほど DocBase はフロントエンドのフルリプレイスを行っており、てんやわんやの日々を送っておりました。 フロントエンドの改修にあたり、Figma + Atomic Design でUIコンポーネント集を制作しました。今回はその作業の経緯、どのように進めていったか、よかったことや大変だったことを書いていきたいと思います！ この記事の前提として必要そうなので、私のスキルはこちら↓ HTML(Haml, Slim), CSS(Sass) でのマークアップ経験7年ほど Photoshop, Illustrator, XD, Figma は一通り使える メインのデザイナーとして1からデザインカンプを作った経験はなし ここ数年は DocBase のUIデザインをちょこちょこやっています Webとは関係ないけど似顔絵が得意です ガッツリ実装はできな
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フロントエンドのディレクトリ設計を移行した話 | Atomic Design → Feature
いいかげんAtomic Designを捨てて別の統一解が欲しい - タオルケット体操
Atomic Design とテストの○○な話
Atomic designを辞めて利用目的別のディレクトリ構成に移行する
【TypeScriptで学ぶReact入門】Atomic Design実践ガイド📙
Next.js アプリのディレクトリ構成を考える（Atomic Design と Presentational and Container Components）
あきらめる Atomic Design
Nuxt3 向けに Atomic Design を拡張してみた - hacomono TECH BLOG
"Applicational Atomic Design"について
Atomic Design に対する感情 - fsubal
React の Component 設計と Atomic Design
Atomic Designを理解する② - Qiita
Figma + Atomic Design でUIコンポーネント集を作りました
www.travelhongkongmacau.com
www.three-wise-monkeys.com
www.uniqstyle.co.jp
www.yomiuri.co.jp
rtbsquare.work
share.google