この記事はVue.js #3 Advent Calendar 2017の13日目の記事です Atomic Design自体の記事は色々ありますので、この記事ではAtomicDesignで設計したコンポーネントをVue.jsで実際に運用してみて感じた事をまとめてみました 実際にどんな感じになるか結論から言うと、AtomとMoleculeにStoreを持たせず。 OrganismsとTemplateあたりの粒度でStoreを利用するとIA的にも収まりがいい様に思えます。是非デザイナーにツッコミ入れましょう。 VueコンポーネントをAtomicDesignで実装するとだいたいこんな感じになります。Atomの役割色・タイポ・ボタン固定文言など 直接描画要素にデータをレンダリング描画要素のイベントを発行親要素からのデータ受け取り登場箇所がすごく多いのでステートレスを徹底するStoreみちゃダメ絶対！
はじめに こんにちは、デザイナーの浜田です。 マンガZEROのWebリニューアルを担当することになり、AtomicDesignに則ってSketchでデザイン制作をしました。 そして今回デザイナーがAtomicDesignで言うAtoms/Molecules/OrganismsあたりのHTML/CSSを書いてみようという話になり、Storybookが導入されることになりました。 本記事ではデザイナーがStorybook+AtomicDesignを使って開発に参加してみてどうだったか、どのように活用ができたか、について紹介したいと思います。 デザイナー＆エンジニア間でStorybookが有用に使えそうかどうかの参考になればと思います。 ※本記事では、Storybookの環境構築やコードについての解説などは行いません。 AtomicDesignについては以前に弊社デザイナーが記事にしているので紹
開発部で週1で新しいことをやってみる『Dev実験室』の取り組み AtomicDesignを知る デザインシステムを知る CSS設計どうするのが良い？ って話をする
2018年11月22日、DeNAにて、Frontend de KANPAI!が開催されました。今回のテーマは「2018年わたしはこれにお世話になりました！」。ライブラリ・フレームワーク、設計思想など、フロントエンドに関する3つのテーマセッションとLTが行われました。プレゼンテーション「ワイヤーからReactでAtomicDesignを実装するまで」に登壇したのは、atsss氏。新規プロダクトの開発におけるReactの活用事例について語りました。 ワイヤーからReactでAtomicDesignを実装するまで atsss氏：よろしくお願いします。 （会場拍手） すいません、僕あまりお世話になっていないんですけど、これからお世話になるかもしれないなと思って、LTしに来ました。 伊藤敦之と申します。株式会社ローカルワークスでいま新卒2年目です。Railsエンジニアとして働いています。 「お世話に
AtomicdesignとSymbol機能でUIデザイン制作効率化！Sketchファイル1つで完結するデザイン制作と伝達のツボ | Nagisaのすゝめ
2017年9月27日 AtomicdesignとSymbol機能でUIデザイン制作効率化！Sketchファイル1つで完結するデザイン制作と伝達のツボ はじめに こんにちわ、デザイナーの川畑です。 現在Nagisaではゲームを除いたwebやアプリのUI開発ではデザイナーがSketchファイルを作りエンジニアが参照して実装します。 (ありがたいことにエンジニアさんがSketchを触ってくださっています) そんなSketchを中心にデザインが伝達されるのであれば、とことんファイル1つを見やすく、作りやすくしてしまおう！ ということで今回の記事では、 全体の統一感を持ちつつデザイン制作 実装するエンジニア、共同制作するデザイナーに設計意図を伝達 を効率よくできるファイル制作と管理方法を紹介したいと思います。 上記を目指すにあたって、 Atomicdesignの デザインパーツを合体させて、繰り返し
開発環境 Nuxt.js v2 Express v4 bootstrap v4 (bootstrap-vue) Atomic Designとは Atomic Design はデザインシステムを作るための１つの手段 ざっくり言うと、UI コンポーネントの粒度をカテゴリーに明確に分ける手法 Atomic Designの詳細については割愛しますので、下記サイトをご参照ください。 Nuxt.jsとAtomic Designの開発が最高なポイント Nuxt.jsの機能： routerなど面倒な設定を特に意識しないで実装できとても楽! 生産性向上 & 一貫性： コンポーネントの独立性が高く、さらにVuexを使うとデータの操作とビューの表示が依存性低く、仕様変更に柔軟に対応できる デザイン変更が発生する際、一箇所を修正するだけで、全てが適用される(これが一番好きなポイント) もちろん、それぞれのページの
デザインの保守性を上げるにはどうしたら良い？AtomicDesignでUIデザインをしてみた - Qiita
TL;DR デザインの保守性をあげるためにsketchでAtomicDesignを導入してみました。 パーツ数が少なくなり、構成もシンプルになったのでだいぶ保守性が上がったのですが、 sketchファイルが重くて台無しなのでどなたか軽くする方法あったら教えてください。 はじめに 株式会社マナボでSketchを使って『manabo』という中高生向け質問アプリのデザインリニューアルを進めているのですが、 Sketchは画面やSymbol(パーツ)が増えてくると管理が非常に大変になりますよね。 ちょっとした色やマージンの修正に対しても複数の画面やSymbolを修正しなければならず、 余計な作業工数や修正漏れが発生してしまいます。 そんな状況を打開すべく、SketchにAtomicDesignを導入して保守性の高いデザイン設計にトライしてみたので書きます。 AtomicDesignとは Atomi
AtomicDesign 境界線のひき方
AtomicDesign はコンポーネント粒度の指標として共有し易く、多くのプロジェクトで採用されています。しかしながら、その設計概念が先立ってしまい、いくらかの課題を抱えている場合があります。 1.影響範囲が特定しにくい 2.依存関係が特定しにくい 3.汎用性が低くなりがち 4.汎用性の高低が判別できない 多くの場合「粒度」だけを基準にしてしまい、横断的コンテキストに「早期区分」 してしまっていることが直接的原因です。 「関心範囲の広さ」区分 アプリケーションを構成するモジュールは「関心範囲の広さ」で区分を行うことが鉄則です。次の２つのhelper.tsを見てください。全く同じ関数が定義されていたとしても、どこで利用される想定のものなのか、すぐに判別できますね。utilsは、プロジェクト内で横断的に再利用される可能性が高い（関心範囲が広い）ものが集約されます。 AtomicDesign
こんにちは！Magic Momentのフロントエンドエンジニアの石田です！ Magic MomentのフロントエンドではReactを採用しており、 コンポーネント設計にはAtomicDesignを採用しています。 みなさんはコンポーネントを使い回せていますか？ 今回は僕がMagic Momentで実施しているコンポーネントを使い回すための開発手法をご紹介します。 コンポーネント駆動開発 コンポーネント駆動開発とは、画面を作る際に小さなコンポーネントから作成していき、小さなコンポーネントを組み合わせて画面を作る「ボトムアップ」の開発プロセスになります。 この手法を使用すると、小さなコンポーネントとして再利用できる部品を設計できます。そのため、コードの重複を減らし、保守性を向上させることができます。また、コンポーネントを組み合わせて画面を作成するため、開発の効率性も向上します。 Magic M
保守性の高い設計のために 今回業務上で、非常に保守性の高いUIをつくる必要が出てきました。 大きなシステムリプレイスをしなくても十分に拡張・改修が可能であること。（もちろん小さな改善を日々行えることが前提） こういった設計をするときは、横槍が入っても逃げ道があることが大事だと考えています。 挿げ替えや切り離しなど、コンポーネント設計はここに大きなメリットがあります。 アーキテクチャ選定 まずJavaScriptというベース知識さえあれば、あとは一般的なプログラミング手法の応用で拡張がしやすく、導入実績も豊富なReactをプロジェクトにおいて採用。 実際に保守ができるかどうかを決定付けるのはプロダクトのコードだけではなく、対応する人間が順応できるかも重要になります。 幸いにもES6以降のJavaScriptであれば他言語の経験者も入りやすそうですし、jQueryから入っているデザイナーにもあ
[レポート] 第２回AtomicDesignについて考える会に参加してきました #ThinkAtomicDesign | DevelopersIO
はじめに オハコンバンニチハ モバイルアプリサービス部 イノベーショングループの清田隆志です。 本当に久しぶりにブログ執筆するので、ガクブルしてますがどうぞヨロシクオネガイします。 2019/02/08(金)に 株式会社エウレカ様で 第２回AtomicDesignについて考える会 が開催されました。 そのイベントレポートを書いてみたいと思います。 なんとか始められたぜ? #ThinkAtomicDesign pic.twitter.com/Fl9DbPfETJ — こばしゅん (@ksyunnnn) 2019年2月8日 余談 今回初エウレカさんのオフィスにお邪魔したのですが洗練&オシャレですごく魅力的なオフィスでテンションあがりましたｗ AtomicDesignについて考える会について オーガナイザーとしてフリーランスのフロントエンドエンジニアのこばしゅん(@ksyunnnn)さんのもと、
概要 デザイン界隈でよく聞くAtomicDesignですが、 普段エンジニアの僕はReactのコンポーネント設計時にAtomicDesignに出会いました。 ReactやCSS(SCSS)側でも、AtomiDesignを採用しているのですが、 Sketchでも徐々にAtomicDesignを採用しています。 AtomicDesignは賛否両論あると思いますが、 賛成派の意見でAtomicDesignでのシンボル切り分けについて書きます。 AtomicDesignとは AtomicDesignとは、様々なパーツを合体させて、繰り返し可能なエレメントやテンプレートが作成できるシステムを構築することをいいます。 AtomicDesignのメリット Sketch/CSS/React全てで言える事だと思いますが、以下の様なメリットがあります。 保守性の高いUIを作る事ができる。 デザイン仕様の変更に
受注管理機能を支える技術 〜 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 今回は、これらについてどういった対応をしたのかと、リリース後にふりかえってみてそれぞ
2016年は「AtomicDesign」を取り入れた「APB CSS（Atomic Parts Base CSS）」で迷わず、簡単、拡張性持った CSS設計を！
というわけで、 明けまして、おめでとうございます！ なんか、慌ただしく2016年を迎えてしまった次第です。。 今年はちょっとゆっくりしたいなと思いつつ、 2016年、今年もよろしくお願いいたします。mm さてはて、早速本題の方ですが、webデザイン界隈で 最近、「マテリアル・デザイン」だの「アトミック・デザイン」など以前にも 増して色々と聞くようになってきたのを肌で感じる今日この頃でして、 デザイナーの方もそれらの思考を持ってデザインされるかと思います。 そもそも「アトミック・デザイン」ってなんぞやって方はこちらを、 Atomic Design Atomic Design http://bradfrost.com/blog/post/atomic-web-design/ Atomic Designの特徴として、こちらの図であるように、 UIパーツを「ATOMS」（原子）と捉え、原子と原子の
学生エンジニアのためのチャットサービスを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 サービスの概要 「プログラミングの授業が始まるが、ついていけるのか不安......」 「情
AtomicDesign の仕分けをテストで判定する
AtomicDesign には「Atoms か Molecules か？、Molecules か Organisms か？」の判定が悩ましい…という課題があります。これは、フロントエンド・デザイナー間ではもちろん、デザイナー同士でも解釈差異があるようです。明確な判定軸がなければ、いずれブレが生じ、規律のないデザインシステムになりかねません。 この状況に対し「アクセシビリティを軸にする」という発想に至り、どのように仕分けるかを先日の投稿で紹介しました。このアイディアはタイトルのとおり「テスト」で機械的に判定可能です。 AtomicDesign カスタムマッチャー関数 「AtomicDesign の仕分けをテストで判定する」ために、独自のカスタムマッチャー関数を設けます。普段利用している'@testing-library/jest-dom'もカスタムマッチャーのライブラリですが、このカスタムマ
今日はAtomicDesignについてです。 概要 弊社のとあるチームでAtomicDesignの導入を試みていたのですがあまり上手くいっていないようでした。そこでなぜ上手く行っていなかったのか考えて整理したので、その内容をまとめました。 AtomicDesignとは Design Language System (DLS) を作る上でのパターンの一つです。詳しくは下記を参照してください。 atomic design 大まかに説明するとデザインパーツの粒度を定義し、それらの組み合わせでデザインパーツを構成していこうというものです。 粒度は下記のように定義されています。 Organisms > Molecules > Atoms フロントエンド界隈には大分普及してきたようで最近では活用事例を耳にする機会も多くなりました。 AtomicDesignのメリット まずはAtomicDesignのメ
最初に この記事はVue.jsが最近のマイブームな若造フロントエンドエンジニアが、 コンポーネントの再利用性とイベントバケツリレーの煩雑さの間でもがき苦しみ AtomicDesignなるものに行き当たった結果、 これをVue.jsで実現する方法を考え書き綴ったものです。 Vue.jsやVueコンポーネント、Vuex / Vue Routerとはなんぞやという部分については 適当に触れる程度にわかってる前提で話を進めます。 そもそもQiita初投稿になるので文章の読みにくさなどはこっそり指摘をください。 経緯 個人開発のアプリケーションで、SPAを作ってみようと思い至る ↓ Vuex / Vue Routerを考えなしに導入 ↓ 再利用性のなさに絶望 ↓ ページごとに必要なデータを揃えるだけの親コンポーネント作る ↓ イベントバケツリレーに辟易 だいたいこんな感じです。 「イベントバケツリレ
対象者 ・CSS設計はむずかしいので「シンプルに」かつ「メンテナンス・拡張可能」なCSS設計をしたい！方 ・エンジニアらしく構造的なCSS設計をしたい！方 ・個人で最初はモックアップ程度に開発して ゆくゆくはチームで開発してもっと大きくしていきたい！方 この記事を読んでできること ・AtomicDesignとは何か理解できる ・AtomicDesignを取り入れたCSS設計 APB CSSについて理解ができる この記事の概略 ■AtomicDesignとは、デザイン設計方法の１つ ・ボタンやラベルなどWebページを構成する要素を５つのステージで構成・管理する Atoms(アトム) - 原子：それ以上分解できない要素（ボタン） Molecules(モルキュール) - 分子：原子同士を組み合わせた要素（フォームとボタンがついたもの） Organisms(オルガニズム) - 有機体：分子同士を組
【MUI】Next.js×MUI×AtomicDesignにおけるオリジナルテーマの適応とコンポーネント設計について
タイトルがどっかの論文みたいになってしまいましたが、要はこういうことです。 「MUIの機能は継承しつつ、スタイルだけオリジナルに定義して設計はAtomicDesignにしたい！」 というときの個人的なベスト？プラクティスです（もっといい方法があれば教えてください...）。 この実装は需要があるだろうと思いつつ、調べてもあまり記事を見かけなくて困っていました。 なので実現方法と設計・運用ルールを自分なりに考えた結果をまとめてみます。 （Next.js、MUI、Atomic Designなど登場人物の紹介は省きます。 すでにすばらしい記事がたくさんあるのでわからない方はぜひ調べてみてください） ⛰ 目的 MUIの機能を引き継ぎつつスタイルのみを上書きする 都度スタイルを上書きするのではなく、オリジナルテーマを定義して運用する デザイン設計はAtomicDesignを採用する 📦 前提 Nex
Vue.js / Vuex / AtomicDesign / fukuokajs
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.js からみた AtomicDesign
Storybook+AtomicDesignでデザイナーが開発に参加した話 | Nagisaのすゝめ
AtomicDesignとデザインシステム、CSS設計について
ワイヤーからReactでAtomicDesignを実装するまで
AtomicDesignをVue.js(Nuxt.js）に使うと最高な開発を体験できた - Qiita
AtomicDesignを活用する「コンポーネント駆動開発」のススメ
React＋AtomicDesign実践編 - Qiita
SketchのシンボルをAtomicDesignで設計する。 - Qiita
AtomicDesignが解決してくれないこと - embryo
Vue.jsとAtomicDesign - Qiita
個人でのWeb開発にもオススメなAtomicDesignとAPB CSSの紹介 - Qiita
Vue.js+AtomicDesign