ペペロミア開発ブログ

React Nativeで開発しているアプリ「ペペロミア」の技術系記事を投稿してます

開発者視点で一年間Atomic Designと付き合ってみた結果

シェアフル Advent Calendar 2018 3日目の記事です。

ここ一年くらい複数のプロジェクトでAtomic Designを取り入れてやっていたので、その辺の話を開発者視点で書いていこうと思います。

Atomic Designとは

bradfrost.com

解説については↑のサイトを参照

コンポーネントの種類

Atomic Designでは以下の種類のコンポーネントに分けて実装

  • Atoms
  • Molecules
  • Organisms
  • Templates
  • Pages

個人開発プロジェクトで採用しているので実装例を元に各種類について解説します

Atoms

最小単位のパーツコンポーネント 「テキスト」、「画像」、「テキスト入力」、「チェックボックス」、「セレクトボックス」等々が該当します

f:id:wheatandcat:20181203012436p:plain:w400

Molecules

Atomsを2つ以上組み合わせたコンポーネント

f:id:wheatandcat:20181203013444p:plain:w300

f:id:wheatandcat:20181203013459p:plain:w300

f:id:wheatandcat:20181203013516p:plain:w300

Organisms

MoleculeとAtomsを組み合わせて1機能として自己完結しているコンポーネント

f:id:wheatandcat:20181203013838p:plain:w300

MoleculeとOrganismsの違いについては下記の記事を読むと分かりやすいです。 frasco.io

Templates

Organisms、Molecule、Atomsを組み合わた1画面のコンポーネント

f:id:wheatandcat:20181203015600p:plain:w300

Pages

Templatesに実際の情報を組み込んだ最終的なコンポーネント

f:id:wheatandcat:20181203015106p:plain:w300

開発での実装

採用しているプロジェクト情報

github.com

  • react-native (expo)で実装

フォルダ構造

  • src/components/ 以下に、「atoms」〜「 pages」のフォルダを作成し該当するコンポーネントを作成している

f:id:wheatandcat:20181203020438p:plain:w700

Shiori/ShioriNative/src/components at master · wheatandcat/Shiori · GitHub

storybookとの連携

storybookはコンポーネント単位の表示を管理ツールできるツールです storybookの詳しい情報は下記参照

github.com

Atomic Designに合わせてstorybookファイルを作成しコンポーネントを管理しています

f:id:wheatandcat:20181203021936p:plain:w700

Atomic Designを採用してみての話

明確なメリット

問題点

理解力の差によって配置されるべきコンポーネントに差異が起きる

  • 上記にもリンクを貼っているがMoleculeOrganismsは特に誤った配置がされやすいので注意が必要

十分に注意してコード修正、レビューを行わないと負債になりやすい

  • リファクタリングの際にコンポーネントの役割が「Atoms→Molecule」や「Molecule→Organisms」に変更されたが、フォルダの移動がされずに放置され負債になるケースが起きやすい
  • 上記の負債はあくまで「Atomic Design」での誤りなので、もちろんテストコードでは分からず、またコードレビューのみでは分かりづらい。なので定期的なstorybookでのチェック and リファクタリングコストをかける必要がある

Atomsにするか個々のコンポーネントに書いてしまうか悩む

  • 複数箇所で使用されるコンポーネントならAtomsで定義する価値があるけど、将来的にどの程度使われるか分からないコンポーネントをAtomsでわざわざ定義する必要があるのか悩む

まとめ

  • 一年間かけて徐々に理解力が深まっている感じはする
  • 問題点はあるが、それでも何も基準無しに作るのよりは大きくマシだと言えると思う
  • コードレビューだけだと間違いを見逃すからstorybookは必須だと思う(もちろん、理想は自動テストだけど。。。)

実際のコンポーネントを確認したい人は

  • 以下でstorybookのアプリを公開しているのでexpoからご確認ください 🙇

expo.io

もろもろの参考URL