「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コンポーネント設計が可能になります。

私用
ページタイトル（リンクアイコン）（リンクアイコン）

ページタイトルとリンクアイコンを合わせたものががモレキュール、
リンクアイコンをアトムとしてたよ