More than 1 year has passed since last update.

Atomic Designについて勉強してみた⑤ (Pages, Templates)

Last updated at 2022-09-30Posted at 2022-09-30

今回は、Atomic Designの中でも一番大きい粒度であるPages・Templatesについて学んだことを書いていきたいと思います。

最終的にレイアウトデザインを確認するためのコンポーネント。
Apiを叩いたりデータを流し込んだりせずに、空のまま定義する
Templatesがあることで、データとデザインの分離が可能になるので、テスト等が容易になる。

ユーザーの目に触れる部分、実際にApiを叩いたりルーティングを行なってデータの流し込みを行う。
Templatesを埋め込む大枠として定義する。
自分たちのプロダクトでは、ここでAxiosでApiを叩いてサーバサイドからデータを取得し、Templates以下に流し込みを行っていました。

まとめると、PagesとTemplatesはデザインとデータ(実際のコンテンツ)の棲み分けを行うために存在しているということになります。

ちなみに急に科学用語でなくなる理由ですが、PagesとTemplatesに関しては開発者以外と会話する際に使用する部分と定義しているからだそうです。
科学用語と使い分けることでそこの棲み分けも明確にしています。

参考文献