Atomic Design ベースの Vue コンポーネント設計 - Qiita
以上が Atomic Design で提唱されている5段階です。 よく見ると Atoms, Molecules, Templates はレイアウトとしてのまとまり、 Organisms と Pages はコンテンツベースでのまとまりになっています。 「レイアウトとしてのまとまり」は、中に入る情報に関わらず、見た目・機能単位でのまとまり、 「コンテンツベースでのまとまり」はコンテンツ（データ）単位でのまとまり という分け方になります。 「レイアウトに関心が高い」「コンテンツに関心が高い」それぞれのまとまり方を コンポーネント設計に当てはめると、次のように言い換えられると思います。 ・Atoms, Molecules, Templates はユーザーインターフェースや、 親コンポーネントから渡されたデータをどう表示するかに専念する。 ・Organisms と Pages はコンテンツに関心が高
Atomic Designとは 〜Atomic Designを使ったコンポーネント指向のUI開発：序〜 - UGAP Engineer's Blog
はじめに UI（画面）コンポーネントを切り出したいときにどういう粒度で切り出したらいいか迷う時があります。 適切な粒度で切り出しておかないと、位置を組み替えたりデザインを修正したい場合に、使い勝手が悪くて作り直しになってしまうからです。 メンテナブルなUIコンポーネントに切り出すにはどうしたらよいでしょうか。 いろいろ調べた末、Atomic Design（アトミックデザイン）というアイデアに行き着きました。 このAtomic Designを使ったコンポーネント指向のUI開発を（序）（破）（Q）のシリーズを使って紹介したいと思います。 （序）では、Atomic Designがどのようなものかをご紹介します。 （破）では、Atomic Designを導入した際にうまくいかなかった点と工夫した点をご紹介します。 （Q）では、具体的な開発例をご紹介します。 このシリーズが同様に困っている現場の参考
Atomic Designを理解する② - Qiita
①デザインの効率が格段に上がる Atomic Design では画面要素を細かくコンポーネント化しています。ですので、一度作成したコンポーネントを配置するだけで、画面に表示することができました。特に効率が格段に上がった場面として、画面開発中にUIが追加された際に、すでに作成済みのコンポーネントを再利用することで、新たなパーツをすぐに作成※することができたという場面がありました。 ※すでに作成済のボタンコンポーネントとテキストコンポーネントを組み合わせて、ボタンテキストコンポーネントをデザインできたこと ②ページデザインに統一感が生まれる 今回複数人で複数の画面開発を行いました。全員が同じ画面を実装したわけではないため、画面によって必要なコンポーネントは異なります。しかし、画面の実装方法が定まっていたため、誰が実装しても画面の統一感を保つことができました。実際に、手順に沿って開発するだけで初
Atomic Designを理解する① - Qiita
はじめに みなさんはAtomic Designと聞いてすぐにイメージできますか？ 私は最近仕事でAtomic Designに触れるようになり、なんとなーくイメージは掴んできていますが、分かりやすく他者へ説明できるかなと少し不安でした。そこで今回はAtomic Designについて簡単に言語化してまとめてみます。 今回の記事は二本立てとなっております。初心者でも理解できるような内容ですので、ぜひ読んでみてください！ Atomic Designとは Atomic Designとは、webページや画面をパーツ・コンポーネント1単位で定義し、それらを組み立てて作るUIデザイン手法の一つです。画面構成要素を段階的に分解・部品化することで、画面部品の統⼀性や再利用性を高める手法となっています。 これだけだとよくわからないと思うので、もう少し簡単に説明しますと... UIコンポーネントを粒度に応じたカテ
チームリーディング フロントエンドコンポーネントの指針 音ズレ修正Ver.【プログラミング】
ライブ放送のマイクが音ズレしていたので対処しました。 元動画: https://www.youtube.com/watch?v=sZA92l4XQsA 過去講演「チームリーディング フロントエンドコンポーネントの指針」の再演です。 チームにコンポーネント指向をもたらすためにアトミックデザインを活用した話です。 講演の概要は下記URLのイベントページをご覧ください。 # URL イベントページ: https://nrs-seminar.connpass.com/even... # チャンネル登録 http://www.youtube.com/channel/UCz4h9... # Twitter https://twitter.com/nrslib
Vue.js × Atomic Design - コンポーネント分割の指針 / Vue.js and Atomic Design - Guideline for components division
Vue.js 講演用資料です。 # 概要 コンポーネントをどのような粒度で分割し、どのように実装するべきかというのは難しいテーマです。 一概に正解があるとも言い切れないテーマですが、この指針を疎かにすることはチームを混乱に陥れることと同義です。 それが SPA 未経験のチームであればなおさら…
[なるセミ]入門！アトミックデザインを開催しました - nrslib
皆さんの職種はなんでしょうか。 フロントエンド、バックエンド、インフラだけに収まらず、エンジニアの職種は多岐にわたります。 もちろんどれかの職種に収まらず兼務したり、なんでもこなすフルスタックエンジニアである方もいるでしょう。 さて、私の場合はどうかというと、普段ドメイン駆動設計のお話などをしている関係でバックエンドのエンジニアと認識されがちですが、実はフロントエンドもやっていたりします。 直近では Vue.js や Angular.js を使った SPA のサイトの開発や設計をしていますし、Web に携わる前はゲームのクライアントプログラマでした。 じゃあフロントエンドなの？ と聞かれるとそういうわけでもなく、そもそも自身の領域を定めるつもりがないので「ただのプログラマだよ」と答える日々だったりします。 バックエンドメインの人と思われていても特段問題はないのですが、ここらで一丁フロントエ
![[なるセミ]入門！アトミックデザインを開催しました - nrslib](https://cdn-ak-scissors.b.st-hatena.com/image/square/447a31857ed68f043f9eede13c746d036fd13a2f/height=288;version=1;width=512/https%3A%2F%2Fnrslib.com%2Fwp-content%2Fuploads%2F2019%2F03%2Fcropped-nrslib.png)
ヒックの法則で設計するVue3のアーキテクチャ構成 - Qiita
Vue.js (Vue3) のアーキテクチャ構成における課題 Vue.jsでアプリを構築する際における1つの課題として、「設計を入念に行わない限り、中規模以上のプログラムが書きにくくなってくる」といったものがあります。VueはRailsなどのフレームワークと比べて、エンジニアが自由にディレクトリ配置やクラス設計などのアーキテクチャを決定することができるといった特徴がありますが、その反面、先を見据えた設計ができていないと、目的のソースコードにアクセスするのに時間がかかったり、不具合発生時に原因が追いにくくなったり、最悪、単純な機能の追加すら何時間もかかるようになったりといった問題に遭遇することがあります。 そこでこの記事では、「ヒックの法則」を念頭に、Vue.jsのアーキテクチャ構成をどのようにするのが効率的なのかを取り上げます。 この記事の対象者 この記事は、中規模以上のプロジェクトにおい
[PHP Conference 2019]思想と理想の果てに――クリーンアーキテクチャのWEBフレームワークを作ろう
[PHP Conference 2019]思想と理想の果てに――クリーンアーキテクチャのWEBフレームワークを作ろう 2019.12.01 Programming スライド 動画 みなさんの反応 https://togetter.com/li/1437472 [PHP Conference Japan 2019]「思想と理想の果てに――クリーンアーキテクチャのWEBフレームワークを作ろう」のまとめ（togetter） 各種リポジトリと概要 cfg https://github.com/nrslib/cfg クラスファイルを生成するライブラリです。 クラスファイルをパースする機能も少し追加されています。 clarc-php-core https://github.com/nrslib/clarc-php-core クリーンアーキテクチャの構成例に従って、必要になるオブジェクトを生成する処理で
![[PHP Conference 2019]思想と理想の果てに――クリーンアーキテクチャのWEBフレームワークを作ろう](https://cdn-ak-scissors.b.st-hatena.com/image/square/64f6ffd45c6f35a6a8c726c1a586f06ca884ef0d/height=288;version=1;width=512/https%3A%2F%2Fnrslib.com%2Fwp-content%2Fuploads%2F2019%2F12%2Fphpcon-2019-proposal-577x410.png)
CQSとCQRSの違いはメソッドの分離かモデルの分離かという観点 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? この記事について 先日 DDD-Community-Jp の DDD Talk MeetUp #2 というイベントでトーク枠にて参加させて頂き Flyweight DDD というアーキテクチャスタイルの提案とする一つのスライドを発表させて頂きました。 https://speakerdeck.com/hirodragon112/ddddao-ru-nita-miqie-renaifang-hezeng-ru-2ceng-plus-cqs-akitekutiya-flyweight-ddd ただ、本稿はこのスライドの「内容」とは全く関係あり
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
独立したコアレイヤパターンの適用 - fortee 編 - / fortee-meets-independent-core-layer-pattern
私がドメイン駆動設計をやる理由