初めてのAtomic Design
はじめに
初めまして！
現在、株式会社おてつたびでフルスタックエンジニアをしている岩崎と申します。
現状おてつたびでは、ページによってRailsのslimテンプレートとReactが混在している状態です。そのため可読性が悪く、様々な実装対応が行いづらくなっています。そこでページ毎に段階的にSPA対応を行なっているのですが、元のページデザインはあるとは言いつつほぼ一からページを作る状態になっています。そこで改めてコンポーネント設計にAtomic Designを取り入れてリファクタリングに取り込もうと思いました。そこで感じた事等を記載していきます。
それぞれの役割
今までロジックを責務とするContainer Componentとそれ以外のビュー(view)を責務とするPresentational Componentには分けていたものの、Presentational Component内のディレクトリ設計はあまり出来ておらず漠然と役割が分かれてないcomponentが置かれていました。
そこで、Presentational Component内では10ファイル以上の場合Atomic Designを使ったディレクトリ設計に行うようにしました(10ファイル以下だとAtomic Designを使ったメリットが薄れる事になっていくため)。
下記のようにcomponentsフォルダの中でPages, atoms, molecules, organisms, templatesのように分かれるのですが、具体的にはどう分ければいいんだろうという思いがありました。
viewに纏わるcomponents
┣ ◯◯◯◯◯◯ (ページ毎のフォルダ 例:Top, About等)
┣ templates
┣ organisms
┣ molecules
┣ atoms
┣ index.tsx （Container Component & atomic designでいうpagesの役割）
pages - templates - organisms - molecules - atoms
pagesから右から順番に構成されていくと思うのですが、Pagesは分かり易くロジック、データ、外部通信、templateの呼び出しを行い、templatesはページの土台、ページ全体のレイアウトを構成する責務だと考えています。自分は真ん中の「organisms - molecules」の役割が難しいなと感じていました。逆にatomsは最小単位のためButtonやinput要素など基本的なHTML要素になるので想定しやすいなと感じました。
organismsとmolecules
やはりorganismsとのmoleculesの関係性がイマイチ分かりづらいという記事が多々あり棲み分けとして
organisms
いくつかの Atoms、Molecules、Organisms が組み合わさって構成される。
複合的にいろんな機能がある状態。
例: ヘッダー
molecules
いくつかの Atoms が組み合わさって構成される。
独立したシンプルな機能がある状態。
例: 検索フォーム
なかなかに明確に言葉で明確に表すのは難しく場面によって少し定義が変わりそうではあるのですが、具体的な機能イメージとしてはヘッダー(organisms)の中に検索フォーム(molecules)があると考えるとしっくりくるのかなと感じました。
これから
上記のような形で探り探りで始めているんですが、棲み分けは決めの問題だなと感じました。また、viewのコンポーネントにおいて「pages - templates - organisms - molecules - atoms」だけが正解ではなくなってくるんだろうなと記事等で感じました。自分が悩んでたorganisms - moleculesの関係も更に分離すれば良い形が見えてくるかもしれないし、atomsを共通で使うなら中間層が肥大化していくと思うのですあが、それもorganisms - moleculesの関係を見直す事で防げるのかもしれません。また現在はページ毎にComponent設計を考えがちでComponent共通化もする？しない？も考えて行かなければなりません。もし共通化出来て行けたら、デザインとの親和性も高くなり夢が膨らんでいくと思います。これからどんどんリファクタリングを進めていくので気付きがあればどんどん追加していこうと思います。
終わりに
株式会社おてつたびでは、一緒に働く仲間を募集しています！
自分の経験を活かして様々な事にチャレンジすることが出来る土壌があると思います。
WebとiOSエンジニアを積極募集しております。
ご応募お待ちしております。
Discussion