「Atoms（アトム）」という用語は、コンポーネント設計の分野、特に**Atomic Design（アトミックデザイン）**という考え方に関連しています。アトミックデザインは、デザインシステムを構築するための方法論で、UIを「小さな部品」に分解し、段階的に組み合わせていくアプローチです。
アトミックデザインとは？
アトミックデザインは、元々はウェブデザインに使われる手法ですが、フロントエンド開発でもコンポーネント設計に役立つ考え方です。アトミックデザインは、5つのレベルで構成されています。それぞれがどのような役割を果たすかを見ていきましょう。
1. Atoms（アトム）
- 最小単位であり、再利用可能なUIの部品です。
- ボタン、入力フィールド、ラベル、アイコンなど、単体で意味を持つ最も基本的な要素です。
例：
- ボタン
<button> - テキスト入力フィールド
<input> - アイコン
<i class="icon-home"></i> - タイトル
<h1>
アトムは、これ以上細かく分解できない部品で、単体で動作することは少なく、後で他の部品と組み合わせて使用されます。
2. Molecules（モレキュール）
- アトムを組み合わせて作った小さな機能単位です。
- 例えば、ラベルと入力フィールド、ボタンを組み合わせてフォームの一部を作るようなものです。
例：
- 入力フィールド + ラベル + ボタン → 検索フォーム
- アイコン + テキスト → ナビゲーションリンク
モレキュールは、アトムの組み合わせで少し機能的な意味を持ち始めます。
3. Organisms（オーガニズム）
- モレキュールを組み合わせて作るより複雑な構造です。
- たとえば、ナビゲーションバーやカードなどの複数の部品を組み合わせて1つの大きな部品にします。
例：
- ヘッダー（ロゴ、ナビゲーションリンク、検索フォームなど）
- 商品カード（画像、タイトル、価格、ボタンなど）
オーガニズムは、アプリケーションの機能的な部分を構成し、複数のモレキュールが組み合わさって、より複雑な機能を持つUIが作られます。
4. Templates（テンプレート）
- オーガニズムをレイアウトに配置したものです。
- これはページの大まかな構造を定義しますが、まだ具体的なデータは入っていません。
例：
- ヘッダー、メインコンテンツ、フッターが配置されたページのレイアウト。
テンプレートは、実際のコンテンツが入る前にページの骨組みを作る段階です。
5. Pages（ページ）
- テンプレートに実際のデータを挿入して、最終的なページを完成させます。
- これでユーザーが実際に見ることができる、完成形のUIになります。
例：
- 実際のユーザーの名前や商品情報が入った商品ページ。
ページは、テンプレートの設計が完了した後に、最終的なデータを反映させることで、ユーザーが直接触れる部分になります。
アトミックデザインのメリット
- 再利用性: アトムやモレキュールなどの小さな部品を再利用することで、効率的なUI設計が可能になります。
- 一貫性: UI部品が細かく分かれているため、デザインの一貫性を保ちやすくなります。
- スケーラビリティ: 新しい機能やページを追加する際にも、既存の部品を組み合わせてスムーズに実装できます。
- メンテナンス性: 小さな部品単位でコードを管理することで、修正や更新が容易になります。
アトムの実際のコード例
例えば、Buttonコンポーネントはアトムの一例です。
<!-- Button.vue -->
<template>
<button :class="buttonClass" @click="handleClick">{{ label }}</button>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue";
@Component
export default class Button extends Vue {
@Prop({ type: String, default: "クリック" }) label!: string;
@Prop({ type: String, default: "btn-primary" }) buttonClass!: string;
handleClick() {
this.$emit("click");
}
}
</script>
<style scoped>
.btn-primary {
background-color: blue;
color: white;
}
</style>
このボタンは、アトムとして最小の部品です。このボタンコンポーネントを他のコンポーネントに組み合わせていくことができます。
まとめ
アトミックデザインは、UIを段階的に細かく分けていくアプローチです。アトム（最小単位）から始めて、モレキュール、オーガニズム、テンプレート、ページへと組み合わせていきます。この方法を使うことで、効率的でメンテナンスしやすいUIコンポーネント設計が可能になります。
私用
ページタイトル（リンクアイコン）（リンクアイコン）
ページタイトルとリンクアイコンを合わせたものががモレキュール、
リンクアイコンをアトムとしてたよ