Atomic Designの練習〜画面分割〜

Atomic Designの練習〜画面分割〜:

Atomic Designという手法を知って、調べて、実務でも使えるんじゃないかと思った矢先に、仕事でフロントエンドを触る機会がなくなってしまいました。しかし、せっかく知ったので、個人的にvueを使ってAtomic Designの練習をしてみようと思います。

練習台として使うのは、vuexのexampleであるToDoリストです。
https://github.com/vuejs/vuex/tree/dev/examples/todomvc

今回はこれをAtomic Designの手法にしたがって、画面上で各パーツに分けていきます。

ToDoリスト

こちらがToDoリストの画面です。

Atomic Designのコンポーネント粒度

分割をする前に、簡単にAtomic Designにおけるコンポーネント粒度をおさらいします。

Atoms

Atomic Designのコンポーネント粒度における最小粒度。機能的にそれ以上分割できない。

またこれ単体ではその機能の意味はわからない。

（例えばボタン。押すという機能は持つが、その結果何が起こるかはわからない）

Molecules

複数のAtomsによって構成される。機能の意味がわかる。

（例えばテキストインプットと送信ボタンを組み合わせることによって、入力された値を送信ボタンをクリックすることでどこかに送るという意味を持つ）

Organisms

複数のAtoms、Molecules、Organismsによって構成される。独立したコンテンツとして成立する。

Templates

Atoms、Molecules、Organismsを配置してページの構造を表す。

Pages

Templatesにコンテンツ（実際の文章や画像）を流し入れたもの。実際にユーザが見る画面。

ToDoリスト画面を分割する

では実際に画面を分割していきます。

まずはTemplates。これはページの構造そのものなので、以下になります。

次にOrganismsです。

ToDoリスト自身はそれ自体で独立したコンテンツとして成立するのでOrganismsになります。（他の機能がなくてもこれだけでToDoリストとして成り立つ）

また、リストの一つ一つもそれだけで成り立つためOrganismsにしました。（他のリストの内容に依存しているようならOrganismsにはならないかもしれないが、ToDoはそれぞれ独立している）

次はMoleculesです。

All、Active、Completedそれぞれをクリックすることで、それぞれの状態のToDoが表示されます。

いわゆるフィルタ機能を提供しているので、Moleculesとして括っています。

最後にAtomsです。

最小粒度のコンポーネントのため、このようになります。それぞれが、もうそれ以上分割できない単位のパーツです。

というわけで、ひとまず画面をAtomic Designでの各層に分けました。

次回は実際にこれらを実装していきたいと思います。